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

some improvements for column drag/drop

Browse source
This commit is contained in:
rolux 2010-09-06 00:26:30 +02:00
parent 195975ce53
commit 3e289f04f4
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
build/js/ox.ui.js
View file

@ -6576,10 +6576,13 @@ requires
} }
function constructHead() { function constructHead() {
var offset = 0;
that.$titles = []; that.$titles = [];
self.columnPositions = []; self.columnOffsets = [];
$.each(self.visibleColumns, function(i, v) { $.each(self.visibleColumns, function(i, v) {
var $order, $resize, $left, $center, $right, timeout = 0; var $order, $resize, $left, $center, $right, timeout = 0;
offset += self.columnWidths[i];
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
that.$titles[i] = $('<div>') that.$titles[i] = $('<div>')
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id)) .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
.css({ .css({
@ -6601,7 +6604,6 @@ requires
} }
}) })
.appendTo(that.$head.$content.$element); .appendTo(that.$head.$content.$element);
self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
$order = $('<div>') $order = $('<div>')
.addClass('OxOrder') .addClass('OxOrder')
.html(oxui.symbols['triangle_' + ( .html(oxui.symbols['triangle_' + (
@ -6641,6 +6643,7 @@ requires
width: (Ox.sum(self.columnWidths) + 2) + 'px' width: (Ox.sum(self.columnWidths) + 2) + 'px'
}); });
Ox.print('s.sC', self.selectedColumn) Ox.print('s.sC', self.selectedColumn)
Ox.print('s.cO', self.columnOffsets)
if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
toggleSelected(self.options.columns[self.selectedColumn].id); toggleSelected(self.options.columns[self.selectedColumn].id);
that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({ that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
@ -6672,8 +6675,8 @@ requires
startPos = getColumnPositionById(id), startPos = getColumnPositionById(id),
pos = startPos, pos = startPos,
stopPos = startPos, stopPos = startPos,
positions = $.map(self.visibleColumns, function(v, i) { offsets = $.map(self.visibleColumns, function(v, i) {
return self.columnPositions[i] - self.columnPositions[startPos] return self.columnOffsets[i] - self.columnOffsets[startPos]
}); });
$('.OxColumn' + Ox.toTitleCase(id)).css({ $('.OxColumn' + Ox.toTitleCase(id)).css({
opacity: 0.1 opacity: 0.1
@ -6681,10 +6684,10 @@ requires
that.$titles[startPos].addClass('OxDrag').css({ // fixme: why does the class not work? that.$titles[startPos].addClass('OxDrag').css({ // fixme: why does the class not work?
cursor: 'move' cursor: 'move'
}); });
Ox.print('positions', positions) Ox.print('offsets', offsets)
$window.mousemove(function(e) { $window.mousemove(function(e) {
var d = e.clientX - startX; var d = e.clientX - startX;
$.each(positions, function(i, v) { $.each(offsets, function(i, v) {
if (d < 0 && d < v) { if (d < 0 && d < v) {
stopPos = i; stopPos = i;
return false; return false;
@ -6710,9 +6713,10 @@ requires
$title = that.$titles.splice(startPos, 1)[0], $title = that.$titles.splice(startPos, 1)[0],
column = self.visibleColumns.splice(startPos, 1)[0], column = self.visibleColumns.splice(startPos, 1)[0],
width = self.columnWidths.splice(startPos, 1)[0]; width = self.columnWidths.splice(startPos, 1)[0];
that.$titles.splice(stopPos, 0, $title);
self.visibleColumns.splice(stopPos, 0, column); self.visibleColumns.splice(stopPos, 0, column);
self.columnWidths.splice(stopPos, 0, width); self.columnWidths.splice(stopPos, 0, width);
that.$head.$content.empty();
constructHead();
Ox.print('s.vC', self.visibleColumns) Ox.print('s.vC', self.visibleColumns)
$('.OxColumn' + Ox.toTitleCase(id)).css({ $('.OxColumn' + Ox.toTitleCase(id)).css({
opacity: 1 opacity: 1
@ -6750,20 +6754,23 @@ requires
} }
function moveColumn(id, pos) { function moveColumn(id, pos) {
// fixme: column head should be one element, not three
Ox.print('moveColumn', id, pos) Ox.print('moveColumn', id, pos)
var startPos = getColumnPositionById(id), var startPos = getColumnPositionById(id),
stopPos = pos, stopPos = pos,
startClassName = '.OxColumn' + Ox.toTitleCase(id), startClassName = '.OxColumn' + Ox.toTitleCase(id),
stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id), stopClassName = '.OxColumn' + Ox.toTitleCase(self.visibleColumns[stopPos].id),
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
$column = $('.OxTitle' + startClassName), $column = $('.OxTitle' + startClassName),
$order = $column.next(), $order = $column.next(),
$resize = $order.next(); $resize = $order.next();
$column.detach().insertBefore($('.OxTitle' + stopClassName)); Ox.print(startClassName, 'before', stopClassName)
$column.detach()[insert](insert == 'insertAfter' ? $('.OxTitle' + stopClassName).next().next() : $('.OxTitle' + stopClassName));
$order.detach().insertAfter($column); $order.detach().insertAfter($column);
$resize.detach().insertAfter($order); $resize.detach().insertAfter($order);
$.each(that.$body.find('.OxItem'), function(i, v) { $.each(that.$body.find('.OxItem'), function(i, v) {
var $v = $(v); var $v = $(v);
$v.children(startClassName).detach().insertBefore($v.children(stopClassName)); $v.children(startClassName).detach()[insert]($v.children(stopClassName));
}); });
} }