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

'use strict';

/*@
Ox.DocPage <f:Ox.Element> DocPage
    () ->              <o> DocPage object
    (options) ->       <o> DocPage object
    (options, self) -> <o> DocPage object
    options <o> Options object
        item <o> doc item
        replace <[[]]|[]> See Ox.SyntaxHighlighter
    self    <o> Shared private variable
@*/
Ox.DocPage = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            item: {},
            replace: []
        })
        .options(options || {})
        .css({
            overflow: 'auto'
        });

    self.$toolbar = Ox.Bar({size: 24});

    self.$title = Ox.Label({
            style: 'square',
            title: self.options.item.name
        })
        .addClass('OxMonospace')
        .css({float: 'left', height: '13px', paddingTop: '1px', margin: '4px'})
        .appendTo(self.$toolbar)

    self.$examplesMenu = Ox.MenuButton({
            items: [
                {id: 'foo', title: 'Not yet...', disabled: true}
            ],
            title: 'Examples...',
            width: 128
        })
        .css({float: 'right', margin: '4px 4px 4px 2px'})
        .bindEvent({
            click: function(data) {
                that.triggerEvent('select', {id: data.id});
            }
        })
        .appendTo(self.$toolbar);

    self.$referencesMenu = Ox.MenuButton({
            items: [
                {id: 'foo', title: 'Not yet...', disabled: true}
            ],
            title: 'References...',
            width: 128
        })
        .css({float: 'right', margin: '4px 2px 4px 2px'})
        .bindEvent({
            click: function(data) {
                that.triggerEvent('select', {id: data.id});
            }
        })
        .appendTo(self.$toolbar);

    self.$page = Ox.Container()
        .addClass('OxDocPage OxDocument');

    that.setElement(
        Ox.SplitPanel({
            elements: [
                {element: self.$toolbar, size: 24},
                {element: self.$page}
            ],
            orientation: 'vertical'
        })
    )

    getItem(self.options.item, 0).forEach(function($element) {
        self.$page.append($element);
    });

    function getItem(item, level, name) {
        Ox.Log('Core', 'getItem', item, level, name)
        var $elements = [$('<div>')
            .css({paddingLeft: (level ? level * 32 - 16 : 0) + 'px'})
            .html(
                '<code><b>' + (name || item.name) + '</b> '
                + '&lt;' + item.types.join('&gt;</code> or <code>&lt;') + '&gt; </code>'
                + (item['default'] ? '(default: <code>' + item['default'] + '</code>) ' : '')
                + Ox.parseHTML(item.summary)
            )
        ];
        [
            'description', 'usage', 'arguments', 'properties',
            'events', 'examples', 'source'
        ].forEach(function(section) {
            var className = 'OxLine' + Ox.uid();
            if (item[section]) {
                if (section == 'description') {
                    $elements.push($('<div>')
                        .css({
                            paddingTop: (level ? 0 : 8) + 'px',
                            borderTopWidth: level ? 0 : '1px',
                            marginTop: (level ? 0 : 8) + 'px',
                            marginLeft: (level * 32) + 'px',
                        })
                        .html(Ox.parseHTML(item.description))
                    );
                } else {
                    $elements.push($('<div>')
                        .css({
                            paddingTop: (level ? 0 : 8) + 'px',
                            borderTopWidth: level ? 0 : '1px',
                            marginTop: (level ? 0 : 8) + 'px',
                            marginLeft: (level * 32) + 'px',
                        })
                        .append(
                            $('<img>')
                                .attr({src: Ox.UI.getImageURL('symbolDown')})
                                .css({
                                    width: '12px',
                                    height: '12px',
                                    margin: '0 4px -1px 0'
                                })
                                .click(function() {
                                    var $this = $(this),
                                        isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolDown');
                                    $this.attr({
                                        src: isExpanded ?
                                        Ox.UI.getImageURL('symbolRight') :
                                        Ox.UI.getImageURL('symbolDown')
                                    });
                                    $('.' + className).each(function() {
                                        var $this = $(this);
                                        $this[isExpanded ? 'addClass' : 'removeClass'](className + 'Hidden');
                                        if (isExpanded) {
                                            $this.hide();
                                        } else {
                                            var hidden = false;
                                            Ox.forEach(this.className.split(' '), function(v) {
                                                if (/Hidden$/.test(v)) {
                                                    hidden = true;
                                                    Ox.break();
                                                }
                                            });
                                            if (!hidden) {
                                                $this.show()
                                            }
                                        }
                                    });
                                })
                        )
                        .append('<span class="OxSection">' + Ox.toTitleCase(section) + '</span>')
                    );
                    if (section == 'examples') {
                        item.examples.forEach(function(example) {
                            $elements.push($('<div>')
                                .addClass(className)
                                .css({marginLeft: (level * 32 + 16) + 'px'})
                                .html(
                                    '<code><b>&gt;&nbsp;'
                                    + Ox.encodeHTML(example.statement)
                                        .replace(/ /g, '&nbsp;')
                                        .replace(/\n/g, '<br/>\n&nbsp;&nbsp;')
                                    + '</b></code>'
                                )
                            );
                            example.result && $elements.push($('<div>')
                                .addClass(className)
                                .css({marginLeft: (level * 32 + 16) + 'px'})
                                .html(
                                    '<code>' + Ox.encodeHTML(example.result) + '</code>'
                                )
                            )
                        });
                    } else if (section == 'source') {
                        // fixme: not the right place to fix path
                        $elements.push($('<div>')
                            .addClass(className)
                            .css({marginLeft: 16 + 'px'})
                            .html(
                                '<code><b>' + self.options.item.file.replace(Ox.PATH, '')
                                + '</b>:' + self.options.item.line + '</code>'
                            )
                        );
                        $elements.push(
                            Ox.SyntaxHighlighter({
                                replace: self.options.replace,
                                showLineNumbers: true,
                                // fixme: silly
                                source: item.source.map(function(token) {
                                    return token.source;
                                }).join(''),
                                offset: self.options.item.line
                            })
                            .addClass(className)
                            .css({
                                borderWidth: '1px',
                                marginTop: '8px',
                            })
                        );
                    } else {
                        item[section].forEach(function(v) {
                            var name = section == 'usage' ?
                                item.name + v.name + ' </b></code>returns<code> <b>' : null;
                            $elements = Ox.merge(
                                $elements,
                                Ox.map(getItem(v, level + 1, name), function($element) {
                                    return $element.addClass(className);
                                })
                            );
                        });
                    }
                }
            }
        });
        return $elements;
    }

    return that;

};