/*@ Ox.DocPanel Documentation Panel () -> Documentation Panel (options) -> Documentation Panel (options, self) -> Documentation Panel options Options object collapsible can be collabsed files files to parse for docs getModule returns module for given item getSection returns section for given item path path prefix resizable is resizable resize resize positions size default size self shared private variable load fired once all docs are loaded @*/ Ox.DocPanel = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ collapsible: true, files: [], getModule: function(item) { return item.file.replace(self.options.path, ''); }, getSection: function(item) { return item.section; }, path: '', resizable: true, resize: [128, 256, 384], size: 256 }) .options(options || {}); self.$list = Ox.Element(); self.$page = Ox.Element(); that.$element = 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' }); loadList(function(docItems) { self.items = docItems; that.triggerEvent('load', {}); }); function loadList(callback) { var counter = 0, length = self.options.files.length; docItems = []; 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); } }); }); function makeTree(docItems) { var treeItems = []; docItems.forEach(function(docItem) { var moduleIndex, sectionIndex; docItem.module = self.options.getModule(docItem); moduleIndex = Ox.getPositionById(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.getPositionById( 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, width: self.options.width }) .bindEvent({ select: selectItem }); // fixme /* var $foo = Ox.Container(); self.$list.appendTo($foo); that.$element.replaceElement(0, $foo); */ that.$element.replaceElement(0, self.$list); } } function getItemByName(name) { var item = {}; Ox.forEach(self.items, function(v) { if (v.name == name) { item = v; return false; } }); return item; } function selectItem(data) { var selected; if (data.ids.length) { selected = data.ids[0]; if (selected[0] != '_') { self.$page = Ox.DocPage({ item: getItemByName(selected) }); that.$element.replaceElement(1, self.$page); that.triggerEvent('select', { id: selected }); } } } function sortByTitle(a, b) { var ret = 0; if (a.title < b.title) { ret = -1; } else if (a.title > b.title) { ret = 1; } return ret; } /*@ selectItem select item (id) -> select an item id if of item to select @*/ that.selectItem = function(id) { self.$list.triggerEvent('select', {'ids': [id]}); } return that; };