From 615c8b29727235ecd54eb800c32460e55b4b2c2d Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Thu, 13 Jan 2011 01:58:38 +0000 Subject: [PATCH] some more improvements to lists --- build/css/ox.ui.css | 7 ++ build/js/ox.ui.js | 200 ++++++++++++++++++++++++++------------------ 2 files changed, 125 insertions(+), 82 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index b0283693..109365e6 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -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; } diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index ecc4de10..ba4513ec 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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 = $('
') + var clickable = Ox.isBoolean(v.clickable) ? v.clickable : v.clickable(data), + editable = Ox.isBoolean(v.editable) ? v.editable : v.editable(data), + $cell = $('
') .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; } }