272 lines
9.5 KiB
JavaScript
272 lines
9.5 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.DocPanel <f> Documentation Panel
|
|
([options[, self]]) -> <o:Ox.SplitPanel> 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 (alternative to items option)
|
|
getModule <f> Returns module for given item
|
|
getSection <f> Returns section for given item
|
|
items <a|[]> Array of doc items (alternative to files option)
|
|
path <s|''> Path prefix
|
|
replace <[[]]|[]> See Ox.SyntaxHighlighter
|
|
resizable <b|true> If true, list is resizable
|
|
resize <a|[128, 256, 384]> List resize positions
|
|
runTests <b|false> If true, run tests
|
|
selected <s|''> Id of the selected item
|
|
showTests <b|false> If true, show test results in list
|
|
showTooltips <b|false> If true, show test result tooltips in list
|
|
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],
|
|
runTests: false,
|
|
selected: '',
|
|
showTests: false,
|
|
showTooltips: false,
|
|
size: 256,
|
|
})
|
|
.options(options || {})
|
|
.update({
|
|
selected: function() {
|
|
selectItem(self.options.selected);
|
|
}
|
|
});
|
|
|
|
self.results = {};
|
|
|
|
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.files = Ox.makeArray(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();
|
|
self.options.runTests && runTests();
|
|
that.triggerEvent('load', {items: docItems});
|
|
});
|
|
} else {
|
|
renderList();
|
|
self.options.runTests && runTests();
|
|
}
|
|
|
|
function getIcon(id, expanded) {
|
|
var $icon = null, results = self.results[id];
|
|
if (!Ox.isEmpty(self.results)) {
|
|
$icon = Ox.Theme.getColorImage(
|
|
'symbol' + (expanded === true ? 'Down' : expanded === false ? 'Right' : 'Center'),
|
|
!results ? 'none' : results.failed === 0 ? 'passed' : 'failed',
|
|
self.options.showTooltips ? getTooltip(results) : null
|
|
);
|
|
} else if (!Ox.endsWith(id, '/')) {
|
|
$icon = $('<img>').attr({src: Ox.UI.getImageURL('symbolCenter')});
|
|
}
|
|
return $icon;
|
|
}
|
|
|
|
function getItemByName(name) {
|
|
var item = {};
|
|
Ox.forEach(self.options.items, function(v) {
|
|
if (v.name == name) {
|
|
item = v;
|
|
Ox.Break();
|
|
}
|
|
});
|
|
return item;
|
|
}
|
|
|
|
function getTooltip(results) {
|
|
return results
|
|
? results.passed + ' test'
|
|
+ (results.passed == 1 ? '' : 's') + ' passed'
|
|
+ (results.failed
|
|
? ', ' + results.failed + ' test'
|
|
+ (results.failed == 1 ? '' : 's') + ' failed'
|
|
: ''
|
|
)
|
|
: 'No tests';
|
|
}
|
|
|
|
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, results, 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.module + '/' + (
|
|
docItem.section ? docItem.section + '/' : ''
|
|
) + 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({
|
|
icon: self.options.showTests
|
|
? getIcon
|
|
: Ox.UI.getImageURL('symbolCenter'),
|
|
items: treeItems,
|
|
selected: self.options.selected
|
|
? [self.options.selected] : '',
|
|
width: self.options.size
|
|
})
|
|
.bindEvent({
|
|
select: function(data) {
|
|
selectItem(data.ids.length ? data.ids[0] : '')
|
|
}
|
|
});
|
|
self.$panel.replaceElement(0, self.$list);
|
|
selectItem(self.options.selected);
|
|
}
|
|
|
|
function runTests() {
|
|
setTimeout(function() {
|
|
Ox.load({Geo: {}, Image: {}, Unicode: {}}, function() {
|
|
Ox.test(self.options.items, function(results) {
|
|
results.forEach(function(result) {
|
|
var item = getItemByName(result.name),
|
|
passed = result.passed ? 'passed' : 'failed';
|
|
item.tests[Ox.indexOf(item.tests, function(test) {
|
|
return test.statement == result.statement;
|
|
})] = result;
|
|
['', item.module + '/'].concat(
|
|
item.section ? item.module + '/' + item.section + '/' : [],
|
|
item.module + '/' + (item.section ? item.section + '/' : '') + item.name
|
|
).forEach(function(key) {
|
|
self.results[key] = self.results[key] || {passed: 0, failed: 0};
|
|
self.results[key][passed]++;
|
|
});
|
|
});
|
|
renderList();
|
|
});
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
function selectItem(id) {
|
|
var item, name;
|
|
if (id && !Ox.contains(id, '/')) {
|
|
name = id;
|
|
item = getItemByName(name);
|
|
id = item ? item.module + '/' + (
|
|
item.section ? item.section + '/' : ''
|
|
) + item.name : '';
|
|
}
|
|
if (id) {
|
|
self.options.selected = id;
|
|
if (!Ox.endsWith(self.options.selected, '/')) {
|
|
if (!item) {
|
|
name = self.options.selected.split('/').slice(-1);
|
|
item = getItemByName(name);
|
|
}
|
|
self.$list.options({selected: [self.options.selected]});
|
|
self.$page = Ox.DocPage({
|
|
item: item,
|
|
replace: self.options.replace
|
|
});
|
|
that.$element.replaceElement(1, self.$page);
|
|
that.triggerEvent('select', {id: name});
|
|
}
|
|
} else {
|
|
self.$page.empty().append(self.options.element);
|
|
}
|
|
}
|
|
|
|
function sortByTitle(a, b) {
|
|
var a = Ox.stripTags(a.title).toLowerCase(),
|
|
b = Ox.stripTags(b.title).toLowerCase();
|
|
return a < b ? -1 : a > b ? 1 : 0;
|
|
}
|
|
|
|
return that;
|
|
|
|
};
|