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

'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;

};