From b3e7945a96aa7774cdad12b8d7dc0348498e3571 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sat, 1 Oct 2011 13:06:50 +0000 Subject: [PATCH] fix bugs in treelist where the icon would not update, items would not expand, and expanding items would be slow --- demos/treelist/js/treelist.js | 66 +++++++++++++++-------------- source/Ox.UI/js/List/Ox.List.js | 18 ++++---- source/Ox.UI/js/List/Ox.TreeList.js | 41 ++++++++++-------- 3 files changed, 67 insertions(+), 58 deletions(-) diff --git a/demos/treelist/js/treelist.js b/demos/treelist/js/treelist.js index b853922c..fba0a5c5 100644 --- a/demos/treelist/js/treelist.js +++ b/demos/treelist/js/treelist.js @@ -1,36 +1,38 @@ -Ox.load('UI', {debug: true}, function() { +Ox.load({UI: {debug: true}, Geo: {}}, function() { - Ox.load('Geo', function() { - - var $treeList = new Ox.TreeList({ - data: {'Ox.COUNTRIES': Ox.COUNTRIES} + var $treeList = new Ox.TreeList({ + data: {'Ox.COUNTRIES': Ox.COUNTRIES}, + width: 256 - Ox.UI.SCROLLBAR_SIZE + }) + .bindEvent({ + resize: function(data) { + $treeList.options({width: data.width - Ox.UI.SCROLLBAR_SIZE}); + } }), - $debug = new Ox.Element('div'), - $button = new Ox.Button({ - title: 'Debug' - }) - .bindEvent({ - click: function() { - $text.html(JSON.stringify($treeList.$element.options('items'))) - } - }) - .appendTo($debug), - $text = new Ox.Element('div').appendTo($debug), - $splitPanel = new Ox.SplitPanel({ - elements: [ - { - element: $treeList, - size: 256, - resizable: true, - resize: [128, 256, 384] - }, - { - element: $debug - } - ], - orientation: 'horizontal' - }).appendTo($('body')); - - }); + $debug = new Ox.Element('div'), + $button = new Ox.Button({ + title: 'Debug' + }) + .bindEvent({ + click: function() { + $text.html(JSON.stringify($treeList.$element.options('items'))) + } + }) + .appendTo($debug), + $text = new Ox.Element('div').appendTo($debug), + $splitPanel = new Ox.SplitPanel({ + elements: [ + { + element: $treeList, + size: 256, + resizable: true, + resize: [128, 256, 384] + }, + { + element: $debug + } + ], + orientation: 'horizontal' + }).appendTo($('body')); }); \ No newline at end of file diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index d3cc232b..d93bc595 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -692,8 +692,8 @@ Ox.List = function(options, self) { }); self.selected.length && scrollToPosition(self.selected[0]); // that.triggerEvent('init', {items: self.options.items.length}); - // fixme: do async lists need to trigger init? - // will this only be reached in async lists? + // fixme: do sync lists need to trigger init? + // will this only be reached in sync lists? } function loadPage(page, callback) { @@ -1397,8 +1397,7 @@ Ox.List = function(options, self) { @*/ that.addItems = function(pos, items) { var $items = [], - length = items.length - //first = self.$items.length == 0; + length = items.length; self.selected.forEach(function(v, i) { if (v >= pos) { self.selected[i] += length; @@ -1422,11 +1421,9 @@ Ox.List = function(options, self) { $item.insertAfter($items[i - 1]); } }); - self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items)); self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items)); - //if(first) - loadItems(); + //loadItems(); updatePositions(); } @@ -1548,12 +1545,13 @@ Ox.List = function(options, self) { length number of items to remove @*/ that.removeItems = function(pos, length) { - if(!length) { //pos is list of ids + Ox.print('removeItems', pos, length) + if (Ox.isUndefined(length)) { // pos is list of ids pos.forEach(function(id) { var p = getPositionById(id); that.removeItems(p, 1); }); - } else { //remove items from pos to pos+length + } else { // remove items from pos to pos+length Ox.range(pos, pos + length).forEach(function(i) { self.selected.indexOf(i) > -1 && deselect(i); self.$items[i].removeElement(); @@ -1667,6 +1665,8 @@ Ox.List = function(options, self) { return id_ == data[key] ? value : id_ }); } + self.options.items[pos][key] = value; + if (pos == 0) Ox.print(self.options.items[pos]) data[key] = value; $item.options({data: data}); return that; diff --git a/source/Ox.UI/js/List/Ox.TreeList.js b/source/Ox.UI/js/List/Ox.TreeList.js index b451f0ea..26eff837 100644 --- a/source/Ox.UI/js/List/Ox.TreeList.js +++ b/source/Ox.UI/js/List/Ox.TreeList.js @@ -33,11 +33,9 @@ Ox.TreeList = function(options, self) { if (self.options.data) { self.options.items = []; - //Ox.print('d', self.options.data, 'i', self.options.items) Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) { self.options.items.push(parseData(key, self.options.data[key])); }); - //Ox.print('d', self.options.data, 'i', self.options.items) } that.$element = Ox.List({ @@ -48,7 +46,7 @@ Ox.TreeList = function(options, self) { max: self.options.max, min: self.options.min, unique: 'id' - }, Ox.extend({}, self)) + }, Ox.copy(self)) .addClass('OxTextList OxTreeList') .css({ width: self.options.width + 'px' @@ -72,6 +70,7 @@ Ox.TreeList = function(options, self) { function constructItem(data) { var $item = $('
'), //.css({width: self.options.width + 'px'}), padding = (data.level + !data.items) * 16 - 8; + if (data.title.indexOf('COUNTRIES') > -1) Ox.print('DATA...', data); if (data.level || !data.items) { $('
') .addClass('OxCell OxTarget') @@ -137,7 +136,8 @@ Ox.TreeList = function(options, self) { function parseData(key, value) { //Ox.print('parseData', key, value) var ret = { - id: Ox.uid(), + expanded: false, + id: Ox.uid().toString(), title: key.toString() + ': ' }, type = Ox.typeOf(value); @@ -148,9 +148,9 @@ Ox.TreeList = function(options, self) { }); } else { ret.title += ( - type == 'function' ? - value.toString().split('{')[0] : - JSON.stringify(value) + type == 'function' + ? value.toString().split('{')[0] + : JSON.stringify(value) ); } return ret; @@ -163,10 +163,14 @@ Ox.TreeList = function(options, self) { items.forEach(function(item, i) { var item_ = Ox.extend({ level: level - }, item, item.items ? { - items: !!item.expanded ? - parseItems(item.items, level + 1) : [] - } : {}); + }, item, item.items + ? { + items: !!item.expanded + ? parseItems(item.items, level + 1) + : [] + } + : {} + ); ret.push(item_); item.items && Ox.merge(ret, item_.items); }); @@ -176,7 +180,6 @@ Ox.TreeList = function(options, self) { function toggleItem(item, expanded) { var $img, pos; item.expanded = expanded; - //getItemById(item.id).expanded = expanded; that.$element.find('.OxItem').each(function() { var $item = $(this); if ($item.data('id') == item.id) { @@ -185,15 +188,19 @@ Ox.TreeList = function(options, self) { return false; } }); + //that.$element.value(item.id, 'expanded', expanded); $img.attr({ src: Ox.UI.getImageURL( 'symbol' + (expanded ? 'Down' : 'Right') ) }); - that.$element.value(item.id, 'expanded', expanded); - expanded ? - that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) : - that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length); + expanded + ? that.$element.addItems( + pos + 1, parseItems(item.items, item.level + 1) + ) + : that.$element.removeItems( + pos + 1, parseItems(item.items, item.level + 1).length + ); } function toggleItems(data) { @@ -209,7 +216,7 @@ Ox.TreeList = function(options, self) { if (key == 'data') { } else if (key == 'width') { - + } };