[NTP] Allow reordering of apps via drag and drop.

chrome/browser/resources/ntp/apps.js

 // Copyright (c) 2010 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.
 
 var MAX_APPS_PER_ROW = [];
 MAX_APPS_PER_ROW[LayoutMode.SMALL] = 4;
 MAX_APPS_PER_ROW[LayoutMode.NORMAL] = 6;
 
 // The URL prefix used in the app link 'ping' attributes.
 var PING_APP_LAUNCH_PREFIX = 'record-app-launch';
@@ skipping 27 matching lines @@
       $('apps-create-shortcut-command-separator').style.display =
       (data.disableCreateAppShortcut ? 'none' : '');
 
   appsMiniview.textContent = '';
   appsSectionContent.textContent = '';
 
   data.apps.sort(function(a,b) {
     return a.app_launch_index - b.app_launch_index;
   });
 
+  // Determines if the web store link should be detached and place in the
+  // top right of the screen.
+  apps.detachWebstoreEntry =
+      !apps.showPromo && data.apps.length >= MAX_APPS_PER_ROW[layoutMode];
+
+  apps.data = data.apps;
+  if (!apps.detachWebstoreEntry)
+    apps.data.push('web-store-entry');
+
   clearClosedMenu(apps.menu);
   data.apps.forEach(function(app) {
     appsSectionContent.appendChild(apps.createElement(app));
   });
 
   webStoreEntry = apps.createWebStoreElement();
   webStoreEntry.querySelector('a').setAttribute('ping', appsPromoPing);
   appsSectionContent.appendChild(webStoreEntry);
 
   data.apps.slice(0, MAX_MINIVIEW_ITEMS).forEach(function(app) {
@@ skipping 19 matching lines @@
   if (apps.showPromo)
     document.documentElement.classList.add('apps-promo-visible');
   else
     document.documentElement.classList.remove('apps-promo-visible');
 
   var appsPromoLink = $('apps-promo-link');
   if (appsPromoLink)
     appsPromoLink.setAttribute('ping', appsPromoPing);
   maybeDoneLoading();
 
+  // Disable the animations when the app launcher is being (re)initailized.
+  apps.layout({disableAnimations:true});
+
+  if (apps.detachWebstoreEntry)
+    webStoreEntry.classList.add('loner');
+  else
+    webStoreEntry.classList.remove('loner');
+
   if (isDoneLoading()) {
-    if (!apps.showPromo && data.apps.length >= MAX_APPS_PER_ROW[layoutMode])
-      webStoreEntry.classList.add('loner');
-    else
-      webStoreEntry.classList.remove('loner');
-
     updateMiniviewClipping(appsMiniview);
     layoutSections();
   }
 }
 
 function appsPrefChangeCallback(data) {
   // Currently the only pref that is watched is the launch type.
   data.apps.forEach(function(app) {
     var appLink = document.querySelector('.app a[app-id=' + app['id'] + ']');
     if (appLink)
@@ skipping 151 matching lines @@
       case 'apps-options-command':
         e.canExecute = currentApp && currentApp['options_url'];
         break;
       case 'apps-launch-command':
       case 'apps-uninstall-command':
         e.canExecute = true;
         break;
     }
   });
 
+  // Moves the element at position |from| in array |arr| to position |to|.
+  function arrayMove(arr, from, to) {
+    var element = arr.splice(from, 1);
+    arr.splice(to, 0, element[0]);
+  }
+
+  // Converts a css pixel count ('53px') to the corresponding number (53).
+  function cssPxToNum(px) {

[Aaron Boodman, 2011/01/24 01:29:33]

You can just use parseInt() instead of defining this function.

+    return Number(px.substring(0, px.length-2));
+  }
+
   return {
     loaded: false,
 
     menu: $('apps-menu'),
 
     showPromo: false,
 
+    detachWebstoreEntry: false,
+
+    // The list of app ids, in order, of each app in the launcher.
+    data_: null,
+    get data() { return this.data_; },
+    set data(data) {
+      this.data_ = data.map(function(app) {
+        return app.id;
+      });
+      this.invalidate_();
+    },
+
+    dirty_: true,
+    invalidate_: function() {
+      this.dirty_ = true;
+    },
+
+    visible_: true,
+    get visible() {
+      return this.visible_;
+    },
+    set visible(visible) {
+      this.visible_ = visible;
+      this.invalidate_();
+    },
+
+    // DragAndDropDelegate
+
+    dragContainer: $('apps-content'),
+    transitionsDuration: 200,
+
+    get dragItem() { return this.dragItem_; },
+    set dragItem(dragItem) {
+      if (this.dragItem_ != dragItem) {
+        this.dragItem_ = dragItem;
+        this.invalidate_();
+      }
+    },
+
+    // The dimensions of each item in the app launcher. This calculates the
+    // dimensions dynamically, so it should be called after creating the DOM.
+    dimensions_: null,
+    get dimensions() {
+      if (!this.dimensions_) {

[Aaron Boodman, 2011/01/24 01:29:33]

Invert check and return early.

+        var app = this.dragContainer.firstChild;
+
+        var width = app.offsetWidth;
+        var height = app.offsetHeight;
+
+        // If the apps haven't properly loaded yet, don't cache the result.
+        if (app.offsetWidth == 0 || app.offsetHeight == 0)
+          return {width:0, height:0};
+
+        var style = getComputedStyle(app);
+
+        var marginWidth =
+            cssPxToNum(style.marginLeft) + cssPxToNum(style.marginRight);
+        var marginHeight =
+            cssPxToNum(style.marginTop) + cssPxToNum(style.marginBottom);
+
+        var borderWidth = cssPxToNum(style.borderLeftWidth) +
+                          cssPxToNum(style.borderRightWidth);
+        var borderHeight = cssPxToNum(style.borderTopWidth) +
+                           cssPxToNum(style.borderBottomWidth);
+
+        this.dimensions_ = {
+          width: width + marginWidth + borderWidth,
+          height: height + marginHeight + borderHeight
+        };
+      }
+      return this.dimensions_;
+    },
+
+    // Gets the item under the mouse event |e|. Returns null if there is no
+    // item or if the item is not draggable.
+    getItem: function(e) {
+      var item = findAncestorByClass(e.target, 'app');
+
+      // You can't drag the web store launcher.
+      if (item.classList.contains('web-store-entry'))
+        return null;
+
+      return item;
+    },
+
+    // Returns true if |coordinates| point to a valid drop location. The
+    // coordinates are relative to the drag container and the object should
+    // have the 'x' and 'y' properties set.
+    canDropOn: function(coordinates) {
+      var cols = MAX_APPS_PER_ROW[layoutMode];
+      var rows = Math.ceil(this.data.length / cols);
+
+      var bottom = rows * this.dimensions.height;
+      var right = cols * this.dimensions.width;
+
+      if (coordinates.x > right || coordinates.x < 0 ||
+          coordinates.y > bottom || coordinates.y < 0)
+        return false;
+
+      var position = this.getIndexAt_(coordinates);
+      var appCount = this.data.length;
+
+      if (!this.detachWebstoreEntry)
+        appCount--;
+
+      return position >= 0 && position < appCount;
+    },
+
+    setDragPlaceholder: function(coordinates) {
+      var position = this.getIndexAt_(coordinates);
+      var appId = this.dragItem.querySelector('a').getAttribute('app-id');
+      var current = this.data.indexOf(appId);
+
+      if (current == position || current < 0)
+        return;
+
+      arrayMove(this.data, current, position);
+      this.invalidate_();
+      this.layout();
+    },
+
+    getIndexAt_: function(coordinates) {
+      var x = coordinates.x;
+      var y = coordinates.y;
+
+      var w = this.dimensions.width;
+      var h = this.dimensions.height;
+
+      var availableWidth = this.dragContainer.offsetWidth;
+
+      var row = Math.floor(y / h);
+      var col = Math.floor(x / w);
+      var index = Math.floor(availableWidth / w) * row + col;
+
+      return index;
+    },
+
+    saveDrag: function() {
+      this.invalidate_();
+      this.layout();
+
+      var appIds = this.data.filter(function(id) {
+          return id != 'web-store-entry';
+      });
+
+      // Wait until the transitions are complete before notifying the browser.
+      // Otherwise, the apps will be re-rendered while still transitioning.
+      setTimeout(function() {
+        chrome.send('reorderApps', appIds);
+      }, this.transitionsDuration + 10);
+    },
+
+    layout: function(options) {
+      options = options || {};
+      if (!this.dirty_ && options.force != true)
+        return;
+
+      try {
+        var container = this.dragContainer;
+        if (options.disableAnimations)
+          container.setAttribute('launcher-animations', false);
+        var d0 = Date.now();
+        this.layoutImpl_();
+        this.dirty_ = false;
+        logEvent('apps.layout: ' + (Date.now() - d0));
+
+      } finally {
+        if (options.disableAnimations) {
+          // We need to re-enable animations asynchronously, so that the
+          // animations are still disabled for this layout update.
+          setTimeout(function() {
+            container.setAttribute('launcher-animations', true);
+          }, 0);
+        }
+      }
+    },
+
+    layoutImpl_: function() {
+      var apps = this.data;
+      var rects = this.getLayoutRects_(apps.length);
+      var appsContent = this.dragContainer;
+
+      if (!this.visible)
+        return;
+
+      for (var i = 0; i < apps.length; i++) {
+        var app = appsContent.querySelector('[app-id='+apps[i]+']').parentNode;
+
+        // If the node is being dragged, don't try to place it in the grid.
+        if (app == this.dragItem)
+          continue;
+
+        app.style.left = rects[i].left + 'px';
+        app.style.top = rects[i].top + 'px';
+      }
+
+      // We need to set the container's height manually because the apps use
+      // absolute positioning.
+      var rows = Math.ceil(apps.length / MAX_APPS_PER_ROW[layoutMode]);
+      appsContent.style.height = (rows * this.dimensions.height) + 'px';
+    },
+
+    getLayoutRects_: function(appCount) {
+      var availableWidth = this.dragContainer.offsetWidth;
+      var rtl = isRtl();
+      var rects = [];
+      var w = this.dimensions.width;
+      var h = this.dimensions.height;
+
+      for (var i = 0; i < appCount; i++) {
+        var row = Math.floor((w * i) / availableWidth);
+        var top = row * h;
+        var left = (w * i) % availableWidth;
+
+        // Reflect the X axis if an RTL language is active.
+        if (rtl)
+          left = availableWidth - left - w;
+        rects[i] = {left: left, top: top, row: row};
+      }
+      return rects;
+    },
+
     createElement: function(app) {
       var div = createElement(app);
       var a = div.firstChild;
 
       a.onclick = handleClick;
       a.setAttribute('ping', PING_APP_LAUNCH_PREFIX + '+' + this.showPromo);
       a.style.backgroundImage = url(app['icon_big']);
       if (hashParams['app-id'] == app['id']) {
         div.setAttribute('new', 'new');
         // Delay changing the attribute a bit to let the page settle down a bit.
@@ skipping 56 matching lines @@
 
       return a;
     },
 
     createWebStoreElement: function() {
       var elm = createElement({
         'id': 'web-store-entry',
         'name': localStrings.getString('web_store_title'),
         'launch_url': localStrings.getString('web_store_url')
       });
-      elm.setAttribute('app-id', 'web-store-entry');
+      elm.classList.add('web-store-entry');
       return elm;
     },
 
     createWebStoreMiniElement: function() {
       var span = document.createElement('span');
       span.appendChild(this.createWebStoreClosedMenuElement());
       return span;
     },
 
     createWebStoreClosedMenuElement: function() {
       var a = document.createElement('a');
       a.textContent = localStrings.getString('web_store_title');
       a.href = localStrings.getString('web_store_url');
       a.style.backgroundImage = url('chrome://theme/IDR_PRODUCT_LOGO_16');
       a.className = 'item';
       return a;
     }
   };
 })();
+
+// Enable drag and drop reordering of the app launcher.
+var appDragAndDrop = new DragAndDropController(apps);