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

some more improvements to lists

Browse source
This commit is contained in:
rlx 2011-01-13 01:58:38 +00:00
parent 9da654ad08
commit 615c8b2972
2 changed files with 125 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
build/css/ox.ui.css
View file

@ -190,6 +190,7 @@ Drag & Drop
.OxDrag { .OxDrag {
cursor: move; cursor: move;
opacity: 0.5;
} }
/* /*
@ -913,6 +914,12 @@ Lists
width: 1px; width: 1px;
height: 16px; height: 16px;
} }
.OxTextList .OxBody .OxItem.OxSelected .OxCell.OxClickable {
cursor: pointer;
}
.OxTextList .OxBody .OxItem.OxSelected .OxCell.OxEditable {
cursor: text;
}
.OxTextList .OxPage { .OxTextList .OxPage {
position: absolute; position: absolute;
} }

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

@ -6288,7 +6288,6 @@ requires
$item.addClass('OxDrag') // fixme: why does the class not work? $item.addClass('OxDrag') // fixme: why does the class not work?
.css({ .css({
cursor: 'move', cursor: 'move',
opacity: 0.5
}); });
$window.mousemove(function(e) { $window.mousemove(function(e) {
var clientY = e.clientY - that.offset()['top'], var clientY = e.clientY - that.offset()['top'],
@ -6310,52 +6309,17 @@ requires
}); });
} }
function moveItem(startPos, stopPos) {
var $item = self.$items[startPos],
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore';
$item.detach()[insert](self.$items[stopPos].$element); // fixme: why do we need .$element here?
Ox.print('moveItem', startPos, stopPos, insert, self.ids);
var $item = self.$items.splice(startPos, 1)[0];
id = self.ids.splice(startPos, 1)[0];
self.$items.splice(stopPos, 0, $item);
self.ids.splice(stopPos, 0, id);
self.$items.forEach(function($item, pos) {
$item.data({position: pos});
});
self.selected = [stopPos];
Ox.print('ids', self.ids);
}
function dropItem(id, pos) { function dropItem(id, pos) {
var $item = self.$items[pos]; var $item = self.$items[pos];
$item.removeClass('OxDrag') $item.removeClass('OxDrag')
.css({ .css({
cursor: 'pointer', cursor: 'default',
opacity: 1
}); });
that.triggerEvent('sort', { that.triggerEvent('move', {
ids: self.ids id: id,
ids: self.ids,
position: pos
}); });
/*
Ox.print('dropColumn', id, pos)
var startPos = getColumnPositionById(id),
stopPos = pos,
$title = that.$titles.splice(startPos, 1)[0],
column = self.visibleColumns.splice(startPos, 1)[0],
width = self.columnWidths.splice(startPos, 1)[0];
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
});
that.$titles[stopPos].removeClass('OxDrag').css({
cursor: 'pointer'
});
that.$body.clearCache();
*/
} }
function emptyFirstPage() { function emptyFirstPage() {
@ -6486,12 +6450,16 @@ requires
return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength); return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength);
} }
function getPosition() { function getPositionById(id) {
// if orientation is both, this returns the // fixme: is this really needed?
// element position at the current scroll position var pos = -1;
return parseInt( $.each(self.ids, function(i, v) {
that.scrollTop() / (self.options.itemHeight + self.itemMargin) if (v == id) {
) * self.rowLength; pos = i;
return false;
}
});
return pos;
} }
function getPositions(ids) { function getPositions(ids) {
@ -6554,6 +6522,14 @@ requires
(self.options.itemWidth + self.itemMargin)) : 1 (self.options.itemWidth + self.itemMargin)) : 1
} }
function getScrollPosition() {
// if orientation is both, this returns the
// element position at the current scroll position
return parseInt(
that.scrollTop() / (self.options.itemHeight + self.itemMargin)
) * self.rowLength;
}
function getSelectedIds() { function getSelectedIds() {
// fixme: is carring self.ids around the best way? // fixme: is carring self.ids around the best way?
return $.map(self.selected, function(pos) { return $.map(self.selected, function(pos) {
@ -6604,8 +6580,8 @@ requires
data: v, data: v,
draggable: self.options.draggable, draggable: self.options.draggable,
format: self.options.format, format: self.options.format,
id: v[self.options.unique], position: pos,
position: pos unique: self.options.unique
}); });
self.ids[pos] = v[self.options.unique]; // fixme: why not use self.$items[pos].options('id')? self.ids[pos] = v[self.options.unique]; // fixme: why not use self.$items[pos].options('id')?
if (isSelected(pos)) { if (isSelected(pos)) {
@ -6653,6 +6629,7 @@ requires
if (!self.clickTimeout) { if (!self.clickTimeout) {
// click // click
pos = $item.data('position'); pos = $item.data('position');
Ox.print('^^^^', 'pos', pos, 'id', $item.data('id'))
if (e.metaKey) { if (e.metaKey) {
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) { if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
addToSelection(pos); addToSelection(pos);
@ -6717,6 +6694,22 @@ requires
} }
} }
function moveItem(startPos, stopPos) {
var $item = self.$items[startPos],
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore';
$item.detach()[insert](self.$items[stopPos].$element); // fixme: why do we need .$element here?
Ox.print('moveItem', startPos, stopPos, insert, self.ids);
var $item = self.$items.splice(startPos, 1)[0];
id = self.ids.splice(startPos, 1)[0];
self.$items.splice(stopPos, 0, $item);
self.ids.splice(stopPos, 0, id);
self.$items.forEach(function($item, pos) {
$item.data({position: pos});
});
self.selected = [stopPos];
Ox.print('ids', self.ids, $.map(self.$items, function(v, i) { return v.data('id'); }));
}
function open() { function open() {
var ids = getSelectedIds(); var ids = getSelectedIds();
ids.length && that.triggerEvent('open', { ids.length && that.triggerEvent('open', {
@ -7075,7 +7068,7 @@ requires
return that; return that;
}; };
that.setId = function(oldId, newId) { that.setId = function(oldId, newId) { // fixme: not used
var index = self.ids.indexOf(oldId); var index = self.ids.indexOf(oldId);
if (index > -1) { if (index > -1) {
self.ids[index] = newId; self.ids[index] = newId;
@ -7087,7 +7080,7 @@ requires
if (self.options.orientation == 'both') { if (self.options.orientation == 'both') {
var rowLength = getRowLength(), var rowLength = getRowLength(),
pageLength = self.pageLengthByRowLength[rowLength], pageLength = self.pageLengthByRowLength[rowLength],
pos = getPosition(), pos = getScrollPosition(),
scroll = that.scrollTop() / self.listSize; scroll = that.scrollTop() / self.listSize;
if (pageLength != self.pageLength) { if (pageLength != self.pageLength) {
self.pageLength = pageLength; self.pageLength = pageLength;
@ -7131,7 +7124,21 @@ requires
} }
that.value = function(id, key, value) { that.value = function(id, key, value) {
var pos = getPositionById(id),
$item = self.$items[pos],
data = $item.options('data'),
oldValue;
if (arguments.length == 2) {
return data[key];
} else {
oldValue = data[key];
data[key] = value;
$item.options({data: data});
if (key == self.options.unique) {
self.ids[self.ids.indexOf(oldValue)] = value;
}
return that;
}
}; };
return that; return that;
@ -7147,35 +7154,55 @@ requires
data: {}, data: {},
draggable: false, draggable: false,
format: [], format: [],
id: '', position: 0,
position: 0 unique: ''
}) })
.options(options || {}); .options(options || {});
// make a clone, so we don't format cached data formatData();
self.data = $.extend({}, self.options.data); constructItem();
$.each(self.data, function(k, v) { function constructItem(update) {
var format = self.options.format[k]; var $element = self.options.construct(self.data)
if (Ox.isArray(v)) { .addClass('OxItem')
self.data[k] = v.join(', '); .attr({
} else if (format) { draggable: self.options.draggable
self.data[k] = Ox.isObject(format) ? })
Ox['format' + Ox.toTitleCase(format.type)] .data({
.apply(this, $.merge([v], format.args)) : id: self.options.data[self.options.unique],
format(v); position: self.options.position
});
if (update) {
if (that.$element.hasClass('OxSelected')) {
$element.addClass('OxSelected');
}
that.$element.replaceWith($element);
} }
}); that.$element = $element;
}
that.$element = self.options.construct(self.data) function formatData() {
.addClass('OxItem') // make a clone, so we don't format cached data
.attr({ self.data = $.extend({}, self.options.data);
draggable: self.options.draggable $.each(self.data, function(k, v) {
}) var format = self.options.format[k];
.data({ if (Ox.isArray(v)) {
id: self.options.id, self.data[k] = v.join(', ');
position: self.options.position } else if (format) {
self.data[k] = Ox.isObject(format) ?
Ox['format' + Ox.toTitleCase(format.type)]
.apply(this, $.merge([v], format.args)) :
format(v);
}
}); });
}
self.onChange = function(key, value) {
if (key == 'data') {
formatData();
constructItem(true);
}
}
return that; return that;
@ -7212,6 +7239,9 @@ requires
$.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function? $.each(self.options.columns, function(i, v) { // fixme: can this go into a generic ox.js function?
// fixme: and can't these just remain undefined? // fixme: and can't these just remain undefined?
if (Ox.isUndefined(v.clickable)) {
v.clickable = false;
}
if (Ox.isUndefined(v.editable)) { if (Ox.isUndefined(v.editable)) {
v.editable = false; v.editable = false;
} }
@ -7477,11 +7507,13 @@ requires
width: getItemWidth() + 'px' width: getItemWidth() + 'px'
}); });
$.each(self.visibleColumns, function(i, v) { $.each(self.visibleColumns, function(i, v) {
var $cell = $('<div>') var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data),
editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data),
$cell = $('<div>')
.addClass( .addClass(
'OxCell OxColumn' + Ox.toTitleCase(v.id) + 'OxCell OxColumn' + Ox.toTitleCase(v.id) +
(v.clickable ? ' OxClickable' : '') + (clickable ? ' OxClickable' : '') +
(v.editable ? ' OxEditable' : '') (editable ? ' OxEditable' : '')
) )
.css({ .css({
width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px', width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',
@ -7791,15 +7823,19 @@ requires
that.value = function(id, key, value) { that.value = function(id, key, value) {
// fixme: make this accept id, {k: v, ...} // fixme: make this accept id, {k: v, ...}
var $item = getItem(id), var $item = getItem(id),
$cell = getCell(id, key); $cell = getCell(id, key),
if (Ox.isUndefined(value)) { column = self.options.columns[getColumnIndexById(key)];
return $cell.html(); if (arguments.length == 2) {
return that.$body.value(id, key);
} else { } else {
$cell && $cell.html(value); that.$body.value(id, key, value);
if (self.options.columns[getColumnIndexById(key)].unique) { /*
$cell && $cell.html(column.format ? column.format(value) : value);
if (column.unique) {
that.$body.setId($item.data('id'), value); that.$body.setId($item.data('id'), value);
$item.data({id: value}); $item.data({id: value});
} }
*/
return that; return that;
} }
} }