From ffa8f1738a77c682efa8b75ebaba715053a2a4b1 Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 9 Apr 2012 10:39:56 +0200 Subject: [PATCH] faster doc panel: allow for caching of doc items --- source/Ox.UI/js/Code/Ox.DocPanel.js | 178 +++++++++++++--------------- 1 file changed, 85 insertions(+), 93 deletions(-) diff --git a/source/Ox.UI/js/Code/Ox.DocPanel.js b/source/Ox.UI/js/Code/Ox.DocPanel.js index c0b8f350..59884908 100644 --- a/source/Ox.UI/js/Code/Ox.DocPanel.js +++ b/source/Ox.UI/js/Code/Ox.DocPanel.js @@ -6,18 +6,20 @@ Ox.DocPanel Documentation Panel (options) -> Documentation Panel (options, self) -> Documentation Panel options Options object - collapsible can be collabsed + collapsible If true, the list can be collabsed element Default content - files files to parse for docs - getModule returns module for given item - getSection returns section for given item - path path prefix + files Files to parse for docs + getModule Returns module for given item + getSection Returns section for given item + items Array of doc items (alternative to files options) + path Path prefix replace <[[]]|[]> See Ox.SyntaxHighlighter - resizable is resizable - resize resize positions - size default size - self shared private variable - load fired once all docs are loaded + resizable If true, list is resizable + resize List resize positions + size Default list size + self Shared private variable + load Fires once all docs are loaded + items [o] Array of doc items @*/ Ox.DocPanel = function(options, self) { @@ -34,6 +36,7 @@ Ox.DocPanel = function(options, self) { getSection: function(item) { return item.section; }, + items: [], path: '', replace: [], resizable: false, @@ -44,8 +47,7 @@ Ox.DocPanel = function(options, self) { .options(options || {}); self.$list = Ox.Element(); - self.$page = Ox.Element().addClass('OxDocument').append(self.options.element); - Ox.print('ELEMENT', self.options.element) + self.$page = Ox.Element().append(self.options.element); that.setElement( self.$panel = Ox.SplitPanel({ @@ -65,98 +67,93 @@ Ox.DocPanel = function(options, self) { }) ); - loadList(function(docItems) { - self.items = docItems; - self.options.selected && selectItem(self.options.selected); - that.triggerEvent('load', {}); - }); - - function loadList(callback) { + if (self.options.files) { + self.options.items = Ox.doc(self.options.files.map(function(file) { + return self.options.path + file; + }), function(docItems) { + self.options.items = docItems; + renderList(); + that.triggerEvent('load', {items: docItems}); + }); + } else { + renderList(); + } + function parseFiles(callback) { var counter = 0, docItems = [], length = self.options.files.length; - self.options.files.forEach(function(file) { Ox.doc(self.options.path + file, function(fileItems) { docItems = Ox.merge(docItems, fileItems); - if (++counter == length) { - makeTree(docItems); - callback(docItems); - } + ++counter == length && callback(docItems); }); }); + } - function makeTree(docItems) { - var treeItems = []; - docItems.forEach(function(docItem) { - var moduleIndex, sectionIndex; - docItem.module = self.options.getModule(docItem); - moduleIndex = Ox.getIndexById(treeItems, '_' + docItem.module); - if (moduleIndex == -1) { - treeItems.push({ - id: '_' + docItem.module, + function renderList() { + var treeItems = []; + self.options.items.forEach(function(docItem) { + var moduleIndex, sectionIndex; + docItem.module = self.options.getModule(docItem); + moduleIndex = Ox.getIndexById(treeItems, '_' + docItem.module); + if (moduleIndex == -1) { + treeItems.push({ + id: '_' + docItem.module, + items: [], + title: docItem.module + }); + moduleIndex = treeItems.length - 1; + } + docItem.section = self.options.getSection(docItem); + if (docItem.section) { + sectionIndex = Ox.getIndexById( + treeItems[moduleIndex].items, + '_' + docItem.module + '_' + docItem.section + ); + if (sectionIndex == -1) { + treeItems[moduleIndex].items.push({ + id: '_' + docItem.module + '_' + docItem.section, items: [], - title: docItem.module + title: docItem.section }); - moduleIndex = treeItems.length - 1; + sectionIndex = treeItems[moduleIndex].items.length - 1; } - docItem.section = self.options.getSection(docItem); - if (docItem.section) { - sectionIndex = Ox.getIndexById( - treeItems[moduleIndex].items, - '_' + docItem.module + '_' + docItem.section - ); - if (sectionIndex == -1) { - treeItems[moduleIndex].items.push({ - id: '_' + docItem.module + '_' + docItem.section, - items: [], - title: docItem.section - }); - sectionIndex = treeItems[moduleIndex].items.length - 1; - } + } + ( + docItem.section + ? treeItems[moduleIndex].items[sectionIndex] + : treeItems[moduleIndex] + ).items.push({ + id: docItem.name, + title: docItem.name + }); + }); + treeItems.sort(sortByTitle); + treeItems.forEach(function(item) { + item.items.sort(sortByTitle); + item.items.forEach(function(subitem) { + subitem.items.sort(sortByTitle); + }); + }); + self.$list = Ox.TreeList({ + items: treeItems, + selected: self.options.selected + ? [self.options.selected] : '', + width: self.options.size - Ox.UI.SCROLLBAR_SIZE + }) + .bindEvent({ + select: function(data) { + selectItem(data.ids.length ? data.ids[0] : '') } - ( - docItem.section - ? treeItems[moduleIndex].items[sectionIndex] - : treeItems[moduleIndex] - ).items.push({ - id: docItem.name, - title: docItem.name - }); }); - treeItems.sort(sortByTitle); - treeItems.forEach(function(item) { - item.items.sort(sortByTitle); - item.items.forEach(function(subitem) { - subitem.items.sort(sortByTitle); - }); - }); - self.$list = Ox.TreeList({ - items: treeItems, - selected: self.options.selected - ? [self.options.selected] : '', - width: self.options.size - Ox.UI.SCROLLBAR_SIZE - }) - .bindEvent({ - select: function(data) { - selectItem(data.ids.length ? data.ids[0] : '') - } - }); - // fixme - /* - var $foo = Ox.Container(); - self.$list.appendTo($foo); - that.$element.replaceElement(0, $foo); - */ - that.$element.replaceElement(0, self.$list); - } - + that.$element.replaceElement(0, self.$list); + selectItem(self.options.selected); } function getItemByName(name) { var item = {}; - Ox.forEach(self.items, function(v) { + Ox.forEach(self.options.items, function(v) { if (v.name == name) { item = v; return false; @@ -170,7 +167,6 @@ Ox.DocPanel = function(options, self) { self.options.selected = id; if (self.options.selected[0] != '_') { self.$list.options({selected: [id]}); - Ox.print('OVERWRITTING') self.$page = Ox.DocPage({ item: getItemByName(self.options.selected), replace: self.options.replace @@ -182,13 +178,9 @@ Ox.DocPanel = function(options, self) { } function sortByTitle(a, b) { - var ret = 0; - if (a.title < b.title) { - ret = -1; - } else if (a.title > b.title) { - ret = 1; - } - return ret; + return a.title < b.title ? -1 + : a.title > b.title ? 1 + : 0; } self.setOption = function(key, value) {