CAMP/oxjstmp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

more improvements to lists (editable, sortable)

Browse Source
This commit is contained in:
rlx 2011-01-11 10:29:26 +00:00
parent 8255a4dbd3
commit 6353bcd8ba
1 changed files with 104 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
build/js/ox.ui.js
View File

@ -409,7 +409,6 @@ requires
Ox.print(stack); Ox.print(stack);
}, },
blur: function(id) { blur: function(id) {
Ox.print('BLUR', id, stack)
var index = stack.indexOf(id); var index = stack.indexOf(id);
if (index > -1 && index == stack.length - 1) { if (index > -1 && index == stack.length - 1) {
stack.length == 1 ? stack.pop() : stack.length == 1 ? stack.pop() :
@ -2945,7 +2944,7 @@ requires
$document.unbind('keydown', keypress); $document.unbind('keydown', keypress);
$document.unbind('keypress', keypress); $document.unbind('keypress', keypress);
} }
//that.triggerEvent('blur', {}); that.triggerEvent('blur', {});
} }
function cancel() { function cancel() {
@ -6078,7 +6077,7 @@ requires
.options(options || {}) .options(options || {})
.scroll(scroll); .scroll(scroll);
that.$content.mousedown(mousedown).mouseup(mouseup); that.$content.mousedown(mousedown);
$.extend(self, { $.extend(self, {
$items: [], $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) { function findItem(e) {
Ox.print('---- findItem', e.target) Ox.print('---- findItem', e.target)
var $element = $(e.target), var $element = $(e.target),
@ -6635,9 +6642,10 @@ requires
function mousedown(e) { function mousedown(e) {
Ox.print('mousedown') Ox.print('mousedown')
var $item = findItem(e), var $cell,
$item = findItem(e),
pos, pos,
deselectTimeout = false; editTimeout = false;
selectTimeout = false; selectTimeout = false;
that.gainFocus(); that.gainFocus();
if ($item) { if ($item) {
@ -6645,23 +6653,34 @@ requires
// click // click
pos = $item.data('position'); pos = $item.data('position');
if (e.metaKey) { 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); addToSelection(pos);
} else if (self.options.min == 0) { } else if (isSelected(pos) && self.options.min < self.selected.length) {
deselectTimeout = true; deselect(pos);
} }
} else if (e.shiftKey && self.options.max == -1) { } else if (e.shiftKey) {
if (self.options.max == -1) {
addAllToSelection(pos); addAllToSelection(pos);
}
} else if (!isSelected(pos)) { } else if (!isSelected(pos)) {
select(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; 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 = setTimeout(function() {
self.clickTimeout = 0; self.clickTimeout = 0;
if (deselectTimeout) { if (selectTimeout) {
deselect(pos);
} else if (selectTimeout) {
select(pos); select(pos);
} }
}, 250); }, 250);
@ -6672,6 +6691,15 @@ requires
self.dragTimeout = 0; self.dragTimeout = 0;
} }
}, 250); }, 250);
$window.one('mouseup', function(e) {
if (self.dragTimeout) {
clearTimeout(self.dragTimeout);
self.dragTimeout = 0;
if (editTimeout) {
triggerEditEvent($item, $cell);
}
}
});
} }
} else { } else {
// dblclick // dblclick
@ -6684,14 +6712,6 @@ requires
} }
} }
function mouseup(e) {
Ox.print('mouseup')
if (self.dragTimeout) {
clearTimeout(self.dragTimeout);
self.dragTimeout = 0;
}
}
function open() { function open() {
that.triggerEvent('open', { that.triggerEvent('open', {
ids: getSelectedIds() 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() { function triggerSelectEvent() {
var ids = self.options.selected = getSelectedIds(); var ids = self.options.selected = getSelectedIds();
setTimeout(function() { setTimeout(function() {
@ -7022,8 +7052,6 @@ requires
self.preview = false; self.preview = false;
}; };
that.findItem = findItem; // fixme: not pretty, exporting for TextList, to make edit work
that.reload = function() { that.reload = function() {
Ox.print('---------------- list reload, page', self.page) Ox.print('---------------- list reload, page', self.page)
var page = self.page; var page = self.page;
@ -7259,10 +7287,10 @@ requires
that.$head && that.$head.scrollLeft(scrollLeft); that.$head && that.$head.scrollLeft(scrollLeft);
} }
}) })
.bind({
mousedown: mousedown
})
.bindEvent({ .bindEvent({
edit: function(event, data) {
editCell(data.id, data.key, data.item, data.cell);
},
select: function(event, data) { select: function(event, data) {
self.options.selected = data.ids; 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) { function clickColumn(id) {
Ox.print('clickColumn', id); Ox.print('clickColumn', id);
var i = getColumnIndexById(id), var i = getColumnIndexById(id),
@ -7468,7 +7448,10 @@ requires
}); });
$.each(self.visibleColumns, function(i, v) { $.each(self.visibleColumns, function(i, v) {
var $cell = $('<div>') var $cell = $('<div>')
.addClass('OxCell OxColumn' + Ox.toTitleCase(v.id)) .addClass(
'OxCell OxColumn' + Ox.toTitleCase(v.id) +
(v.editable ? ' OxEditable' : '')
)
.css({ .css({
width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px', width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',
borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px', borderRightWidth: (self.options.columnsVisible ? 1 : 0) + 'px',
@ -7537,8 +7520,52 @@ requires
that.$body.clearCache(); 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) { function getColumnIndexById(id) {
// fixme: use ox.js function
return Ox.getPositionById(self.options.columns, id); return Ox.getPositionById(self.options.columns, id);
} }