From bec9222cf2cf952b8145a226e6f4fb49b75471c4 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 8 May 2011 23:06:48 +0200 Subject: [PATCH] some more improvements to syntax highlighter --- demos/syntax/js/syntax.js | 6 +- source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js | 79 +++++++++++--------- 2 files changed, 46 insertions(+), 39 deletions(-) diff --git a/demos/syntax/js/syntax.js b/demos/syntax/js/syntax.js index b13112af..cac6979d 100644 --- a/demos/syntax/js/syntax.js +++ b/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); } }) diff --git a/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js b/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js index fe88a7e3..fad31a46 100644 --- a/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js +++ b/source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js @@ -4,11 +4,15 @@ Ox.SyntaxHighlighter Syntax Highlighter (options[, self]) -> Syntax Highlighter options Options + lineLength If larger than zero, show edge of page offset First line number showLineNumbers If true, show line numbers - showLinebreaks If true, show linebreaks - showWhitespace If true, show whitespace + showReturns If true, show linebreaks + showSpaces If true, show whitespace + showTabs If true, show tabs + source JavaScript source stripComments If true, strip comments + tabSize Number of spaces per tab self Shared private @*/ @@ -17,19 +21,15 @@ 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 + lineLength: 0, + offset: 1, 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 + showReturns: false, + showSpaces: false, + showTabs: false, + source: '', + stripComments: false, + tabSize: 4, }) .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 ? '\u21A9' : '' ) + '
', tab = ( self.options.showTabs ? '\u2192' : '' - ) + Ox.repeat(' ', self.options.tabLength - self.options.showTabs), - whitespace = self.options.showWhitespace ? '\u00B7' : ' '; + ) + Ox.repeat(' ', self.options.tabSize - self.options.showTabs), + whitespace = self.options.showSpaces ? '\u00B7' : ' '; 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('
'); that.empty(); - ///* - var $test = new Ox.Element() - .css({ - position: 'absolute', - top: '-1000px' - }) - .html(Ox.repeat(' ', 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(' ', 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) {