From a29d7e70eaabf633b95fa5f9ad295e0d9076f79f Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 9 Sep 2011 11:37:14 +0000 Subject: [PATCH] when dragging columns, scroll list if needed --- source/Ox.UI/js/List/Ox.TextList.js | 49 ++++++++++++++++++++++------- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index b67bdc0e..65c6b8bd 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -332,6 +332,9 @@ Ox.TextList = function(options, self) { drag: function(event, e) { dragColumn(column.id, e); }, + dragpause: function(event, e) { + dragpauseColumn(column.id, e); + }, dragend: function(event, 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) : '') .appendTo($item); }); - //Math.random() < 0.01 && Ox.print('item', data, $item); return $item; } function dragstartColumn(id, e) { + //Ox.print(that.$body.scrollLeft(), '??') self.drag = { columnOffsets: getColumnOffsets(), - // fixme: doesn't take into account horizontal scroll - listOffset: that.$element.offset().left, + listOffset: that.$element.offset().left - that.$body.scrollLeft(), startPos: getColumnPositionById(id) } self.drag.stopPos = self.drag.startPos; @@ -442,7 +444,9 @@ Ox.TextList = function(options, self) { } 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) { var x = self.drag.listOffset + offset + self.columnWidths[i] / 2; if (i < self.drag.startPos && e.clientX < x) { @@ -456,8 +460,33 @@ Ox.TextList = function(options, self) { moveColumn(id, self.drag.stopPos); self.drag.columnOffsets = getColumnOffsets(); 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) { @@ -707,9 +736,9 @@ Ox.TextList = function(options, self) { self.$heads[pos].toggleClass('OxSelected'); self.$heads[pos].next().children().eq(0).toggleClass('OxSelected'); self.$titles[pos].css({ - width: ( - self.$titles[pos].width() + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16) - ) + 'px' + width: self.$titles[pos].width() + + (self.$heads[pos].hasClass('OxSelected') ? -16 : 16) + + 'px' }); } } @@ -786,9 +815,7 @@ Ox.TextList = function(options, self) { width = column.width - self.options.columnsVisible; $cell.empty() .addClass('OxEdit') - .css({ - width: width + 'px' - }); + .css({width: width + 'px'}); $input = Ox.Input({ autovalidate: column.input ? column.input.autovalidate : null, style: 'square',