break demo into smaller parts
This commit is contained in:
nightwing
parent
49a120990f
commit
6bdacdf69e
6 changed files with 756 additions and 384 deletions
|
|
@ -55,203 +55,18 @@ var Editor = require("ace/editor").Editor;
|
|||
var MultiSelect = require("ace/multi_select").MultiSelect;
|
||||
|
||||
// workers do not work for file:
|
||||
if (location.protocol == "file:")
|
||||
EditSession.prototype.$useWorker = false;
|
||||
/* if (location.protocol == "file:")
|
||||
EditSession.prototype.$useWorker = false; */
|
||||
|
||||
/************** 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"],
|
||||
glsl: ["Glsl" , "glsl|frag|vert"],
|
||||
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"],
|
||||
jade: ["Jade" , "jade"],
|
||||
java: ["Java" , "java"],
|
||||
jsp: ["JSP" , "jsp"],
|
||||
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"],
|
||||
tcl: ["Tcl" , "tcl"],
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
/*********** demo documents ***************************/
|
||||
var fileCache = {};
|
||||
|
||||
function initDoc(file, path, doc) {
|
||||
if (doc.prepare)
|
||||
file = doc.prepare(file);
|
||||
|
||||
var session = new EditSession(file);
|
||||
session.setUndoManager(new UndoManager());
|
||||
doc.session = session;
|
||||
doc.path = path;
|
||||
if (doc.wrapped) {
|
||||
session.setUseWrapMode(true);
|
||||
session.setWrapLimitRange(80, 80);
|
||||
}
|
||||
var mode = getModeFromPath(path)
|
||||
session.modeName = mode.name;
|
||||
session.setMode(mode.mode);
|
||||
}
|
||||
|
||||
|
||||
function makeHuge(txt) {
|
||||
for (var i = 0; i < 5; i++)
|
||||
txt += txt;
|
||||
return txt
|
||||
}
|
||||
|
||||
var docs = {
|
||||
"docs/javascript.js": "JavaScript",
|
||||
"docs/clojure.clj": "Clojure",
|
||||
"docs/coffeescript.coffee": "Coffeescript",
|
||||
"docs/coldfusion.cfm": "ColdFusion",
|
||||
"docs/cpp.cpp": "C/C++",
|
||||
"docs/csharp.cs": "C#",
|
||||
"docs/css.css": "CSS",
|
||||
"docs/diff.diff": "Diff",
|
||||
"docs/glsl.glsl": "Glsl",
|
||||
"docs/golang.go": "Go",
|
||||
"docs/groovy.groovy": "Groovy",
|
||||
"docs/Haxe.hx": "haXe",
|
||||
"docs/html.html": "HTML",
|
||||
"docs/jade.jade": "Jade",
|
||||
"docs/java.java": "Java",
|
||||
"docs/jsp.jsp": "JSP",
|
||||
"docs/json.json": "JSON",
|
||||
"docs/jsx.jsx": "JSX",
|
||||
"docs/latex.tex": {name: "LaTeX", wrapped: true},
|
||||
"docs/less.less": "LESS",
|
||||
"docs/liquid.liquid": "Liquid",
|
||||
"docs/lua.lua": "Lua",
|
||||
"docs/luapage.lp": "LuaPage",
|
||||
"docs/markdown.md": {name: "Markdown", wrapped: true},
|
||||
"docs/ocaml.ml": "OCaml",
|
||||
"docs/OpenSCAD.scad": "OpenSCAD",
|
||||
"docs/perl.pl": "Perl",
|
||||
"docs/pgsql.pgsql": {name: "pgSQL", wrapped: true},
|
||||
"docs/php.php": "PHP",
|
||||
"docs/plaintext.txt": {name: "Plain Text", prepare: makeHuge, wrapped: true},
|
||||
"docs/powershell.ps1": "Powershell",
|
||||
"docs/python.py": "Python",
|
||||
"docs/ruby.rb": "Ruby",
|
||||
"docs/scala.scala": "Scala",
|
||||
"docs/scss.scss": "SCSS",
|
||||
"docs/sh.sh": "SH",
|
||||
"docs/sql.sql": {name: "SQL", wrapped: true},
|
||||
"docs/svg.svg": "SVG",
|
||||
"docs/tcl.tcl": "Tcl",
|
||||
"docs/textile.textile": {name: "Textile", wrapped: true},
|
||||
"docs/xml.xml": "XML",
|
||||
"docs/xquery.xq": "XQuery",
|
||||
"docs/yaml.yaml": "YAML",
|
||||
"docs/c9search.c9search_results": "C9 Search Results"
|
||||
}
|
||||
|
||||
var ownSource = {
|
||||
/* filled from require*/
|
||||
};
|
||||
|
||||
var hugeDocs = {
|
||||
"build/src/ace.js": "",
|
||||
"build/src-min/ace.js": ""
|
||||
};
|
||||
|
||||
if (window.require && window.require.s) try {
|
||||
for (var path in window.require.s.contexts._.loaded) {
|
||||
if (path.indexOf("!") != -1)
|
||||
path = path.split("!").pop();
|
||||
else
|
||||
path = path + ".js";
|
||||
ownSource[path] = ""
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
function prepareDocList(docs) {
|
||||
var list = []
|
||||
for (var path in docs) {
|
||||
var doc = docs[path];
|
||||
if (typeof doc != "object")
|
||||
doc = {name: doc || path};
|
||||
|
||||
doc.path = path;
|
||||
doc.desc = doc.name.replace(/^(ace|docs|demo|build)\//, "");
|
||||
if (doc.desc.length > 18)
|
||||
doc.desc = doc.desc.slice(0, 7) + ".." + doc.desc.slice(-9)
|
||||
|
||||
fileCache[doc.name] = doc;
|
||||
list.push(doc);
|
||||
};
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
docs = prepareDocList(docs);
|
||||
ownSource = prepareDocList(ownSource);
|
||||
hugeDocs = prepareDocList(hugeDocs);
|
||||
var doclist = require("./doclist");
|
||||
var modelist = require("./modelist");
|
||||
var layout = require("./layout");
|
||||
var Autocompleter = require("./autocompleter").Autocompleter;
|
||||
var util = require("./util");
|
||||
var saveOption = util.saveOption;
|
||||
var fillDropdown = util.fillDropdown;
|
||||
var bindCheckbox = util.bindCheckbox
|
||||
var bindDropdown = util.bindDropdown;
|
||||
|
||||
/*********** create editor ***************************/
|
||||
var container = document.getElementById("editor");
|
||||
|
|
@ -269,6 +84,9 @@ window.env = env;
|
|||
window.ace = env.editor;
|
||||
env.editor.setAnimatedScroll(true);
|
||||
|
||||
// add multiple cursor support to editor
|
||||
require("ace/multi_select").MultiSelect(env.editor);
|
||||
|
||||
var consoleEl = dom.createElement("div");
|
||||
container.parentNode.appendChild(consoleEl);
|
||||
consoleEl.style.position="fixed"
|
||||
|
|
@ -277,7 +95,7 @@ consoleEl.style.right = 0
|
|||
consoleEl.style.background = "white"
|
||||
consoleEl.style.border = "1px solid #baf"
|
||||
consoleEl.style.zIndex = "100"
|
||||
var cmdLine = new singleLineEditor(consoleEl);
|
||||
var cmdLine = new layout.singleLineEditor(consoleEl);
|
||||
cmdLine.editor = env.editor;
|
||||
env.editor.cmdLine = cmdLine;
|
||||
|
||||
|
|
@ -314,6 +132,18 @@ env.editor.commands.addCommands([{
|
|||
bindKey: "shift-esc",
|
||||
exec: function(editor, needle) { editor.cmdLine.focus(); },
|
||||
readOnly: true
|
||||
}, {
|
||||
name: "execute",
|
||||
bindKey: "ctrl+enter",
|
||||
exec: function(editor) {
|
||||
try{
|
||||
var r = eval(editor.getCopyText()||editor.getValue())
|
||||
}catch(e){
|
||||
r = e
|
||||
}
|
||||
editor.cmdLine.setValue(r + "")
|
||||
},
|
||||
readOnly: true
|
||||
}])
|
||||
|
||||
cmdLine.commands.bindKeys({
|
||||
|
|
@ -358,12 +188,12 @@ var keybindings = {
|
|||
|
||||
|
||||
/*********** manage layout ***************************/
|
||||
var consoleHight = 20;
|
||||
var consoleHeight = 20;
|
||||
function onResize() {
|
||||
var left = env.split.$container.offsetLeft;
|
||||
var width = document.documentElement.clientWidth - left;
|
||||
container.style.width = width + "px";
|
||||
container.style.height = document.documentElement.clientHeight - consoleHight + "px";
|
||||
container.style.height = document.documentElement.clientHeight - consoleHeight + "px";
|
||||
env.split.resize();
|
||||
|
||||
consoleEl.style.width = width + "px";
|
||||
|
|
@ -392,52 +222,33 @@ var behavioursEl = document.getElementById("enable_behaviours");
|
|||
|
||||
var group = document.createElement("optgroup");
|
||||
group.setAttribute("label", "Mode Examples");
|
||||
fillDropdown(docs, group);
|
||||
fillDropdown(group, doclist.docs);
|
||||
docEl.appendChild(group);
|
||||
var group = document.createElement("optgroup");
|
||||
group.setAttribute("label", "Huge documents");
|
||||
fillDropdown(hugeDocs, group);
|
||||
fillDropdown(group, doclist.hugeDocs);
|
||||
docEl.appendChild(group);
|
||||
var group = document.createElement("optgroup");
|
||||
group.setAttribute("label", "own source");
|
||||
fillDropdown(ownSource, group);
|
||||
fillDropdown(group, doclist.ownSource);
|
||||
docEl.appendChild(group);
|
||||
|
||||
|
||||
fillDropdown(modes, modeEl);
|
||||
|
||||
fillDropdown(modeEl, modelist.modes);
|
||||
var modesByName = modelist.modesByName;
|
||||
bindDropdown("mode", function(value) {
|
||||
env.editor.getSession().setMode(modesByName[value].mode || modesByName.text.mode);
|
||||
env.editor.getSession().modeName = value;
|
||||
env.editor.session.setMode(modesByName[value].mode || modesByName.text.mode);
|
||||
env.editor.session.modeName = value;
|
||||
});
|
||||
|
||||
bindDropdown("doc", function(name) {
|
||||
var doc = fileCache[name];
|
||||
if (!doc)
|
||||
return;
|
||||
|
||||
if (doc.session)
|
||||
return setSession(doc.session)
|
||||
|
||||
//@todo do something while waiting
|
||||
// env.editor.setSession(emptySession || (emptySession = new EditSession("")))
|
||||
var path = doc.path;
|
||||
var parts = path.split("/");
|
||||
if (parts[0] == "docs")
|
||||
path = "demo/kitchen-sink/" + path;
|
||||
else if (parts[0] == "ace")
|
||||
path = "lib/" + path;
|
||||
|
||||
net.get(path, function(x) {
|
||||
initDoc(x, path, doc);
|
||||
setSession(doc.session)
|
||||
})
|
||||
|
||||
function setSession(session) {
|
||||
doclist.loadDoc(name, function(session) {
|
||||
if (!session)
|
||||
return;
|
||||
var session = env.split.setSession(session);
|
||||
updateUIEditorOptions();
|
||||
env.editor.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function updateUIEditorOptions() {
|
||||
|
|
@ -463,24 +274,6 @@ function updateUIEditorOptions() {
|
|||
saveOption(behavioursEl, editor.getBehavioursEnabled());
|
||||
}
|
||||
|
||||
function saveOption(el, val) {
|
||||
if (!el.onchange && !el.onclick)
|
||||
return;
|
||||
|
||||
if ("checked" in el) {
|
||||
if (val !== undefined)
|
||||
el.checked = val;
|
||||
|
||||
localStorage && localStorage.setItem(el.id, el.checked ? 1 : 0);
|
||||
}
|
||||
else {
|
||||
if (val !== undefined)
|
||||
el.value = val;
|
||||
|
||||
localStorage && localStorage.setItem(el.id, el.value);
|
||||
}
|
||||
}
|
||||
|
||||
event.addListener(themeEl, "mouseover", function(e){
|
||||
this.desiredValue = e.target.value;
|
||||
if (!this.$timer)
|
||||
|
|
@ -514,33 +307,28 @@ bindDropdown("fontsize", function(value) {
|
|||
});
|
||||
|
||||
bindDropdown("folding", function(value) {
|
||||
env.editor.getSession().setFoldStyle(value);
|
||||
env.editor.session.setFoldStyle(value);
|
||||
env.editor.setShowFoldWidgets(value !== "manual");
|
||||
});
|
||||
|
||||
bindDropdown("soft_wrap", function(value) {
|
||||
var session = env.editor.getSession();
|
||||
var session = env.editor.session;
|
||||
var renderer = env.editor.renderer;
|
||||
switch (value) {
|
||||
case "off":
|
||||
session.setUseWrapMode(false);
|
||||
renderer.setPrintMarginColumn(80);
|
||||
break;
|
||||
case "40":
|
||||
session.setUseWrapMode(true);
|
||||
session.setWrapLimitRange(40, 40);
|
||||
renderer.setPrintMarginColumn(40);
|
||||
break;
|
||||
case "80":
|
||||
session.setUseWrapMode(true);
|
||||
session.setWrapLimitRange(80, 80);
|
||||
renderer.setPrintMarginColumn(80);
|
||||
break;
|
||||
case "free":
|
||||
session.setUseWrapMode(true);
|
||||
session.setWrapLimitRange(null, null);
|
||||
renderer.setPrintMarginColumn(80);
|
||||
break;
|
||||
default:
|
||||
session.setUseWrapMode(true);
|
||||
var col = parseInt(value, 10);
|
||||
session.setWrapLimitRange(col, col);
|
||||
renderer.setPrintMarginColumn(col);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -581,7 +369,7 @@ bindCheckbox("animate_scroll", function(checked) {
|
|||
});
|
||||
|
||||
bindCheckbox("soft_tab", function(checked) {
|
||||
env.editor.getSession().setUseSoftTabs(checked);
|
||||
env.editor.session.setUseSoftTabs(checked);
|
||||
});
|
||||
|
||||
bindCheckbox("enable_behaviours", function(checked) {
|
||||
|
|
@ -617,42 +405,6 @@ bindDropdown("split", function(value) {
|
|||
}
|
||||
});
|
||||
|
||||
function bindCheckbox(id, callback) {
|
||||
var el = document.getElementById(id);
|
||||
if (localStorage && localStorage.getItem(id))
|
||||
el.checked = localStorage.getItem(id) == "1";
|
||||
|
||||
var onCheck = function() {
|
||||
callback(!!el.checked);
|
||||
saveOption(el);
|
||||
};
|
||||
el.onclick = onCheck;
|
||||
onCheck();
|
||||
}
|
||||
|
||||
function bindDropdown(id, callback) {
|
||||
var el = document.getElementById(id);
|
||||
if (localStorage && localStorage.getItem(id))
|
||||
el.value = localStorage.getItem(id);
|
||||
|
||||
var onChange = function() {
|
||||
callback(el.value);
|
||||
saveOption(el);
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/************** dragover ***************************/
|
||||
event.addListener(container, "dragover", function(e) {
|
||||
|
|
@ -681,96 +433,10 @@ event.addListener(container, "drop", function(e) {
|
|||
}
|
||||
});
|
||||
|
||||
// add multiple cursor support to editor
|
||||
require("ace/multi_select").MultiSelect(env.editor);
|
||||
|
||||
|
||||
|
||||
function singleLineEditor(el) {
|
||||
var renderer = new Renderer(el);
|
||||
renderer.scrollBar.element.style.display = "none";
|
||||
renderer.scrollBar.width = 0;
|
||||
renderer.content.style.height = "auto";
|
||||
|
||||
renderer.screenToTextCoordinates = function(x, y) {
|
||||
var pos = this.pixelToScreenCoordinates(x, y);
|
||||
return this.session.screenToDocumentPosition(
|
||||
Math.min(this.session.getScreenLength() - 1, Math.max(pos.row, 0)),
|
||||
Math.max(pos.column, 0)
|
||||
);
|
||||
};
|
||||
// todo size change event
|
||||
renderer.$computeLayerConfig = function() {
|
||||
var longestLine = this.$getLongestLine();
|
||||
var firstRow = 0;
|
||||
var lastRow = this.session.getLength();
|
||||
var height = this.session.getScreenLength() * this.lineHeight;
|
||||
|
||||
this.scrollTop = 0;
|
||||
var config = this.layerConfig;
|
||||
config.width = longestLine;
|
||||
config.padding = this.$padding;
|
||||
config.firstRow = 0;
|
||||
config.firstRowScreen = 0;
|
||||
config.lastRow = lastRow;
|
||||
config.lineHeight = this.lineHeight;
|
||||
config.characterWidth = this.characterWidth;
|
||||
config.minHeight = height;
|
||||
config.maxHeight = height;
|
||||
config.offset = 0;
|
||||
config.height = height;
|
||||
|
||||
this.$gutterLayer.element.style.marginTop = 0 + "px";
|
||||
this.content.style.marginTop = 0 + "px";
|
||||
this.content.style.width = longestLine + 2 * this.$padding + "px";
|
||||
this.content.style.height = height + "px";
|
||||
this.scroller.style.height = height + "px";
|
||||
this.container.style.height = height + "px";
|
||||
};
|
||||
renderer.isScrollableBy=function(){return false};
|
||||
|
||||
var editor = new Editor(renderer);
|
||||
new MultiSelect(editor);
|
||||
editor.session.setUndoManager(new UndoManager());
|
||||
|
||||
editor.setHighlightActiveLine(false);
|
||||
editor.setShowPrintMargin(false);
|
||||
editor.renderer.setShowGutter(false);
|
||||
editor.renderer.setHighlightGutterLine(false);
|
||||
return editor;
|
||||
};
|
||||
|
||||
|
||||
/** simple statusbar **/
|
||||
var editor = env.editor;
|
||||
var statusBarEl = dom.createElement("div");
|
||||
statusBarEl.style.cssText = "color:gray;position:absolute;right:0;border-left:1px solid";
|
||||
cmdLine.container.appendChild(statusBarEl);
|
||||
var statusUpdate = lang.deferredCall(function() {
|
||||
var status = [];
|
||||
function add(s, sep) {s && status.push(s, sep || "|")}
|
||||
if (editor.$vimModeHandler)
|
||||
add(editor.$vimModeHandler.getStatusText());
|
||||
else if (editor.commands.recording)
|
||||
add("REC");
|
||||
|
||||
var c = editor.selection.lead;
|
||||
add(c.row + ":" + c.column, " ");
|
||||
if (!editor.selection.isEmpty()) {
|
||||
var r = editor.getSelectionRange()
|
||||
add("(" + (r.end.row - r.start.row) + ":" +(r.end.column - r.start.column) + ")");
|
||||
}
|
||||
status.pop();
|
||||
statusBarEl.textContent = status.join("");
|
||||
});
|
||||
|
||||
env.editor.on("changeStatus", function() {
|
||||
statusUpdate.schedule(50);
|
||||
});
|
||||
env.editor.on("changeSelection", function() {
|
||||
statusUpdate.schedule(50);
|
||||
});
|
||||
|
||||
var StatusBar = require("./statusbar").StatusBar;
|
||||
new StatusBar(env.editor, cmdLine.container);
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue