From c3b59a62fec013815486c1fdedcab32e0e8d876e Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 5 Sep 2011 05:40:44 +0000 Subject: [PATCH] fixing a bug where in a list, the click target loop would not exit when items are added or removed on click --- demos/doc2/js/doc.js | 5 ++-- demos/treelist/index.html | 10 ++++++++ demos/treelist/js/treelist.js | 36 +++++++++++++++++++++++++++++ source/Ox.UI/js/Core/Ox.DocPage.js | 1 + source/Ox.UI/js/Core/Ox.DocPanel.js | 4 ++++ source/Ox.UI/js/Core/Ox.Element.js | 7 ------ source/Ox.UI/js/List/Ox.List.js | 22 ++++++++++-------- source/Ox.UI/js/List/Ox.TreeList.js | 8 +++---- 8 files changed, 71 insertions(+), 22 deletions(-) create mode 100644 demos/treelist/index.html create mode 100644 demos/treelist/js/treelist.js diff --git a/demos/doc2/js/doc.js b/demos/doc2/js/doc.js index 47c1d058..dacf4305 100644 --- a/demos/doc2/js/doc.js +++ b/demos/doc2/js/doc.js @@ -3,7 +3,7 @@ Ox.load('UI', { theme: 'classic' }, function() { Ox.Theme('classic'); - $.getJSON(Ox.UI.PATH + 'json/Ox.UI.json', function(files) { + $.getJSON(Ox.UI.PATH + 'json/Ox.UI.files.json', function(files) { doc = Ox.DocPanel({ files: Ox.merge([ 'Ox.js', @@ -25,8 +25,9 @@ Ox.load('UI', { doc.selectItem(document.location.hash.substring(1)); }, select: function(data) { - if(data.ids) + if (data.ids) { document.location.hash = data.ids[0]; + } } }); doc.appendTo(Ox.UI.$body); diff --git a/demos/treelist/index.html b/demos/treelist/index.html new file mode 100644 index 00000000..0b0c9c82 --- /dev/null +++ b/demos/treelist/index.html @@ -0,0 +1,10 @@ + + + + OxJS TreeList Demo + + + + + + \ No newline at end of file diff --git a/demos/treelist/js/treelist.js b/demos/treelist/js/treelist.js new file mode 100644 index 00000000..b853922c --- /dev/null +++ b/demos/treelist/js/treelist.js @@ -0,0 +1,36 @@ +Ox.load('UI', {debug: true}, function() { + + Ox.load('Geo', function() { + + var $treeList = new Ox.TreeList({ + data: {'Ox.COUNTRIES': Ox.COUNTRIES} + }), + $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/Core/Ox.DocPage.js b/source/Ox.UI/js/Core/Ox.DocPage.js index 5074f01a..843e262a 100644 --- a/source/Ox.UI/js/Core/Ox.DocPage.js +++ b/source/Ox.UI/js/Core/Ox.DocPage.js @@ -34,6 +34,7 @@ Ox.DocPage = function(options, self) { }); function getItem(item, level, name) { + Ox.print('getItem', item, level, name) var $elements = [$('
') .css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'}) .html( diff --git a/source/Ox.UI/js/Core/Ox.DocPanel.js b/source/Ox.UI/js/Core/Ox.DocPanel.js index 8e52a485..94813201 100644 --- a/source/Ox.UI/js/Core/Ox.DocPanel.js +++ b/source/Ox.UI/js/Core/Ox.DocPanel.js @@ -61,9 +61,11 @@ Ox.DocPanel = function(options, self) { }); function loadList(callback) { + var counter = 0, length = self.options.files.length; docItems = []; + self.options.files.forEach(function(file) { Ox.doc(self.options.path + file, function(fileItems) { docItems = Ox.merge(docItems, fileItems); @@ -134,6 +136,7 @@ Ox.DocPanel = function(options, self) { */ that.$element.replaceElement(0, self.$list); } + } function getItemByName(name) { @@ -151,6 +154,7 @@ Ox.DocPanel = function(options, self) { var selected; if (data.ids.length) { selected = data.ids[0]; + Ox.print('selected', data.ids) if (selected[0] != '_') { self.$page = Ox.DocPage({ item: getItemByName(selected) diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index c362906b..9428c599 100644 --- a/source/Ox.UI/js/Core/Ox.Element.js +++ b/source/Ox.UI/js/Core/Ox.Element.js @@ -54,13 +54,6 @@ Ox.Element Basic UI element object Ox.Element = function(options, self) { - /* - // allow for 'Ox.Element()' instead of 'Ox.Element()' - if (!(this instanceof arguments.callee)) { - return new arguments.callee(options, self); - } - */ - // create private object self = self || {}; // create defaults and options objects diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index e925fff7..8b3ad50f 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -72,8 +72,6 @@ Ox.List = function(options, self) { .options(options || {}) .scroll(scroll); - //that.$content.mousedown(_mousedown); - that.$content.bindEvent({ mousedown: mousedown, singleclick: singleclick, @@ -94,7 +92,6 @@ Ox.List = function(options, self) { drag: move, dragend: moveend }); - } // fixme: without this, horizontal lists don't get their full width @@ -169,7 +166,7 @@ Ox.List = function(options, self) { ] = addNextToSelection; } if (self.options.orientation == 'vertical') { - $.extend(self.keyboardEvents, { + Ox.extend(self.keyboardEvents, { key_left: function() { triggerToggleEvent(false); }, @@ -178,7 +175,7 @@ Ox.List = function(options, self) { } }); } else if (self.options.orientation == 'both') { - $.extend(self.keyboardEvents, { + Ox.extend(self.keyboardEvents, { key_down: selectBelow, key_up: selectAbove }); @@ -458,13 +455,20 @@ Ox.List = function(options, self) { function findItemPosition(e) { var $element = $(e.target), + $parent, position = -1; - while (!$element.hasClass('OxTarget') && !$element.hasClass('OxPage') && !$element.is('body')) { - $element = $element.parent(); + while ( + !$element.hasClass('OxTarget') && !$element.hasClass('OxPage') + && ($parent = $element.parent()).length + ) { + $element = $parent; } if ($element.hasClass('OxTarget')) { - while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) { - $element = $element.parent(); + while ( + !$element.hasClass('OxItem') && !$element.hasClass('OxPage') + && ($parent = $element.parent()).length + ) { + $element = $parent; } if ($element.hasClass('OxItem')) { position = $element.data('position'); diff --git a/source/Ox.UI/js/List/Ox.TreeList.js b/source/Ox.UI/js/List/Ox.TreeList.js index f67c321c..19a6c498 100644 --- a/source/Ox.UI/js/List/Ox.TreeList.js +++ b/source/Ox.UI/js/List/Ox.TreeList.js @@ -53,8 +53,8 @@ Ox.TreeList = function(options, self) { .css({ width: self.options.width + 'px' }) - .click(clickItem) .bindEvent({ + anyclick: clickItem, toggle: toggleItems }); @@ -142,7 +142,7 @@ Ox.TreeList = function(options, self) { }, type = Ox.typeOf(value); if (type == 'array' || type == 'object') { - ret.title += Ox.toTitleCase(type); + ret.title += Ox.toTitleCase(type) + ' [' + Ox.len(value) + ']'; ret.items = Ox.map(Ox.sort(Ox.keys(value)), function(k) { return parseData(k, value[k]); }); @@ -177,8 +177,8 @@ Ox.TreeList = function(options, self) { var $img, pos; item.expanded = expanded; //getItemById(item.id).expanded = expanded; - $.each(that.$element.find('.OxItem'), function(i, v) { - var $item = $(v); + $.each(that.$element.find('.OxItem'), function() { + var $item = $(this); if ($item.data('id') == item.id) { $img = $item.find('.OxToggle'); pos = $item.data('position');