[NTP4] Auto-deletion of empty apps panes.

chrome/browser/resources/shared/js/cr/ui/card_slider.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Card slider implementation. Allows you to create interactions
  * that have items that can slide left to right to reveal additional items.
  * Works by adding the necessary event handlers to a specific DOM structure
  * including a frame, container and cards.
  * - The frame defines the boundary of one item. Each card will be expanded to
@@ skipping 284 matching lines @@
       this.mouseWheelScrollAmount_ = 0;
       this.mouseWheelCardSelected_ = false;
     },
 
     /**
      * Selects a new card, ensuring that it is a valid index, transforming the
      * view and possibly calling the change card callback.
      * @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') {

[Evan Stade, 2011/12/02 00:53:24]

better to just assert this if you need to check it at all, but in general we
don't typecheck params

[Dan Beam, 2011/12/02 01:25:11]

It's optional, though.  So, we should only be trying to call it if they passed a
function as the third argument, so how else would you check if the third
argument is callable?

[Evan Stade, 2011/12/02 02:39:49]

oh ho ho. What's wrong with if (opt_callback)? The problem with typeof is that
it will hide bugs if people start passing in some other random data type.

[Dan Beam, 2011/12/05 18:05:10]

Done.

  if (typeof opt_callback == 'function')
    // do something with it
  else
    assert(typeof opt_callback == 'undefined');

Does this work for you?

P.S. This will be somewhere else, I ripped all this logic out of here and moved
them to an onWebkitTransitionEnd_ handler that fires a CARD_CHANGE_ENDED event.

[Dan Beam, 2011/12/08 00:21:06]

Actually, I ended up moving this to an array of callbacks to be done on the next
CARD_CHANGE_ENDED event (and add this to CardSlider for this case and the other
you mentioned [but I can't remember]).

+        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);

[Evan Stade, 2011/12/02 00:53:24]

just attach once, don't add and remove every time

[Dan Beam, 2011/12/02 01:25:11]

Having generally ignored handlers adds overall memory bloat to the page, no? 
This handler is only necessary for this one time.

I guess you could push the callback into an array and do it on the next time
that event is called, but if you ever miss an event you'd call 2 callbacks at
once (but I guess you already would with this way as well).

[Evan Stade, 2011/12/02 02:39:49]

memory/cpu tradeoff, who wins? Code elegance. However I think this comment came
from before we had our little chat so just ignore it.

[Dan Beam, 2011/12/05 18:07:13]

Done. (gutted this to make its insides prettier)

+        } else {
+          opt_callback();
+        }
+      }
 
       if (isChangingCard) {
         var event = document.createEvent('Event');
         event.initEvent(CardSlider.EventType.CARD_CHANGED, true, true);
         event.cardSlider = this;
         this.container_.dispatchEvent(event);
 
         // We also dispatch an event on the cards themselves.
         if (previousCard) {
           cr.dispatchSimpleEvent(previousCard, 'carddeselected',
@@ skipping 14 matching lines @@
       assert(i != -1);
       this.selectCard(i, opt_animate);
     },
 
     /**
      * Centers the view on the card denoted by this.currentCard. Can either
      * animate to that card or snap to it.
      * @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.
       var transition = '';
       if (opt_animate) {
         transition = '-webkit-transform ' + CardSlider.TRANSITION_TIME_ +
                      'ms ease-in-out';
       }
       this.container_.style.WebkitTransition = transition;
       this.translateTo_(this.currentLeft_);
+
+      return true;
     },
 
     /**
      * Moves the view to the specified position.
      * @param {number} x Horizontal position to move to.
      * @private
      */
     translateTo_: function(x) {
       // We use a webkitTransform to slide because this is GPU accelerated on
       // Chrome and iOS.  Once Chrome does GPU acceleration on the position
@@ skipping 74 matching lines @@
 
       // Ensure we're at a card bounary
       this.transformToCurrentCard_(true);
     },
   };
 
   return {
     CardSlider: CardSlider
   };
 });