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

extend demo

Browse source
This commit is contained in:
Fabian Jakobs 2011-01-27 19:41:08 +01:00
commit 56a6f985d5
3 changed files with 57 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

59
demo/startup.js
View file

@ -75,36 +75,6 @@ exports.launch = function(env) {
docs.js.setMode(new JavaScriptMode());
docs.js.setUndoManager(new UndoManager());
if (false && window.Worker) {
var worker = new WorkerClient("../..", ["ace", "pilot"], "ace/worker/mirror", "Mirror");
worker.call("setValue", [docs.js.getValue()]);
docs.js.getDocument().on("change", function(e) {
e.range = {
start: e.data.range.start,
end: e.data.range.end
};
worker.emit("change", e);
});
worker.on("jslint", function(results) {
var errors = [];
for (var i=0; i<results.data.length; i++) {
var error = results.data[i];
if (error)
errors.push({
row: error.line-1,
column: error.character-1,
text: error.reason,
type: "error",
lint: error
})
}
docs.js.setAnnotations(errors)
});
};
docs.css = new EditSession(document.getElementById("csstext").innerHTML);
docs.css.setMode(new CssMode());
docs.css.setUndoManager(new UndoManager());
@ -140,11 +110,7 @@ exports.launch = function(env) {
}
var modeEl = document.getElementById("mode");
function setMode() {
env.editor.getSession().setMode(modes[modeEl.value] || modes.text);
}
modeEl.onchange = setMode;
setMode();
var wrapModeEl = document.getElementById("soft_wrap");
// This is how you can set a custom keyboardHandler.
//
@ -182,10 +148,15 @@ exports.launch = function(env) {
else {
modeEl.value = "text";
}
wrapModeEl.checked = doc.getUseWrapMode() ? "checked" : "";
env.editor.focus();
});
bindDropdown("mode", function(value) {
env.editor.getSession().setMode(modes[value] || modes.text);
});
bindDropdown("theme", function(value) {
env.editor.setTheme(value);
});
@ -202,6 +173,18 @@ exports.launch = function(env) {
env.editor.setShowInvisibles(checked);
});
bindCheckbox("show_gutter", function(checked) {
env.editor.renderer.setShowGutter(checked);
});
bindCheckbox("show_print_margin", function(checked) {
env.editor.renderer.setShowPrintMargin(checked);
});
bindCheckbox("soft_wrap", function(checked) {
env.editor.getSession().setUseWrapMode(checked);
});
function bindCheckbox(id, callback) {
var el = document.getElementById(id);
var onCheck = function() {
@ -221,8 +204,8 @@ exports.launch = function(env) {
}
function onResize() {
container.style.width = (document.documentElement.clientWidth - 4) + "px";
container.style.height = (document.documentElement.clientHeight - 55 - 4 - 23) + "px";
container.style.width = (document.documentElement.clientWidth) + "px";
container.style.height = (document.documentElement.clientHeight - 60 - 22) + "px";
env.editor.resize();
};

8
demo/styles.css
View file

@ -1,4 +1,4 @@
html {
html {
height: 100%;
overflow: hidden;
}
@ -15,15 +15,15 @@ body {
color: white;
}
#editor {
top: 55px;
#editor {
position: absolute;
top: 60px;
left: 0px;
background: white;
}
#controls {
width: 100%;
height: 55px;
}
#cockpitInput {

42
editor.html
View file

@ -11,7 +11,7 @@
<body>
<table id="controls">
<tr>
<td>
<td rowspan="2">
<label for="doc">Document:</label>
<select id="doc" size="1">
<option value="js">JS Document</option>
@ -22,7 +22,7 @@
<option value="plain">Text Document</option>
</select>
</td>
<td>
<td rowspan="2">
<label for="mode">Mode:</label>
<select id="mode" size="1">
<option value="text">Plain Text</option>
@ -34,7 +34,7 @@
<option value="php">PHP</option>
</select>
</td>
<td>
<td align="right">
<label for="theme">Theme:</label>
<select id="theme" size="1">
<option value="ace/theme/textmate">TextMate</option>
@ -45,22 +45,44 @@
<option value="ace/theme/twilight">Twilight</option>
</select>
</td>
<td>
<label for="select_style">Full line selections</label>
<td align="right">
<label for="select_style">Full Line Selection</label>
<input type="checkbox" name="select_style" id="select_style" checked>
</td>
<td>
<label for="highlight_active">Highlight active line</label>
<td align="right">
<label for="highlight_active">Highlight Active Line</label>
<input type="checkbox" name="highlight_active" id="highlight_active" checked>
</td>
<td>
<label for="show_hidden">Show invisibles</label>
<td align="right">
<label for="show_hidden">Show Invisibles</label>
<input type="checkbox" name="show_hidden" id="show_hidden">
</td>
<td align="right">
<td align="right" rowspan="2">
<img src="demo/logo.png">
</td>
</tr>
<tr>
<td align="right">
<label for="keybinding">Key Binding:</label>
<select id="keybinding" size="1">
<option value="ace">Ace</option>
<option value="vim">Vim</option>
<option value="emace">Emacs</option>
</select>
</td>
<td align="right">
<label for="show_gutter">Show Gutter</label>
<input type="checkbox" id="show_gutter" checked>
</td>
<td align="right">
<label for="show_print_margin">Show Print Margin</label>
<input type="checkbox" id="show_print_margin" checked>
</td>
<td align="right">
<label for="soft_wrap">Soft Wrap</label>
<input type="checkbox" id="soft_wrap">
</td>
</tr>
</table>
<div id="editor">