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

when dragging columns, scroll list if needed

Browse source
This commit is contained in:
rlx 2011-09-09 11:37:14 +00:00
parent 0ba258281f
commit a29d7e70ea
1 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
source/Ox.UI/js/List/Ox.TextList.js
View file

@ -332,6 +332,9 @@ Ox.TextList = function(options, self) {
drag: function(event, e) { drag: function(event, e) {
dragColumn(column.id, e); dragColumn(column.id, e);
}, },
dragpause: function(event, e) {
dragpauseColumn(column.id, e);
},
dragend: function(event, e) { dragend: function(event, e) {
dragendColumn(column.id, e); dragendColumn(column.id, e);
} }
@ -420,15 +423,14 @@ Ox.TextList = function(options, self) {
.html(v.id in data ? formatValue(v.id, data[v.id], data) : '') .html(v.id in data ? formatValue(v.id, data[v.id], data) : '')
.appendTo($item); .appendTo($item);
}); });
//Math.random() < 0.01 && Ox.print('item', data, $item);
return $item; return $item;
} }
function dragstartColumn(id, e) { function dragstartColumn(id, e) {
//Ox.print(that.$body.scrollLeft(), '??')
self.drag = { self.drag = {
columnOffsets: getColumnOffsets(), columnOffsets: getColumnOffsets(),
// fixme: doesn't take into account horizontal scroll listOffset: that.$element.offset().left - that.$body.scrollLeft(),
listOffset: that.$element.offset().left,
startPos: getColumnPositionById(id) startPos: getColumnPositionById(id)
} }
self.drag.stopPos = self.drag.startPos; self.drag.stopPos = self.drag.startPos;
@ -442,7 +444,9 @@ Ox.TextList = function(options, self) {
} }
function dragColumn(id, e) { function dragColumn(id, e) {
var pos = self.drag.stopPos; var listLeft = that.$element.offset().left,
listRight = listLeft + that.$element.width(),
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;
if (i < self.drag.startPos && e.clientX < x) { if (i < self.drag.startPos && e.clientX < x) {
@ -456,8 +460,33 @@ Ox.TextList = function(options, self) {
moveColumn(id, self.drag.stopPos); moveColumn(id, self.drag.stopPos);
self.drag.columnOffsets = getColumnOffsets(); self.drag.columnOffsets = getColumnOffsets();
self.drag.startPos = self.drag.stopPos; self.drag.startPos = self.drag.stopPos;
//Ox.print('columnOffsets', self.drag.columnOffsets) ///*
var left = self.drag.columnOffsets[self.drag.startPos],
right = left + self.columnWidths[self.drag.startPos];
if (left < that.$body.scrollLeft() || right > that.$element.width()) {
that.$body.scrollLeft(
left < that.$body.scrollLeft() ? left : right - that.$element.width()
);
self.drag.listOffset = that.$element.offset().left - that.$body.scrollLeft();
}
//*/
} }
if (e.clientX < listLeft + 16 || e.clientX > listRight - 16) {
if (!self.scrollInterval) {
self.scrollInterval = setInterval(function() {
that.$body.scrollLeft(
that.$body.scrollLeft() + (e.clientX < listLeft + 16 ? -16 : 16)
);
self.drag.listOffset = that.$element.offset().left - that.$body.scrollLeft();
}, 100);
}
} else if (self.scrollInterval) {
clearInterval(self.scrollInterval);
self.scrollInterval = 0;
}
}
function dragpauseColumn(id, e) {
} }
function dragendColumn(id, e) { function dragendColumn(id, e) {
@ -707,9 +736,9 @@ Ox.TextList = function(options, self) {
self.$heads[pos].toggleClass('OxSelected'); self.$heads[pos].toggleClass('OxSelected');
self.$heads[pos].next().children().eq(0).toggleClass('OxSelected'); self.$heads[pos].next().children().eq(0).toggleClass('OxSelected');
self.$titles[pos].css({ self.$titles[pos].css({
width: ( width: self.$titles[pos].width()
self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16) + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16)
) + 'px' + 'px'
}); });
} }
} }
@ -786,9 +815,7 @@ Ox.TextList = function(options, self) {
width = column.width - self.options.columnsVisible; width = column.width - self.options.columnsVisible;
$cell.empty() $cell.empty()
.addClass('OxEdit') .addClass('OxEdit')
.css({ .css({width: width + 'px'});
width: width + 'px'
});
$input = Ox.Input({ $input = Ox.Input({
autovalidate: column.input ? column.input.autovalidate : null, autovalidate: column.input ? column.input.autovalidate : null,
style: 'square', style: 'square',