add tooltips to textlist cells

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

@@ -161,7 +161,8 @@ Ox.List = function(options, self) {
             });
         }
         self.pageLengthByRowLength = [
-            0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60, 64, 68, 72, 76, 60
+            0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60,
+            66, 60, 65, 70, 60, 64, 68, 72, 76, 60
         ];
     }
     /*

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

@@ -213,9 +213,9 @@ Ox.TextList = function(options, self) {
                 //Ox.print('INIT????')
                 //that.triggerEvent('init', data);
             },
-            select: function(data) {
+            select: function() {
                 Ox.print('SELECT????')
-                self.options.selected = data.ids;
+                self.options.selected = that.$body.options('selected');
             }
         })
         .appendTo(that);
@@ -389,7 +389,12 @@ Ox.TextList = function(options, self) {
             //Ox.print(data[v.id], '(--value--)')
             var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data),
                 editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data),
-                $cell = $('<div>')
+                $cell = Ox.Element({
+                        tooltip: v.tooltip ? function() {
+                            return self.options.selected.indexOf(data[self.unique]) > -1
+                                ? (Ox.isString(v.tooltip) ? v.tooltip : v.tooltip(data)) : '';
+                        } : null
+                    })
                     .addClass(
                         'OxCell OxColumn' + Ox.toTitleCase(v.id) +
                         (clickable ? ' OxClickable' : '') +
@@ -400,14 +405,17 @@ Ox.TextList = function(options, self) {
                         borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px',
                         textAlign: v.align
                     })
-                    .html(v.id in data ? formatValue(v.id, data[v.id]) : '')
+                    .html(v.id in data ? formatValue(v.id, data[v.id], data) : '')
                     .appendTo($item);
         });
         //Math.random() < 0.01 && Ox.print('item', data, $item);
         return $item;
     }
 
-    function formatValue(key, value) {
+    function formatValue(key, value, data) {
+        // fixme: this may be obscure...
+        // since the format of a value may depend on another value,
+        // we pass all data as a second parameter to the supplied format function
         var format = self.format[key];
         if (value === null) {
             value = '';
@@ -415,7 +423,7 @@ Ox.TextList = function(options, self) {
             value = Ox.isObject(format) ?
                 Ox['format' + Ox.toTitleCase(format.type)]
                 .apply(this, $.merge([value], format.args)) :
-                format(value);
+                format(value, data);
         } else if (Ox.isArray(value)) {
             value = value.join(', ');
         }
@@ -517,7 +525,7 @@ Ox.TextList = function(options, self) {
     }
 
     function getCell(id, key) {
-        //Ox.print('getCell', id, key)
+        Ox.print('getCell', id, key)
         var $item = getItem(id);
         key = key || '';
         return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]);
@@ -643,7 +651,7 @@ Ox.TextList = function(options, self) {
                 width: (width - 9 - (i == self.selectedColumn ? 16 : 0)) + 'px'
             });
         }
-        that.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
+        that.$element.find('.OxCell.OxColumn' + Ox.toTitleCase(self.options.columns[i].id)).css({
             width: (width - (self.options.columnsVisible ? 9 : 8)) + 'px'
         });
         setWidth();
@@ -848,17 +856,18 @@ Ox.TextList = function(options, self) {
 
     that.value = function(id, key, value) {
         // fixme: make this accept id, {k: v, ...}
-        //Ox.print('value', id, key, value)
+        Ox.print('value', id, key, value)
-        var $item = getItem(id),
+        var $cell,
-            $cell = getCell(id, key),
+            $item = getItem(id);
-            column = self.options.columns[getColumnIndexById(key)];
+            //column = self.options.columns[getColumnIndexById(key)];
         if (arguments.length == 1) {
             return that.$body.value(id);
         } else if (arguments.length == 2) {
             return that.$body.value(id, key);
         } else {
             that.$body.value(id, key, value);
-            Ox.print('? ? ?', column, column.format)
+            //Ox.print('? ? ?', column, column.format)
+            $cell = getCell(id, key);
             $cell && $cell.html(formatValue(key, value));            
             if (key == self.options.sort[0].key) {
                 that.$body.sort();

source/Ox.UI/js/Window/Ox.Tooltip.js

@@ -32,14 +32,16 @@ Ox.Tooltip = function(options, self) {
     };
 
     that.hide = function() {
-        if (self.options.animate) {
+        if (self.options.title) {
-            that.animate({
+            if (self.options.animate) {
-                opacity: 0
+                that.animate({
-            }, 250, function() {
+                    opacity: 0
+                }, 250, function() {
+                    that.removeElement();
+                });
+            } else {
                 that.removeElement();
-            });
+            }
-        } else {
-            that.removeElement();
         }
         return that;
     };
@@ -48,23 +50,25 @@ Ox.Tooltip = function(options, self) {
     // fixme: use this in widgets
     that.show = function(x, y) {
         var left, top, width, height;
-        if (arguments.length == 1) {
+        if (self.options.title) {
-            y = arguments[0].clientY;
+            if (arguments.length == 1) {
-            x = arguments[0].clientX;
+                y = arguments[0].clientY;
+                x = arguments[0].clientX;
+            }
+            $('.OxTooltip').remove(); // fixme: don't use DOM
+            that.appendTo(Ox.UI.$body);
+            width = that.width();
+            height = that.height();
+            left = Ox.limit(x - width / 2, 0, window.innerWidth - width);
+            top = y > window.innerHeight - height - 16 ? y - 16 - height : y + 16;
+            that.css({
+                left: left + 'px',
+                top: top + 'px'
+            });
+            self.options.animate && that.animate({
+                opacity: 1
+            }, 250);
         }
-        $('.OxTooltip').remove(); // fixme: don't use DOM
-        that.appendTo(Ox.UI.$body);
-        width = that.width();
-        height = that.height();
-        left = Ox.limit(x - width / 2, 0, window.innerWidth - width);
-        top = y > window.innerHeight - height - 16 ? y - 16 - height : y + 16;
-        that.css({
-            left: left + 'px',
-            top: top + 'px'
-        });
-        self.options.animate && that.animate({
-            opacity: 1
-        }, 250);
         return that;
     };
 

source/Ox.UI/themes/classic/svg/symbolClick.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <g transform="rotate(-25, 128, 128)">
+        <polygon points="128,0 208,176 128,144 48,176" fill="#404040"/>
+        <line x1="128" y1="128" x2="128" y2="256" stroke="#404040" stroke-width="48"/>
+    </g>
+</svg>