more improvements to lists (editable, sortable)

This commit is contained in:
rlx 2011-01-11 10:29:26 +00:00
parent 8255a4dbd3
commit 6353bcd8ba

View File

@ -409,7 +409,6 @@ requires
Ox.print(stack);
},
blur: function(id) {
Ox.print('BLUR', id, stack)
var index = stack.indexOf(id);
if (index > -1 && index == stack.length - 1) {
stack.length == 1 ? stack.pop() :
@ -2945,7 +2944,7 @@ requires
$document.unbind('keydown', keypress);
$document.unbind('keypress', keypress);
}
//that.triggerEvent('blur', {});
that.triggerEvent('blur', {});
}
function cancel() {
@ -6078,7 +6077,7 @@ requires
.options(options || {})
.scroll(scroll);
that.$content.mousedown(mousedown).mouseup(mouseup);
that.$content.mousedown(mousedown);
$.extend(self, {
$items: [],
@ -6387,6 +6386,14 @@ requires
}
}
function findCell(e) {
var $element = $(e.target);
while (!$element.hasClass('OxCell') && !$element.hasClass('OxPage') && !$element.is('body')) {
$element = $element.parent();
}
return $element.hasClass('OxCell') ? $element : null;
}
function findItem(e) {
Ox.print('---- findItem', e.target)
var $element = $(e.target),
@ -6635,9 +6642,10 @@ requires
function mousedown(e) {
Ox.print('mousedown')
var $item = findItem(e),
var $cell,
$item = findItem(e),
pos,
deselectTimeout = false;
editTimeout = false;
selectTimeout = false;
that.gainFocus();
if ($item) {
@ -6645,23 +6653,34 @@ requires
// click
pos = $item.data('position');
if (e.metaKey) {
if (!isSelected(pos) && self.options.max == -1) {
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
addToSelection(pos);
} else if (self.options.min == 0) {
deselectTimeout = true;
} else if (isSelected(pos) && self.options.min < self.selected.length) {
deselect(pos);
}
} else if (e.shiftKey && self.options.max == -1) {
} else if (e.shiftKey) {
if (self.options.max == -1) {
addAllToSelection(pos);
}
} else if (!isSelected(pos)) {
select(pos);
} else {
} else if (self.selected.length > 1) {
// this could be the first click
// of a double click on multiple items
selectTimeout = true;
} else if (self.options.type == 'text') {
$cell = findCell(e);
if ($cell && $cell.hasClass('OxEditable') && !$cell.hasClass('OxEdit')) {
if (self.options.sortable) {
editTimeout = true;
} else {
triggerEditEvent($item, $cell);
}
}
}
self.clickTimeout = setTimeout(function() {
self.clickTimeout = 0;
if (deselectTimeout) {
deselect(pos);
} else if (selectTimeout) {
if (selectTimeout) {
select(pos);
}
}, 250);
@ -6672,6 +6691,15 @@ requires
self.dragTimeout = 0;
}
}, 250);
$window.one('mouseup', function(e) {
if (self.dragTimeout) {
clearTimeout(self.dragTimeout);
self.dragTimeout = 0;
if (editTimeout) {
triggerEditEvent($item, $cell);
}
}
});
}
} else {
// dblclick
@ -6684,14 +6712,6 @@ requires
}
}
function mouseup(e) {
Ox.print('mouseup')
if (self.dragTimeout) {
clearTimeout(self.dragTimeout);
self.dragTimeout = 0;
}
}
function open() {
that.triggerEvent('open', {
ids: getSelectedIds()
@ -6908,6 +6928,16 @@ requires
}
}
function triggerEditEvent($item, $cell) {
that.triggerEvent('edit', {
id: $item.attr('id'),
key: $cell.attr('class').split('OxColumn')[1].split(' ')[0].toLowerCase(),
// fixme: it'd be nice if we didn't have to pass elements around
item: $item,
cell: $cell
});
}
function triggerSelectEvent() {
var ids = self.options.selected = getSelectedIds();
setTimeout(function() {
@ -7022,8 +7052,6 @@ requires
self.preview = false;
};
that.findItem = findItem; // fixme: not pretty, exporting for TextList, to make edit work
that.reload = function() {
Ox.print('---------------- list reload, page', self.page)
var page = self.page;
@ -7259,10 +7287,10 @@ requires
that.$head && that.$head.scrollLeft(scrollLeft);
}
})
.bind({
mousedown: mousedown
})
.bindEvent({
edit: function(event, data) {
editCell(data.id, data.key, data.item, data.cell);
},
select: function(event, data) {
self.options.selected = data.ids;
}
@ -7321,54 +7349,6 @@ requires
}
}
function mousedown(e) {
var $cell = $(e.target),
$input,
$item = that.$body.findItem(e),
columnId,
columnIndex,
html, width;
if ($item && $item.hasClass('OxSelected')) {
columnId = $cell.attr('class')
.split('OxColumn')[1].split(' ')[0].toLowerCase();
columnIndex = getColumnIndexById(columnId);
if (self.options.columns[columnIndex].editable) {
html = $cell.html();
width = self.options.columns[columnIndex].width;
$cell.empty()
.addClass('OxEdit')
.css({
width: width + 'px'
});
$input = Ox.Input({
style: 'square',
value: html,
width: width
})
.bindEvent({
blur: submit,
submit: submit
})
.appendTo($cell)
.focus();
}
}
function submit() {
var value = $input.value();
$cell.empty()
.removeClass('OxEdit')
.css({
width: (width - 8) + 'px'
})
.html(value)
that.triggerEvent('edit', {
id: $item.attr('id'),
key: columnId,
value: value
});
}
}
function clickColumn(id) {
Ox.print('clickColumn', id);
var i = getColumnIndexById(id),
@ -7468,7 +7448,10 @@ requires
});
$.each(self.visibleColumns, function(i, v) {
var $cell = $('<div>')
.addClass('OxCell OxColumn' + Ox.toTitleCase(v.id))
.addClass(
'OxCell OxColumn' + Ox.toTitleCase(v.id) +
(v.editable ? ' OxEditable' : '')
)
.css({
width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',
borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px',
@ -7537,8 +7520,52 @@ requires
that.$body.clearCache();
}
function editCell(id, key, $item, $cell) {
Ox.print('editCell')
var $input,
html = $cell.html(),
index = getColumnIndexById(key),
width = self.options.columns[index].width;
Ox.print($item, $cell)
$cell.empty()
.addClass('OxEdit')
.css({
width: width + 'px'
});
$input = Ox.Input({
style: 'square',
value: html,
width: width
})
.bind({
mousedown: function(e) {
// keep mousedown from reaching list
e.stopPropagation();
}
})
.bindEvent({
blur: submit,
submit: submit
})
.appendTo($cell)
.focus();
function submit() {
var value = $input.value();
$input.remove();
$cell.removeClass('OxEdit')
.css({
width: (width - 8) + 'px'
})
.html(value)
that.triggerEvent('submit', {
id: id,
key: key,
value: value
});
}
}
function getColumnIndexById(id) {
// fixme: use ox.js function
return Ox.getPositionById(self.options.columns, id);
}