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

cleanup demo html pages

Browse source
This commit is contained in:
nightwing 2014-04-16 23:13:40 +04:00
commit efea2a755b
13 changed files with 180 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

40
Makefile.dryice.js
View file

@ -247,6 +247,46 @@ function demo(project) {
}); });
copyFileSync(ACE_HOME + "/demo/kitchen-sink/logo.png", BUILD_DIR + "/kitchen-sink/logo.png"); copyFileSync(ACE_HOME + "/demo/kitchen-sink/logo.png", BUILD_DIR + "/kitchen-sink/logo.png");
fs.readdirSync(ACE_HOME + "/demo/").forEach(function(x) {
if (/\s|requirejs/.test(x) || !/\.(js|html)$/.test(x))
return;
copy({
source: ACE_HOME +"/demo/" + x,
dest: BUILD_DIR + "/demo/" + x,
filter: [function(source) {
if (/\.(js)$/.test(x))
return source;
var removeRequireJS
source = source.replace(/<script src="kitchen-sink\/require.js"[\s\S]+?require\(\[([^\]]+).*/, function(e, m){
removeRequireJS = true;
var scripts = m.split(/,\s*/);
var result = [];
function comment(str) {result.push("<!-- " + str + " -->")};
function script(str) {result.push('<script src="../src/' + str + '.js"></script>')}
scripts.forEach(function(s) {
s = s.replace(/"/g, "");
if (s == "ace/ace") {
comment("load ace")
script("ace")
} else {
var extName = s.match(/[^/]*$/)[0];
comment("load ace " + extName + " extension");
script("ext-" + extName);
}
});
result.push("<script>")
return result.join("\n");
});
if (removeRequireJS)
source = source.replace(/\s*\}\);?\s*(<\/script>)/, "\n$1");
source = source.replace(/"\.\.\/build\//g, function(e) {
console.log(e); return '"../';
});
return source;
}]
});
});
} }
function jsFileList(path, filter) { function jsFileList(path, filter) {

3
demo/autocompletion.html
View file

@ -35,7 +35,8 @@
// enable autocompletion and snippets // enable autocompletion and snippets
editor.setOptions({ editor.setOptions({
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
enableSnippets: true enableSnippets: true,
enableLiveAutocompletion: false
}); });
</script> </script>

24
demo/autoresize.html
View file

@ -20,29 +20,37 @@
</style> </style>
</head> </head>
<body> <body>
<pre id="editor">autoresizing editor</pre> <pre id="editor1">autoresizing editor</pre>
<div class="scrollmargin"></div> <div class="scrollmargin"></div>
<pre id="editor2">minHeight = 2 lines</pre> <pre id="editor2">minHeight = 2 lines</pre>
<div class="scrollmargin"></div>
<pre id="editor"></pre>
<script src="../build/src/ace.js"></script> <script src="../build/src/ace.js"></script>
<script> <script>
// create first editor var editor1 = ace.edit("editor1");
var editor = ace.edit("editor"); editor1.setTheme("ace/theme/tomorrow_night_eighties");
editor.setTheme("ace/theme/tomorrow"); editor1.session.setMode("ace/mode/html");
editor.session.setMode("ace/mode/html"); editor1.setAutoScrollEditorIntoView(true);
editor.setAutoScrollEditorIntoView(); editor1.setOption("maxLines", 30);
editor.setOption("maxLines", 100);
var editor2 = ace.edit("editor2"); var editor2 = ace.edit("editor2");
editor2.setTheme("ace/theme/tomorrow_night_blue"); editor2.setTheme("ace/theme/tomorrow_night_blue");
editor2.session.setMode("ace/mode/html"); editor2.session.setMode("ace/mode/html");
editor2.setAutoScrollEditorIntoView(); editor2.setAutoScrollEditorIntoView(true);
editor2.setOption("maxLines", 30); editor2.setOption("maxLines", 30);
editor2.setOption("minLines", 2); editor2.setOption("minLines", 2);
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow");
editor.session.setMode("ace/mode/html");
editor.setAutoScrollEditorIntoView(true);
editor.setOption("maxLines", 100);
</script> </script>
<script src="./show_own_source.js"></script>
</body> </body>
</html> </html>

15
demo/emmet.html
View file

@ -22,19 +22,20 @@
<pre id="editor"></pre> <pre id="editor"></pre>
<!-- load ace --> <!-- load emmet code and snippets compiled for browser -->
<script src="../build/src-noconflict/ace.js"></script>
<!-- load ace emmet extension -->
<script src="../build/src-noconflict/ext-emmet.js"></script>
<!-- load core emmet files -->
<script src="https://nightwing.github.io/emmet-core/emmet.js"></script> <script src="https://nightwing.github.io/emmet-core/emmet.js"></script>
<script src="kitchen-sink/require.js"></script>
<script> <script>
// trigger extension // setup paths
ace.require("ace/ext/emmet"); require.config({paths: { "ace" : "../lib/ace"}});
// load ace and extensions
require(["ace/ace", "ace/ext/emmet"], function(ace) {
var editor = ace.edit("editor"); var editor = ace.edit("editor");
editor.session.setMode("ace/mode/html"); editor.session.setMode("ace/mode/html");
// enable emmet on the current editor // enable emmet on the current editor
editor.setOption("enableEmmet", true); editor.setOption("enableEmmet", true);
});
</script> </script>
<script src="./show_own_source.js"></script> <script src="./show_own_source.js"></script>

2
demo/ie7.html
View file

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ACE Editor StatusBar Demo</title> <title>ACE Editor StatusBar Demo</title>
<style type="text/css" media="screen"> <style type="text/css" media="screen">
/*!important without this top: 0; bottom: 0 doesn't work */ /*!important without this top: 0; bottom: 0 doesn't work on old ie */
body, html { body, html {
position: absolute; position: absolute;
top: 0px; bottom: 0; left: 0; right: 0; top: 0px; bottom: 0; left: 0; right: 0;

7
demo/keyboard_shortcuts.html
View file

@ -22,8 +22,11 @@
<pre id="editor"></pre> <pre id="editor"></pre>
<script src="../build/src-noconflict/ace.js"></script> <script src="kitchen-sink/require.js"></script>
<script> <script>
// setup paths
require.config({paths: { "ace" : "../lib/ace"}});
require(["ace/ace"], function(ace) {
var editor = ace.edit("editor") var editor = ace.edit("editor")
editor.setTheme("ace/theme/twilight") editor.setTheme("ace/theme/twilight")
editor.session.setMode("ace/mode/html") editor.session.setMode("ace/mode/html")
@ -39,6 +42,8 @@
}) })
} }
}) })
editor.execCommand("showKeyboardShortcuts")
})
</script> </script>
<script src="./show_own_source.js"></script> <script src="./show_own_source.js"></script>

13
demo/modelist.html
View file

@ -23,24 +23,27 @@
<pre id="editor"></pre> <pre id="editor"></pre>
<script src="../build/src-noconflict/ace.js"></script> <script src="kitchen-sink/require.js"></script>
<script src="../build/src-noconflict/ext-modelist.js"></script>
<script> <script>
// setup paths
require.config({paths: { "ace" : "../lib/ace"}});
// load ace and extensions
require(["ace/ace", "ace/ext/modelist"], function(ace) {
var editor = ace.edit("editor"); var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight"); editor.setTheme("ace/theme/twilight");
(function () { (function () {
var modelist = ace.require('ace/ext/modelist'); var modelist = ace.require("ace/ext/modelist");
// the file path could come from an xmlhttp request, a drop event, // the file path could come from an xmlhttp request, a drop event,
// or any other scriptable file loading process. // or any other scriptable file loading process.
// Extensions could consume the modelist and use it to dynamically // Extensions could consume the modelist and use it to dynamically
// set the editor mode. Webmasters could use it in their scripts // set the editor mode. Webmasters could use it in their scripts
// for site specific purposes as well. // for site specific purposes as well.
var filePath = 'blahblah/weee/some.js'; var filePath = "blahblah/weee/some.js";
var mode = modelist.getModeForPath(filePath).mode; var mode = modelist.getModeForPath(filePath).mode;
console.log(mode); console.log(mode);
editor.session.setMode(mode); editor.session.setMode(mode);
}()); }());
})
</script> </script>
<script src="./show_own_source.js"></script> <script src="./show_own_source.js"></script>

88
demo/scrollable-page.html
View file

@ -5,19 +5,18 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title> <title>Editor</title>
<style type="text/css" media="screen"> <style type="text/css" media="screen">
.ace_editor {
.ace_editor { position: relative !important;
position: relative !important; border: 1px solid lightgray;
border: 1px solid lightgray; margin: auto;
margin: auto; height: 200px;
height: 200px; width: 80%;
width: 80%; }
}
.ace_editor.fullScreen { .ace_editor.fullScreen {
height: auto; height: auto;
width: auto; width: auto;
border: 0; border: 0;
margin: 0; margin: 0;
position: fixed !important; position: fixed !important;
top: 0; top: 0;
@ -25,17 +24,16 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
background: white;
} }
.fullScreen { .fullScreen {
overflow: hidden overflow: hidden
} }
.scrollmargin { .scrollmargin {
height: 500px; height: 500px;
text-align: center; text-align: center;
} }
.large-button { .large-button {
color: lightblue; color: lightblue;
@ -56,7 +54,7 @@
<body> <body>
<div class="scrollmargin"> <div class="scrollmargin">
<span onclick="scroll()" class="large-button"> <span onclick="scroll()" class="large-button">
scroll down &dArr; scroll down &dArr;
</span> </span>
</div> </div>
<pre id="editor">function foo(items) { <pre id="editor">function foo(items) {
@ -76,28 +74,35 @@
</div> </div>
<script src="../build/src/ace.js"></script> <script src="kitchen-sink/require.js"></script>
<script> <script>
require.config({paths: { "ace" : "../lib/ace"}});
require(["ace/ace", "ace/ext/themelist"], function(ace) {
var $ = document.getElementById.bind(document); var $ = document.getElementById.bind(document);
var dom = require("ace/lib/dom"); var dom = require("ace/lib/dom");
//add command to all new editor instaces //add command to all new editor instaces
require("ace/commands/default_commands").commands.push({ require("ace/commands/default_commands").commands.push({
name: "Toggle Fullscreen", name: "Toggle Fullscreen",
bindKey: "F11", bindKey: "F11",
exec: function(editor) { exec: function(editor) {
dom.toggleCssClass(document.body, "fullScreen") var fullScreen = dom.toggleCssClass(document.body, "fullScreen")
dom.toggleCssClass(editor.container, "fullScreen") dom.setCssClass(editor.container, "fullScreen", fullScreen)
editor.setAutoScrollEditorIntoView() editor.setAutoScrollEditorIntoView(!fullScreen)
editor.resize() editor.resize()
} }
}) })
// create first editor // create first editor
var editor = ace.edit("editor"); var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight"); editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/javascript"); editor.session.setMode("ace/mode/javascript");
editor.setAutoScrollEditorIntoView(); editor.renderer.setScrollMargin(10, 10);
editor.setOptions({
// "scrollPastEnd": 0.8,
autoScrollEditorIntoView: true
});
var count = 1; var count = 1;
function add() { function add() {
@ -110,12 +115,13 @@ function add() {
oldEl.parentNode.insertBefore(el, pad.nextSibling) oldEl.parentNode.insertBefore(el, pad.nextSibling)
count++ count++
var theme = "ace/theme/" + themes[Math.floor(themes.length * Math.random() - 1e-5)] var theme = themes[Math.floor(themes.length * Math.random() - 1e-5)]
editor = ace.edit(el) editor = ace.edit(el)
editor.setTheme(theme) editor.setOptions({
editor.session.setMode("ace/mode/javascript") mode: "ace/mode/javascript",
theme: theme,
editor.setAutoScrollEditorIntoView() autoScrollEditorIntoView: true
})
editor.setValue([ editor.setValue([
"this is editor number: ", count, "\n", "this is editor number: ", count, "\n",
@ -126,7 +132,6 @@ function add() {
scroll() scroll()
} }
function scroll(speed) { function scroll(speed) {
var top = editor.container.getBoundingClientRect().top var top = editor.container.getBoundingClientRect().top
speed = speed || 10 speed = speed || 10
@ -139,14 +144,11 @@ function scroll(speed) {
} }
} }
var themes = { var themes = require("ace/ext/themelist").themes.map(function(t){return t.theme});
bright: [ "chrome", "clouds", "crimson_editor", "dawn", "dreamweaver", "eclipse", "github",
"solarized_light", "textmate", "tomorrow"], window.add = add;
dark: [ "clouds_midnight", "cobalt", "idle_fingers", "kr_theme", "merbivore", "merbivore_soft", window.scroll = scroll;
"mono_industrial", "monokai", "pastel_on_dark", "solarized_dark", "terminal", "tomorrow_night", });
"tomorrow_night_blue", "tomorrow_night_bright", "tomorrow_night_eighties", "twilight", "vibrant_ink"]
}
themes = [].concat(themes.bright, themes.dark);
</script> </script>
</body> </body>

8
demo/settings_menu.html
View file

@ -23,9 +23,12 @@
<pre id="editor"></pre> <pre id="editor"></pre>
<script src="../build/src-noconflict/ace.js"></script> <script src="kitchen-sink/require.js"></script>
<script src="../build/src-noconflict/ext-settings_menu.js"></script>
<script> <script>
// setup paths
require.config({paths: { "ace" : "../lib/ace"}});
// load ace and extensions
require(["ace/ace", "ace/ext/settings_menu"], function(ace) {
var editor = ace.edit("editor"); var editor = ace.edit("editor");
ace.require('ace/ext/settings_menu').init(editor); ace.require('ace/ext/settings_menu').init(editor);
editor.setTheme("ace/theme/twilight"); editor.setTheme("ace/theme/twilight");
@ -38,6 +41,7 @@
}, },
readOnly: true readOnly: true
}]); }]);
})
</script> </script>
<script src="./show_own_source.js"></script> <script src="./show_own_source.js"></script>

19
demo/show_own_source.js
View file

@ -1,3 +1,16 @@
ace.require("ace/lib/net").get(document.baseURI, function(t){ if (typeof ace == "undefined" && typeof require == "undefined") {
editor.setValue(t, 1); document.body.innerHTML = "<p style='padding: 20px 50px;'>couldn't find ace.js file, <br>"
}) + "to build it run <code>node Makefile.dryice.js full<code>"
} else if (typeof ace == "undefined" && typeof require != "undefined") {
require(["ace/ace"], setValue)
} else {
require = ace.require;
setValue()
}
function setValue() {
require("ace/lib/net").get(document.baseURI, function(t){
var el = document.getElementById("editor");
el.env.editor.setValue(t, 1);
})
}

42
demo/static-highlighter/client-noconflict.html → demo/static-highlighter.html
View file

@ -1,5 +1,4 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@ -34,30 +33,31 @@ function wobble (flam) {
return flam.wobbled = true; return flam.wobbled = true;
} }
// the scrollbars are from overflow auto on .ace_editor.
</pre> </pre>
<script src="../../build/src-noconflict/ace.js"></script> <script src="kitchen-sink/require.js"></script>
<script src="../../build/src-noconflict/ext-static_highlight.js"></script>
<script> <script>
var highlight = ace.require("ace/ext/static_highlight") require.config({paths: { "ace" : "../lib/ace"}});
var dom = ace.require("ace/lib/dom")
function qsa(sel) {
return [].slice.call(document.querySelectorAll(sel));
}
qsa(".code").forEach(function (codeEl) { require(["ace/ace", "ace/ext/static_highlight"], function(ace) {
highlight(codeEl, { var highlight = ace.require("ace/ext/static_highlight")
mode: codeEl.getAttribute('ace-mode'), var dom = ace.require("ace/lib/dom")
theme: codeEl.getAttribute('ace-theme'), function qsa(sel) {
startLineNumber: 1, return Array.apply(null, document.querySelectorAll(sel));
showGutter: codeEl.getAttribute("ace-gutter"), }
trim: true
}, function (highlighted) { qsa(".code").forEach(function (codeEl) {
highlight(codeEl, {
mode: codeEl.getAttribute("ace-mode"),
theme: codeEl.getAttribute("ace-theme"),
startLineNumber: 1,
showGutter: codeEl.getAttribute("ace-gutter"),
trim: true
}, function (highlighted) {
});
}); });
}); })
</script> </script>
</body> </body>

12
demo/statusbar.html
View file

@ -41,15 +41,19 @@
<pre id="editor"></pre> <pre id="editor"></pre>
<div id="statusBar">ace rocks!</div> <div id="statusBar">ace rocks!</div>
<script src="../build/src-noconflict/ace.js"></script> <script src="kitchen-sink/require.js"></script>
<script src="../build/src-noconflict/ext-statusbar.js"></script>
<script> <script>
// setup paths
require.config({paths: { "ace" : "../lib/ace"}});
// load ace and extensions
require(["ace/ace", "ace/ext/statusbar"], function(ace) {
var editor = ace.edit("editor"); var editor = ace.edit("editor");
var StatusBar = ace.require('ace/ext/statusbar').StatusBar; var StatusBar = ace.require("ace/ext/statusbar").StatusBar;
// create a simple selection status indicator // create a simple selection status indicator
var statusBar = new StatusBar(editor, document.getElementById('statusBar')); var statusBar = new StatusBar(editor, document.getElementById("statusBar"));
editor.setTheme("ace/theme/dawn"); editor.setTheme("ace/theme/dawn");
editor.session.setMode("ace/mode/html"); editor.session.setMode("ace/mode/html");
});
</script> </script>
<script src="./show_own_source.js"></script> <script src="./show_own_source.js"></script>

11
lib/ace/worker/worker_client.js
View file

@ -111,14 +111,7 @@ var WorkerClient = function(topLevelNamespaces, mod, classname, workerUrl) {
}; };
this.$normalizePath = function(path) { this.$normalizePath = function(path) {
if (!location.host) // needed for file:// protocol return net.qualifyURL(path);
return path;
path = path.replace(/^[a-z]+:\/\/[^\/]+/, ""); // Remove domain name and rebuild it
path = location.protocol + "//" + location.host
// paths starting with a slash are relative to the root (host)
+ (path.charAt(0) == "/" ? "" : location.pathname.replace(/\/[^\/]*$/, ""))
+ "/" + path.replace(/^[\/]+/, "");
return path;
}; };
this.terminate = function() { this.terminate = function() {
@ -184,7 +177,7 @@ var WorkerClient = function(topLevelNamespaces, mod, classname, workerUrl) {
this.$workerBlob = function(workerUrl) { this.$workerBlob = function(workerUrl) {
// workerUrl can be protocol relative // workerUrl can be protocol relative
// importScripts only takes fully qualified urls // importScripts only takes fully qualified urls
var script = "importScripts('" + net.qualifyURL( workerUrl ) + "');"; var script = "importScripts('" + net.qualifyURL(workerUrl) + "');";
try { try {
return new Blob([script], {"type": "application/javascript"}); return new Blob([script], {"type": "application/javascript"});
} catch (e) { // Backwards-compatibility } catch (e) { // Backwards-compatibility