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

'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.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();
            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;

};