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");
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) {

3
demo/autocompletion.html
View file

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

24
demo/autoresize.html
View file

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

17
demo/emmet.html
View file

@ -22,19 +22,20 @@
<pre id="editor"></pre>
<!-- load ace -->
<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 -->
<!-- load emmet code and snippets compiled for browser -->
<script src="https://nightwing.github.io/emmet-core/emmet.js"></script>
<script src="kitchen-sink/require.js"></script>
<script>
// trigger extension
ace.require("ace/ext/emmet");
// setup paths
require.config({paths: { "ace" : "../lib/ace"}});
// load ace and extensions
require(["ace/ace", "ace/ext/emmet"], function(ace) {
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/html");
// enable emmet on the current editor
editor.setOption("enableEmmet", true);
editor.setOption("enableEmmet", true);
});
</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">
<title>ACE Editor StatusBar Demo</title>
<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 {
position: absolute;
top: 0px; bottom: 0; left: 0; right: 0;

7
demo/keyboard_shortcuts.html
View file

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

13
demo/modelist.html
View file

@ -23,24 +23,27 @@
<pre id="editor"></pre>
<script src="../build/src-noconflict/ace.js"></script>
<script src="../build/src-noconflict/ext-modelist.js"></script>
<script src="kitchen-sink/require.js"></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");
editor.setTheme("ace/theme/twilight");
(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,
// or any other scriptable file loading process.
// Extensions could consume the modelist and use it to dynamically
// set the editor mode. Webmasters could use it in their scripts
// for site specific purposes as well.
var filePath = 'blahblah/weee/some.js';
var filePath = "blahblah/weee/some.js";
var mode = modelist.getModeForPath(filePath).mode;
console.log(mode);
editor.session.setMode(mode);
}());
})
</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">
<title>Editor</title>
<style type="text/css" media="screen">
.ace_editor {
position: relative !important;
border: 1px solid lightgray;
margin: auto;
height: 200px;
width: 80%;
}
.ace_editor {
position: relative !important;
border: 1px solid lightgray;
margin: auto;
height: 200px;
width: 80%;
}
.ace_editor.fullScreen {
height: auto;
width: auto;
border: 0;
height: auto;
width: auto;
border: 0;
margin: 0;
position: fixed !important;
top: 0;
@ -25,17 +24,16 @@
left: 0;
right: 0;
z-index: 10;
background: white;
}
.fullScreen {
overflow: hidden
}
.fullScreen {
overflow: hidden
}
.scrollmargin {
height: 500px;
.scrollmargin {
height: 500px;
text-align: center;
}
}
.large-button {
color: lightblue;
@ -56,7 +54,7 @@
<body>
<div class="scrollmargin">
<span onclick="scroll()" class="large-button">
scroll down &dArr;
scroll down &dArr;
</span>
</div>
<pre id="editor">function foo(items) {
@ -76,28 +74,35 @@
</div>
<script src="../build/src/ace.js"></script>
<script src="kitchen-sink/require.js"></script>
<script>
require.config({paths: { "ace" : "../lib/ace"}});
require(["ace/ace", "ace/ext/themelist"], function(ace) {
var $ = document.getElementById.bind(document);
var dom = require("ace/lib/dom");
//add command to all new editor instaces
require("ace/commands/default_commands").commands.push({
name: "Toggle Fullscreen",
bindKey: "F11",
exec: function(editor) {
dom.toggleCssClass(document.body, "fullScreen")
dom.toggleCssClass(editor.container, "fullScreen")
editor.setAutoScrollEditorIntoView()
editor.resize()
}
name: "Toggle Fullscreen",
bindKey: "F11",
exec: function(editor) {
var fullScreen = dom.toggleCssClass(document.body, "fullScreen")
dom.setCssClass(editor.container, "fullScreen", fullScreen)
editor.setAutoScrollEditorIntoView(!fullScreen)
editor.resize()
}
})
// create first editor
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/javascript");
editor.setAutoScrollEditorIntoView();
editor.renderer.setScrollMargin(10, 10);
editor.setOptions({
// "scrollPastEnd": 0.8,
autoScrollEditorIntoView: true
});
var count = 1;
function add() {
@ -110,12 +115,13 @@ function add() {
oldEl.parentNode.insertBefore(el, pad.nextSibling)
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.setTheme(theme)
editor.session.setMode("ace/mode/javascript")
editor.setAutoScrollEditorIntoView()
editor.setOptions({
mode: "ace/mode/javascript",
theme: theme,
autoScrollEditorIntoView: true
})
editor.setValue([
"this is editor number: ", count, "\n",
@ -126,7 +132,6 @@ function add() {
scroll()
}
function scroll(speed) {
var top = editor.container.getBoundingClientRect().top
speed = speed || 10
@ -139,14 +144,11 @@ function scroll(speed) {
}
}
var themes = {
bright: [ "chrome", "clouds", "crimson_editor", "dawn", "dreamweaver", "eclipse", "github",
"solarized_light", "textmate", "tomorrow"],
dark: [ "clouds_midnight", "cobalt", "idle_fingers", "kr_theme", "merbivore", "merbivore_soft",
"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);
var themes = require("ace/ext/themelist").themes.map(function(t){return t.theme});
window.add = add;
window.scroll = scroll;
});
</script>
</body>

8
demo/settings_menu.html
View file

@ -23,9 +23,12 @@
<pre id="editor"></pre>
<script src="../build/src-noconflict/ace.js"></script>
<script src="../build/src-noconflict/ext-settings_menu.js"></script>
<script src="kitchen-sink/require.js"></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");
ace.require('ace/ext/settings_menu').init(editor);
editor.setTheme("ace/theme/twilight");
@ -38,6 +41,7 @@
},
readOnly: true
}]);
})
</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){
editor.setValue(t, 1);
})
if (typeof ace == "undefined" && typeof require == "undefined") {
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"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@ -34,30 +33,31 @@ function wobble (flam) {
return flam.wobbled = true;
}
// the scrollbars are from overflow auto on .ace_editor.
</pre>
<script src="../../build/src-noconflict/ace.js"></script>
<script src="../../build/src-noconflict/ext-static_highlight.js"></script>
<script src="kitchen-sink/require.js"></script>
<script>
var highlight = ace.require("ace/ext/static_highlight")
var dom = ace.require("ace/lib/dom")
function qsa(sel) {
return [].slice.call(document.querySelectorAll(sel));
}
require.config({paths: { "ace" : "../lib/ace"}});
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) {
require(["ace/ace", "ace/ext/static_highlight"], function(ace) {
var highlight = ace.require("ace/ext/static_highlight")
var dom = ace.require("ace/lib/dom")
function qsa(sel) {
return Array.apply(null, document.querySelectorAll(sel));
}
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>
</body>

12
demo/statusbar.html
View file

@ -41,15 +41,19 @@
<pre id="editor"></pre>
<div id="statusBar">ace rocks!</div>
<script src="../build/src-noconflict/ace.js"></script>
<script src="../build/src-noconflict/ext-statusbar.js"></script>
<script src="kitchen-sink/require.js"></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 StatusBar = ace.require('ace/ext/statusbar').StatusBar;
var StatusBar = ace.require("ace/ext/statusbar").StatusBar;
// 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.session.setMode("ace/mode/html");
});
</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) {
if (!location.host) // needed for file:// protocol
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;
return net.qualifyURL(path);
};
this.terminate = function() {
@ -184,7 +177,7 @@ var WorkerClient = function(topLevelNamespaces, mod, classname, workerUrl) {
this.$workerBlob = function(workerUrl) {
// workerUrl can be protocol relative
// importScripts only takes fully qualified urls
var script = "importScripts('" + net.qualifyURL( workerUrl ) + "');";
var script = "importScripts('" + net.qualifyURL(workerUrl) + "');";
try {
return new Blob([script], {"type": "application/javascript"});
} catch (e) { // Backwards-compatibility