more improvements to lists (editable, sortable)
This commit is contained in:
parent
8255a4dbd3
commit
6353bcd8ba
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user