break demo into smaller parts
This commit is contained in:
nightwing
parent
6bdacdf69e
commit
48b7aa69fe
4 changed files with 94 additions and 71 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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]));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -7,11 +6,9 @@
|
|||
<title>Ace Kitchen Sink</title>
|
||||
<meta name="author" content="Fabian Jakobs">
|
||||
<!--
|
||||
|
||||
Ace
|
||||
version %version%
|
||||
commit %commit%
|
||||
|
||||
-->
|
||||
|
||||
<!--DEVEL-->
|
||||
|
|
@ -23,9 +20,13 @@
|
|||
PACKAGE-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="optionsPanel" style="position:absolute;height:100%">
|
||||
<a href="http://ajaxorg.github.com/ace/" >
|
||||
<img id="logo" src="demo/kitchen-sink/logo.png">
|
||||
</a>
|
||||
<div style="position: absolute; overflow: hidden; top:80px; bottom:0">
|
||||
<div style="width: 120%; height:100%; overflow-y: scroll">
|
||||
|
||||
<table id="controls">
|
||||
<tr>
|
||||
<td>
|
||||
|
|
@ -237,6 +238,9 @@
|
|||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue