From b55ade5687a3512356f9a36df89dbe58f667c28e Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sun, 28 Aug 2011 19:50:06 +0000 Subject: [PATCH] add tooltips to textlist cells --- source/Ox.UI/js/List/Ox.List.js | 3 +- source/Ox.UI/js/List/Ox.TextList.js | 35 ++++++++----- source/Ox.UI/js/Window/Ox.Tooltip.js | 50 ++++++++++--------- .../Ox.UI/themes/classic/svg/symbolClick.svg | 6 +++ 4 files changed, 57 insertions(+), 37 deletions(-) create mode 100644 source/Ox.UI/themes/classic/svg/symbolClick.svg diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index db56063b..888f26fb 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/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 ]; } /* diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index ca4d66e3..1c07de7f 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/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 = $('
') + $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) - var $item = getItem(id), - $cell = getCell(id, key), - column = self.options.columns[getColumnIndexById(key)]; + Ox.print('value', id, key, value) + var $cell, + $item = getItem(id); + //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(); diff --git a/source/Ox.UI/js/Window/Ox.Tooltip.js b/source/Ox.UI/js/Window/Ox.Tooltip.js index 08d7b393..3bc2a886 100644 --- a/source/Ox.UI/js/Window/Ox.Tooltip.js +++ b/source/Ox.UI/js/Window/Ox.Tooltip.js @@ -32,14 +32,16 @@ Ox.Tooltip = function(options, self) { }; that.hide = function() { - if (self.options.animate) { - that.animate({ - opacity: 0 - }, 250, function() { + if (self.options.title) { + if (self.options.animate) { + that.animate({ + 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) { - y = arguments[0].clientY; - x = arguments[0].clientX; + if (self.options.title) { + if (arguments.length == 1) { + 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; }; diff --git a/source/Ox.UI/themes/classic/svg/symbolClick.svg b/source/Ox.UI/themes/classic/svg/symbolClick.svg new file mode 100644 index 00000000..491caef2 --- /dev/null +++ b/source/Ox.UI/themes/classic/svg/symbolClick.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file