some more improvements to lists
This commit is contained in:
rlx
parent
9da654ad08
commit
615c8b2972
2 changed files with 125 additions and 82 deletions
|
|
@ -190,6 +190,7 @@ Drag & Drop
|
|||
|
||||
.OxDrag {
|
||||
cursor: move;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -913,6 +914,12 @@ Lists
|
|||
width: 1px;
|
||||
height: 16px;
|
||||
}
|
||||
.OxTextList .OxBody .OxItem.OxSelected .OxCell.OxClickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.OxTextList .OxBody .OxItem.OxSelected .OxCell.OxEditable {
|
||||
cursor: text;
|
||||
}
|
||||
.OxTextList .OxPage {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6288,7 +6288,6 @@ requires
|
|||
$item.addClass('OxDrag') // fixme: why does the class not work?
|
||||
.css({
|
||||
cursor: 'move',
|
||||
opacity: 0.5
|
||||
});
|
||||
$window.mousemove(function(e) {
|
||||
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) {
|
||||
var $item = self.$items[pos];
|
||||
$item.removeClass('OxDrag')
|
||||
.css({
|
||||
cursor: 'pointer',
|
||||
opacity: 1
|
||||
cursor: 'default',
|
||||
});
|
||||
that.triggerEvent('sort', {
|
||||
ids: self.ids
|
||||
that.triggerEvent('move', {
|
||||
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() {
|
||||
|
|
@ -6486,12 +6450,16 @@ requires
|
|||
return Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength);
|
||||
}
|
||||
|
||||
function getPosition() {
|
||||
// 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 getPositionById(id) {
|
||||
// fixme: is this really needed?
|
||||
var pos = -1;
|
||||
$.each(self.ids, function(i, v) {
|
||||
if (v == id) {
|
||||
pos = i;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return pos;
|
||||
}
|
||||
|
||||
function getPositions(ids) {
|
||||
|
|
@ -6554,6 +6522,14 @@ requires
|
|||
(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() {
|
||||
// fixme: is carring self.ids around the best way?
|
||||
return $.map(self.selected, function(pos) {
|
||||
|
|
@ -6604,8 +6580,8 @@ requires
|
|||
data: v,
|
||||
draggable: self.options.draggable,
|
||||
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')?
|
||||
if (isSelected(pos)) {
|
||||
|
|
@ -6653,6 +6629,7 @@ requires
|
|||
if (!self.clickTimeout) {
|
||||
// click
|
||||
pos = $item.data('position');
|
||||
Ox.print('^^^^', 'pos', pos, 'id', $item.data('id'))
|
||||
if (e.metaKey) {
|
||||
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
|
||||
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() {
|
||||
var ids = getSelectedIds();
|
||||
ids.length && that.triggerEvent('open', {
|
||||
|
|
@ -7075,7 +7068,7 @@ requires
|
|||
return that;
|
||||
};
|
||||
|
||||
that.setId = function(oldId, newId) {
|
||||
that.setId = function(oldId, newId) { // fixme: not used
|
||||
var index = self.ids.indexOf(oldId);
|
||||
if (index > -1) {
|
||||
self.ids[index] = newId;
|
||||
|
|
@ -7087,7 +7080,7 @@ requires
|
|||
if (self.options.orientation == 'both') {
|
||||
var rowLength = getRowLength(),
|
||||
pageLength = self.pageLengthByRowLength[rowLength],
|
||||
pos = getPosition(),
|
||||
pos = getScrollPosition(),
|
||||
scroll = that.scrollTop() / self.listSize;
|
||||
if (pageLength != self.pageLength) {
|
||||
self.pageLength = pageLength;
|
||||
|
|
@ -7131,7 +7124,21 @@ requires
|
|||
}
|
||||
|
||||
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;
|
||||
|
|
@ -7147,35 +7154,55 @@ requires
|
|||
data: {},
|
||||
draggable: false,
|
||||
format: [],
|
||||
id: '',
|
||||
position: 0
|
||||
position: 0,
|
||||
unique: ''
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
// make a clone, so we don't format cached data
|
||||
self.data = $.extend({}, self.options.data);
|
||||
formatData();
|
||||
constructItem();
|
||||
|
||||
$.each(self.data, function(k, v) {
|
||||
var format = self.options.format[k];
|
||||
if (Ox.isArray(v)) {
|
||||
self.data[k] = v.join(', ');
|
||||
} else if (format) {
|
||||
self.data[k] = Ox.isObject(format) ?
|
||||
Ox['format' + Ox.toTitleCase(format.type)]
|
||||
.apply(this, $.merge([v], format.args)) :
|
||||
format(v);
|
||||
function constructItem(update) {
|
||||
var $element = self.options.construct(self.data)
|
||||
.addClass('OxItem')
|
||||
.attr({
|
||||
draggable: self.options.draggable
|
||||
})
|
||||
.data({
|
||||
id: self.options.data[self.options.unique],
|
||||
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)
|
||||
.addClass('OxItem')
|
||||
.attr({
|
||||
draggable: self.options.draggable
|
||||
})
|
||||
.data({
|
||||
id: self.options.id,
|
||||
position: self.options.position
|
||||
function formatData() {
|
||||
// make a clone, so we don't format cached data
|
||||
self.data = $.extend({}, self.options.data);
|
||||
$.each(self.data, function(k, v) {
|
||||
var format = self.options.format[k];
|
||||
if (Ox.isArray(v)) {
|
||||
self.data[k] = v.join(', ');
|
||||
} 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;
|
||||
|
||||
|
|
@ -7212,6 +7239,9 @@ requires
|
|||
|
||||
$.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?
|
||||
if (Ox.isUndefined(v.clickable)) {
|
||||
v.clickable = false;
|
||||
}
|
||||
if (Ox.isUndefined(v.editable)) {
|
||||
v.editable = false;
|
||||
}
|
||||
|
|
@ -7477,11 +7507,13 @@ requires
|
|||
width: getItemWidth() + 'px'
|
||||
});
|
||||
$.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(
|
||||
'OxCell OxColumn' + Ox.toTitleCase(v.id) +
|
||||
(v.clickable ? ' OxClickable' : '') +
|
||||
(v.editable ? ' OxEditable' : '')
|
||||
(clickable ? ' OxClickable' : '') +
|
||||
(editable ? ' OxEditable' : '')
|
||||
)
|
||||
.css({
|
||||
width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',
|
||||
|
|
@ -7791,15 +7823,19 @@ requires
|
|||
that.value = function(id, key, value) {
|
||||
// fixme: make this accept id, {k: v, ...}
|
||||
var $item = getItem(id),
|
||||
$cell = getCell(id, key);
|
||||
if (Ox.isUndefined(value)) {
|
||||
return $cell.html();
|
||||
$cell = getCell(id, key),
|
||||
column = self.options.columns[getColumnIndexById(key)];
|
||||
if (arguments.length == 2) {
|
||||
return that.$body.value(id, key);
|
||||
} else {
|
||||
$cell && $cell.html(value);
|
||||
if (self.options.columns[getColumnIndexById(key)].unique) {
|
||||
that.$body.value(id, key, value);
|
||||
/*
|
||||
$cell && $cell.html(column.format ? column.format(value) : value);
|
||||
if (column.unique) {
|
||||
that.$body.setId($item.data('id'), value);
|
||||
$item.data({id: value});
|
||||
}
|
||||
*/
|
||||
return that;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue