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

'use strict';

/*@
Ox.SourceViewer <f:Ox.Container> Source Viewer
    (options[, self]) -> <o> Source Viewer
    options <o> Options
    self <o> Shared private variable
@*/

Ox.SourceViewer = function(options, self) {

    self = self || {};
    var that = Ox.Container({}, self)
        .defaults({
            file: '',
            replaceCode: [],
            replaceComment: []
        })
        .options(options)
        .addClass('OxSourceViewer');

    self.options.replaceComment.unshift(
        // removes indentation inside <pre> tags
        [
            /<pre>([\s\S]+)<\/pre>/g,
            function(pre, text) {
                var lines = trim(text).split('\n'),
                    indent = Ox.min(lines.map(function(line) {
                        var match = line.match(/^\s+/);
                        return match ? match[0].length : 0;
                    }));
                return '<pre>' + lines.map(function(line) {
                    return line.slice(indent);
                }).join('\n') + '</pre>';
            }
        ]
    );

    self.$table = $('<table>').appendTo(that.$content);

    Ox.get(self.options.file, function(source) {
        var sections = [{comment: '', code: ''}];
        Ox.tokenize(source).forEach(function(token, i) {
            var type = token.type == 'comment' ? 'comment' : 'code';
            if (!/^\/\//.test(token.value)) {
                if (type == 'comment') {
                    i && sections.push({comment: '', code: ''});
                    token.value = expand(trim(token.value.slice(2, -2)));
                    self.options.replaceComment.forEach(function(replace) {
                        token.value = token.value.replace(
                            replace[0], replace[1]
                        );
                    });
                }
                Ox.last(sections)[type] += token.value;
            }
        });
        sections.forEach(function(section) {
            var $section = $('<tr>')
                    .appendTo(self.$table),
                $comment = $('<td>')
                    .addClass('OxComment OxSerif')
                    .html(Ox.addLinks(section.comment, true))
                    .appendTo($section),
                $code = $('<td>')
                    .addClass('OxCode')
                    .append(
                        Ox.SyntaxHighlighter({
                            replace: self.options.replaceCode,
                            source: trim(section.code)
                        })
                    )
                    .appendTo($section);
        });
    });

    function expand(str) {
        return str.replace(/(\W)`([\s\S]+?)`/g, function(match, outer, inner) {
            return outer + '<code>' + Ox.encodeHTMLEntities(inner) + '</code>';
        })
    }

    function trim(str) {
        // removes leading or trailing empty line
        return str.replace(/^\s*\n/, '').replace(/\n\s*$/, '');
    }

    return that;

};