some more improvements to syntax highlighter

demos/syntax/js/syntax.js

@@ -19,16 +19,18 @@ Ox.load('UI', {
             .append(
                 Ox.FormElementGroup({
                     elements: [
-                        'showLineNumbers', 'showLinebreaks', 'showTabs', 'showWhitespace', 'stripComments'
+                        'showLineNumbers', 'showPage', 'showReturns', 'showSpaces', 'showTabs', 'stripComments'
                     ].map(function(v, i) {
                         return Ox.Checkbox({
                             overlap: 'right',
                             title: Ox.toDashes(v).split('-').map(function(v) {
                                 return Ox.toTitleCase(v);
                             }).join(' '),
-                            width: 160
+                            width: 144
                         }).bindEvent({
                             change: function(event) {
+                                v == 'showPage' ? 
+                                $syntaxHighlighter.options({lineLength: event.checked ? 80 : 0}) :
                                 $syntaxHighlighter.options(v, event.checked);
                             }
                         })

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

@@ -4,11 +4,15 @@
 Ox.SyntaxHighlighter <function> Syntax Highlighter
     (options[, self]) -> <o> Syntax Highlighter
     options <o> Options
+        lineLength <n|0> If larger than zero, show edge of page
         offset <n|1> First line number
         showLineNumbers <b|false> If true, show line numbers
-        showLinebreaks <b|false> If true, show linebreaks
+        showReturns <b|false> If true, show linebreaks
-        showWhitespace <b|false> If true, show whitespace
+        showSpaces <b|false> If true, show whitespace
+        showTabs <b|false> If true, show tabs
+        source <s|''> JavaScript source
         stripComments <b|false> If true, strip comments
+        tabSize <n|4> Number of spaces per tab
     self <o> Shared private 
 @*/
 
@@ -17,19 +21,15 @@ Ox.SyntaxHighlighter = function(options, self) {
  	self = self || {}; 
     var that = Ox.Element({}, self)
             .defaults({
-                height: 40,
+                lineLength: 0,
-                lineLength: 80,         //@ number of characters per line
+                offset: 1,
-                offset: 1,              //@ first line number
                 showLineNumbers: false,
-                showLinebreaks: false,  //@ show linebreak symbols
+                showReturns: false,
-                showTabs: false,        //@ show tab symbols
+                showSpaces: false,
-                showWhitespace: false,  //@ show irregular leading or trailing whitespace
+                showTabs: false,
-                source: '',             //@ JavaScript source
+                source: '',
-                stripComments: false,   //@ strip all comments
+                stripComments: false,
-                stripLinebreaks: false, //@ strip multiple linebreaks, NOT IMPLEMENTED
+                tabSize: 4,
-                stripWhitespace: false, //@ strip all whitespace, NOT IMPLEMENTED
-                tabLength: 4,           //@ number of spaces per tab
-                width: 80
             })
             .options(options || {})
             .addClass('OxSyntaxHighlighter');
@@ -37,16 +37,17 @@ Ox.SyntaxHighlighter = function(options, self) {
     renderSource();
 
     function renderSource() {
-        var lines, source = '', tokens,
+        var $lineNumbers, $line, $source, width,
+            lines, source = '', tokens,
             linebreak = (
-                self.options.showLinebreaks ? 
+                self.options.showReturns ? 
                 '<span class="OxLinebreak">\u21A9</span>' : ''
             ) + '<br/>',
             tab = (
                 self.options.showTabs ?
                 '<span class="OxTab">\u2192</span>' : ''
-            ) + Ox.repeat('&nbsp;', self.options.tabLength - self.options.showTabs),
+            ) + Ox.repeat('&nbsp;', self.options.tabSize - self.options.showTabs),
-            whitespace = self.options.showWhitespace ? '\u00B7' : '&nbsp;';
+            whitespace = self.options.showSpaces ? '\u00B7' : '&nbsp;';
         self.options.source = self.options.source
             .replace(/\r\n/g, '\n')
             .replace(/\r/g, '\n');
@@ -58,7 +59,7 @@ Ox.SyntaxHighlighter = function(options, self) {
                 !(self.options.stripComments && token.type == 'comment')
             ) {
                 classNames = 'Ox' + Ox.toTitleCase(token.type);
-                if (self.options.showWhitespace && token.type == 'whitespace') {
+                if (self.options.showSpaces && token.type == 'whitespace') {
                     if (isAfterLinebreak() && hasIrregularSpaces()) {
                         classNames += ' OxLeading'
                     } else if (isBeforeLinebreak()) {
@@ -82,24 +83,13 @@ Ox.SyntaxHighlighter = function(options, self) {
             function hasIrregularSpaces() {
                 return substr.split('').reduce(function(prev, curr) {
                     return prev + (curr == ' ' ? 1 : 0);
-                }, 0) % self.options.tabLength;
+                }, 0) % self.options.tabSize;
             }
         });
         lines = source.split('<br/>');
         that.empty();
-        ///*
-        var $test = new Ox.Element()
-            .css({
-                position: 'absolute',
-                top: '-1000px'
-            })
-            .html(Ox.repeat('&nbsp;', self.options.lineLength))
-            .appendTo(that);
-        var width = $test.width() + 4; // add padding
-        $test.removeElement();
-        //*/
         if (self.options.showLineNumbers) {
-            self.$lineNumbers = new Ox.Element()
+            $lineNumbers = new Ox.Element()
                 .addClass('OxLineNumbers')
                 .html(
                     Ox.range(lines.length).map(function(line) {
@@ -108,12 +98,8 @@ Ox.SyntaxHighlighter = function(options, self) {
                 )
                 .appendTo(that);
         }
-        self.$source = new Ox.Element()
+        $source = new Ox.Element()
             .addClass('OxSourceCode')
-            .css({
-                background: '-moz-linear-gradient(left, rgb(255, 255, 255), rgb(255, 255, 255) ' +
-                    width + 'px, rgb(248, 248, 248) ' + width + 'px, rgb(248, 248, 248))'
-            })
             .css({
                 background: '-webkit-linear-gradient(left, rgb(255, 255, 255) ' +
                     width + 'px, rgb(192, 192, 192) ' + width + 'px, rgb(255, 255, 255) ' +
@@ -121,6 +107,25 @@ Ox.SyntaxHighlighter = function(options, self) {
             })
             .html(source)
             .appendTo(that);
+        if (self.options.lineLength) {
+            $line = new Ox.Element()
+                .css({
+                    position: 'absolute',
+                    top: '-1000px'
+                })
+                .html(Ox.repeat('&nbsp;', self.options.lineLength))
+                .appendTo(that),
+                width = $line.width() + 4; // add padding
+            $line.removeElement();
+            ['moz', 'webkit'].forEach(function(browser) {
+                $source.css({
+                    background: '-' + browser +
+                        '-linear-gradient(left, rgb(255, 255, 255) ' +
+                        width + 'px, rgb(192, 192, 192) ' + width +
+                        'px, rgb(255, 255, 255) ' + (width + 1) + 'px)'
+                });
+            });
+        }
     }
 
     self.setOption = function(key, value) {