[NTP4] Make TilePage and CardSlider evented to simplify code and fix page switcher bug

chrome/browser/resources/ntp4/apps_page.js

 // Copyright (c) 2012 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.
 
 cr.define('ntp4', function() {
   'use strict';
 
   var localStrings = new LocalStrings;
 
   var APP_LAUNCH = {
@@ skipping 259 matching lines @@
      * @param {string} color The css-parsable value for the color.
      */
     set stripeColor(color) {
       this.querySelector('.color-stripe').style.backgroundColor = color;
     },
 
     /**
      * Removes the app tile from the page. Should be called after the app has
      * been uninstalled.
      */
-    remove: function() {
+    remove: function(opt_animate) {
       // Unset the ID immediately, because the app is already gone. But leave
       // the tile on the page as it animates out.
       this.id = '';
-      this.tile.doRemove();
+      this.tile.doRemove(opt_animate);
     },
 
     /**
      * Set the URL of the icon from |appData_|. This won't actually show the
      * icon until loadIcon() is called (for performance reasons; we don't want
      * to load icons until we have to).
      */
     setIcon: function() {
       var src = this.useSmallIcon_ ? this.appData_.icon_small :
                                      this.appData_.icon_big;
@@ skipping 348 matching lines @@
     __proto__: TilePage.prototype,
 
     initialize: function() {
       this.classList.add('apps-page');
 
       this.addEventListener('cardselected', this.onCardSelected_);
       // Add event listeners for two events, so we can temporarily suppress
       // the app notification bubbles when the app card slides in and out of
       // view.
       this.addEventListener('carddeselected', this.onCardDeselected_);
-      this.addEventListener('cardSelectionCompleted',
-                            this.onCardSelectionCompleted_);
+      this.addEventListener('cardSlider:card_change_ended',
+                            this.onCardChangeEnded_);
+
+      this.addEventListener('tilePage:tile_added', this.onTileAdded_);
 
       this.content_.addEventListener('scroll', this.onScroll_.bind(this));
     },
 
     /**
      * Creates an app DOM element and places it at the last position on the
      * page.
      * @param {Object} appData The data object that describes the app.
      * @param {boolean=} animate If true, the app tile plays an animation.
      */
     appendApp: function(appData, animate) {
       if (animate) {
         // Select the page and scroll all the way down so the animation is
         // visible.
         ntp4.getCardSlider().selectCardByValue(this);
         this.content_.scrollTop = this.content_.scrollHeight;
       }
-      var app = new App(appData);
-      if (this.classList.contains('selected-card'))
-        app.loadIcon();
-      this.appendTile(app, animate);
+      this.appendTile(new App(appData), animate);
     },
 
     /**
      * Handler for 'cardselected' event, fired when |this| is selected. The
      * first time this is called, we load all the app icons.
      * @private
      */
     onCardSelected_: function(e) {
       var apps = this.querySelectorAll('.app.icon-loading');
       for (var i = 0; i < apps.length; i++) {
         apps[i].loadIcon();
         if (apps[i].currentBubbleShowing_)
           apps[i].currentBubbleShowing_.suppressed = false;
       }
     },
 
     /**
-     * Handler for the 'cardSelectionCompleted' event, fired when the app card
-     * is done transitioning into view (and all the apps have repositioned).
+     * Handler for tile additions to this page.
+     * @param {Event} e The tilePage:tile_added event.
+     */
+    onTileAdded_: function(e) {
+      assert(e.currentTarget == this);
+      assert(e.addedTile.firstChild instanceof App);
+      if (this.classList.contains('selected-card'))
+        e.addedTile.firstChild.loadIcon();
+    },
+
+    /**
+     * Handler for the when this.cardSlider ends change its card. If animated,
+     * this happens when the -webkit-transition is done, otherwise happens
+     * immediately (but after cardSlider:card_changed).
      * @private
      */
-    onCardSelectionCompleted_: function(e) {
+    onCardChangeEnded_: function(e) {
       for (var i = 0; i < this.tileElements_.length; i++) {
         var app = this.tileElements_[i].firstChild;
         assert(app instanceof App);
         if (app.currentBubbleShowing_)
           app.currentBubbleShowing_.suppressed = false;
       }
     },
 
     /**
      * Handler for the 'carddeselected' event, fired when the user switches
@@ skipping 43 matching lines @@
           (e.dataTransfer && e.dataTransfer.types.indexOf('url') != -1);
     },
 
     /** @inheritDoc */
     addDragData: function(dataTransfer, index) {
       var sourceId = -1;
       var currentlyDraggingTile = ntp4.getCurrentlyDraggingTile();
       if (currentlyDraggingTile) {
         var tileContents = currentlyDraggingTile.firstChild;
         if (tileContents.classList.contains('app')) {
-          sourceId = currentlyDraggingTile.tilePage == this ?
-              DRAG_SOURCE.SAME_APPS_PANE : DRAG_SOURCE.OTHER_APPS_PANE;
-          this.tileGrid_.insertBefore(
-              currentlyDraggingTile,
-              this.tileElements_[index]);
+          var originalPage = currentlyDraggingTile.tilePage;
+          var samePageDrag = originalPage == this;
+          sourceId = samePageDrag ? DRAG_SOURCE.SAME_APPS_PANE :
+                                    DRAG_SOURCE.OTHER_APPS_PANE;
+          this.tileGrid_.insertBefore(currentlyDraggingTile,
+                                      this.tileElements_[index]);
           this.tileMoved(currentlyDraggingTile);
+          if (!samePageDrag) {
+            originalPage.fireRemovedEvent(currentlyDraggingTile, index, true);
+            this.fireAddedEvent(currentlyDraggingTile, index, true);
+          }
         } else if (currentlyDraggingTile.querySelector('.most-visited')) {
           this.generateAppForLink(tileContents.data);
           sourceId = DRAG_SOURCE.MOST_VISITED_PANE;
         }
       } else {
         this.addOutsideData_(dataTransfer);
         sourceId = DRAG_SOURCE.OUTSIDE_NTP;
       }
 
       assert(sourceId != -1);
@@ skipping 101 matching lines @@
     appNotificationChanged: appNotificationChanged,
     AppsPage: AppsPage,
     launchAppAfterEnable: launchAppAfterEnable,
   };
 });
 
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var appNotificationChanged = ntp4.appNotificationChanged;
 var launchAppAfterEnable = ntp4.launchAppAfterEnable;