mirror of
https://github.com/AdaCore/ace.git
synced 2026-02-12 13:03:02 -08:00
185 lines
5.1 KiB
HTML
185 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Editor</title>
|
|
<style type="text/css" media="screen">
|
|
body {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#editor {
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="toolbar"></div>
|
|
<pre id="editor"></pre>
|
|
|
|
<script src="../build/src/ace.js" type="text/javascript"></script>
|
|
<script src="../build/kitchen-sink/demo.js" type="text/javascript"></script>
|
|
|
|
<script>
|
|
var $ = document.getElementById.bind(document);
|
|
function bindDropdown(el, callback) {
|
|
var onChange = function() {
|
|
callback(el.value);
|
|
};
|
|
el.onchange = onChange;
|
|
onChange();
|
|
}
|
|
|
|
function fillDropdown(list, el) {
|
|
list.forEach(function(item) {
|
|
var option = document.createElement("option");
|
|
option.setAttribute("value", item.name);
|
|
option.innerHTML = item.desc;
|
|
el.appendChild(option);
|
|
});
|
|
}
|
|
|
|
/************** modes ***********************/
|
|
var modes = [];
|
|
function getModeFromPath(path) {
|
|
var mode = modesByName.text;
|
|
for (var i = 0; i < modes.length; i++) {
|
|
if (modes[i].supportsFile(path)) {
|
|
mode = modes[i];
|
|
break;
|
|
}
|
|
}
|
|
return mode;
|
|
};
|
|
|
|
var Mode = function(name, desc, extensions) {
|
|
this.name = name;
|
|
this.desc = desc;
|
|
this.mode = "ace/mode/" + name;
|
|
this.extRe = new RegExp("^.*\\.(" + extensions + ")$", "g");
|
|
};
|
|
|
|
Mode.prototype.supportsFile = function(filename) {
|
|
return filename.match(this.extRe);
|
|
};
|
|
|
|
var modesByName = {
|
|
c9search: ["C9Search" , "c9search_results"],
|
|
coffee: ["CoffeeScript" , "coffee|^Cakefile"],
|
|
coldfusion: ["ColdFusion" , "cfm"],
|
|
csharp: ["C#" , "cs"],
|
|
css: ["CSS" , "css"],
|
|
diff: ["Diff" , "diff|patch"],
|
|
golang: ["Go" , "go"],
|
|
groovy: ["Groovy" , "groovy"],
|
|
haxe: ["haXe" , "hx"],
|
|
html: ["HTML" , "htm|html|xhtml"],
|
|
c_cpp: ["C/C++" , "c|cc|cpp|cxx|h|hh|hpp"],
|
|
clojure: ["Clojure" , "clj"],
|
|
java: ["Java" , "java"],
|
|
javascript: ["JavaScript" , "js"],
|
|
json: ["JSON" , "json"],
|
|
jsx: ["JSX" , "jsx"],
|
|
latex: ["LaTeX" , "latex|tex|ltx|bib"],
|
|
less: ["LESS" , "less"],
|
|
liquid: ["Liquid" , "liquid"],
|
|
lua: ["Lua" , "lua"],
|
|
luapage: ["LuaPage" , "lp"], // http://keplerproject.github.com/cgilua/manual.html#templates
|
|
markdown: ["Markdown" , "md|markdown"],
|
|
ocaml: ["OCaml" , "ml|mli"],
|
|
perl: ["Perl" , "pl|pm"],
|
|
pgsql: ["pgSQL" , "pgsql"],
|
|
php: ["PHP" , "php|phtml"],
|
|
powershell: ["Powershell" , "ps1"],
|
|
python: ["Python" , "py"],
|
|
ruby: ["Ruby" , "ru|gemspec|rake|rb"],
|
|
scad: ["OpenSCAD" , "scad"],
|
|
scala: ["Scala" , "scala"],
|
|
scss: ["SCSS" , "scss|sass"],
|
|
sh: ["SH" , "sh|bash|bat"],
|
|
sql: ["SQL" , "sql"],
|
|
svg: ["SVG" , "svg"],
|
|
text: ["Text" , "txt"],
|
|
textile: ["Textile" , "textile"],
|
|
xml: ["XML" , "xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl"],
|
|
xquery: ["XQuery" , "xq"],
|
|
yaml: ["YAML" , "yaml"]
|
|
};
|
|
|
|
for (var name in modesByName) {
|
|
var mode = modesByName[name];
|
|
mode = new Mode(name, mode[0], mode[1])
|
|
modesByName[name] = mode;
|
|
modes.push(mode);
|
|
}
|
|
|
|
|
|
|
|
var container = document.getElementById("editor");
|
|
container.style.position = "absolute";
|
|
// Splitting.
|
|
var Split = require("ace/split").Split;
|
|
var split = new Split(container, null, 1);
|
|
split.setOrientation(split.BESIDE);
|
|
split.setSplits(2);
|
|
|
|
var editor1 = split.getEditor(0);
|
|
var editor2 = split.getEditor(1);
|
|
|
|
var toolbar = $("toolbar");
|
|
var modeEl = document.createElement("select");
|
|
fillDropdown(modes, modeEl);
|
|
|
|
bindDropdown(modeEl, function(value) {
|
|
editor1.session.setMode((modesByName[value] || modesByName.text).mode);
|
|
});
|
|
toolbar.appendChild(modeEl);
|
|
var button = document.createElement("input");
|
|
button.setAttribute("type", "button");
|
|
button.value = "generate test";
|
|
toolbar.appendChild(button)
|
|
|
|
function onResize() {
|
|
var top = toolbar.clientHeight;
|
|
var width = document.documentElement.clientWidth;
|
|
container.style.top = top + "px";
|
|
container.style.width = width + "px";
|
|
container.style.height = document.documentElement.clientHeight - top + "px";
|
|
split.resize();
|
|
}
|
|
|
|
window.onresize = onResize;
|
|
onResize();
|
|
|
|
|
|
|
|
|
|
button.onclick = function() {
|
|
var s = editor1.session
|
|
tok = s.bgTokenizer
|
|
var data = []
|
|
for (var i = 0; i < s.getLength(); i++) {
|
|
data.push({
|
|
text: s.getLine(i),
|
|
state: [tok.getState(i - 1), tok.getState(i)],
|
|
tokens: tok.getTokens(i)
|
|
})
|
|
}
|
|
data = JSON.stringify(data, null, 4);
|
|
data = data.replace(/(\n\s*)"(\w+)":/g, "$1$2:");
|
|
editor2.insert(data);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|