From 8a75cdca13c2812639997b4cf91567919847044f Mon Sep 17 00:00:00 2001
From: nightwing <amirjanyan@gmail.com>
Date: Sat, 13 Apr 2013 19:41:08 +0400
Subject: [PATCH] cleanup

---
 .../static-highlighter/client-noconflict.html |  60 ++++----
 lib/ace/ext/static_highlight.js               | 130 +++++++++---------
 2 files changed, 88 insertions(+), 102 deletions(-)

diff --git a/demo/static-highlighter/client-noconflict.html b/demo/static-highlighter/client-noconflict.html
index 80f3647a..fa9d345d 100644
--- a/demo/static-highlighter/client-noconflict.html
+++ b/demo/static-highlighter/client-noconflict.html
@@ -32,53 +32,39 @@
 function wobble (flam) {
     return flam.wobbled = true;
 }
-// I'm not exactly sure how to
-// turn on softwrap like effects.
-var longString = 'this will not wrap ******************************************';
-
-
-
 
 // the scrollbars are from overflow auto on .ace_editor.
 
 </pre>
 
-<script src="../../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../build/src-noconflict/ext-static_highlight.js" type="text/javascript" charset="utf-8"></script>
+<script src="../../build/src-noconflict/ace.js"></script>
+<script src="../../build/src-noconflict/ext-static_highlight.js"></script>
 
-<script type="text/javascript" charset="utf-8">
-(function () {
+<script>
+var highlighter = ace.require("ace/ext/static_highlight")
+var dom = ace.require("ace/lib/dom")
+function qsa(sel) {
+    return [].slice.call(document.querySelectorAll(sel));
+}
 
-ace.require([
-    "ace/ext/static_highlight",
-    "ace/lib/dom"
-], function(highlighter, dom) {
-    var codeEls = Array.prototype.slice.call(
-        document.getElementsByClassName('code')
-    );
-    codeEls.forEach(function (codeEl) {
+qsa(".code").forEach(function (codeEl) {
+    var cs = getComputedStyle(codeEl);
+    codeEl.style.cssText = codeEl.style.cssText +
+        'width: ' + cs.width + ';' +
+        'height: ' + cs.height + ';';
+    var mode = codeEl.getAttribute('ace-mode');
+    var theme = codeEl.getAttribute('ace-theme');
+    var data = codeEl.textContent.trim();
     
-        var cs = getComputedStyle(codeEl);
-        codeEl.style.cssText = codeEl.style.cssText +
-            'width: ' + cs.width + ';' +
-            'height: ' + cs.height + ';';
-        var mode = codeEl.getAttribute('ace-mode');
-        var theme = codeEl.getAttribute('ace-theme');
-        var data = codeEl.textContent.trim();
-        
-        highlighter.render(data, mode, theme, 1, false, function (highlighted) {
-        
-            dom.importCssString(highlighted.css, "ace_highlight");
-            dom.importCssString('.ace_editor { overflow: auto; ' +
-                'position:absolute; top:0; bottom:0; right:0; left:0; }' +
-                '.ace_gutter { position: relative; }',
-                'atropa_hial');
-            codeEl.innerHTML = highlighted.html;
-        });
+    highlighter.render(data, mode, theme, 1, false, function (highlighted) {    
+        dom.importCssString(highlighted.css, "ace_highlight");
+        dom.importCssString('.ace_editor { overflow: auto; ' +
+            'position:absolute; top:0; bottom:0; right:0; left:0; }' +
+            '.ace_gutter { position: relative; }',
+            'atropa_hial');
+        codeEl.innerHTML = highlighted.html;
     });
 });
-    
-}());
 </script>
 
 </body>
diff --git a/lib/ace/ext/static_highlight.js b/lib/ace/ext/static_highlight.js
index 5bfee3da..4a44b22e 100644
--- a/lib/ace/ext/static_highlight.js
+++ b/lib/ace/ext/static_highlight.js
@@ -56,82 +56,82 @@ var config = require("../config");
  */
 
 exports.render = function(input, mode, theme, lineStart, disableGutter, callback) {
-    lineStart = parseInt(lineStart || 1, 10);
-    
-    // if theme and mode are both objects return the expected object.
-    // preserves current behavior of giving mode and theme objects
-    if(typeof theme !== 'string' && typeof mode !== 'string') {
-        return renderer(mode, theme);
-    }
-    
+    var waiting = 0
+        
     // if either the theme or the mode were specified as objects 
     // then we need to lazily load them.
-    
-    // loads or passes the specified theme module then loads the mode.
     if (typeof theme == "string") {
-        config.loadModule(['theme', theme], function (theme) {
-            checkMode(theme);
+        waiting++;
+        config.loadModule(['theme', theme], function (m) {
+            theme = m;
+            --waiting || done();
+        });
+    }
+    
+    if (typeof mode == "string") {
+        waiting++;
+        config.loadModule(['mode', mode], function (m) {
+            mode = new m.Mode()
+            --waiting || done();
         });
-    } else {
-        // if theme was given as an object pass it through.
-        checkMode(theme);
     }
     
     // loads or passes the specified mode module then calls renderer
-    function checkMode (theme) {
-        if (typeof mode == "string") {
-            config.loadModule(['mode', mode], function (mode) {
-                callback(renderer(new mode.Mode(), theme));
-            });
-        } else {
-            // if mode was given as an object pass it through.
-            callback(renderer(mode, theme));
-        }
+    function done() {
+        var result = exports.renderSync(input, mode, theme, lineStart, disableGutter);
+        return callback ? callback(result) : result;
+    }
+    return waiting || done();
+};
+
+/* Transforms a given input code snippet into HTML using the given mode
+*
+* @param {string} input Code snippet
+* @param {mode} mode Mode loaded from /ace/mode (use 'ServerSideHiglighter.getMode')
+* @param {string} r Code snippet
+* @returns {object} An object containing: html, css
+*/
+
+exports.renderSync = function(input, mode, theme, lineStart, disableGutter) {
+    lineStart = parseInt(lineStart || 1, 10);
+    
+    var session = new EditSession("");
+    session.setUseWorker(false);
+    session.setMode(mode);
+    
+    var textLayer = new TextLayer(document.createElement("div"));
+    textLayer.setSession(session);
+    textLayer.config = {
+        characterWidth: 10,
+        lineHeight: 20
+    };
+    
+    session.setValue(input);
+            
+    var stringBuilder = [];
+    var length =  session.getLength();
+
+    for(var ix = 0; ix < length; ix++) {
+        stringBuilder.push("<div class='ace_line'>");
+        if (!disableGutter)
+            stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + (ix + lineStart) + "</span>");
+        textLayer.$renderLine(stringBuilder, ix, true, false);
+        stringBuilder.push("</div>");
     }
     
-    // this was previously the body of exports.render
-    // exports.render does the same thing it did before but now 
-    // if you give it mode or theme as strings you must specify a callback
-    // which will receive the return value of renderer.
-    // specifying the mode or theme as a string did not work before.
-    function renderer (mode, theme) {
-        var session = new EditSession("");
-        session.setMode(mode);
-        session.setUseWorker(false);
-        var textLayer = new TextLayer(document.createElement("div"));
-        textLayer.setSession(session);
-        textLayer.config = {
-            characterWidth: 10,
-            lineHeight: 20
-        };
+    // let's prepare the whole html
+    var html = "<div class=':cssClass'>\
+        <div class='ace_editor ace_scroller ace_text-layer'>\
+            :code\
+        </div>\
+    </div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join(""));
         
-        session.setValue(input);
-                
-        var stringBuilder = [];
-        var length =  session.getLength();
-
-        for(var ix = 0; ix < length; ix++) {
-            stringBuilder.push("<div class='ace_line'>");
-            if (!disableGutter)
-                stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + (ix + lineStart) + "</span>");
-            textLayer.$renderLine(stringBuilder, ix, true, false);
-            stringBuilder.push("</div>");
-        }
-        
-        // let's prepare the whole html
-        var html = "<div class=':cssClass'>\
-            <div class='ace_editor ace_scroller ace_text-layer'>\
-                :code\
-            </div>\
-        </div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join(""));
+    textLayer.destroy();
             
-        textLayer.destroy();
-                
-        return {
-            css: baseStyles + theme.cssText,
-            html: html
-        };
-    }
+    return {
+        css: baseStyles + theme.cssText,
+        html: html
+    };
 };
 
 });