0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

TableList: use on, not scroll; use that, not that.; cosmetic changes

Browse source
This commit is contained in:
rlx 2014-09-22 16:23:21 +02:00
parent 9eed905ff8
commit 5314f6c73a
1 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
source/Ox.UI/js/List/TableList.js
View file

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