textlist improvements (keep selection after sort, make left/right arrows scroll left/right)

source/Ox.UI/js/Form/Ox.Form.js

@@ -123,7 +123,7 @@ Ox.Form = function(options, self) {
         } else {
             Ox.forEach(arguments[0], function(value, key) {
                 var index = getItemIndexById(key);
-                index > -1 && Ox.print(':::::::', key, value)
+                //index > -1 && Ox.print(':::::::', key, value)
                 index > -1 && self.options.items[index].options({value: value});
             });
             return that;

source/Ox.UI/js/List/Ox.List.js

@@ -556,7 +556,7 @@ Ox.List = function(options, self) {
     }
 
     function getPositions(ids) {
-        Ox.print('getPositions', ids)
+        // Ox.print('getPositions', ids)
         ids = ids || getSelectedIds();
         Ox.print('getPositions', ids)
         // fixme: optimize: send non-selected ids if more than half of the items are selected
@@ -628,7 +628,7 @@ Ox.List = function(options, self) {
     function getSelectedIds() {
         //Ox.print('gSI', self.selected, self.$items)
         return $.map(self.selected, function(pos) {
-            Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique])
+            //Ox.print('....', pos, self.options.unique, self.$items[pos].options('data')[self.options.unique])
             //Ox.print('2222', self.$items, pos)
             return self.$items[pos].options('data')[self.options.unique];
         });
@@ -662,6 +662,7 @@ Ox.List = function(options, self) {
             isSelected(pos) && self.$items[pos].addClass('OxSelected');
             self.$items[pos].appendTo(that.$content);
         });
+        self.selected.length && scrollToPosition(self.selected[0]);
     }
 
     function getPageLength(page) {
@@ -1230,14 +1231,16 @@ Ox.List = function(options, self) {
     function updateSort() {
         Ox.print('start sort')
         var key = self.options.sort[0].key,
-            operator = self.options.sort[0].operator,
             map = self.options.sort[0].map,
+            operator = self.options.sort[0].operator,
+            selectedIds,
             sort = {};
-        self.options.items.forEach(function(item) {
-            sort[item.id] = map ? map(item[key]) : item[key];
-        });
         if (self.listLength > 1) {
             if (Ox.isArray(self.options.items)) {
+                selectedIds = getSelectedIds();
+                self.options.items.forEach(function(item) {
+                    sort[item.id] = map ? map(item[key]) : item[key];
+                });
                 self.options.items.sort(function(a, b) {
                     var aValue = sort[a.id],
                         bValue = sort[b.id],
@@ -1249,6 +1252,14 @@ Ox.List = function(options, self) {
                     }
                     return ret;
                 });
+                if (selectedIds.length) {
+                    self.selected = [];
+                    self.options.items.forEach(function(item, i) {
+                        if (selectedIds.indexOf(item.id) > -1) {
+                            self.selected.push(i);
+                        }
+                    });
+                }
                 loadItems();
             } else {
                 clear(); // fixme: bad function name

source/Ox.UI/js/List/Ox.TextList.js

@@ -58,7 +58,17 @@ Ox.TextList = function(options, self) {
                 sort: []
             })
             .options(options || {})
-            .addClass('OxTextList');
+            .addClass('OxTextList')
+            .bindEvent({
+                key_left: function() {
+                    var $element = that.$body.$element;
+                    $element[0].scrollLeft = $element[0].scrollLeft - $element.width();
+                },
+                key_right: function() {
+                    var $element = that.$body.$element;
+                    $element[0].scrollLeft = $element[0].scrollLeft + $element.width();
+                }
+            });
 
     self.options.columns.forEach(function(v) { // fixme: can this go into a generic ox.js function?
         // fixme: and can't these just remain undefined?
@@ -254,15 +264,19 @@ Ox.TextList = function(options, self) {
         Ox.print('clickColumn', id);
         var i = getColumnIndexById(id),
             isSelected = self.options.sort[0].key == self.options.columns[i].id;
-        that.$body.options({
+        self.options.sort = [{
-            sort: [{
+            key: self.options.columns[i].id,
-                key: self.options.columns[i].id,
+            operator: isSelected ?
-                operator: isSelected ?
+                (self.options.sort[0].operator == '+' ? '-' : '+') :
-                    (self.options.sort[0].operator == '+' ? '-' : '+') :
+                self.options.columns[i].operator,
-                    self.options.columns[i].operator,
+            map: self.options.columns[i].map
-                map: self.options.columns[i].map
+        }]
-            }]
+        updateColumn();
-        });
+        // fixme: strangely, sorting the list blocks updating the column,
+        // so we use a timeout for now
+        setTimeout(function() {
+            that.$body.options({sort: self.options.sort});
+        }, 10)
     }
 
     function constructHead() {
@@ -622,6 +636,20 @@ Ox.TextList = function(options, self) {
         });
     }
 
+    function updateColumn() {
+        var columnId = self.options.columns[self.selectedColumn].id
+            isSelected = columnId == self.options.sort[0].key;
+        if (self.options.columnsVisible) {
+            if (isSelected) {
+                updateOrder(columnId);
+            } else {
+                toggleSelected(columnId);
+                self.selectedColumn = getColumnIndexById(self.options.sort[0].key);
+                toggleSelected(self.options.columns[self.selectedColumn].id);
+            }
+        }        
+    }
+
     function updateOrder(id) {
         var pos = getColumnPositionById(id);
         //Ox.print(id, pos)
@@ -638,6 +666,9 @@ Ox.TextList = function(options, self) {
             that.$body.options(key, value);
         } else if (key == 'selected') {
             that.$body.options(key, value);
+        } else if (key == 'sort') {
+            updateColumn();
+            that.$body.options(key, value);
         }
     };
 
@@ -731,7 +762,9 @@ Ox.TextList = function(options, self) {
         that.$body.size();
     }
 
+    // fixme: deprecated
     that.sortList = function(key, operator) {
+        Ox.print('$$$$ DEPRECATED $$$$')
         var isSelected = key == self.options.sort[0].key;
         self.options.sort = [{
             key: key,
@@ -750,11 +783,14 @@ Ox.TextList = function(options, self) {
         // fixme: strangely, sorting the list blocks toggling the selection,
         // so we use a timeout for now
         setTimeout(function() {
+            that.$body.options({sort: self.options.sort});
+            /*
             that.$body.sortList(
                 self.options.sort[0].key,
                 self.options.sort[0].operator,
                 self.options.sort[0].map
             );
+            */
         }, 10);
         return that;
     };