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. |
csilv
2011/12/02 01:57:02
nit: move @return above @private
Dan Beam
2011/12/05 18:05:10
Done.
|
*/ |
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; |
}, |
/** |