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