'use strict'; /*@ Ox.DocPanel Documentation Panel () -> Documentation Panel (options) -> Documentation Panel (options, self) -> Documentation Panel options Options object 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 items Array of doc items (alternative to files options) path Path prefix replace <[[]]|[]> See Ox.SyntaxHighlighter 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) { 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 || {}); 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 = Ox.merge(docItems, 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; return false; } }); 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; } self.setOption = function(key, value) { if (key == 'selected') { selectItem(value); } }; return that; };