Move sorting logic from table to list.

chrome/browser/resources/shared/js/cr/ui/list.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.
 
 // require: array_data_model.js
 // require: list_selection_model.js
 // require: list_selection_controller.js
 // require: list_item.js
 
 /**
@@ skipping 142 matching lines @@
         this.itemConstructor_ = func;
         this.cachedItems_ = {};
         this.redraw();
       }
     },
 
     dataModel_: null,
 
     /**
      * The data model driving the list.
-     * @type {ListDataModel}
+     * @type {ArrayDataModel}
      */
     set dataModel(dataModel) {
       if (this.dataModel_ != dataModel) {
-        if (!this.boundHandleDataModelSplice_) {
-          this.boundHandleDataModelSplice_ =
-              this.handleDataModelSplice_.bind(this);
+        if (!this.boundHandleDataModelPermuted_) {
+          this.boundHandleDataModelPermuted_ =
+              this.handleDataModelPermuted_.bind(this);
           this.boundHandleDataModelChange_ =
               this.handleDataModelChange_.bind(this);
-          this.boundHandleSorted_ =
-              this.handleSorted_.bind(this);
         }
 
         if (this.dataModel_) {
-          this.dataModel_.removeEventListener('splice',
-                                              this.boundHandleDataModelSplice_);
+          this.dataModel_.removeEventListener(
+              'permuted',
+              this.boundHandleDataModelPermuted_);
           this.dataModel_.removeEventListener('change',
                                               this.boundHandleDataModelChange_);
-          this.dataModel_.removeEventListener('sorted',
-                                             this.boundHandleSorted_);
         }
 
         this.dataModel_ = dataModel;
 
         this.cachedItems_ = {};
         this.selectionModel.clear();
         if (dataModel)
-          this.selectionModel.adjust(0, 0, dataModel.length);
+          this.selectionModel.adjustLength(dataModel.length);
 
         if (this.dataModel_) {
-          this.dataModel_.addEventListener('splice',
-                                           this.boundHandleDataModelSplice_);
+          this.dataModel_.addEventListener(
+              'permuted',
+              this.boundHandleDataModelPermuted_);
           this.dataModel_.addEventListener('change',
                                            this.boundHandleDataModelChange_);
-          this.dataModel_.addEventListener('sorted',
-                                           this.boundHandleSorted_);
         }
 
         this.redraw();
       }
     },
 
     get dataModel() {
       return this.dataModel_;
     },
 
@@ skipping 338 matching lines @@
         // the bottom of the list is not "sticky.") So, we set a timeout to
         // rescroll the list after this all gets sorted out. This is perhaps
         // not the most elegant solution, but no others seem obvious.
         var self = this;
         window.setTimeout(function() {
           self.scrollIndexIntoView(pe.newValue);
         });
       }
     },
 
-    handleDataModelSplice_: function(e) {
-      this.selectionModel.adjust(e.index, e.removed.length, e.added.length);
-      // Remove the cache of everything above index.
+    /**
+     * This handles data model 'permuted' event.
+     * this event is dispatched as a part of sort or splice.
+     * We need to
+     *  - adjust the cache.
+     *  - adjust selection.
+     *  - redraw.
+     *  - scroll the list to show selection.
+     *  It is important that the cache adjustment happens before selection model
+     *  adjustments.
+     * @param {Event} e The 'permuted' event.
+     */
+    handleDataModelPermuted_: function(e) {
+      var newCachedItems = {};
       for (var index in this.cachedItems_) {
-        if (index >= e.index)
+        if (e.permutation[index] != -1)
+          newCachedItems[e.permutation[index]] = this.cachedItems_[index];
+        else
           delete this.cachedItems_[index];
       }
-      this.redraw();
+      this.cachedItems_ = newCachedItems;
+
+      this.startBatchUpdates();
+
+      var sm = this.selectionModel;
+      sm.adjustLength(e.newLength);
+      sm.adjustToReordering(e.permutation);
+
+      this.endBatchUpdates();
+
+      if (sm.leadIndex != -1)
+        this.scrollIndexIntoView(sm.leadIndex);
     },
 
     handleDataModelChange_: function(e) {
       if (e.index >= this.firstIndex_ && e.index < this.lastIndex_) {
-        this.cachedItems_ = null;
+        if (this.cachedItems_[e.index])
+          delete this.cachedItems_[e.index];
         this.redraw();
       }
     },
 
     /**
-     * This handles data model 'sorted' event.
-     * After sorting we need to
-     *  - adjust selection.
-     *  - delete the cache.
-     *  - redraw all the items.
-     *  - scroll the list to show selection.
-     * @param {Event} e The 'sorted' event.
-     */
-    handleSorted_: function(e) {
-      var sm = this.selectionModel;
-      sm.adjustToReordering(e.sortPermutation);
-
-      this.cachedItems_ = null;
-      this.redraw();
-      if (sm.leadIndex != -1)
-        this.scrollIndexIntoView(sm.leadIndex);
-    },
-
-    /**
      * @param {number} index The index of the item.
      * @return {number} The top position of the item inside the list, not taking
      *     into account lead item. May vary in the case of multiple columns.
      */
     getItemTop: function(index) {
       return index * this.getItemHeight_();
     },
 
     /**
      * @param {number} index The index of the item.
@@ skipping 212 matching lines @@
      * Adds items to the list and {@code newCachedItems}.
      * @param {number} firstIndex The index of first item, inclusively.
      * @param {number} lastIndex The index of last item, exclusively.
      * @param {Object.<string, ListItem>} cachedItems Old items cache.
      * @param {Object.<string, ListItem>} newCachedItems New items cache.
      */
     addItems: function(firstIndex, lastIndex, cachedItems, newCachedItems) {
       var listItem;
       var dataModel = this.dataModel;
 
+      window.l = this;
       for (var y = firstIndex; y < lastIndex; y++) {
         var dataItem = dataModel.item(y);
         listItem = cachedItems[y] || this.createItem(dataItem);
         listItem.listIndex = y;
         this.appendChild(listItem);
         newCachedItems[y] = listItem;
       }
     },
 
     /**
@@ skipping 88 matching lines @@
         var list = this;
         window.setTimeout(function() {
           if (listItem.parentNode == list) {
             list.measured_ = measureItem(list, listItem);
           }
         });
       }
     },
 
     /**
+     * Invalidates list by removing cached items.
+     */
+    invalidate: function() {
+      this.cachedItems_ = {};
+    },
+
+    /**
      * Redraws a single item.
      * @param {number} index The row index to redraw.
      */
     redrawItem: function(index) {
       if (index >= this.firstIndex_ && index < this.lastIndex_) {
         delete this.cachedItems_[index];
         this.redraw();
       }
     },
 
@@ skipping 13 matching lines @@
    * because list items can contain controls that can be focused, and for some
    * purposes (e.g., styling), the list can still be conceptually focused at
    * that point even though it doesn't actually have the page focus.
    */
   cr.defineProperty(List, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR);
 
   return {
     List: List
   }
 });