Ox.tokenize, Ox.SyntaxHighlighter (+demo)

source/Ox.UI/css/Ox.UI.css

@@ -1437,6 +1437,34 @@ Scrollbars
     -webkit-border-radius: 6px;
 }
 
+/*
+================================================================================
+SyntaxHightlighter
+================================================================================
+*/
+
+.OxSyntaxHighlighter {
+    position: absolute;
+    overflow: auto;
+}
+.OxSyntaxHighlighter > div {
+    position: absolute;
+    font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
+    line-height: 14px;
+}
+.OxSyntaxHighlighter > .OxLineNumbers {
+    text-align: right;
+}
+.OxSyntaxHighlighter > .OxSourceCode {
+    //display: table-cell;
+    -moz-user-select: text;
+    -webkit-user-select: text;
+}
+.OxSyntaxHighlighter > .OxSourceCode .OxLinebreak {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
 /*
 ================================================================================
 Video

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

@@ -0,0 +1,137 @@
+// vim: et:ts=4:sw=4:sts=4:ft=js
+
+/*@
+
+@*/
+
+Ox.SyntaxHighlighter = function(options, self) {
+
+    self = self || {};
+    var that = new Ox.Element('div', self)
+            .defaults({
+                height: 40,
+                lineLength: 80,         //@ number of characters per line
+                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');
+
+    var foo = $('<div>')
+        //.css({marginTop: '-1000px'})
+        .html(Ox.repeat('_', 80))
+        .appendTo(that.$element);
+    //alert(foo.width());
+    foo.remove();
+
+    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, tokenString;
+        if (
+            !(self.options.stripComments && token.type == 'comment')
+        ) {
+            classNames = 'Ox' + Ox.toTitleCase(token.type);
+            tokenString = self.options.source.substr(self.cursor, token.length);
+            if (token.type == 'whitespace') {
+                if (isAfterLinebreak() && hasIrregularSpaces()) {
+                    classNames += ' OxLeading'
+                } else if (isBeforeLinebreak()) {
+                    classNames += ' OxTrailing'
+                }
+            }
+            self.source += '<span class="' + classNames + '">' +
+                encodeToken(tokenString, 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 tokenString.split('').reduce(function(prev, curr) {
+                return prev + (curr == ' ' ? 1 : 0);
+            }, 0) % self.options.tabLength;
+        }
+    });
+    self.lines = self.source.split('<br/>');
+    self.lineNumbersWidth = self.lines.length.toString().length * 7 + 7;
+    self.sourceCodeWidth = 80 * 7 + (
+        self.lines.length > 40 ? Ox.UI.SCROLLBAR_SIZE : 0
+    );
+    self.height = 40 * 14 + (
+        Math.max.apply(null, self.lines.map(function(line) {
+            return line.length;
+        })) > 80 ? Ox.UI.SCROLLBAR_SIZE : 0
+    );
+
+    that.css({
+        width: self.lineNumbersWidth + self.sourceCodeWidth,
+        height: self.height
+    });
+
+    self.$lineNumbers = new Ox.Element()
+        .addClass('OxLineNumbers')
+        .css({
+            width: self.lineNumbersWidth + 'px',
+            height: (self.lines.length * 14) + 'px'
+        })
+        .html(
+            Ox.range(self.lines.length).map(function(line) {
+                return (line + 1) + '&nbsp;';
+            }).join('<br/>')
+        )
+        .appendTo(that);
+    self.$source = new Ox.Element()
+        .addClass('OxSourceCode')
+        .css({
+            left: self.lineNumbersWidth + 'px',
+            width: self.sourceCodeWidth + 'px',
+            height: (self.lines.length * 14) + 'px'
+        })
+        .html(self.source)
+        .appendTo(that);
+
+    function encodeToken(str, type) {
+        var linebreak = '<br/>',
+            tab = Ox.repeat('&nbsp;', self.options.tabLength);
+        if (self.options.showLinebreaks) {
+            if (type == 'linebreak') {
+                linebreak = '¶' + linebreak;
+            } else {
+                linebreak = '<span class="OxLinebreak">¶</span>' + linebreak;
+            }
+        }
+        if (self.options.showTabs) {
+            tab = '<span class="OxTab">\u2192' + tab.substr(6) + '</span>';
+        }
+        str = Ox.encodeHTML(str)
+            .replace(/ /g, '&nbsp;')
+            .replace(/\t/g, tab)
+            .replace(/\n/g, linebreak);
+        return str;
+    }
+
+    self.onChange = function() {
+    
+    };
+
+    return that;
+
+};

source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js

@@ -1,4 +1,5 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
 Ox.VideoEditorPlayer = function(options, self) {
 
     var self = self || {},

source/Ox.UI/themes/classic/css/classic.css

@@ -362,6 +362,70 @@ Scrollbars
     background: rgb(208, 208, 208);
 }
 
+/*
+================================================================================
+SyntaxHighlighter
+================================================================================
+*/
+
+.OxThemeClassic .OxSyntaxHighlighter .OxSourceCode {
+    background-color: rgb(255, 255, 255);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxLineNumbers {
+    background-color: rgb(224, 224, 224);
+    color: rgb(128, 128, 128);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxComment {
+    color: rgb(128, 128, 128);
+    font-style: italic;
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxConstant {
+    color: rgb(128, 0, 0);
+    font-weight: bold;
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxIdentifier {
+    color: rgb(0, 0, 0);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxKeyword {
+    color: rgb(0, 0, 128);
+    font-weight: bold;
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxLinebreak {
+    color: rgb(192, 192, 192);
+    font-weight: normal;
+    font-style: normal;
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxMethod {
+    color: rgb(0, 128, 128);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxNumber {
+    color: rgb(128, 0, 0);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxObject {
+    color: rgb(0, 128, 128);
+    font-weight: bold;
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxOperator {
+    color: rgb(0, 0, 128);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxProperty {
+    color: rgb(0, 128, 0);
+    font-weight: bold;
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxRegexp {
+    color: rgb(128, 128, 0);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxString {
+    color: rgb(0, 128, 0);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxTab {
+    color: rgb(192, 192, 192);
+}
+.OxThemeClassic .OxSyntaxHighlighter .OxWhitespace.OxLeading,
+.OxThemeClassic .OxSyntaxHighlighter .OxWhitespace.OxTrailing {
+    background: rgb(255, 128, 128);
+}
+
 /*
 ================================================================================
 Video

source/Ox.UI/themes/modern/css/modern.css

@@ -371,6 +371,68 @@ Scrollbars
     background: rgb(64, 64, 64);
 }
 
+/*
+================================================================================
+SyntaxHighlighter
+================================================================================
+*/
+
+.OxThemeModern .OxSyntaxHighlighter .OxSourceCode {
+    background-color: rgb(0, 0, 0);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxLineNumbers {
+    background-color: rgb(32, 32, 32);
+    color: rgb(128, 128, 128);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxComment {
+    color: rgb(128, 128, 128);
+    font-style: italic;
+}
+.OxThemeModern .OxSyntaxHighlighter .OxConstant {
+    color: rgb(255, 128, 128);
+    font-weight: bold;
+}
+.OxThemeModern .OxSyntaxHighlighter .OxIdentifier {
+    color: rgb(255, 255, 255);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxKeyword {
+    color: rgb(128, 128, 255);
+    font-weight: bold;
+}
+.OxThemeModern .OxSyntaxHighlighter .OxLinebreak {
+    color: rgb(64, 64, 64);
+    font-weight: normal;
+    font-style: normal;
+}
+.OxThemeModern .OxSyntaxHighlighter .OxMethod {
+    color: rgb(128, 255, 255);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxNumber {
+    color: rgb(255, 128, 128);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxObject {
+    color: rgb(128, 255, 255);
+    font-weight: bold;
+}
+.OxThemeModern .OxSyntaxHighlighter .OxOperator {
+    color: rgb(128, 128, 255);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxProperty {
+    color: rgb(128, 255, 128);
+    font-weight: bold;
+}
+.OxThemeModern .OxSyntaxHighlighter .OxRegexp {
+    color: rgb(255, 255, 128);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxString {
+    color: rgb(128, 255, 128);
+}
+.OxThemeModern .OxSyntaxHighlighter .OxWhitespace {
+}
+.OxThemeModern .OxSyntaxHighlighter .OxWhitespace.OxTrailing {
+    background: rgb(255, 255, 255);
+}
+
 
 /*
 ================================================================================