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

This commit is contained in:
rlx 2014-09-22 16:23:21 +02:00
parent 9eed905ff8
commit 5314f6c73a

View file

@ -317,12 +317,14 @@ Ox.TableList = function(options, self) {
top: (self.options.columnsVisible ? 16 : 0) + 'px',
overflowY: (self.options.scrollbarVisible ? 'scroll' : 'hidden')
})
.scroll(function() {
.on({
scroll: function() {
var scrollLeft = $(this).scrollLeft();
if (scrollLeft != self.scrollLeft) {
self.scrollLeft = scrollLeft;
that.$head && that.$head.scrollLeft(scrollLeft);
}
}
})
.bindEvent(function(data, event) {
if (event == 'cancel') {
@ -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);
$('<div>').appendTo($resize);
$('<div>').addClass('OxCenter').appendTo($resize);
$('<div>').appendTo($resize);
@ -534,6 +536,8 @@ Ox.TableList = function(options, self) {
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') {