jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cleanup

Browse source
This commit is contained in:
nightwing 2013-04-13 19:41:08 +04:00
commit 8a75cdca13
2 changed files with 88 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

60
demo/static-highlighter/client-noconflict.html
View file

@ -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>

130
lib/ace/ext/static_highlight.js
View file

@ -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
};
};
});