oxjs/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js

// vim: et:ts=4:sw=4:sts=4:ft=js

/*@

@*/

Ox.SyntaxHighlighter = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                height: 40,
                lineLength: 80,         //@ number of characters per line
                offset: 1,              //@ first line number
                showLineNumbers: false,
                showLinebreaks: false,  //@ show linebreak symbols
                showTabs: false,        //@ show tab symbols
                showWhitespace: false,  //@ show irregular leading or trailing whitespace
                source: '',             //@ JavaScript source
                stripComments: false,   //@ strip all comments
                stripLinebreaks: false, //@ strip multiple linebreaks, NOT IMPLEMENTED
                stripWhitespace: false, //@ strip all whitespace, NOT IMPLEMENTED
                tabLength: 4,           //@ number of spaces per tab
                width: 80
            })
            .options(options || {})
            .addClass('OxSyntaxHighlighter');

    renderSource();

    function encodeToken(source, token) {
        var linebreak = '<br/>',
            tab = Ox.repeat('&nbsp;', self.options.tabLength);
        if (self.options.showLinebreaks) {
            if (token.type == 'linebreak') {
                linebreak = '\u21A9' + linebreak;
            } else {
                linebreak = '<span class="OxLinebreak">\u21A9</span>' + linebreak;
            }
        }
        if (self.options.showTabs) {
            tab = '<span class="OxTab">\u2192' + tab.substr(6) + '</span>';
        }
        return Ox.encodeHTML(source)
            .replace(/ /g, '&nbsp;')
            .replace(/\t/g, tab)
            .replace(/\n/g, linebreak);
    }

    function renderSource() {
        self.options.source = self.options.source
            .replace(/\r\n/g, '\n')
            .replace(/\r/g, '\n');
        self.cursor = 0;
        self.source = '';
        self.tokens = Ox.tokenize(self.options.source);
        self.tokens.forEach(function(token, i) {
            var classNames,
                source = self.options.source.substr(token.offset, token.length);
            if (
                !(self.options.stripComments && token.type == 'comment')
            ) {
                classNames = 'Ox' + Ox.toTitleCase(token.type);
                if (self.options.showWhitespace && token.type == 'whitespace') {
                    if (isAfterLinebreak() && hasIrregularSpaces()) {
                        classNames += ' OxLeading'
                    } else if (isBeforeLinebreak()) {
                        classNames += ' OxTrailing'
                    }
                }
                self.source += '<span class="' + classNames + '">' +
                    encodeToken(source, token.type) + '</span>';
            }
            self.cursor += token.length;
            function isAfterLinebreak() {
                return i == 0 ||
                    self.tokens[i - 1].type == 'linebreak';
            }
            function isBeforeLinebreak() {
                return i == self.tokens.length - 1 ||
                    self.tokens[i + 1].type == 'linebreak';
            }
            function hasIrregularSpaces() {
                return source.split('').reduce(function(prev, curr) {
                    return prev + (curr == ' ' ? 1 : 0);
                }, 0) % self.options.tabLength;
            }
        });
        self.lines = self.source.split('<br/>');

        that.empty();
        if (self.options.showLineNumbers) {
            self.$lineNumbers = new Ox.Element()
            .addClass('OxLineNumbers')
            .css({
                display: 'table-cell',
                padding: '4px',
            })
            .html(
                Ox.range(self.lines.length).map(function(line) {
                    return (line + self.options.offset);
                }).join('<br/>')
            )
            .appendTo(that);
        }
        self.$source = new Ox.Element()
            .addClass('OxSourceCode')
            .css({
                display: 'table-cell',
                padding: '4px'
            })
            .html(self.source)
            .appendTo(that);
    }

    self.setOption = function(key, value) {
        renderSource();
    };

    return that;

};