cleanup
This commit is contained in:
nightwing
parent
978d32eca3
commit
8a75cdca13
2 changed files with 88 additions and 102 deletions
|
|
@ -32,53 +32,39 @@
|
||||||
function wobble (flam) {
|
function wobble (flam) {
|
||||||
return flam.wobbled = true;
|
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.
|
// the scrollbars are from overflow auto on .ace_editor.
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script src="../../build/src-noconflict/ace.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" type="text/javascript" charset="utf-8"></script>
|
<script src="../../build/src-noconflict/ext-static_highlight.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" charset="utf-8">
|
<script>
|
||||||
(function () {
|
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([
|
qsa(".code").forEach(function (codeEl) {
|
||||||
"ace/ext/static_highlight",
|
var cs = getComputedStyle(codeEl);
|
||||||
"ace/lib/dom"
|
codeEl.style.cssText = codeEl.style.cssText +
|
||||||
], function(highlighter, dom) {
|
'width: ' + cs.width + ';' +
|
||||||
var codeEls = Array.prototype.slice.call(
|
'height: ' + cs.height + ';';
|
||||||
document.getElementsByClassName('code')
|
var mode = codeEl.getAttribute('ace-mode');
|
||||||
);
|
var theme = codeEl.getAttribute('ace-theme');
|
||||||
codeEls.forEach(function (codeEl) {
|
var data = codeEl.textContent.trim();
|
||||||
|
|
||||||
var cs = getComputedStyle(codeEl);
|
highlighter.render(data, mode, theme, 1, false, function (highlighted) {
|
||||||
codeEl.style.cssText = codeEl.style.cssText +
|
dom.importCssString(highlighted.css, "ace_highlight");
|
||||||
'width: ' + cs.width + ';' +
|
dom.importCssString('.ace_editor { overflow: auto; ' +
|
||||||
'height: ' + cs.height + ';';
|
'position:absolute; top:0; bottom:0; right:0; left:0; }' +
|
||||||
var mode = codeEl.getAttribute('ace-mode');
|
'.ace_gutter { position: relative; }',
|
||||||
var theme = codeEl.getAttribute('ace-theme');
|
'atropa_hial');
|
||||||
var data = codeEl.textContent.trim();
|
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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -56,82 +56,82 @@ var config = require("../config");
|
||||||
*/
|
*/
|
||||||
|
|
||||||
exports.render = function(input, mode, theme, lineStart, disableGutter, callback) {
|
exports.render = function(input, mode, theme, lineStart, disableGutter, callback) {
|
||||||
lineStart = parseInt(lineStart || 1, 10);
|
var waiting = 0
|
||||||
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
// if either the theme or the mode were specified as objects
|
// if either the theme or the mode were specified as objects
|
||||||
// then we need to lazily load them.
|
// then we need to lazily load them.
|
||||||
|
|
||||||
// loads or passes the specified theme module then loads the mode.
|
|
||||||
if (typeof theme == "string") {
|
if (typeof theme == "string") {
|
||||||
config.loadModule(['theme', theme], function (theme) {
|
waiting++;
|
||||||
checkMode(theme);
|
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
|
// loads or passes the specified mode module then calls renderer
|
||||||
function checkMode (theme) {
|
function done() {
|
||||||
if (typeof mode == "string") {
|
var result = exports.renderSync(input, mode, theme, lineStart, disableGutter);
|
||||||
config.loadModule(['mode', mode], function (mode) {
|
return callback ? callback(result) : result;
|
||||||
callback(renderer(new mode.Mode(), theme));
|
}
|
||||||
});
|
return waiting || done();
|
||||||
} else {
|
};
|
||||||
// if mode was given as an object pass it through.
|
|
||||||
callback(renderer(mode, theme));
|
/* 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
|
// let's prepare the whole html
|
||||||
// exports.render does the same thing it did before but now
|
var html = "<div class=':cssClass'>\
|
||||||
// if you give it mode or theme as strings you must specify a callback
|
<div class='ace_editor ace_scroller ace_text-layer'>\
|
||||||
// which will receive the return value of renderer.
|
:code\
|
||||||
// specifying the mode or theme as a string did not work before.
|
</div>\
|
||||||
function renderer (mode, theme) {
|
</div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join(""));
|
||||||
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
|
|
||||||
};
|
|
||||||
|
|
||||||
session.setValue(input);
|
textLayer.destroy();
|
||||||
|
|
||||||
var stringBuilder = [];
|
return {
|
||||||
var length = session.getLength();
|
css: baseStyles + theme.cssText,
|
||||||
|
html: html
|
||||||
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();
|
|
||||||
|
|
||||||
return {
|
|
||||||
css: baseStyles + theme.cssText,
|
|
||||||
html: html
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue