Merge branch 'master' of https://github.com/ajaxorg/ace
Conflicts: Makefile.dryice.js build_support/boot.js build_support/mini_require.js lib/ace/edit_session.js package.json support/pilot
This commit is contained in:
commit
f332454b38
196 changed files with 51983 additions and 2086 deletions
|
|
@ -35,40 +35,57 @@
|
|||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
var deps = [ "pilot/plugin_manager", "pilot/environment" ];
|
||||
var deps = [
|
||||
"pilot/fixoldbrowsers",
|
||||
"pilot/index",
|
||||
"pilot/plugin_manager",
|
||||
"pilot/environment",
|
||||
"ace/editor",
|
||||
"ace/edit_session",
|
||||
"ace/virtual_renderer",
|
||||
"ace/undomanager",
|
||||
"ace/theme/textmate"
|
||||
];
|
||||
|
||||
require(deps, function() {
|
||||
var catalog = require("pilot/plugin_manager").catalog;
|
||||
catalog.registerPlugins([ "pilot/index" ]);
|
||||
});
|
||||
|
||||
var ace = {
|
||||
edit: function(el) {
|
||||
if (typeof(el) == "string") {
|
||||
el = document.getElementById(el);
|
||||
}
|
||||
var env = require("pilot/environment").create();
|
||||
var catalog = require("pilot/plugin_manager").catalog;
|
||||
catalog.startupPlugins({ env: env }).then(function() {
|
||||
var EditSession = require("ace/edit_session").EditSession;
|
||||
var JavaScriptMode = require("ace/mode/javascript").Mode;
|
||||
var UndoManager = require("ace/undomanager").UndoManager;
|
||||
var Editor = require("ace/editor").Editor;
|
||||
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
|
||||
var theme = require("ace/theme/textmate");
|
||||
var Dom = require("pilot/dom");
|
||||
var Event = require("pilot/event");
|
||||
|
||||
var doc = new EditSession(el.innerHTML);
|
||||
el.innerHTML = '';
|
||||
doc.setMode(new JavaScriptMode());
|
||||
var Editor = require("ace/editor").Editor;
|
||||
var EditSession = require("ace/edit_session").EditSession;
|
||||
var UndoManager = require("ace/undomanager").UndoManager;
|
||||
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
|
||||
|
||||
window.ace = {
|
||||
edit: function(el) {
|
||||
if (typeof(el) == "string") {
|
||||
el = document.getElementById(el);
|
||||
}
|
||||
|
||||
var doc = new EditSession(Dom.getInnerText(el));
|
||||
doc.setUndoManager(new UndoManager());
|
||||
env.document = doc;
|
||||
env.editor = new Editor(new Renderer(el, theme));
|
||||
env.editor.setSession(doc);
|
||||
env.editor.resize();
|
||||
window.addEventListener("resize", function() {
|
||||
env.editor.resize();
|
||||
}, false);
|
||||
el.env = env;
|
||||
});
|
||||
}
|
||||
};
|
||||
el.innerHTML = '';
|
||||
|
||||
var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
|
||||
editor.setSession(doc);
|
||||
|
||||
var env = require("pilot/environment").create();
|
||||
catalog.startupPlugins({ env: env }).then(function() {
|
||||
env.document = doc;
|
||||
env.editor = editor;
|
||||
editor.resize();
|
||||
Event.addListener(window, "resize", function() {
|
||||
editor.resize();
|
||||
});
|
||||
el.env = env;
|
||||
});
|
||||
// Store env on editor such that it can be accessed later on from
|
||||
// the returned object.
|
||||
editor.env = env;
|
||||
return editor;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
525
build_support/boot_textarea.js
Normal file
525
build_support/boot_textarea.js
Normal file
|
|
@ -0,0 +1,525 @@
|
|||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License Version
|
||||
* 1.1 (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS" basis,
|
||||
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
* for the specific language governing rights and limitations under the
|
||||
* License.
|
||||
*
|
||||
* The Original Code is Mozilla Skywriter.
|
||||
*
|
||||
* The Initial Developer of the Original Code is
|
||||
* Mozilla.
|
||||
* Portions created by the Initial Developer are Copyright (C) 2009
|
||||
* the Initial Developer. All Rights Reserved.
|
||||
*
|
||||
* Contributor(s):
|
||||
* Kevin Dangoor (kdangoor@mozilla.com)
|
||||
* Julian Viereck <julian.viereck@gmail.com>
|
||||
*
|
||||
* Alternatively, the contents of this file may be used under the terms of
|
||||
* either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
* in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
* of those above. If you wish to allow use of your version of this file only
|
||||
* under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
* use your version of this file under the terms of the MPL, indicate your
|
||||
* decision by deleting the provisions above and replace them with the notice
|
||||
* and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
* the provisions above, a recipient may use your version of this file under
|
||||
* the terms of any one of the MPL, the GPL or the LGPL.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
(function() {
|
||||
|
||||
var require = window.__ace_shadowed__.require;
|
||||
var deps = [
|
||||
"pilot/fixoldbrowsers",
|
||||
"pilot/index",
|
||||
"pilot/plugin_manager",
|
||||
"pilot/environment",
|
||||
"ace/editor",
|
||||
"ace/edit_session",
|
||||
"ace/virtual_renderer",
|
||||
"ace/undomanager",
|
||||
"ace/theme/textmate"
|
||||
];
|
||||
|
||||
require(deps, function() {
|
||||
|
||||
var catalog = require("pilot/plugin_manager").catalog;
|
||||
catalog.registerPlugins([ "pilot/index" ]);
|
||||
|
||||
var Dom = require("pilot/dom");
|
||||
var Event = require("pilot/event");
|
||||
var UA = require("pilot/useragent")
|
||||
|
||||
var Editor = require("ace/editor").Editor;
|
||||
var EditSession = require("ace/edit_session").EditSession;
|
||||
var UndoManager = require("ace/undomanager").UndoManager;
|
||||
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
|
||||
|
||||
window.__ace_shadowed__.edit = function(el) {
|
||||
if (typeof(el) == "string") {
|
||||
el = document.getElementById(el);
|
||||
}
|
||||
|
||||
var doc = new EditSession(Dom.getInnerText(el));
|
||||
doc.setUndoManager(new UndoManager());
|
||||
el.innerHTML = '';
|
||||
|
||||
var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
|
||||
editor.setSession(doc);
|
||||
|
||||
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();
|
||||
});
|
||||
el.env = env;
|
||||
});
|
||||
return editor;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Returns the CSS property of element.
|
||||
* 1) If the CSS property is on the style object of the element, use it, OR
|
||||
* 2) Compute the CSS property
|
||||
*
|
||||
* If the property can't get computed, is 'auto' or 'intrinsic', the former
|
||||
* calculated property is uesd (this can happen in cases where the textarea
|
||||
* is hidden and has no dimension styles).
|
||||
*/
|
||||
var getCSSProperty = function(element, container, property) {
|
||||
var ret = element.style[property];
|
||||
|
||||
if (!ret) {
|
||||
if (window.getComputedStyle) {
|
||||
ret = window.getComputedStyle(element, '').getPropertyValue(property);
|
||||
} else {
|
||||
ret = element.currentStyle[property];
|
||||
}
|
||||
}
|
||||
|
||||
if (!ret || ret == 'auto' || ret == 'intrinsic') {
|
||||
ret = container.style[property];
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
|
||||
function applyStyles(elm, styles) {
|
||||
for (style in styles) {
|
||||
elm.style[style] = styles[style];
|
||||
}
|
||||
}
|
||||
|
||||
function setupContainer(element, getValue) {
|
||||
if (element.type != 'textarea') {
|
||||
throw "Textarea required!";
|
||||
}
|
||||
|
||||
var parentNode = element.parentNode;
|
||||
|
||||
// This will hold the editor.
|
||||
var container = document.createElement('div');
|
||||
|
||||
// To put Ace in the place of the textarea, we have to copy a few of the
|
||||
// textarea's style attributes to the div container.
|
||||
//
|
||||
// The problem is that the properties have to get computed (they might be
|
||||
// defined by a CSS file on the page - you can't access such rules that
|
||||
// apply to an element via elm.style). Computed properties are converted to
|
||||
// pixels although the dimension might be given as percentage. When the
|
||||
// window resizes, the dimensions defined by percentages changes, so the
|
||||
// properties have to get recomputed to get the new/true pixels.
|
||||
var resizeEvent = function() {
|
||||
var style = 'position:relative;';
|
||||
[
|
||||
'margin-top', 'margin-left', 'margin-right', 'margin-bottom'
|
||||
].forEach(function(item) {
|
||||
style += item + ':' +
|
||||
getCSSProperty(element, container, item) + ';';
|
||||
});
|
||||
|
||||
// Calculating the width/height of the textarea is somewhat tricky. To
|
||||
// do it right, you have to include the paddings to the sides as well
|
||||
// (eg. width = width + padding-left, -right). This works well, as
|
||||
// long as the width of the element is not set or given in pixels. In
|
||||
// this case and after the textarea is hidden, getCSSProperty(element,
|
||||
// container, 'width') will still return pixel value. If the element
|
||||
// has realtiv dimensions (e.g. width='95<percent>')
|
||||
// getCSSProperty(...) will return pixel values only as long as the
|
||||
// textarea is visible. After it is hidden getCSSProperty will return
|
||||
// the relative dimensions as they are set on the element (in the case
|
||||
// of width, 95<percent>).
|
||||
// Making the sum of pixel vaules (e.g. padding) and realtive values
|
||||
// (e.g. <percent>) is not possible. As such the padding styles are
|
||||
// ignored.
|
||||
|
||||
// The complete width is the width of the textarea + the padding
|
||||
// to the left and right.
|
||||
var width = getCSSProperty(element, container, 'width') || (element.clientWidth + "px");
|
||||
var height = getCSSProperty(element, container, 'height') || (element.clientHeight + "px");
|
||||
style += 'height:' + height + ';width:' + width + ';';
|
||||
|
||||
// Set the display property to 'inline-block'.
|
||||
style += 'display:inline-block;';
|
||||
container.setAttribute('style', style);
|
||||
};
|
||||
Event.addListener(window, 'resize', resizeEvent);
|
||||
|
||||
// Call the resizeEvent once, so that the size of the container is
|
||||
// calculated.
|
||||
resizeEvent();
|
||||
|
||||
// Insert the div container after the element.
|
||||
if (element.nextSibling) {
|
||||
parentNode.insertBefore(container, element.nextSibling);
|
||||
} else {
|
||||
parentNode.appendChild(container);
|
||||
}
|
||||
|
||||
// Override the forms onsubmit function. Set the innerHTML and value
|
||||
// of the textarea before submitting.
|
||||
while (parentNode !== document) {
|
||||
if (parentNode.tagName.toUpperCase() === 'FORM') {
|
||||
var oldSumit = parentNode.onsubmit;
|
||||
// Override the onsubmit function of the form.
|
||||
parentNode.onsubmit = function(evt) {
|
||||
element.value = getValue();
|
||||
element.innerHTML = getValue();
|
||||
// If there is a onsubmit function already, then call
|
||||
// it with the current context and pass the event.
|
||||
if (oldSumit) {
|
||||
oldSumit.call(this, evt);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
parentNode = parentNode.parentNode;
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
window.__ace_shadowed__.transformTextarea = function(element) {
|
||||
var session;
|
||||
var container = setupContainer(element, function() {
|
||||
return session.getValue();
|
||||
});
|
||||
|
||||
// Hide the element.
|
||||
element.style.display = 'none';
|
||||
container.style.background = 'white';
|
||||
|
||||
//
|
||||
var editorDiv = document.createElement("div");
|
||||
applyStyles(editorDiv, {
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
right: "0px",
|
||||
bottom: "0px",
|
||||
border: "1px solid gray"
|
||||
});
|
||||
container.appendChild(editorDiv);
|
||||
|
||||
var settingOpener = document.createElement("div");
|
||||
applyStyles(settingOpener, {
|
||||
position: "absolute",
|
||||
width: "15px",
|
||||
right: "0px",
|
||||
bottom: "0px",
|
||||
background: "red",
|
||||
cursor: "pointer",
|
||||
textAlign: "center",
|
||||
fontSize: "12px"
|
||||
});
|
||||
settingOpener.innerHTML = "I";
|
||||
|
||||
var settingDiv = document.createElement("div");
|
||||
var settingDivStyles = {
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
right: "0px",
|
||||
bottom: "0px",
|
||||
position: "absolute",
|
||||
padding: "5px",
|
||||
zIndex: 100,
|
||||
color: "white",
|
||||
display: "none",
|
||||
overflow: "auto",
|
||||
fontSize: "14px"
|
||||
};
|
||||
if (!UA.isIE) {
|
||||
settingDivStyles.backgroundColor = "rgba(0, 0, 0, 0.6)";
|
||||
} else {
|
||||
settingDivStyles.backgroundColor = "#333";
|
||||
}
|
||||
|
||||
applyStyles(settingDiv, settingDivStyles);
|
||||
container.appendChild(settingDiv);
|
||||
|
||||
// Power up ace on the textarea:
|
||||
var ace = window.__ace_shadowed__;
|
||||
var require = ace.require;
|
||||
var define = ace.define;
|
||||
var options = {};
|
||||
|
||||
var editor = ace.edit(editorDiv);
|
||||
session = editor.getSession();
|
||||
|
||||
session.setValue(element.value || element.innerHTML);
|
||||
editor.focus();
|
||||
|
||||
// Add the settingPanel opener to the editor's div.
|
||||
editorDiv.appendChild(settingOpener);
|
||||
|
||||
// Create the API.
|
||||
var api = setupApi(editor, editorDiv, settingDiv, ace, options)
|
||||
|
||||
// Create the setting's panel.
|
||||
setupSettingPanel(settingDiv, settingOpener, api, options);
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
function setupApi(editor, editorDiv, settingDiv, ace, options) {
|
||||
var session = editor.getSession();
|
||||
var renderer = editor.renderer;
|
||||
|
||||
function toBool(value) {
|
||||
return value == "true";
|
||||
}
|
||||
|
||||
var ret = {
|
||||
setDisplaySettings: function(display) {
|
||||
settingDiv.style.display = display ? "block" : "none";
|
||||
},
|
||||
|
||||
setOption: function(key, value) {
|
||||
if (options[key] == value) return;
|
||||
|
||||
var load = window.__ace_shadowed_load__;
|
||||
|
||||
switch (key) {
|
||||
case "gutter":
|
||||
renderer.setShowGutter(toBool(value));
|
||||
break;
|
||||
|
||||
case "mode":
|
||||
if (value != "text") {
|
||||
// Load the required mode file. Files get loaded only once.
|
||||
load("mode-" + value + ".js", "ace/mode/" + value, function() {
|
||||
var aceMode = require("ace/mode/" + value).Mode;
|
||||
session.setMode(new aceMode());
|
||||
});
|
||||
} else {
|
||||
session.setMode(new (require("ace/mode/text").Mode));
|
||||
}
|
||||
break;
|
||||
|
||||
case "theme":
|
||||
if (value != "textmate") {
|
||||
// Load the required theme file. Files get loaded only once.
|
||||
load("theme-" + value + ".js", "ace/theme/" + value, function() {
|
||||
editor.setTheme("ace/theme/" + value);
|
||||
});
|
||||
} else {
|
||||
editor.setTheme("ace/theme/textmate");
|
||||
}
|
||||
break;
|
||||
|
||||
case "fontSize":
|
||||
editorDiv.style.fontSize = value;
|
||||
break;
|
||||
|
||||
case "softWrap":
|
||||
switch (value) {
|
||||
case "off":
|
||||
session.setUseWrapMode(false);
|
||||
renderer.setPrintMarginColumn(80);
|
||||
break;
|
||||
case "40":
|
||||
session.setUseWrapMode(true);
|
||||
session.setWrapLimitRange(40, 40);
|
||||
renderer.setPrintMarginColumn(40);
|
||||
break;
|
||||
case "80":
|
||||
session.setUseWrapMode(true);
|
||||
session.setWrapLimitRange(80, 80);
|
||||
renderer.setPrintMarginColumn(80);
|
||||
break;
|
||||
case "free":
|
||||
session.setUseWrapMode(true);
|
||||
session.setWrapLimitRange(null, null);
|
||||
renderer.setPrintMarginColumn(80);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
case "useSoftTabs":
|
||||
session.setUseSoftTabs(toBool(value));
|
||||
break;
|
||||
|
||||
case "showPrintMargin":
|
||||
renderer.setShowPrintMargin(toBool(value));
|
||||
break
|
||||
}
|
||||
|
||||
options[key] = value;
|
||||
},
|
||||
|
||||
getOption: function(key) {
|
||||
return options[key];
|
||||
},
|
||||
|
||||
getOptions: function() {
|
||||
return options;
|
||||
}
|
||||
}
|
||||
|
||||
for (option in ace.options) {
|
||||
ret.setOption(option, ace.options[option]);
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function setupSettingPanel(settingDiv, settingOpener, api, options) {
|
||||
var BOOL = {
|
||||
"true": true,
|
||||
"false": false
|
||||
}
|
||||
|
||||
var desc = {
|
||||
mode: "Mode:",
|
||||
gutter: "Display Gutter:",
|
||||
theme: "Theme:",
|
||||
fontSize: "Font Size:",
|
||||
softWrap: "Soft Wrap:",
|
||||
showPrintMargin: "Show Print Margin:",
|
||||
useSoftTabs: "Use Soft Tabs:"
|
||||
}
|
||||
|
||||
var optionValues = {
|
||||
mode: {
|
||||
text: "Plain",
|
||||
javascript: "JavaScript",
|
||||
coffee: "CoffeeScript",
|
||||
html: "HTML",
|
||||
css: "CSS",
|
||||
c_cpp: "C++",
|
||||
php: "PHP",
|
||||
ruby: "Ruby",
|
||||
python: "Python"
|
||||
|
||||
},
|
||||
theme: {
|
||||
textmate: "Textmate",
|
||||
eclipse: "Eclipse",
|
||||
clouds: "Clouds",
|
||||
clouds_midnight: "Clouds Midnight",
|
||||
cobalt: "Cobalt",
|
||||
dawn: "Dawn",
|
||||
idle_fingers: "Idle Fingers",
|
||||
kr_theme: "Kr Theme",
|
||||
mono_industrial: "Mono Industrial",
|
||||
monokai: "Monokai",
|
||||
pastel_on_dark: "Pastel On Dark",
|
||||
twilight: "Twilight"
|
||||
},
|
||||
gutter: BOOL,
|
||||
fontSize: {
|
||||
"10px": "10px",
|
||||
"11px": "11px",
|
||||
"12px": "12px",
|
||||
"14px": "14px",
|
||||
"16px": "16px"
|
||||
},
|
||||
softWrap: {
|
||||
off: "Off",
|
||||
40: "40",
|
||||
80: "80",
|
||||
free: "Free"
|
||||
},
|
||||
showPrintMargin: BOOL,
|
||||
useSoftTabs: BOOL
|
||||
}
|
||||
|
||||
var table = [];
|
||||
table.push("<table><tr><th>Setting</th><th>Value</th></tr>");
|
||||
|
||||
function renderOption(builder, option, obj, cValue) {
|
||||
builder.push("<select title='" + option + "'>")
|
||||
for (var value in obj) {
|
||||
builder.push("<option value='" + value + "' ");
|
||||
|
||||
if (cValue == value) {
|
||||
builder.push(" selected ");
|
||||
}
|
||||
|
||||
builder.push(">",
|
||||
obj[value],
|
||||
"</option>");
|
||||
}
|
||||
builder.push("</select>")
|
||||
}
|
||||
|
||||
for (var option in options) {
|
||||
table.push("<tr><td>", desc[option], "</td>");
|
||||
table.push("<td>");
|
||||
renderOption(table, option, optionValues[option], options[option]);
|
||||
table.push("</td></tr>");
|
||||
}
|
||||
table.push("</table>");
|
||||
settingDiv.innerHTML = table.join("");
|
||||
|
||||
var selects = settingDiv.getElementsByTagName("select");
|
||||
for (var i = 0; i < selects.length; i++) {
|
||||
var onChange = (function() {
|
||||
var select = selects[i];
|
||||
return function() {
|
||||
var option = select.title;
|
||||
var value = select.value;
|
||||
api.setOption(option, value);
|
||||
}
|
||||
})();
|
||||
selects[i].onchange = onChange;
|
||||
}
|
||||
|
||||
var button = document.createElement("input");
|
||||
button.type = "button";
|
||||
button.value = "Hide";
|
||||
button.onclick = function() {
|
||||
api.setDisplaySettings(false);
|
||||
}
|
||||
settingDiv.appendChild(button);
|
||||
|
||||
settingOpener.onclick = function() {
|
||||
api.setDisplaySettings(true);
|
||||
}
|
||||
}
|
||||
|
||||
// Default startup options.
|
||||
window.__ace_shadowed__.options = {
|
||||
mode: "text",
|
||||
theme: "textmate",
|
||||
gutter: "false",
|
||||
fontSize: "12px",
|
||||
softWrap: "off",
|
||||
showPrintMargin: "false",
|
||||
useSoftTabs: "true"
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})()
|
||||
|
|
@ -5,23 +5,40 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Editor</title>
|
||||
<style type="text/css" media="screen">
|
||||
body { overflow: hidden; }
|
||||
#editor { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#editor {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="editor">function foo(items) {
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
<pre id="editor">function foo(items) {
|
||||
var i;
|
||||
for (i = 0; i < items.length; i++) {
|
||||
alert("Ace Rocks " + items[i]);
|
||||
}
|
||||
}</div>
|
||||
}</pre>
|
||||
|
||||
<script src="ace-uncompressed.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
ace.edit("editor");
|
||||
}, false);
|
||||
window.onload = function() {
|
||||
var editor = ace.edit("editor");
|
||||
editor.setTheme("ace/theme/twilight");
|
||||
|
||||
var JavaScriptMode = require("ace/mode/javascript").Mode;
|
||||
editor.getSession().setMode(new JavaScriptMode());
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
129
build_support/editor_textarea.html
Normal file
129
build_support/editor_textarea.html
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Editor</title>
|
||||
</head>
|
||||
<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">
|
||||
function foo() {
|
||||
var bar = true;
|
||||
}
|
||||
</textarea><br>
|
||||
SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textarea/src/"></input>
|
||||
|
||||
<button id="buBuild">Build Link</button> <br> <a href="#"></a>
|
||||
|
||||
<script>
|
||||
function inject() {
|
||||
var baseUrl = "src/";
|
||||
function load(path, module, callback) {
|
||||
path = baseUrl + path;
|
||||
if (!load.scripts[path]) {
|
||||
load.scripts[path] = {
|
||||
loaded: false,
|
||||
callbacks: [ callback ]
|
||||
};
|
||||
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var s = document.createElement('script');
|
||||
|
||||
function c() {
|
||||
if (window.__ace_shadowed__ && window.__ace_shadowed__.define.modules[module]) {
|
||||
load.scripts[path].loaded = true;
|
||||
load.scripts[path].callbacks.forEach(function(callback) {
|
||||
callback();
|
||||
});
|
||||
} else {
|
||||
setTimeout(c, 50);
|
||||
}
|
||||
};
|
||||
s.src = path;
|
||||
head.appendChild(s);
|
||||
|
||||
c();
|
||||
} else if (load.scripts[path].loaded) {
|
||||
callback();
|
||||
} else {
|
||||
load.scripts[path].callbacks.push(callback);
|
||||
}
|
||||
};
|
||||
|
||||
load.scripts = {};
|
||||
window.__ace_shadowed_load__ = load;
|
||||
|
||||
load('ace.js', 'text!ace/css/editor.css', function() {
|
||||
var ace = window.__ace_shadowed__;
|
||||
var Event = ace.require('pilot/event');
|
||||
var areas = document.getElementsByTagName("textarea");
|
||||
for (var i = 0; i < areas.length; i++) {
|
||||
Event.addListener(areas[i], "click", function(e) {
|
||||
if (e.detail == 3) {
|
||||
ace.transformTextarea(e.target);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Call the inject function to load the ace files.
|
||||
inject();
|
||||
|
||||
var textAce;
|
||||
function initAce() {
|
||||
var ace = window.__ace_shadowed__;
|
||||
// Check if the ace.js file was loaded already, otherwise check back later.
|
||||
if (ace && ace.transformTextarea) {
|
||||
var t = document.querySelector("textarea");
|
||||
textAce = ace.transformTextarea(t);
|
||||
textAce.setDisplaySettings(true);
|
||||
} else {
|
||||
setTimeout(initAce, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Transform the textarea on the page into an ace editor.
|
||||
initAce();
|
||||
|
||||
document.getElementById("buBuild").onclick = function() {
|
||||
var injectSrc = inject.toString().split("\n").join("");
|
||||
injectSrc = injectSrc.replace('baseUrl = "src/"', 'baseUrl="' + document.getElementById("srcURL").value + '"');
|
||||
|
||||
var aceOptions = textAce.getOptions();
|
||||
var opt = [];
|
||||
for (var option in aceOptions) {
|
||||
opt.push(option + ":'" + aceOptions[option] + "'");
|
||||
}
|
||||
injectSrc = injectSrc.replace('ace.options.mode = "javascript"', 'ace.options = { ' + opt.join(",") + ' }');
|
||||
injectSrc = injectSrc.replace(/\s+/g, " ");
|
||||
|
||||
var a = document.querySelector("a");
|
||||
a.href = "javascript:(" + injectSrc + ")()";
|
||||
a.innerHTML = "Ace Bookmarklet Link";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -35,53 +35,80 @@
|
|||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
(function() {
|
||||
|
||||
|
||||
/**
|
||||
* Define a module along with a payload
|
||||
* @param module a name for the payload
|
||||
* @param payload a function to call with (require, exports, module) params
|
||||
*/
|
||||
function define(module, payload) {
|
||||
var _define = function(module, payload) {
|
||||
if (typeof module !== 'string') {
|
||||
console.error('dropping module because define wasn\'t a string.');
|
||||
console.trace();
|
||||
if (_define.original)
|
||||
_define.original.apply(window, arguments);
|
||||
else {
|
||||
console.error('dropping module because define wasn\'t a string.');
|
||||
console.trace();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!define.modules) {
|
||||
define.modules = {};
|
||||
}
|
||||
|
||||
define.modules[module] = payload;
|
||||
};
|
||||
if (window.define) {
|
||||
_define.original = window.define;
|
||||
}
|
||||
|
||||
window.define = _define;
|
||||
|
||||
|
||||
/**
|
||||
* Get at functionality define()ed using the function above
|
||||
*/
|
||||
function require(module, callback) {
|
||||
if (Array.isArray(module)) {
|
||||
var _require = function(module, callback) {
|
||||
if (Object.prototype.toString.call(module) === "[object Array]") {
|
||||
var params = [];
|
||||
module.forEach(function(m) {
|
||||
params.push(define.lookup(m));
|
||||
}, this);
|
||||
|
||||
for (var i = 0, l = module.length; i < l; ++i) {
|
||||
var dep = lookup(module[i]);
|
||||
if (!dep && _require.original)
|
||||
return _require.original.apply(window, arguments);
|
||||
params.push(dep);
|
||||
};
|
||||
if (callback) {
|
||||
callback.apply(null, params);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof module === 'string') {
|
||||
var payload = define.lookup(module);
|
||||
var payload = lookup(module);
|
||||
if (!payload && _require.original)
|
||||
return _require.original.apply(window, arguments);
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
if (window.require) {
|
||||
_require.original = window.require;
|
||||
}
|
||||
|
||||
window.require = _require;
|
||||
require.packaged = true;
|
||||
|
||||
/**
|
||||
* Internal function to lookup moduleNames and resolve them by calling the
|
||||
* definition function if needed.
|
||||
*/
|
||||
define.lookup = function(moduleName) {
|
||||
var lookup = function(moduleName) {
|
||||
var module = define.modules[moduleName];
|
||||
if (module == null) {
|
||||
console.error('Missing module: ' + moduleName);
|
||||
|
|
@ -98,3 +125,6 @@ define.lookup = function(moduleName) {
|
|||
|
||||
return module;
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
|
|
|
|||
128
build_support/mini_require_textarea.js
Normal file
128
build_support/mini_require_textarea.js
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License Version
|
||||
* 1.1 (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS" basis,
|
||||
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
* for the specific language governing rights and limitations under the
|
||||
* License.
|
||||
*
|
||||
* The Original Code is Ajax.org Code Editor (ACE).
|
||||
*
|
||||
* The Initial Developer of the Original Code is
|
||||
* Ajax.org B.V.
|
||||
* Portions created by the Initial Developer are Copyright (C) 2010
|
||||
* the Initial Developer. All Rights Reserved.
|
||||
*
|
||||
* Contributor(s):
|
||||
* Fabian Jakobs <fabian AT ajax DOT org>
|
||||
* Julian Viereck <julian.viereck@gmail.com>
|
||||
*
|
||||
* Alternatively, the contents of this file may be used under the terms of
|
||||
* either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
* in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
* of those above. If you wish to allow use of your version of this file only
|
||||
* under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
* use your version of this file under the terms of the MPL, indicate your
|
||||
* decision by deleting the provisions above and replace them with the notice
|
||||
* and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
* the provisions above, a recipient may use your version of this file under
|
||||
* the terms of any one of the MPL, the GPL or the LGPL.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
/**
|
||||
* Define a module along with a payload
|
||||
* @param module a name for the payload
|
||||
* @param payload a function to call with (require, exports, module) params
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
var _define = function(module, payload) {
|
||||
if (typeof module !== 'string') {
|
||||
if (_define.original)
|
||||
_define.original.apply(window, arguments);
|
||||
else {
|
||||
console.error('dropping module because define wasn\'t a string.');
|
||||
console.trace();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!_define.modules)
|
||||
_define.modules = {};
|
||||
|
||||
_define.modules[module] = payload;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get at functionality define()ed using the function above
|
||||
*/
|
||||
var _require = function(module, callback) {
|
||||
if (Object.prototype.toString.call(module) === "[object Array]") {
|
||||
var params = [];
|
||||
for (var i = 0, l = module.length; i < l; ++i) {
|
||||
var dep = lookup(module[i]);
|
||||
if (!dep && _require.original)
|
||||
return _require.original.apply(window, arguments);
|
||||
params.push(dep);
|
||||
};
|
||||
if (callback) {
|
||||
callback.apply(null, params);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof module === 'string') {
|
||||
var payload = lookup(module);
|
||||
if (!payload && _require.original)
|
||||
return _require.original.apply(window, arguments);
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
return payload;
|
||||
};
|
||||
}
|
||||
|
||||
_require.packaged = true;
|
||||
_require.noWorker = true;
|
||||
|
||||
/**
|
||||
* Internal function to lookup moduleNames and resolve them by calling the
|
||||
* definition function if needed.
|
||||
*/
|
||||
var lookup = function(moduleName) {
|
||||
var module = _define.modules[moduleName];
|
||||
if (module == null) {
|
||||
console.error('Missing module: ' + moduleName);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (typeof module === 'function') {
|
||||
var exports = {};
|
||||
module(_require, exports, { id: moduleName, uri: '' });
|
||||
// cache the resulting module object for next time
|
||||
_define.modules[moduleName] = exports;
|
||||
return exports;
|
||||
}
|
||||
|
||||
return module;
|
||||
};
|
||||
|
||||
/**
|
||||
* Expose as "shadowed" object to the outside world.
|
||||
*/
|
||||
|
||||
window.__ace_shadowed__ = {
|
||||
require: _require,
|
||||
define: _define
|
||||
};
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue