@qooxdoo/framework 7.0.0-beta.1 → 7.0.0-beta.10

package/source/class/qx/ui/list/List.js

@@ -61,244 +61,200 @@
  *
  * @childControl row-layer {qx.ui.virtual.layer.Row} layer for all rows
  */
-qx.Class.define("qx.ui.list.List",
-{
-  extend : qx.ui.virtual.core.Scroller,
-  include : [qx.ui.virtual.selection.MModel],
-  implement : qx.data.controller.ISelection,
+qx.Class.define("qx.ui.list.List", {
+  extend: qx.ui.virtual.core.Scroller,
+  include: [qx.ui.virtual.selection.MModel],
+  implement: qx.data.controller.ISelection,
 
   /**
    * Creates the <code>qx.ui.list.List</code> with the passed model.
    *
    * @param model {qx.data.IListData|null?} model for the list.
    */
-  construct : function(model)
-  {
-    this.base(arguments, 0, 1, 20, 100);
+  construct(model) {
+    super(0, 1, 20, 100);
 
     this._init();
 
     this.__defaultGroups = new qx.data.Array();
     this.initGroups(this.__defaultGroups);
 
-    if(model != null) {
+    if (model != null) {
       this.initModel(model);
     }
 
     this.initItemHeight();
   },
 
-
-  events :
-  {
+  events: {
     /**
      * Fired when the length of {@link #model} changes.
      */
-    "changeModelLength" : "qx.event.type.Data"
+    changeModelLength: "qx.event.type.Data"
   },
 
-
-  properties :
-  {
+  properties: {
     // overridden
-    appearance :
-    {
-      refine : true,
-      init : "virtual-list"
+    appearance: {
+      refine: true,
+      init: "virtual-list"
     },
 
-
     // overridden
-    focusable :
-    {
-      refine : true,
-      init : true
+    focusable: {
+      refine: true,
+      init: true
     },
 
-
     // overridden
-    width :
-    {
-      refine : true,
-      init : 100
+    width: {
+      refine: true,
+      init: 100
     },
 
-
     // overridden
-    height :
-    {
-      refine : true,
-      init : 200
+    height: {
+      refine: true,
+      init: 200
     },
 
-
     /** Data array containing the data which should be shown in the list. */
-    model :
-    {
-      check : "qx.data.IListData",
-      apply : "_applyModel",
+    model: {
+      check: "qx.data.IListData",
+      apply: "_applyModel",
       event: "changeModel",
-      nullable : true,
-      deferredInit : true
+      nullable: true,
+      deferredInit: true
     },
 
-
     /** Default item height */
-    itemHeight :
-    {
-      check : "Integer",
-      init : 25,
-      apply : "_applyRowHeight",
-      themeable : true
+    itemHeight: {
+      check: "Integer",
+      init: 25,
+      apply: "_applyRowHeight",
+      themeable: true
     },
 
-
     /** Group item height */
-    groupItemHeight :
-    {
-      check : "Integer",
-      init : null,
-      nullable : true,
-      apply : "_applyGroupRowHeight",
-      themeable : true
+    groupItemHeight: {
+      check: "Integer",
+      init: null,
+      nullable: true,
+      apply: "_applyGroupRowHeight",
+      themeable: true
     },
 
-
     /**
      * The path to the property which holds the information that should be
      * displayed as a label. This is only needed if objects are stored in the
      * model.
      */
-    labelPath :
-    {
+    labelPath: {
       check: "String",
       apply: "_applyLabelPath",
       nullable: true
     },
 
-
     /**
      * The path to the property which holds the information that should be
      * displayed as an icon. This is only needed if objects are stored in the
      * model and icons should be displayed.
      */
-    iconPath :
-    {
+    iconPath: {
       check: "String",
       apply: "_applyIconPath",
       nullable: true
     },
 
-
     /**
      * The path to the property which holds the information that should be
      * displayed as a group label. This is only needed if objects are stored in the
      * model.
      */
-    groupLabelPath :
-    {
+    groupLabelPath: {
       check: "String",
       apply: "_applyGroupLabelPath",
       nullable: true
     },
 
-
     /**
      * A map containing the options for the label binding. The possible keys
      * can be found in the {@link qx.data.SingleValueBinding} documentation.
      */
-    labelOptions :
-    {
+    labelOptions: {
       apply: "_applyLabelOptions",
       nullable: true
     },
 
-
     /**
      * A map containing the options for the icon binding. The possible keys
      * can be found in the {@link qx.data.SingleValueBinding} documentation.
      */
-    iconOptions :
-    {
+    iconOptions: {
       apply: "_applyIconOptions",
       nullable: true
     },
 
-
     /**
      * A map containing the options for the group label binding. The possible keys
      * can be found in the {@link qx.data.SingleValueBinding} documentation.
      */
-    groupLabelOptions :
-    {
+    groupLabelOptions: {
       apply: "_applyGroupLabelOptions",
       nullable: true
     },
 
-
     /**
      * Delegation object which can have one or more functions defined by the
      * {@link qx.ui.list.core.IListDelegate} interface.
      */
-    delegate :
-    {
+    delegate: {
       apply: "_applyDelegate",
       event: "changeDelegate",
       init: null,
       nullable: true
     },
 
-
     /**
      * Indicates that the list is managing the {@link #groups} automatically.
      */
-    autoGrouping :
-    {
+    autoGrouping: {
       check: "Boolean",
       init: true
     },
 
-
     /**
      * Contains all groups for data binding, but do only manipulate the array
      * when the {@link #autoGrouping} is set to <code>false</code>.
      */
-    groups :
-    {
+    groups: {
       check: "qx.data.Array",
       event: "changeGroups",
       nullable: false,
       deferredInit: true
     },
 
-
-    /** 
-     * Render list items with variable height, 
-     * calculated from the individual item size. 
+    /**
+     * Render list items with variable height,
+     * calculated from the individual item size.
      */
-    variableItemHeight :
-    {
-      check : "Boolean",
-      apply : "_applyVariableItemHeight",
-      nullable : false,
-      init : true
+    variableItemHeight: {
+      check: "Boolean",
+      apply: "_applyVariableItemHeight",
+      nullable: false,
+      init: true
     }
   },
 
-
-  members :
-  {
+  members: {
     /** @type {qx.ui.virtual.layer.Row} background renderer */
-    _background : null,
-
+    _background: null,
 
     /** @type {qx.ui.list.provider.IListProvider} provider for cell rendering */
-    _provider : null,
-
+    _provider: null,
 
     /** @type {qx.ui.virtual.layer.Abstract} layer which contains the items. */
-    _layer : null,
-
+    _layer: null,
 
     /**
      * @type {Array} lookup table to get the model index from a row. To get the
@@ -306,78 +262,68 @@ qx.Class.define("qx.ui.list.List",
      *
      * Note the value <code>-1</code> indicates that the value is a group item.
      */
-    __lookupTable : null,
-
+    __lookupTable: null,
 
     /** @type {Array} lookup table for getting the group index from the row */
-    __lookupTableForGroup : null,
-
+    __lookupTableForGroup: null,
 
     /**
      * @type {Map} contains all groups with the items as children. The key is
      *   the group name and the value is an <code>Array</code> containing each
      *   item's model index.
      */
-    __groupHashMap : null,
-
+    __groupHashMap: null,
 
     /**
      * @type {Boolean} indicates when one or more <code>String</code> are used for grouping.
      */
-    __groupStringsUsed : false,
-
+    __groupStringsUsed: false,
 
     /**
      * @type {Boolean} indicates when one or more <code>Object</code> are used for grouping.
      */
-    __groupObjectsUsed : false,
-
+    __groupObjectsUsed: false,
 
     /**
      * @type {Boolean} indicates when a default group is used for grouping.
      */
-    __defaultGroupUsed : false,
+    __defaultGroupUsed: false,
 
-    __defaultGroups : null,
-
-    __deferredLayerUpdate : null,
+    __defaultGroups: null,
 
+    __deferredLayerUpdate: null,
 
     /**
      * Trigger a rebuild from the internal data structure.
      */
-    refresh : function() {
+    refresh() {
       this.__buildUpLookupTable();
     },
 
-
     // overridden
-    _createChildControlImpl : function(id, hash)
-    {
+    _createChildControlImpl(id, hash) {
       var control;
 
-      switch(id)
-      {
-        case "row-layer" :
+      switch (id) {
+        case "row-layer":
           control = new qx.ui.virtual.layer.Row(null, null);
           break;
       }
-      return control || this.base(arguments, id);
-    },
 
+      return control || super._createChildControlImpl(id);
+    },
 
     /**
      * Initialize the virtual list provider.
      */
-    _initWidgetProvider : function() {
+    _initWidgetProvider() {
       this._provider = new qx.ui.list.provider.WidgetProvider(this);
     },
-    
+
     /**
      * Initializes the virtual list.
      */
-    _init : function()
-    {
+    _init() {
       this._initWidgetProvider();
 
       this.__lookupTable = [];
@@ -393,42 +339,36 @@ qx.Class.define("qx.ui.list.List",
       this._initLayer();
     },
 
-
     /**
      * Initializes the background renderer.
      */
-    _initBackground : function()
-    {
+    _initBackground() {
       this._background = this.getChildControl("row-layer");
       this.getPane().addLayer(this._background);
     },
 
-
     /**
      * Initializes the layer for rendering.
      */
-    _initLayer : function()
-    {
+    _initLayer() {
       this._layer = this._provider.createLayer();
       this._layer.addListener("updated", this._onLayerUpdated, this);
       this.getPane().addLayer(this._layer);
     },
 
-
     /*
     ---------------------------------------------------------------------------
       INTERNAL API
     ---------------------------------------------------------------------------
     */
 
-
     /**
      * Returns the model data for the given row.
      *
      * @param row {Integer} row to get data for.
      * @return {var|null} the row's model data.
      */
-    _getDataFromRow : function(row) {
+    _getDataFromRow(row) {
       var data = null;
 
       var model = this.getModel();
@@ -449,18 +389,16 @@ qx.Class.define("qx.ui.list.List",
       }
     },
 
-
     /**
      * Return the internal lookup table. But do not manipulate the
      * lookup table!
      *
      * @return {Array} The internal lookup table.
      */
-    _getLookupTable : function() {
+    _getLookupTable() {
       return this.__lookupTable;
     },
 
-
     /**
      * Performs a lookup from row to model index.
      *
@@ -468,11 +406,10 @@ qx.Class.define("qx.ui.list.List",
      * @return {Number} The model index or
      *   <code>-1</code> if the row is a group item.
      */
-    _lookup : function(row) {
+    _lookup(row) {
       return this.__lookupTable[row];
     },
 
-
     /**
      * Performs a lookup from row to group index.
      *
@@ -480,11 +417,10 @@ qx.Class.define("qx.ui.list.List",
      * @return {Number} The group index or
      *   <code>-1</code> if the row is a not a group item.
      */
-    _lookupGroup : function(row) {
+    _lookupGroup(row) {
       return this.__lookupTableForGroup.indexOf(row);
     },
 
-
     /**
      * Performs a lookup from model index to row.
      *
@@ -492,14 +428,13 @@ qx.Class.define("qx.ui.list.List",
      * @return {Number} The row or <code>-1</code>
      *  if the index is not a model index.
      */
-    _reverseLookup : function(index) {
+    _reverseLookup(index) {
       if (index < 0) {
         return -1;
       }
       return this.__lookupTable.indexOf(index);
     },
 
-
     /**
      * Checks if the passed row is a group or an item.
      *
@@ -507,31 +442,27 @@ qx.Class.define("qx.ui.list.List",
      * @return {Boolean} <code>true</code> if the row is a group element,
      *  <code>false</code> if the row is an item element.
      */
-    _isGroup : function(row) {
+    _isGroup(row) {
       return this._lookup(row) == -1;
     },
 
-
     /**
      * Returns the selectable model items.
      *
      * @return {qx.data.Array | null} The selectable items.
      */
-    _getSelectables : function() {
+    _getSelectables() {
       return this.getModel();
     },
 
-
     /*
     ---------------------------------------------------------------------------
       APPLY ROUTINES
     ---------------------------------------------------------------------------
     */
 
-
     // apply method
-    _applyModel : function(value, old)
-    {
+    _applyModel(value, old) {
       if (value != null) {
         value.addListener("changeLength", this._onModelChange, this);
       }
@@ -543,95 +474,83 @@ qx.Class.define("qx.ui.list.List",
       this._onModelChange();
     },
 
-
     // apply method
-    _applyRowHeight : function(value, old) {
+    _applyRowHeight(value, old) {
       this.getPane().getRowConfig().setDefaultItemSize(value);
     },
 
     // apply method
-    _applyGroupRowHeight : function(value, old) {
+    _applyGroupRowHeight(value, old) {
       this.__updateGroupRowHeight();
     },
 
     // apply method
-    _applyLabelPath : function(value, old) {
+    _applyLabelPath(value, old) {
       this._provider.setLabelPath(value);
     },
 
-
     // apply method
-    _applyIconPath : function(value, old) {
+    _applyIconPath(value, old) {
       this._provider.setIconPath(value);
     },
 
-
     // apply method
-    _applyGroupLabelPath : function(value, old) {
+    _applyGroupLabelPath(value, old) {
       this._provider.setGroupLabelPath(value);
     },
 
-
     // apply method
-    _applyLabelOptions : function(value, old) {
+    _applyLabelOptions(value, old) {
       this._provider.setLabelOptions(value);
     },
 
-
     // apply method
-    _applyIconOptions : function(value, old) {
+    _applyIconOptions(value, old) {
       this._provider.setIconOptions(value);
     },
 
-
     // apply method
-    _applyGroupLabelOptions : function(value, old) {
+    _applyGroupLabelOptions(value, old) {
       this._provider.setGroupLabelOptions(value);
     },
 
-
     // apply method
-    _applyDelegate : function(value, old) {
+    _applyDelegate(value, old) {
       this._provider.setDelegate(value);
       this.__buildUpLookupTable();
     },
 
-
     // property apply
-    _applyVariableItemHeight : function(value, old) {
-      if(value) {
+    _applyVariableItemHeight(value, old) {
+      if (value) {
         this._setRowItemSize();
-      }
-      else {
+      } else {
         this.getPane().getRowConfig().resetItemSizes();
         this.getPane().fullUpdate();
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       EVENT HANDLERS
     ---------------------------------------------------------------------------
     */
 
-
     /**
      * Event handler for the resize event.
      *
      * @param e {qx.event.type.Data} resize event.
      */
-    _onResize : function(e) {
+    _onResize(e) {
       this.getPane().getColumnConfig().setItemSize(0, e.getData().width);
     },
 
-
     /**
      * Event handler for the model change event.
      *
      * @param e {qx.event.type.Data} model change event.
      */
-    _onModelChange : function(e) {
+    _onModelChange(e) {
       // we have to remove the bindings before we rebuild the lookup table
       // otherwise bindings might be dispatched to wrong items
       // see: https://github.com/qooxdoo/qooxdoo/issues/196
@@ -644,15 +563,14 @@ qx.Class.define("qx.ui.list.List",
       }
     },
 
-
     /**
-     * Event handler for the updated event of the 
+     * Event handler for the updated event of the
      * qx.ui.virtual.layer.WidgetCell layer.
      *
      * Recalculates the item sizes in a deffered call,
      * which only happens if we have variable item heights
      */
-    _onLayerUpdated: function () {
+    _onLayerUpdated() {
       if (this.isVariableItemHeight() === false) {
         return;
       }
@@ -666,39 +584,34 @@ qx.Class.define("qx.ui.list.List",
       this.__deferredLayerUpdate.schedule();
     },
 
-
     /*
     ---------------------------------------------------------------------------
       HELPER ROUTINES
     ---------------------------------------------------------------------------
     */
 
-
     /**
      * Helper method to update the row count.
      */
-    __updateRowCount : function()
-    {
+    __updateRowCount() {
       this.getPane().getRowConfig().setItemCount(this.__lookupTable.length);
       this.getPane().fullUpdate();
     },
 
-
     /**
      * Helper method to update group row heights.
      */
-    __updateGroupRowHeight : function()
-    {
+    __updateGroupRowHeight() {
       /*
        * In case of having variableItemHeight set to true,
        * the group item height has a variable height as well
-       * and will be set again in method _setRowItemSize 
+       * and will be set again in method _setRowItemSize
        * which is a deferred call, being run after all changes.
        * Resetting the complete item sizes here and setting
        * the height of the group items, only leads to an
        * unnecessary flicker of the list items by shrinking and
        * growing them again.
-       */ 
+       */
       if (this.isVariableItemHeight()) {
         return;
       }
@@ -707,8 +620,7 @@ qx.Class.define("qx.ui.list.List",
       rc.resetItemSizes();
 
       if (gh) {
-        for (var i = 0,l = this.__lookupTable.length; i < l; ++i)
-        {
+        for (var i = 0, l = this.__lookupTable.length; i < l; ++i) {
           if (this.__lookupTable[i] == -1) {
             rc.setItemSize(i, gh);
           }
@@ -716,12 +628,10 @@ qx.Class.define("qx.ui.list.List",
       }
     },
 
-
     /**
      * Internal method for building the lookup table.
      */
-    __buildUpLookupTable : function()
-    {
+    __buildUpLookupTable() {
       this.__lookupTable = [];
       this.__lookupTableForGroup = [];
       this.__groupHashMap = {};
@@ -743,61 +653,50 @@ qx.Class.define("qx.ui.list.List",
       this.__updateRowCount();
     },
 
-
     /**
      * Invokes filtering using the filter given in the delegate.
      *
      * @param model {qx.data.IListData} The model.
      */
-    _runDelegateFilter : function (model)
-    {
+    _runDelegateFilter(model) {
       var filter = qx.util.Delegate.getMethod(this.getDelegate(), "filter");
 
-      for (var i = 0,l = model.length; i < l; ++i)
-      {
+      for (var i = 0, l = model.length; i < l; ++i) {
         if (filter == null || filter(model.getItem(i))) {
           this.__lookupTable.push(i);
         }
       }
     },
 
-
     /**
      * Invokes sorting using the sorter given in the delegate.
      *
      * @param model {qx.data.IListData} The model.
      */
-    _runDelegateSorter : function (model)
-    {
+    _runDelegateSorter(model) {
       if (this.__lookupTable.length == 0) {
         return;
       }
 
       var sorter = qx.util.Delegate.getMethod(this.getDelegate(), "sorter");
 
-      if (sorter != null)
-      {
-        this.__lookupTable.sort(function(a, b)
-        {
+      if (sorter != null) {
+        this.__lookupTable.sort(function (a, b) {
           return sorter(model.getItem(a), model.getItem(b));
         });
       }
     },
 
-
     /**
      * Invokes grouping using the group result given in the delegate.
      *
      * @param model {qx.data.IListData} The model.
      */
-    _runDelegateGroup : function (model)
-    {
+    _runDelegateGroup(model) {
       var groupMethod = qx.util.Delegate.getMethod(this.getDelegate(), "group");
 
-      if (groupMethod != null)
-      {
-        for (var i = 0,l = this.__lookupTable.length; i < l; ++i)
-        {
+      if (groupMethod != null) {
+        for (var i = 0, l = this.__lookupTable.length; i < l; ++i) {
           var index = this.__lookupTable[i];
           var item = this.getModel().getItem(index);
           var group = groupMethod(item);
@@ -808,25 +707,21 @@ qx.Class.define("qx.ui.list.List",
       }
     },
 
-
     /**
      * Adds a model index the the group.
      *
      * @param group {String|Object|null} the group.
      * @param index {Integer} model index to add.
      */
-    __addGroup : function(group, index)
-    {
+    __addGroup(group, index) {
       // if group is null add to default group
-      if (group == null)
-      {
+      if (group == null) {
         this.__defaultGroupUsed = true;
         group = "???";
       }
 
       var name = this.__getUniqueGroupName(group);
-      if (this.__groupHashMap[name] == null)
-      {
+      if (this.__groupHashMap[name] == null) {
         this.__groupHashMap[name] = [];
         if (this.isAutoGrouping()) {
           this.getGroups().push(group);
@@ -835,21 +730,18 @@ qx.Class.define("qx.ui.list.List",
       this.__groupHashMap[name].push(index);
     },
 
-
     /**
      * Creates a lookup table form the internal group hash map.
      *
      * @return {Array} the lookup table based on the internal group hash map.
      */
-    __createLookupFromGroup : function()
-    {
+    __createLookupFromGroup() {
       this.__checkGroupStructure();
 
       var result = [];
       var row = 0;
       var groups = this.getGroups();
-      for (var i = 0; i < groups.getLength(); i++)
-      {
+      for (var i = 0; i < groups.getLength(); i++) {
         var group = groups.getItem(i);
 
         // indicate that the value is a group
@@ -859,8 +751,7 @@ qx.Class.define("qx.ui.list.List",
 
         var key = this.__getUniqueGroupName(group);
         var groupMembers = this.__groupHashMap[key];
-        if (groupMembers != null)
-        {
+        if (groupMembers != null) {
           for (var k = 0; k < groupMembers.length; k++) {
             result.push(groupMembers[k]);
             row++;
@@ -870,59 +761,55 @@ qx.Class.define("qx.ui.list.List",
       return result;
     },
 
-
     /**
      * Returns an unique group name for the passed group.
      *
      * @param group {String|Object} Group to find unique group name.
      * @return {String} Unique group name.
      */
-    __getUniqueGroupName : function(group)
-    {
+    __getUniqueGroupName(group) {
       var name = null;
-      if (!qx.lang.Type.isString(group))
-      {
+      if (!qx.lang.Type.isString(group)) {
         var index = this.getGroups().indexOf(group);
         this.__groupObjectsUsed = true;
 
         name = "group";
         if (index == -1) {
-           name += this.getGroups().getLength();
+          name += this.getGroups().getLength();
         } else {
           name += index;
         }
-      }
-      else
-      {
+      } else {
         this.__groupStringsUsed = true;
         var name = group;
       }
       return name;
     },
 
-
     /**
      * Checks that <code>Object</code> and <code>String</code> are not mixed
      * as group identifier, otherwise an exception occurs.
      */
-    __checkGroupStructure : function() {
-      if (this.__groupObjectsUsed && this.__defaultGroupUsed ||
-          this.__groupObjectsUsed && this.__groupStringsUsed)
-      {
-        throw new Error("GroupingTypeError: You can't mix 'Objects' and 'Strings' as" +
-          " group identifier!");
+    __checkGroupStructure() {
+      if (
+        (this.__groupObjectsUsed && this.__defaultGroupUsed) ||
+        (this.__groupObjectsUsed && this.__groupStringsUsed)
+      ) {
+        throw new Error(
+          "GroupingTypeError: You can't mix 'Objects' and 'Strings' as" +
+            " group identifier!"
+        );
       }
     },
 
-
     /**
      * Get the height of each visible item and set it as the
      * row size
      */
-    _setRowItemSize : function() {
+    _setRowItemSize() {
       var rowConfig = this.getPane().getRowConfig();
       var layer = this._layer;
-      
+
       var firstRow = layer.getFirstRow();
       var lastRow = firstRow + layer.getRowSizes().length;
 
@@ -930,21 +817,16 @@ qx.Class.define("qx.ui.list.List",
         var widget = layer.getRenderedCellWidget(row, 0);
         if (widget !== null) {
           var height = widget.getSizeHint().height;
-          
-          rowConfig.setItemSize(
-              row,
-              height
-          );
+
+          rowConfig.setItemSize(row, height);
         }
       }
     }
   },
 
-
-  destruct : function()
-  {
+  destruct() {
     this._disposeObjects("__deferredLayerUpdate");
-    
+
     var model = this.getModel();
     if (model != null) {
       model.removeListener("changeLength", this._onModelChange, this);
@@ -958,9 +840,13 @@ qx.Class.define("qx.ui.list.List",
     this._background.dispose();
     this._provider.dispose();
     this._layer.dispose();
-    this._background = this._provider = this._layer =
-      this.__lookupTable = this.__lookupTableForGroup =
-      this.__groupHashMap = null;
+    this._background =
+      this._provider =
+      this._layer =
+      this.__lookupTable =
+      this.__lookupTableForGroup =
+      this.__groupHashMap =
+        null;
 
     if (this.__defaultGroups) {
       this.__defaultGroups.dispose();