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

Merge branch 'master' of https://github.com/ajaxorg/ace

Browse source
This commit is contained in:
Resolver Developers 2011-02-16 10:14:57 +00:00
commit f85b4cbb45
7 changed files with 225 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Readme.md
View file

@ -22,6 +22,8 @@ Take Ace for a spin!
Check out the Ace live [demo](http://ajaxorg.github.com/ace/build/editor.html) or get a [Cloud9 IDE account](http://run.cloud9ide.com) to experience Ace while editing one of your own GitHub projects. Check out the Ace live [demo](http://ajaxorg.github.com/ace/build/editor.html) or get a [Cloud9 IDE account](http://run.cloud9ide.com) to experience Ace while editing one of your own GitHub projects.
If you want, you can use Ace as a textarea replacement thanks to the [Ace Bookmarklet](http://ajaxorg.github.com/ace/build/textarea/editor.html).
History History
------- -------

10
build/Readme.md
View file

@ -22,6 +22,8 @@ Take Ace for a spin!
Check out the Ace live [demo](http://ajaxorg.github.com/ace/build/editor.html) or get a [Cloud9 IDE account](http://run.cloud9ide.com) to experience Ace while editing one of your own GitHub projects. Check out the Ace live [demo](http://ajaxorg.github.com/ace/build/editor.html) or get a [Cloud9 IDE account](http://run.cloud9ide.com) to experience Ace while editing one of your own GitHub projects.
If you want, you can use Ace as a textarea replacement thanks to the [Ace Bookmarklet][http://ajaxorg.github.com/ace/build/textarea/editor.html].
History History
------- -------
@ -49,19 +51,19 @@ The easiest version is simply:
var editor = ace.edit("editor"); var editor = ace.edit("editor");
}; };
</script> </script>
To change the theme simply include the Theme's JavaScript file To change the theme simply include the Theme's JavaScript file
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script> <script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
and configure the editor to use the theme: and configure the editor to use the theme:
editor.setTheme("ace/theme/twilight"); editor.setTheme("ace/theme/twilight");
By default the editor only supports plain text mode. However all other language modes are available as separate modules. After including the mode's Javascript file By default the editor only supports plain text mode. However all other language modes are available as separate modules. After including the mode's Javascript file
<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script> <script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
the mode can be used like this: the mode can be used like this:
var JavaScriptMode = require("ace/mode/javascript").Mode; var JavaScriptMode = require("ace/mode/javascript").Mode;

52
build/textarea/editor.html
View file

@ -7,6 +7,25 @@
</head> </head>
<body> <body>
<h1>Ace Bookmarklet Builder</h1>
<p>
WARNING: Currently, this is only fully supported in non IE browsers.
</p>
<p>
How to use it:
<ul>
<li>Select the options below as you want them to be by default.</li>
<li>Enter the "SourceUrl" where you placed the source data which you find under build/textarea/src (you can also leave the default to server the scripts from GitHub).</li>
<li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
<li>Drag the generated link to your toolbar or store it somewhere else.</li>
<li>Go to a page with an textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
<li>Click 3 times on the textarea you want to replace - Ace will replace it.</li>
<li>To change settings, just click the red icon in the bottom right corner.</li>
</ul>
</p>
<textarea id="textarea" style="width:300px; height:300px"> <textarea id="textarea" style="width:300px; height:300px">
function foo() { function foo() {
var bar = true; var bar = true;
@ -14,12 +33,12 @@
</textarea><br> </textarea><br>
SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textarea/src/"></input> SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textarea/src/"></input>
<button id="buBuild">Build link</button> <br> <a href="#"></a> <button id="buBuild">Build Link</button> <br> <a href="#"></a>
<script> <script>
function inject() { function inject() {
var baseUrl = "src/"; var baseUrl = "src/";
var load = function(path, callback) { function load(path, module, callback) {
path = baseUrl + path; path = baseUrl + path;
if (!load.scripts[path]) { if (!load.scripts[path]) {
load.scripts[path] = { load.scripts[path] = {
@ -29,14 +48,21 @@ function inject() {
var head = document.getElementsByTagName('head')[0]; var head = document.getElementsByTagName('head')[0];
var s = document.createElement('script'); var s = document.createElement('script');
s.onload = function() {
load.scripts[path].loaded = true; function c() {
load.scripts[path].callbacks.forEach(function(callback) { if (window.__ace_shadowed__ && window.__ace_shadowed__.define.modules[module]) {
callback(); load.scripts[path].loaded = true;
}); load.scripts[path].callbacks.forEach(function(callback) {
callback();
});
} else {
setTimeout(c, 50);
}
}; };
s.src = path; s.src = path;
head.appendChild(s); head.appendChild(s);
c();
} else if (load.scripts[path].loaded) { } else if (load.scripts[path].loaded) {
callback(); callback();
} else { } else {
@ -45,18 +71,18 @@ function inject() {
}; };
load.scripts = {}; load.scripts = {};
window.__ace_shadowed_load__ = load;
load('ace.js', function() { load('ace.js', 'text!ace/css/editor.css', function() {
var ace = window.__ace_shadowed__; var ace = window.__ace_shadowed__;
ace.load = load; var Event = ace.require('pilot/event');
ace.options.mode = "javascript"; var areas = document.getElementsByTagName("textarea");
var areas = document.querySelectorAll("textarea");
for (var i = 0; i < areas.length; i++) { for (var i = 0; i < areas.length; i++) {
areas[i].addEventListener("click", function(e) { Event.addListener(areas[i], "click", function(e) {
if (e.detail == 3) { if (e.detail == 3) {
ace.transformTextarea(e.target); ace.transformTextarea(e.target);
} }
}, false); });
} }
}); });
} }

120
build/textarea/src/ace-uncompressed.js
View file

@ -12460,46 +12460,44 @@ var deps = [
]; ];
require(deps, function() { require(deps, function() {
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins([ "pilot/index" ]);
var Dom = require("pilot/dom"); var catalog = require("pilot/plugin_manager").catalog;
var Event = require("pilot/event"); catalog.registerPlugins([ "pilot/index" ]);
var Editor = require("ace/editor").Editor; var Dom = require("pilot/dom");
var EditSession = require("ace/edit_session").EditSession; var Event = require("pilot/event");
var UndoManager = require("ace/undomanager").UndoManager; var UA = require("pilot/useragent")
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
window.__ace_shadowed__.edit = function(el) { var Editor = require("ace/editor").Editor;
if (typeof(el) == "string") { var EditSession = require("ace/edit_session").EditSession;
el = document.getElementById(el); var UndoManager = require("ace/undomanager").UndoManager;
} var Renderer = require("ace/virtual_renderer").VirtualRenderer;
var doc = new EditSession(Dom.getInnerText(el)); window.__ace_shadowed__.edit = function(el) {
doc.setUndoManager(new UndoManager()); if (typeof(el) == "string") {
el.innerHTML = ''; el = document.getElementById(el);
}
var editor = new Editor(new Renderer(el, "ace/theme/textmate")); var doc = new EditSession(Dom.getInnerText(el));
editor.setSession(doc); doc.setUndoManager(new UndoManager());
el.innerHTML = '';
var env = require("pilot/environment").create(); var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
catalog.startupPlugins({ env: env }).then(function() { editor.setSession(doc);
env.document = doc;
env.editor = env; var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = env;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize(); editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
el.env = env;
}); });
return editor; el.env = env;
} });
return editor;
}
if (window.__ace_shadowed_loaded__) {
window.__ace_shadowed_loaded__();
}
});
/** /**
* Returns the CSS property of element. * Returns the CSS property of element.
@ -12511,9 +12509,15 @@ require(deps, function() {
* is hidden and has no dimension styles). * is hidden and has no dimension styles).
*/ */
var getCSSProperty = function(element, container, property) { var getCSSProperty = function(element, container, property) {
var ret = element.style[property] var ret = element.style[property];
|| document.defaultView.getComputedStyle(element, '').
getPropertyValue(property); if (!ret) {
if (window.getComputedStyle) {
ret = window.getComputedStyle(element, '').getPropertyValue(property);
} else {
ret = element.currentStyle[property];
}
}
if (!ret || ret == 'auto' || ret == 'intrinsic') { if (!ret || ret == 'auto' || ret == 'intrinsic') {
ret = container.style[property]; ret = container.style[property];
@ -12573,15 +12577,15 @@ function setupContainer(element, getValue) {
// The complete width is the width of the textarea + the padding // The complete width is the width of the textarea + the padding
// to the left and right. // to the left and right.
var width = getCSSProperty(element, container, 'width'); var width = getCSSProperty(element, container, 'width') || (element.clientWidth + "px");
var height = getCSSProperty(element, container, 'height'); var height = getCSSProperty(element, container, 'height') || (element.clientHeight + "px");
style += 'height:' + height + ';width:' + width + ';'; style += 'height:' + height + ';width:' + width + ';';
// Set the display property to 'inline-block'. // Set the display property to 'inline-block'.
style += 'display:inline-block;'; style += 'display:inline-block;';
container.setAttribute('style', style); container.setAttribute('style', style);
}; };
window.addEventListener('resize', resizeEvent, false); Event.addListener(window, 'resize', resizeEvent);
// Call the resizeEvent once, so that the size of the container is // Call the resizeEvent once, so that the size of the container is
// calculated. // calculated.
@ -12632,7 +12636,8 @@ window.__ace_shadowed__.transformTextarea = function(element) {
top: "0px", top: "0px",
left: "0px", left: "0px",
right: "0px", right: "0px",
bottom: "0px" bottom: "0px",
border: "1px solid gray"
}); });
container.appendChild(editorDiv); container.appendChild(editorDiv);
@ -12650,20 +12655,26 @@ window.__ace_shadowed__.transformTextarea = function(element) {
settingOpener.innerHTML = "I"; settingOpener.innerHTML = "I";
var settingDiv = document.createElement("div"); var settingDiv = document.createElement("div");
applyStyles(settingDiv, { var settingDivStyles = {
top: "0px", top: "0px",
left: "0px", left: "0px",
right: "0px", right: "0px",
bottom: "0px", bottom: "0px",
position: "absolute", position: "absolute",
padding: "5px", padding: "5px",
background: "rgba(0, 0, 0, 0.6)",
zIndex: 100, zIndex: 100,
color: "white", color: "white",
display: "none", display: "none",
overflow: "auto", overflow: "auto",
fontSize: "14px" fontSize: "14px"
}); };
if (!UA.isIE) {
settingDivStyles.backgroundColor = "rgba(0, 0, 0, 0.6)";
} else {
settingDivStyles.backgroundColor = "#333";
}
applyStyles(settingDiv, settingDivStyles);
container.appendChild(settingDiv); container.appendChild(settingDiv);
// Power up ace on the textarea: // Power up ace on the textarea:
@ -12691,7 +12702,6 @@ window.__ace_shadowed__.transformTextarea = function(element) {
} }
function setupApi(editor, editorDiv, settingDiv, ace, options) { function setupApi(editor, editorDiv, settingDiv, ace, options) {
var load = ace.load;
var session = editor.getSession(); var session = editor.getSession();
var renderer = editor.renderer; var renderer = editor.renderer;
@ -12707,6 +12717,8 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
setOption: function(key, value) { setOption: function(key, value) {
if (options[key] == value) return; if (options[key] == value) return;
var load = window.__ace_shadowed_load__;
switch (key) { switch (key) {
case "gutter": case "gutter":
renderer.setShowGutter(toBool(value)); renderer.setShowGutter(toBool(value));
@ -12715,7 +12727,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
case "mode": case "mode":
if (value != "text") { if (value != "text") {
// Load the required mode file. Files get loaded only once. // Load the required mode file. Files get loaded only once.
load("mode-" + value + ".js", function() { load("mode-" + value + ".js", "ace/mode/" + value, function() {
var aceMode = require("ace/mode/" + value).Mode; var aceMode = require("ace/mode/" + value).Mode;
session.setMode(new aceMode()); session.setMode(new aceMode());
}); });
@ -12727,7 +12739,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
case "theme": case "theme":
if (value != "textmate") { if (value != "textmate") {
// Load the required theme file. Files get loaded only once. // Load the required theme file. Files get loaded only once.
load("theme-" + value + ".js", function() { load("theme-" + value + ".js", "ace/theme/" + value, function() {
editor.setTheme("ace/theme/" + value); editor.setTheme("ace/theme/" + value);
}); });
} else { } else {
@ -12827,7 +12839,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
mono_industrial: "Mono Industrial", mono_industrial: "Mono Industrial",
monokai: "Monokai", monokai: "Monokai",
pastel_on_dark: "Pastel On Dark", pastel_on_dark: "Pastel On Dark",
twilight: "Twilight", twilight: "Twilight"
}, },
gutter: BOOL, gutter: BOOL,
fontSize: { fontSize: {
@ -12874,13 +12886,17 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
table.push("</table>"); table.push("</table>");
settingDiv.innerHTML = table.join(""); settingDiv.innerHTML = table.join("");
var selects = settingDiv.querySelectorAll("select"); var selects = settingDiv.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) { for (var i = 0; i < selects.length; i++) {
selects[i].onchange = function(e) { var onChange = (function() {
var option = e.target.title; var select = selects[i];
var value = e.target.value; return function() {
api.setOption(option, value); var option = select.title;
} var value = select.value;
api.setOption(option, value);
}
})();
selects[i].onchange = onChange;
} }
var button = document.createElement("input"); var button = document.createElement("input");
@ -12906,4 +12922,6 @@ window.__ace_shadowed__.options = {
showPrintMargin: "false" showPrintMargin: "false"
} }
});
})() })()

2
build/textarea/src/ace.js
View file

File diff suppressed because one or more lines are too long

120
build_support/boot_textarea.js
View file

@ -52,46 +52,44 @@ var deps = [
]; ];
require(deps, function() { require(deps, function() {
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins([ "pilot/index" ]);
var Dom = require("pilot/dom"); var catalog = require("pilot/plugin_manager").catalog;
var Event = require("pilot/event"); catalog.registerPlugins([ "pilot/index" ]);
var Editor = require("ace/editor").Editor; var Dom = require("pilot/dom");
var EditSession = require("ace/edit_session").EditSession; var Event = require("pilot/event");
var UndoManager = require("ace/undomanager").UndoManager; var UA = require("pilot/useragent")
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
window.__ace_shadowed__.edit = function(el) { var Editor = require("ace/editor").Editor;
if (typeof(el) == "string") { var EditSession = require("ace/edit_session").EditSession;
el = document.getElementById(el); var UndoManager = require("ace/undomanager").UndoManager;
} var Renderer = require("ace/virtual_renderer").VirtualRenderer;
var doc = new EditSession(Dom.getInnerText(el)); window.__ace_shadowed__.edit = function(el) {
doc.setUndoManager(new UndoManager()); if (typeof(el) == "string") {
el.innerHTML = ''; el = document.getElementById(el);
}
var editor = new Editor(new Renderer(el, "ace/theme/textmate")); var doc = new EditSession(Dom.getInnerText(el));
editor.setSession(doc); doc.setUndoManager(new UndoManager());
el.innerHTML = '';
var env = require("pilot/environment").create(); var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
catalog.startupPlugins({ env: env }).then(function() { editor.setSession(doc);
env.document = doc;
env.editor = env; var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = env;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize(); editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
el.env = env;
}); });
return editor; el.env = env;
} });
return editor;
}
if (window.__ace_shadowed_loaded__) {
window.__ace_shadowed_loaded__();
}
});
/** /**
* Returns the CSS property of element. * Returns the CSS property of element.
@ -103,9 +101,15 @@ require(deps, function() {
* is hidden and has no dimension styles). * is hidden and has no dimension styles).
*/ */
var getCSSProperty = function(element, container, property) { var getCSSProperty = function(element, container, property) {
var ret = element.style[property] var ret = element.style[property];
|| document.defaultView.getComputedStyle(element, '').
getPropertyValue(property); if (!ret) {
if (window.getComputedStyle) {
ret = window.getComputedStyle(element, '').getPropertyValue(property);
} else {
ret = element.currentStyle[property];
}
}
if (!ret || ret == 'auto' || ret == 'intrinsic') { if (!ret || ret == 'auto' || ret == 'intrinsic') {
ret = container.style[property]; ret = container.style[property];
@ -165,15 +169,15 @@ function setupContainer(element, getValue) {
// The complete width is the width of the textarea + the padding // The complete width is the width of the textarea + the padding
// to the left and right. // to the left and right.
var width = getCSSProperty(element, container, 'width'); var width = getCSSProperty(element, container, 'width') || (element.clientWidth + "px");
var height = getCSSProperty(element, container, 'height'); var height = getCSSProperty(element, container, 'height') || (element.clientHeight + "px");
style += 'height:' + height + ';width:' + width + ';'; style += 'height:' + height + ';width:' + width + ';';
// Set the display property to 'inline-block'. // Set the display property to 'inline-block'.
style += 'display:inline-block;'; style += 'display:inline-block;';
container.setAttribute('style', style); container.setAttribute('style', style);
}; };
window.addEventListener('resize', resizeEvent, false); Event.addListener(window, 'resize', resizeEvent);
// Call the resizeEvent once, so that the size of the container is // Call the resizeEvent once, so that the size of the container is
// calculated. // calculated.
@ -224,7 +228,8 @@ window.__ace_shadowed__.transformTextarea = function(element) {
top: "0px", top: "0px",
left: "0px", left: "0px",
right: "0px", right: "0px",
bottom: "0px" bottom: "0px",
border: "1px solid gray"
}); });
container.appendChild(editorDiv); container.appendChild(editorDiv);
@ -242,20 +247,26 @@ window.__ace_shadowed__.transformTextarea = function(element) {
settingOpener.innerHTML = "I"; settingOpener.innerHTML = "I";
var settingDiv = document.createElement("div"); var settingDiv = document.createElement("div");
applyStyles(settingDiv, { var settingDivStyles = {
top: "0px", top: "0px",
left: "0px", left: "0px",
right: "0px", right: "0px",
bottom: "0px", bottom: "0px",
position: "absolute", position: "absolute",
padding: "5px", padding: "5px",
background: "rgba(0, 0, 0, 0.6)",
zIndex: 100, zIndex: 100,
color: "white", color: "white",
display: "none", display: "none",
overflow: "auto", overflow: "auto",
fontSize: "14px" fontSize: "14px"
}); };
if (!UA.isIE) {
settingDivStyles.backgroundColor = "rgba(0, 0, 0, 0.6)";
} else {
settingDivStyles.backgroundColor = "#333";
}
applyStyles(settingDiv, settingDivStyles);
container.appendChild(settingDiv); container.appendChild(settingDiv);
// Power up ace on the textarea: // Power up ace on the textarea:
@ -283,7 +294,6 @@ window.__ace_shadowed__.transformTextarea = function(element) {
} }
function setupApi(editor, editorDiv, settingDiv, ace, options) { function setupApi(editor, editorDiv, settingDiv, ace, options) {
var load = ace.load;
var session = editor.getSession(); var session = editor.getSession();
var renderer = editor.renderer; var renderer = editor.renderer;
@ -299,6 +309,8 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
setOption: function(key, value) { setOption: function(key, value) {
if (options[key] == value) return; if (options[key] == value) return;
var load = window.__ace_shadowed_load__;
switch (key) { switch (key) {
case "gutter": case "gutter":
renderer.setShowGutter(toBool(value)); renderer.setShowGutter(toBool(value));
@ -307,7 +319,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
case "mode": case "mode":
if (value != "text") { if (value != "text") {
// Load the required mode file. Files get loaded only once. // Load the required mode file. Files get loaded only once.
load("mode-" + value + ".js", function() { load("mode-" + value + ".js", "ace/mode/" + value, function() {
var aceMode = require("ace/mode/" + value).Mode; var aceMode = require("ace/mode/" + value).Mode;
session.setMode(new aceMode()); session.setMode(new aceMode());
}); });
@ -319,7 +331,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
case "theme": case "theme":
if (value != "textmate") { if (value != "textmate") {
// Load the required theme file. Files get loaded only once. // Load the required theme file. Files get loaded only once.
load("theme-" + value + ".js", function() { load("theme-" + value + ".js", "ace/theme/" + value, function() {
editor.setTheme("ace/theme/" + value); editor.setTheme("ace/theme/" + value);
}); });
} else { } else {
@ -419,7 +431,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
mono_industrial: "Mono Industrial", mono_industrial: "Mono Industrial",
monokai: "Monokai", monokai: "Monokai",
pastel_on_dark: "Pastel On Dark", pastel_on_dark: "Pastel On Dark",
twilight: "Twilight", twilight: "Twilight"
}, },
gutter: BOOL, gutter: BOOL,
fontSize: { fontSize: {
@ -466,13 +478,17 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
table.push("</table>"); table.push("</table>");
settingDiv.innerHTML = table.join(""); settingDiv.innerHTML = table.join("");
var selects = settingDiv.querySelectorAll("select"); var selects = settingDiv.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) { for (var i = 0; i < selects.length; i++) {
selects[i].onchange = function(e) { var onChange = (function() {
var option = e.target.title; var select = selects[i];
var value = e.target.value; return function() {
api.setOption(option, value); var option = select.title;
} var value = select.value;
api.setOption(option, value);
}
})();
selects[i].onchange = onChange;
} }
var button = document.createElement("input"); var button = document.createElement("input");
@ -498,4 +514,6 @@ window.__ace_shadowed__.options = {
showPrintMargin: "false" showPrintMargin: "false"
} }
});
})() })()

52
build_support/editor_textarea.html
View file

@ -7,6 +7,25 @@
</head> </head>
<body> <body>
<h1>Ace Bookmarklet Builder</h1>
<p>
WARNING: Currently, this is only fully supported in non IE browsers.
</p>
<p>
How to use it:
<ul>
<li>Select the options below as you want them to be by default.</li>
<li>Enter the "SourceUrl" where you placed the source data which you find under build/textarea/src (you can also leave the default to server the scripts from GitHub).</li>
<li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
<li>Drag the generated link to your toolbar or store it somewhere else.</li>
<li>Go to a page with an textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
<li>Click 3 times on the textarea you want to replace - Ace will replace it.</li>
<li>To change settings, just click the red icon in the bottom right corner.</li>
</ul>
</p>
<textarea id="textarea" style="width:300px; height:300px"> <textarea id="textarea" style="width:300px; height:300px">
function foo() { function foo() {
var bar = true; var bar = true;
@ -14,12 +33,12 @@
</textarea><br> </textarea><br>
SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textarea/src/"></input> SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textarea/src/"></input>
<button id="buBuild">Build link</button> <br> <a href="#"></a> <button id="buBuild">Build Link</button> <br> <a href="#"></a>
<script> <script>
function inject() { function inject() {
var baseUrl = "src/"; var baseUrl = "src/";
var load = function(path, callback) { function load(path, module, callback) {
path = baseUrl + path; path = baseUrl + path;
if (!load.scripts[path]) { if (!load.scripts[path]) {
load.scripts[path] = { load.scripts[path] = {
@ -29,14 +48,21 @@ function inject() {
var head = document.getElementsByTagName('head')[0]; var head = document.getElementsByTagName('head')[0];
var s = document.createElement('script'); var s = document.createElement('script');
s.onload = function() {
load.scripts[path].loaded = true; function c() {
load.scripts[path].callbacks.forEach(function(callback) { if (window.__ace_shadowed__ && window.__ace_shadowed__.define.modules[module]) {
callback(); load.scripts[path].loaded = true;
}); load.scripts[path].callbacks.forEach(function(callback) {
callback();
});
} else {
setTimeout(c, 50);
}
}; };
s.src = path; s.src = path;
head.appendChild(s); head.appendChild(s);
c();
} else if (load.scripts[path].loaded) { } else if (load.scripts[path].loaded) {
callback(); callback();
} else { } else {
@ -45,18 +71,18 @@ function inject() {
}; };
load.scripts = {}; load.scripts = {};
window.__ace_shadowed_load__ = load;
load('ace.js', function() { load('ace.js', 'text!ace/css/editor.css', function() {
var ace = window.__ace_shadowed__; var ace = window.__ace_shadowed__;
ace.load = load; var Event = ace.require('pilot/event');
ace.options.mode = "javascript"; var areas = document.getElementsByTagName("textarea");
var areas = document.querySelectorAll("textarea");
for (var i = 0; i < areas.length; i++) { for (var i = 0; i < areas.length; i++) {
areas[i].addEventListener("click", function(e) { Event.addListener(areas[i], "click", function(e) {
if (e.detail == 3) { if (e.detail == 3) {
ace.transformTextarea(e.target); ace.transformTextarea(e.target);
} }
}, false); });
} }
}); });
} }