oxjs/source/Ox.UI/js/Code/DocPanel.js

195 lines
6.2 KiB
JavaScript

'use strict';
/*@
Ox.DocPanel <f:Ox.Element> Documentation Panel
() -> <f> Documentation Panel
(options) -> <f> Documentation Panel
(options, self) -> <f> Documentation Panel
options <o> Options object
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
items <a|[]> Array of doc items (alternative to files options)
path <s|''> Path prefix
replace <[[]]|[]> See Ox.SyntaxHighlighter
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) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
collapsible: false,
element: '',
files: [],
getModule: function(item) {
return item.file.replace(self.options.path, '');
},
getSection: function(item) {
return item.section;
},
items: [],
path: '',
replace: [],
resizable: false,
resize: [128, 256, 384],
selected: '',
size: 256
})
.options(options || {})
.update({
selected: function() {
selectItem(self.options.selected);
}
});
self.$list = Ox.Element();
self.$page = Ox.Element();
that.setElement(
self.$panel = Ox.SplitPanel({
elements: [
{
collapsible: self.options.collapsible,
element: self.$list,
resizable: self.options.resizable,
resize: self.options.resize,
size: self.options.size
},
{
element: self.$page
}
],
orientation: 'horizontal'
})
);
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 = docItems.concat(fileItems);
++counter == length && callback(docItems);
});
});
}
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.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] : '')
}
});
that.$element.replaceElement(0, self.$list);
selectItem(self.options.selected);
}
function getItemByName(name) {
var item = {};
Ox.forEach(self.options.items, function(v) {
if (v.name == name) {
item = v;
Ox.Break();
}
});
return item;
}
function selectItem(id) {
if (id) {
self.options.selected = id;
if (self.options.selected[0] != '_') {
self.$list.options({selected: [id]});
self.$page = Ox.DocPage({
item: getItemByName(self.options.selected),
replace: self.options.replace
});
that.$element.replaceElement(1, self.$page);
that.triggerEvent('select', {id: self.options.selected});
}
} else {
self.$page.empty().append(self.options.element);
}
}
function sortByTitle(a, b) {
return a.title < b.title ? -1
: a.title > b.title ? 1
: 0;
}
return that;
};