From 5314f6c73a9f21e78f6f72797ef7d5b41f566ba4 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 22 Sep 2014 16:23:21 +0200 Subject: [PATCH] TableList: use on, not scroll; use that, not that.; cosmetic changes --- source/Ox.UI/js/List/TableList.js | 72 +++++++++++++++---------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/source/Ox.UI/js/List/TableList.js b/source/Ox.UI/js/List/TableList.js index be72331d..4f308b53 100644 --- a/source/Ox.UI/js/List/TableList.js +++ b/source/Ox.UI/js/List/TableList.js @@ -317,11 +317,13 @@ Ox.TableList = function(options, self) { top: (self.options.columnsVisible ? 16 : 0) + 'px', overflowY: (self.options.scrollbarVisible ? 'scroll' : 'hidden') }) - .scroll(function() { - var scrollLeft = $(this).scrollLeft(); - if (scrollLeft != self.scrollLeft) { - self.scrollLeft = scrollLeft; - that.$head && that.$head.scrollLeft(scrollLeft); + .on({ + scroll: function() { + var scrollLeft = $(this).scrollLeft(); + if (scrollLeft != self.scrollLeft) { + self.scrollLeft = scrollLeft; + that.$head && that.$head.scrollLeft(scrollLeft); + } } }) .bindEvent(function(data, event) { @@ -429,7 +431,7 @@ Ox.TableList = function(options, self) { self.$heads[i] = Ox.Element() .addClass('OxHeadCell ' + getColumnClassName(column.id)) .css({width: self.columnWidths[i] - 5 + 'px'}) - .appendTo(that.$head.$content.$element); + .appendTo(that.$head.$content); // if sort operator is set, bind click event if (column.operator) { self.$heads[i].bindEvent({ @@ -490,7 +492,7 @@ Ox.TableList = function(options, self) { } $resize = Ox.Element() .addClass('OxResize') - .appendTo(that.$head.$content.$element); + .appendTo(that.$head.$content); $('
').appendTo($resize); $('
').addClass('OxCenter').appendTo($resize); $('
').appendTo($resize); @@ -527,13 +529,15 @@ Ox.TableList = function(options, self) { function constructItem(data) { var $item = $('
') - .addClass('OxTarget') - .css({ - width: getItemWidth(true) + 'px' - }); + .addClass('OxTarget') + .css({ + width: getItemWidth(true) + 'px' + }); self.visibleColumns.forEach(function(v, i) { var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data), editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data), + // if the column id is not in data, we're constructing an empty cell + value = v.id in data ? formatValue(v.id, data[v.id], data) : '', $cell; if (v.tooltip) { $cell = Ox.Element({ @@ -558,8 +562,7 @@ Ox.TableList = function(options, self) { borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px', textAlign: v.align }) - // if the column id is not in data, we're constructing an empty cell - .html(v.id in data ? formatValue(v.id, data[v.id], data) : '') + [Ox.isString(value) ? 'html' : 'append'](value) .appendTo($item); }); return $item; @@ -578,7 +581,7 @@ Ox.TableList = function(options, self) { Ox.$body.addClass('OxDragging'); self.drag = { columnOffsets: getColumnOffsets(), - listOffset: that.$element.offset().left - that.$body.scrollLeft(), + listOffset: that.offset().left - that.$body.scrollLeft(), startPos: getColumnPositionById(id) } self.drag.stopPos = self.drag.startPos; @@ -591,8 +594,8 @@ Ox.TableList = function(options, self) { } function dragColumn(id, e) { - var listLeft = that.$element.offset().left, - listRight = listLeft + that.$element.width(), + var listLeft = that.offset().left, + listRight = listLeft + that.width(), pos = self.drag.stopPos; Ox.forEach(self.drag.columnOffsets, function(offset, i) { var x = self.drag.listOffset + offset + self.columnWidths[i] / 2; @@ -610,11 +613,11 @@ Ox.TableList = function(options, self) { ///* var left = self.drag.columnOffsets[self.drag.startPos], right = left + self.columnWidths[self.drag.startPos]; - if (left < that.$body.scrollLeft() || right > that.$element.width()) { + if (left < that.$body.scrollLeft() || right > that.width()) { that.$body.scrollLeft( - left < that.$body.scrollLeft() ? left : right - that.$element.width() + left < that.$body.scrollLeft() ? left : right - that.width() ); - self.drag.listOffset = that.$element.offset().left - that.$body.scrollLeft(); + self.drag.listOffset = that.offset().left - that.$body.scrollLeft(); } //*/ } @@ -624,7 +627,7 @@ Ox.TableList = function(options, self) { that.$body.scrollLeft( that.$body.scrollLeft() + (e.clientX < listLeft + 16 ? -16 : 16) ); - self.drag.listOffset = that.$element.offset().left - that.$body.scrollLeft(); + self.drag.listOffset = that.offset().left - that.$body.scrollLeft(); }, 100); } } else if (self.scrollInterval) { @@ -686,14 +689,14 @@ Ox.TableList = function(options, self) { .css({overflowX: 'auto'}); that.bindEvent({ key_left: function () { - var $element = that.$body.$element, - scrollLeft = $element[0].scrollLeft - $element.width(); - $element.animate({scrollLeft: scrollLeft}, 250); + that.$body.animate({ + scrollLeft: that.$body[0].scrollLeft - that.$body.width() + }, 250); }, key_right: function() { - var $element = that.$body.$element, - scrollLeft = $element[0].scrollLeft + $element.width(); - $element.animate({scrollLeft: scrollLeft}, 250); + that.$body.animate({ + scrollLeft: that.$body[0].scrollLeft + that.$body.width() + }, 250); } }); } @@ -725,9 +728,7 @@ Ox.TableList = function(options, self) { function getCell(id, key) { var $item = getItem(id); key = key || ''; // fixme: what is this? - return $($item.find( - '.OxCell.' + getColumnClassName(key) - )[0]); + return $($item.find('.OxCell.' + getColumnClassName(key))[0]); } function getColumnClassName(id) { @@ -765,13 +766,12 @@ Ox.TableList = function(options, self) { function getItemWidth(cached) { // fixme: this gets called for every constructItem and is slooow // the proper way to fix this would be to find out how and when - // that.$element.width() might change... which would probably - // mean binding to every SplitPanel and window resize... - // for now, use a cached value + // that.width() might change... which would probably mean binding to + // every SplitPanel and window resize... for now, use a cached value if (!cached) { - self.cachedWidth = that.$element.width(); + self.cachedWidth = that.width(); } else if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) { - self.cachedWidth = that.$element.width(); + self.cachedWidth = that.width(); self.cachedWidthTime = +new Date(); } return Math.max( @@ -948,14 +948,14 @@ Ox.TableList = function(options, self) { function updateImages() { // FIXME: not yet used - that.$body.$element.find('img').each(function(i, element) { + that.$body.find('img').each(function(i, element) { var $element = $(element), data = Ox.UI.getImageData($element.attr('src')); if (data && data.color == 'selected') { $element.attr({src: Ox.UI.getImageURL(data.name, 'default')}); } }); - that.$body.$element.find('.OxSelected img').each(function(i, element) { + that.$body.find('.OxSelected img').each(function(i, element) { var $element = $(element), data = Ox.UI.getImageData($element.attr('src')); if (data && data.color == 'default') {