TableList: use on, not scroll; use that, not that.; cosmetic changes
This commit is contained in:
rlx
parent
9eed905ff8
commit
5314f6c73a
1 changed files with 36 additions and 36 deletions
|
|
@ -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);
|
||||
$('<div>').appendTo($resize);
|
||||
$('<div>').addClass('OxCenter').appendTo($resize);
|
||||
$('<div>').appendTo($resize);
|
||||
|
|
@ -527,13 +529,15 @@ Ox.TableList = function(options, self) {
|
|||
|
||||
function constructItem(data) {
|
||||
var $item = $('<div>')
|
||||
.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') {
|
||||
|
|
|
|||
Loading…
Reference in a new issue