some more improvements to lists

build/css/ox.ui.css

@@ -190,6 +190,7 @@ Drag & Drop
 
 .OxDrag {
     cursor: move;
+    opacity: 0.5;
 }
 
 /*
@@ -913,6 +914,12 @@ Lists
     width: 1px;
     height: 16px;
 }
+.OxTextList .OxBody .OxItem.OxSelected .OxCell.OxClickable {
+    cursor: pointer;
+}
+.OxTextList .OxBody .OxItem.OxSelected .OxCell.OxEditable {
+    cursor: text;
+}
 .OxTextList .OxPage {
     position: absolute;
 }

build/js/ox.ui.js

@@ -6288,7 +6288,6 @@ requires
             $item.addClass('OxDrag') // fixme: why does the class not work?
                 .css({
                     cursor: 'move',
-                    opacity: 0.5
                 });
             $window.mousemove(function(e) {
                 var clientY = e.clientY - that.offset()['top'],
@@ -6310,52 +6309,17 @@ requires
             });
         }
 
-        function moveItem(startPos, stopPos) {
-            var $item = self.$items[startPos],
-                insert = startPos < stopPos ? 'insertAfter' : 'insertBefore';
-            $item.detach()[insert](self.$items[stopPos].$element); // fixme: why do we need .$element here?
-            Ox.print('moveItem', startPos, stopPos, insert, self.ids);
-            var $item = self.$items.splice(startPos, 1)[0];
-                id = self.ids.splice(startPos, 1)[0];
-            self.$items.splice(stopPos, 0, $item);
-            self.ids.splice(stopPos, 0, id);
-            self.$items.forEach(function($item, pos) {
-                $item.data({position: pos});
-            });
-            self.selected = [stopPos];
-            Ox.print('ids', self.ids);
-        }
-
         function dropItem(id, pos) {
             var $item = self.$items[pos];
             $item.removeClass('OxDrag')
                 .css({
-                    cursor: 'pointer',
+                    cursor: 'default',
-                    opacity: 1
                 });
-            that.triggerEvent('sort', {
+            that.triggerEvent('move', {
-                ids: self.ids
+                id: id,
+                ids: self.ids,
+                position: pos
             });
-            /*
-            Ox.print('dropColumn', id, pos)
-            var startPos = getColumnPositionById(id),
-                stopPos = pos,
-                $title = that.$titles.splice(startPos, 1)[0],
-                column = self.visibleColumns.splice(startPos, 1)[0],
-                width = self.columnWidths.splice(startPos, 1)[0];
-            self.visibleColumns.splice(stopPos, 0, column);
-            self.columnWidths.splice(stopPos, 0, width);
-            that.$head.$content.empty();
-            constructHead();
-            Ox.print('s.vC', self.visibleColumns)
-            $('.OxColumn' + Ox.toTitleCase(id)).css({
-                opacity: 1
-            });
-            that.$titles[stopPos].removeClass('OxDrag').css({
-                cursor: 'pointer'
-            });
-            that.$body.clearCache();
-            */
         }
 
         function emptyFirstPage() {
@@ -6486,12 +6450,16 @@ requires
              return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength);
         }
 
-        function getPosition() {
+        function getPositionById(id) {
-            // if orientation is both, this returns the
+            // fixme: is this really needed?
-            // element position at the current scroll position
+            var pos = -1;
-            return parseInt(
+            $.each(self.ids, function(i, v) {
-                that.scrollTop() / (self.options.itemHeight + self.itemMargin)
+                if (v == id) {
-            ) * self.rowLength;
+                    pos = i;
+                    return false;
+                }
+            });
+            return pos;
         }
 
         function getPositions(ids) {
@@ -6554,6 +6522,14 @@ requires
                     (self.options.itemWidth + self.itemMargin)) : 1
         }
 
+        function getScrollPosition() {
+            // if orientation is both, this returns the
+            // element position at the current scroll position
+            return parseInt(
+                that.scrollTop() / (self.options.itemHeight + self.itemMargin)
+            ) * self.rowLength;
+        }
+
         function getSelectedIds() {
             // fixme: is carring self.ids around the best way?
             return $.map(self.selected, function(pos) {
@@ -6604,8 +6580,8 @@ requires
                             data: v,
                             draggable: self.options.draggable,
                             format: self.options.format,
-                            id: v[self.options.unique],
+                            position: pos,
-                            position: pos
+                            unique: self.options.unique
                         });
                         self.ids[pos] = v[self.options.unique]; // fixme: why not use self.$items[pos].options('id')?
                         if (isSelected(pos)) {
@@ -6653,6 +6629,7 @@ requires
                 if (!self.clickTimeout) {
                     // click
                     pos = $item.data('position');
+                    Ox.print('^^^^', 'pos', pos, 'id', $item.data('id'))
                     if (e.metaKey) {
                         if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
                             addToSelection(pos);
@@ -6717,6 +6694,22 @@ requires
             }
         }
 
+        function moveItem(startPos, stopPos) {
+            var $item = self.$items[startPos],
+                insert = startPos < stopPos ? 'insertAfter' : 'insertBefore';
+            $item.detach()[insert](self.$items[stopPos].$element); // fixme: why do we need .$element here?
+            Ox.print('moveItem', startPos, stopPos, insert, self.ids);
+            var $item = self.$items.splice(startPos, 1)[0];
+                id = self.ids.splice(startPos, 1)[0];
+            self.$items.splice(stopPos, 0, $item);
+            self.ids.splice(stopPos, 0, id);
+            self.$items.forEach(function($item, pos) {
+                $item.data({position: pos});
+            });
+            self.selected = [stopPos];
+            Ox.print('ids', self.ids, $.map(self.$items, function(v, i) { return v.data('id'); }));
+        }
+
         function open() {
             var ids = getSelectedIds();
             ids.length && that.triggerEvent('open', {
@@ -7075,7 +7068,7 @@ requires
             return that;
         };
 
-        that.setId = function(oldId, newId) {
+        that.setId = function(oldId, newId) { // fixme: not used
             var index = self.ids.indexOf(oldId);
             if (index > -1) {
                 self.ids[index] = newId;
@@ -7087,7 +7080,7 @@ requires
             if (self.options.orientation == 'both') {
                 var rowLength = getRowLength(),
                     pageLength = self.pageLengthByRowLength[rowLength],
-                    pos = getPosition(),
+                    pos = getScrollPosition(),
                     scroll = that.scrollTop() / self.listSize;
                 if (pageLength != self.pageLength) {
                     self.pageLength = pageLength;
@@ -7131,7 +7124,21 @@ requires
         }
 
         that.value = function(id, key, value) {
-            
+            var pos = getPositionById(id),
+                $item = self.$items[pos],
+                data = $item.options('data'),
+                oldValue;
+            if (arguments.length == 2) {
+                return data[key];
+            } else {
+                oldValue = data[key];
+                data[key] = value;
+                $item.options({data: data});
+                if (key == self.options.unique) {
+                    self.ids[self.ids.indexOf(oldValue)] = value;                    
+                }
+                return that;
+            }
         };
 
         return that;
@@ -7147,14 +7154,36 @@ requires
                     data: {},
                     draggable: false,
                     format: [],
-                    id: '',
+                    position: 0,
-                    position: 0
+                    unique: ''
                 })
                 .options(options || {});
 
+        formatData();
+        constructItem();
+
+        function constructItem(update) {
+            var $element = self.options.construct(self.data)
+                .addClass('OxItem')
+                .attr({
+                    draggable: self.options.draggable
+                })
+                .data({
+                    id: self.options.data[self.options.unique],
+                    position: self.options.position
+                });
+            if (update) {
+                if (that.$element.hasClass('OxSelected')) {
+                    $element.addClass('OxSelected');
+                }
+                that.$element.replaceWith($element);
+            }
+            that.$element = $element;
+        }
+
+        function formatData() {
             // make a clone, so we don't format cached data
             self.data = $.extend({}, self.options.data);
-
             $.each(self.data, function(k, v) {
                 var format = self.options.format[k];
                 if (Ox.isArray(v)) {
@@ -7166,16 +7195,14 @@ requires
                         format(v);
                 }
             });
+        }
 
-        that.$element = self.options.construct(self.data)
+        self.onChange = function(key, value) {
-            .addClass('OxItem')
+            if (key == 'data') {
-            .attr({
+                formatData();
-                draggable: self.options.draggable
+                constructItem(true);
-            })
+            }
-            .data({
+        }
-                id: self.options.id,
-                position: self.options.position
-            });
 
         return that;
 
@@ -7212,6 +7239,9 @@ requires
 
         $.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
             // fixme: and can't these just remain undefined?
+            if (Ox.isUndefined(v.clickable)) {
+                v.clickable = false;
+            }
             if (Ox.isUndefined(v.editable)) {
                 v.editable = false;
             }
@@ -7477,11 +7507,13 @@ requires
                         width: getItemWidth() + 'px'
                     });
             $.each(self.visibleColumns, function(i, v) {
-                var $cell = $('<div>')
+                var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data),
+                    editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data),
+                    $cell = $('<div>')
                         .addClass(
                             'OxCell OxColumn' + Ox.toTitleCase(v.id) +
-                            (v.clickable ? ' OxClickable' : '') +
+                            (clickable ? ' OxClickable' : '') +
-                            (v.editable ? ' OxEditable' : '')
+                            (editable ? ' OxEditable' : '')
                         )
                         .css({
                             width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',
@@ -7791,15 +7823,19 @@ requires
         that.value = function(id, key, value) {
             // fixme: make this accept id, {k: v, ...}
             var $item = getItem(id),
-                $cell = getCell(id, key);
+                $cell = getCell(id, key),
-            if (Ox.isUndefined(value)) {
+                column = self.options.columns[getColumnIndexById(key)];
-                return $cell.html();
+            if (arguments.length == 2) {
+                return that.$body.value(id, key);
             } else {
-                $cell && $cell.html(value);
+                that.$body.value(id, key, value);
-                if (self.options.columns[getColumnIndexById(key)].unique) {
+                /*
+                $cell && $cell.html(column.format ? column.format(value) : value);
+                if (column.unique) {
                     that.$body.setId($item.data('id'), value);
                     $item.data({id: value});
                 }
+                */
                 return that;
             }
         }