faster doc panel: allow for caching of doc items
This commit is contained in:
rolux
parent
1651b3f565
commit
ffa8f1738a
1 changed files with 85 additions and 93 deletions
|
|
@ -6,18 +6,20 @@ Ox.DocPanel <f> Documentation Panel
|
|||
(options) -> <f> Documentation Panel
|
||||
(options, self) -> <f> Documentation Panel
|
||||
options <o> Options object
|
||||
collapsible <b|true> can be collabsed
|
||||
collapsible <b|false> If true, the list can be collabsed
|
||||
element <e> Default content
|
||||
files <a|[]> files to parse for docs
|
||||
getModule <f> returns module for given item
|
||||
getSection <f> returns section for given item
|
||||
path <s|''> path prefix
|
||||
files <a|[]> Files to parse for docs
|
||||
getModule <f> Returns module for given item
|
||||
getSection <f> Returns section for given item
|
||||
items <a|[]> Array of doc items (alternative to files options)
|
||||
path <s|''> Path prefix
|
||||
replace <[[]]|[]> See Ox.SyntaxHighlighter
|
||||
resizable <b|true> is resizable
|
||||
resize <a|[128, 256, 384]> resize positions
|
||||
size <s|256> default size
|
||||
self <o> shared private variable
|
||||
load <!> fired once all docs are loaded
|
||||
resizable <b|true> If true, list is resizable
|
||||
resize <a|[128, 256, 384]> List resize positions
|
||||
size <s|256> Default list size
|
||||
self <o> 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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue