diff --git a/demo/kitchen-sink/demo.js b/demo/kitchen-sink/demo.js
index 244c1f0d..cd6b6b69 100644
--- a/demo/kitchen-sink/demo.js
+++ b/demo/kitchen-sink/demo.js
@@ -89,25 +89,25 @@ require("ace/multi_select").MultiSelect(env.editor);
var consoleEl = dom.createElement("div");
container.parentNode.appendChild(consoleEl);
-consoleEl.style.position="fixed"
-consoleEl.style.bottom = "1px"
-consoleEl.style.right = 0
-consoleEl.style.background = "white"
-consoleEl.style.border = "1px solid #baf"
-consoleEl.style.zIndex = "100"
+consoleEl.style.cssText = "position:fixed; bottom:1px; right:0;\
+border:1px solid #baf; zIndex:100";
+
var cmdLine = new layout.singleLineEditor(consoleEl);
cmdLine.editor = env.editor;
env.editor.cmdLine = cmdLine;
+/**
+ * This demonstrates how you can define commands and bind shortcuts to them.
+ */
env.editor.commands.addCommands([{
name: "gotoline",
bindKey: {win: "Ctrl-L", mac: "Command-L"},
exec: function(editor, line) {
if (typeof line == "object") {
var arg = this.name + " " + editor.getCursorPosition().row;
- editor.cmdLine.setValue(arg, 1)
- editor.cmdLine.focus()
- return
+ editor.cmdLine.setValue(arg, 1);
+ editor.cmdLine.focus();
+ return;
}
line = parseInt(line, 10);
if (!isNaN(line))
@@ -119,10 +119,10 @@ env.editor.commands.addCommands([{
bindKey: {win: "Ctrl-F", mac: "Command-F"},
exec: function(editor, needle) {
if (typeof needle == "object") {
- var arg = this.name + " " + editor.getCopyText()
- editor.cmdLine.setValue(arg, 1)
- editor.cmdLine.focus()
- return
+ var arg = this.name + " " + editor.getCopyText();
+ editor.cmdLine.setValue(arg, 1);
+ editor.cmdLine.focus();
+ return;
}
editor.find(needle);
},
@@ -136,32 +136,28 @@ env.editor.commands.addCommands([{
name: "execute",
bindKey: "ctrl+enter",
exec: function(editor) {
- try{
- var r = eval(editor.getCopyText()||editor.getValue())
- }catch(e){
- r = e
+ try {
+ var r = eval(editor.getCopyText()||editor.getValue());
+ } catch(e) {
+ r = e;
}
editor.cmdLine.setValue(r + "")
},
readOnly: true
-}])
+}]);
cmdLine.commands.bindKeys({
- "Shift-Return|Ctrl-Return|Alt-Return": function(cmdLine) { cmdLine.insert("\n")},
+ "Shift-Return|Ctrl-Return|Alt-Return": function(cmdLine) { cmdLine.insert("\n"); },
"Esc|Shift-Esc": function(cmdLine){ cmdLine.editor.focus(); },
"Return": function(cmdLine){
var command = cmdLine.getValue().split(/\s+/);
var editor = cmdLine.editor;
editor.commands.exec(command[0], editor, command[1]);
editor.focus();
- },
-})
+ }
+});
-cmdLine.commands.removeCommands(["find", "gotoline", "findall", "replace", "replaceall"])
-
-/**
- * This demonstrates how you can define commands and bind shortcuts to them.
- */
+cmdLine.commands.removeCommands(["find", "gotoline", "findall", "replace", "replaceall"]);
var commands = env.editor.commands;
commands.addCommand({
@@ -182,7 +178,7 @@ var keybindings = {
"outdent": "[",
"gotolinestart": "^",
"gotolineend": "$"
- })
+ })
};
@@ -197,13 +193,13 @@ function onResize() {
env.split.resize();
consoleEl.style.width = width + "px";
- cmdLine.resize()
+ cmdLine.resize();
}
window.onresize = onResize;
onResize();
-/*********** options pane ***************************/
+/*********** options panel ***************************/
var docEl = document.getElementById("doc");
var modeEl = document.getElementById("mode");
var wrapModeEl = document.getElementById("soft_wrap");
@@ -220,19 +216,7 @@ var animateScrollEl = document.getElementById("animate_scroll");
var softTabEl = document.getElementById("soft_tab");
var behavioursEl = document.getElementById("enable_behaviours");
-var group = document.createElement("optgroup");
-group.setAttribute("label", "Mode Examples");
-fillDropdown(group, doclist.docs);
-docEl.appendChild(group);
-var group = document.createElement("optgroup");
-group.setAttribute("label", "Huge documents");
-fillDropdown(group, doclist.hugeDocs);
-docEl.appendChild(group);
-var group = document.createElement("optgroup");
-group.setAttribute("label", "own source");
-fillDropdown(group, doclist.ownSource);
-docEl.appendChild(group);
-
+fillDropdown(docEl, doclist.all);
fillDropdown(modeEl, modelist.modes);
var modesByName = modelist.modesByName;
@@ -245,7 +229,7 @@ bindDropdown("doc", function(name) {
doclist.loadDoc(name, function(session) {
if (!session)
return;
- var session = env.split.setSession(session);
+ session = env.split.setSession(session);
updateUIEditorOptions();
env.editor.focus();
});
@@ -278,18 +262,18 @@ event.addListener(themeEl, "mouseover", function(e){
this.desiredValue = e.target.value;
if (!this.$timer)
this.$timer = setTimeout(this.updateTheme);
-})
+});
event.addListener(themeEl, "mouseout", function(e){
this.desiredValue = null;
if (!this.$timer)
this.$timer = setTimeout(this.updateTheme, 20);
-})
+});
themeEl.updateTheme = function(){
env.split.setTheme(themeEl.desiredValue || themeEl.selectedValue);
themeEl.$timer = null;
-}
+};
bindDropdown("theme", function(value) {
if (!value)
diff --git a/demo/kitchen-sink/doclist.js b/demo/kitchen-sink/doclist.js
index cba77bbb..779ffc68 100644
--- a/demo/kitchen-sink/doclist.js
+++ b/demo/kitchen-sink/doclist.js
@@ -176,8 +176,14 @@ module.exports = {
ownSource: prepareDocList(ownSource),
hugeDocs: prepareDocList(hugeDocs),
initDoc: initDoc,
- loadDoc: loadDoc
+ loadDoc: loadDoc,
+
};
-
+module.exports.all = {
+ "Mode Examples": module.exports.docs,
+ "Huge documents": module.exports.hugeDocs,
+ "own source": module.exports.ownSource
+};
+
});
diff --git a/demo/kitchen-sink/util.js b/demo/kitchen-sink/util.js
index fcc34ef7..9ba4545a 100644
--- a/demo/kitchen-sink/util.js
+++ b/demo/kitchen-sink/util.js
@@ -53,16 +53,16 @@ exports.createSplitEditor = function(el) {
e0.style.position = e1.style.position = s.style.position = "absolute";
el.style.position = "relative"
var split = {$container: el};
-
+
split.editor0 = split[0] = new Editor(new Renderer(e0, require("ace/theme/textmate")));
split.editor1 = split[1] = new Editor(new Renderer(e1, require("ace/theme/textmate")));
split.splitter = s
-
+
MultiSelect(split.editor0);
MultiSelect(split.editor1);
-
+
s.ratio = 0.5
-
+
split.resize = function resize(){
var height = el.parentNode.clientHeight - el.offsetTop;
var total = el.clientWidth;
@@ -70,26 +70,26 @@ exports.createSplitEditor = function(el) {
var w2 = total * (1- s.ratio)
s.style.left = w1 - 1 + "px";
s.style.height = el.style.height = height + "px";
-
+
var st0 = split[0].container.style
var st1 = split[1].container.style
st0.width = w1 + "px";
st1.width = w2 + "px";
st0.left = 0 + "px";
st1.left = w1 + "px";
-
+
st0.top = st1.top = "0px";
- st0.height = st1.height = height + "px";
-
+ st0.height = st1.height = height + "px";
+
split[0].resize();
split[1].resize();
}
-
+
split.onMouseDown = function(e) {
var rect = el.getBoundingClientRect()
var x = e.clientX;
var y = e.clientY;
-
+
var button = e.button;
if (button !== 0) {
return;
@@ -104,7 +104,7 @@ exports.createSplitEditor = function(el) {
};
var onResizeInterval = function() {
- s.ratio = (x - rect.left) / rect.width
+ s.ratio = (x - rect.left) / rect.width
split.resize()
};
@@ -113,9 +113,9 @@ exports.createSplitEditor = function(el) {
return e.preventDefault();
};
-
-
+
+
event.addListener(s, "mousedown", split.onMouseDown);
event.addListener(window, "resize", split.resize);
split.resize()
@@ -177,16 +177,45 @@ exports.bindDropdown = function(id, callback, noInit) {
noInit || onChange();
};
-exports.fillDropdown = function(el, list) {
+exports.fillDropdown = function(el, values) {
if (typeof el == "string")
el = document.getElementById(el);
- list.forEach(function(item) {
- var option = document.createElement("option");
- option.setAttribute("value", item.name);
- option.innerHTML = item.desc;
- el.appendChild(option);
+
+ dropdown(values).forEach(function(e) {
+ el.appendChild(e);
});
};
+function elt(tag, attributes, content) {
+ var el = dom.createElement(tag);
+ if (typeof content == "string") {
+ el.textContent = content;
+ } else {
+ content.forEach(function(ch) {
+ el.appendChild(ch);
+ });
+ }
+
+ for (var i in attributes)
+ el.setAttribute(i, attributes[i]);
+ return el
+}
+
+function optgroup(values) {
+ return values.map(function(item) {
+ return elt("option", {value: item.name}, item.desc);
+ });
+}
+
+function dropdown(values) {
+ if (Array.isArray(values))
+ return optgroup(values);
+
+ return Object.keys(values).map(function(i) {
+ return elt("optgroup", {"label": i}, optgroup(values[i]));
+ });
+}
+
+
});
diff --git a/kitchen-sink.html b/kitchen-sink.html
index 176257d8..4853bf89 100644
--- a/kitchen-sink.html
+++ b/kitchen-sink.html
@@ -1,5 +1,4 @@
-
+
@@ -7,11 +6,9 @@
Ace Kitchen Sink
@@ -23,9 +20,13 @@
PACKAGE-->
+
+