make SyntaxHighlighter and SourceViewer more useful by allowing replacements; remove index.json and source/Ox/png; plus some other small and/or cosmetic changes

2012-04-06 14:10:21 +02:00 · 2012-04-06 14:10:21 +02:00 · 03f4f77ce6
commit 03f4f77ce6
parent 24eb4bdc64
16 changed files with 213 additions and 230 deletions
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@ -24,21 +24,24 @@ body {
    -o-user-select: none;
    -webkit-user-select: none;
 }
+code, pre {
+    font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace;
+}
 div {
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -webkit-user-select: none;
 }
 div, input, textarea {
-    font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial;
+    font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
    font-size: 11px;
 }
-h1,h2,h3,h4,h5,h6 {
+h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
 }
-h2,h3,h4,h5,h6 {
+h2, h3, h4, h5, h6 {
    font-size: 14px;
 }
 img {
@ -63,6 +66,17 @@ td {
    padding: 0;
    vertical-align: top;
 }
+
+.OxSerif {
+    font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif;
+}
+.OxSansSerif {
+    font-family: Lucida Grande, Segoe UI, DejaVu Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
+}
+.OxMonospace {
+    font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace;
+}
+
 .OxSelectable {
    -moz-user-select: text;
    -o-user-select: text;
@ -461,9 +475,6 @@ Document
    -o-user-select: text;
    -webkit-user-select: text;
 }
-.OxDocument code {
-    font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
-}
 .OxDocument h1 {
    font-weight: bold;
    font-size: 16px;
@ -875,8 +886,8 @@ OxLabel
    white-space: nowrap;
 }
 .OxLabel.OxSquare {
-    padding: 0 2px 0 2px;
-    border-radius: 0;
+    padding: 0 3px 0 3px;
+    border-radius: 4px;
 }

 /*
@ -1915,16 +1926,16 @@ SourceViewer
    padding: 4px 8px 4px 8px;
    border-right-width: 1px;
    border-right-style: solid;
-    font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
-    line-height: 16px;
-    //white-space: pre;
+    font-size: 14px;
+    line-height: 20px;
    -moz-user-select: text;
    -webkit-user-select: text;
 }
 .OxSourceViewer .OxComment pre {
-    font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
+    font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console, monospace;
+    font-size: 11px;
    line-height: 16px;
-    margin: 0;
+    margin: 4px 0 4px 0;
 }


@ -1937,7 +1948,7 @@ SyntaxHightlighter
 .OxSyntaxHighlighter > div {
    display: table-cell;
    padding: 4px;
-    font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
+    font-family: Menlo, Monaco, DejaVu Sans Mono, Lucida Console, Consolas, Bitstream Vera Sans Mono, monospace;
    line-height: 16px;
 }
 .OxSyntaxHighlighter > .OxLineNumbers {
--- a/source/Ox.UI/js/Code/Ox.ExamplePage.js
+++ b/source/Ox.UI/js/Code/Ox.ExamplePage.js
@ -7,7 +7,8 @@ Ox.ExamplePage = function(options, self) {
        .defaults({
            html: '',
            js: '',
-            replace: [],
+            replaceCode: [],
+            replaceComment: [],
            selected: 'source',
            title: ''
        })
@ -89,7 +90,8 @@ Ox.ExamplePage = function(options, self) {

    self.$viewer = Ox.SourceViewer({
            file: self.options.js,
-            replace: self.options.replace
+            replaceCode: self.options.replaceCode,
+            replaceComment: self.options.replaceComment
        })
        .css({
            position: 'absolute',
--- a/source/Ox.UI/js/Code/Ox.ExamplePanel.js
+++ b/source/Ox.UI/js/Code/Ox.ExamplePanel.js
@ -8,7 +8,8 @@ Ox.ExamplePanel = function(options, self) {
            examples: [],
            keywords: null,
            path: '',
-            replace: [],
+            replaceCode: [],
+            replaceComment: [],
            size: 256
        })
        .options(options || {})
@ -97,7 +98,8 @@ Ox.ExamplePanel = function(options, self) {
                    html: item.html,
                    js: item.js,
                    keywords: item.keywords,
-                    replace: self.options.replace,
+                    replaceCode: self.options.replaceCode,
+                    replaceComment: self.options.replaceComment,
                    title: item.title,
                    width: window.innerWidth - self.options.size
                })
--- a/source/Ox.UI/js/Code/Ox.SourceViewer.js
+++ b/source/Ox.UI/js/Code/Ox.SourceViewer.js
@ -6,14 +6,15 @@ Ox.SourceViewer = function(options, self) {
    var that = Ox.Container({}, self)
        .defaults({
            file: '',
-            replace: []
+            replaceCode: [],
+            replaceComment: [],
        })
        .options(options)
        .addClass('OxSourceViewer');

-    self.replace = Ox.merge(
-        [[
-            // removes indentation inside <pre> tags
+    self.options.replaceComment.unshift(
+        // removes indentation inside <pre> tags
+        [
            /<pre>([\s\S]+)<\/pre>/g,
            function(pre, text) {
                var lines = trim(text).split('\n'),
@ -25,10 +26,8 @@ Ox.SourceViewer = function(options, self) {
                    return line.substr(indent);
                }).join('\n') + '</pre>';
            }
-        ]],
-        self.options.replace
+        ]
    );
-    Ox.print('RE', self.replace)

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

@ -42,28 +41,28 @@ Ox.SourceViewer = function(options, self) {
                text = /^\/\*/.test(text)
                    ? Ox.sub(text, 2, -2)
                    : Ox.sub(text, 2);
-                self.replace.forEach(function(replace) {
+                self.options.replaceComment.forEach(function(replace) {
                    text = text.replace(replace[0], replace[1]);
                });
            }
            Ox.last(sections)[type] += text;
        });
        sections.forEach(function(section) {
-            var $section = $('<tr>'),
+            var $section = $('<tr>')
+                    .appendTo(self.$table),
                $comment = $('<td>')
-                    .addClass('OxComment')
-                    .html(trim(section.comment)),
+                    .addClass('OxComment OxSerif')
+                    .html(trim(section.comment))
+                    .appendTo($section),
                $code = $('<td>')
                    .addClass('OxCode')
                    .append(
                        Ox.SyntaxHighlighter({
+                            replace: self.options.replaceCode,
                            source: trim(section.code)
                        })
                    )
-            $section
-                .append($comment)
-                .append($code)
-                .appendTo(self.$table);
+                    .appendTo($section);
        });
    });

--- a/source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
+++ b/source/Ox.UI/js/Code/Ox.SyntaxHighlighter.js
@ -8,6 +8,9 @@ Ox.SyntaxHighlighter <function> Syntax Highlighter
    options <o> Options
        lineLength <n|0> If larger than zero, show edge of page
        offset <n|1> First line number
+        replace <[[]]|[]> Array of replacements
+            Each array element is an array of two arguments to be passed to the
+            replace function, like [str, str], [regexp, str] or [regexp, fn]
        showLinebreaks <b|false> If true, show linebreaks
        showLineNumbers <b|false> If true, show line numbers
        showWhitespace <b|false> If true, show whitespace
@ -25,6 +28,7 @@ Ox.SyntaxHighlighter = function(options, self) {
            .defaults({
                lineLength: 0,
                offset: 1,
+                replace: [],
                showLinebreaks: false,
                showLineNumbers: false,
                showTabs: false,
@ -100,6 +104,11 @@ Ox.SyntaxHighlighter = function(options, self) {
                )
                .appendTo(that);
        }
+
+        self.options.replace.forEach(function(replace) {
+            source = source.replace(replace[0], replace[1])
+        });
+        
        $source = Ox.Element()
            .addClass('OxSourceCode')
            .html(source)
@ -125,6 +134,22 @@ Ox.SyntaxHighlighter = function(options, self) {
        }
    }

+    setTimeout(function() {
+        $('.foobar > span').css({
+            textDecoration: 'underline'
+        })
+        $('.foobar').css({
+            //background: 'rgb(255, 255, 128)',
+            borderRadius: '2px',
+            cursor: 'pointer'
+        }).bind({
+            click: function() {
+                window.location.hash = 'documentation/' + $(this).attr('title');
+            }
+        })
+        
+    }, 1000)
+
    self.setOption = function(key, value) {
        renderSource();
    };
--- a/source/Ox.UI/js/Form/Ox.Label.js
+++ b/source/Ox.UI/js/Form/Ox.Label.js
@ -32,7 +32,7 @@ Ox.Label = function(options, self) {
            )
            .css(Ox.extend(self.options.width == 'auto' ? {} : {
                width: self.options.width - (
-                    self.options.style == 'rounded' ? 14 : 6
+                    self.options.style == 'rounded' ? 14 : 8
                ) + 'px'
            }, {
                textAlign: self.options.textAlign
@ -43,7 +43,11 @@ Ox.Label = function(options, self) {
 		if (key == 'title') {
 			that.html(value);
 		} else if (key == 'width') {
-		    that.css({width: self.options.width - 14 + 'px'});
+		    that.css({
+		        width: self.options.width - (
+		            self.options.style == 'rounded' ? 14 : 8
+		        ) + 'px'
+		    });
 		}
 	};

--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@ -314,6 +314,9 @@ Forms
    color: rgb(192, 64, 64);
 }

+.OxThemeClassic .OxLabel.OxSquare {
+    background: rgb(240, 240, 240);
+}
 .OxThemeClassic .OxLabel.OxDisabled {
    color: rgb(128, 128, 128);
 }
--- a/source/Ox.UI/themes/modern/css/modern.css
+++ b/source/Ox.UI/themes/modern/css/modern.css
@ -256,7 +256,7 @@ Forms
    color: rgb(192, 192, 192);
 }

-.OxThemeModern .OxInputLabel {
+.OxThemeModern .OxInput\ {
    color: rgb(192, 192, 192);
 }
 .OxThemeModern .OxButton,
@ -305,6 +305,9 @@ Forms
    color: rgb(255, 64, 64);
 }

+.OxThemeModern .OxLabel.OxSquare {
+    background: rgb(16, 16, 16);
+}
 .OxThemeModern .OxLabel.OxDisabled {
    color: rgb(128, 128, 128);
 }
--- a/source/Ox/png/OxJS16.png
+++ b/source/Ox/png/OxJS16.png
--- a/source/Ox/png/OxJS256.png
+++ b/source/Ox/png/OxJS256.png
--- a/source/Ox/png/OxJS64.png
+++ b/source/Ox/png/OxJS64.png