| Index: chrome/browser/resources/shared/js/cr/ui/card_slider.js
|
| diff --git a/chrome/browser/resources/shared/js/cr/ui/card_slider.js b/chrome/browser/resources/shared/js/cr/ui/card_slider.js
|
| index 62aca5e384b5ba1b6d3b1292588aa1c49276da21..5dc904dee0458fab3f1dfd26f6e1491b233b2008 100644
|
| --- a/chrome/browser/resources/shared/js/cr/ui/card_slider.js
|
| +++ b/chrome/browser/resources/shared/js/cr/ui/card_slider.js
|
| @@ -302,22 +302,45 @@ cr.define('cr.ui', function() {
|
| * @param {number} newCardIndex Index of card to show.
|
| * @param {boolean=} opt_animate If true will animate transition from
|
| * current position to new position.
|
| + * @param {function=} opt_callback A callback to be executed when done
|
| + * selecting the new card.
|
| */
|
| - selectCard: function(newCardIndex, opt_animate) {
|
| + selectCard: function(newCardIndex, opt_animate, opt_callback) {
|
| var previousCard = this.currentCardValue;
|
|
|
| var isChangingCard =
|
| !this.cards_[newCardIndex].classList.contains('selected-card');
|
|
|
| if (isChangingCard) {
|
| - previousCard.classList.remove('selected-card');
|
| + if (previousCard)
|
| + previousCard.classList.remove('selected-card');
|
| // If we have a new card index and it is valid then update the left
|
| // position and current card index.
|
| this.currentCard_ = newCardIndex;
|
| this.currentCardValue.classList.add('selected-card');
|
| }
|
|
|
| - this.transformToCurrentCard_(opt_animate);
|
| + var willTransitionHappen = this.transformToCurrentCard_(opt_animate);
|
| +
|
| + // If changing, animated, and a callback, do when done animating.
|
| + if (typeof opt_callback == 'function') {
|
| + if (isChangingCard && opt_animate && willTransitionHappen) {
|
| + var endHandler = function(e) {
|
| + // Ignore irrelevant transitions that might bubble up.
|
| + if (e.target !== this.container_ ||
|
| + e.propertyName != '-webkit-transform') {
|
| + return;
|
| + }
|
| + // Otherwise call the callback and unattach.
|
| + opt_callback();
|
| + this.container_.removeEventListener('webkitTransitionEnd',
|
| + endHandler);
|
| + }.bind(this);
|
| + this.container_.addEventListener('webkitTransitionEnd', endHandler);
|
| + } else {
|
| + opt_callback();
|
| + }
|
| + }
|
|
|
| if (isChangingCard) {
|
| var event = document.createEvent('Event');
|
| @@ -352,12 +375,19 @@ cr.define('cr.ui', function() {
|
| * @param {boolean=} opt_animate If true will animate transition from
|
| * current position to new position.
|
| * @private
|
| + * @return {boolean} Whether or not a transformation was necessary.
|
| */
|
| transformToCurrentCard_: function(opt_animate) {
|
| + var prevLeft = this.currentLeft_;
|
| this.currentLeft_ = -this.cardWidth_ *
|
| (isRTL() ? this.cards_.length - this.currentCard - 1 :
|
| this.currentCard);
|
|
|
| + // If there's no change, return something to let the caller no there won't
|
| + // be a transition occuring.
|
| + if (prevLeft == this.currentLeft_)
|
| + return false;
|
| +
|
| // Animate to the current card, which will either transition if the
|
| // current card is new, or reset the existing card if we didn't drag
|
| // enough to change cards.
|
| @@ -368,6 +398,8 @@ cr.define('cr.ui', function() {
|
| }
|
| this.container_.style.WebkitTransition = transition;
|
| this.translateTo_(this.currentLeft_);
|
| +
|
| + return true;
|
| },
|
|
|
| /**
|
|
|