Permalink
Browse files

update package

  • Loading branch information...
fjakobs committed Feb 15, 2011
1 parent c23c571 commit 6992efd6929cbebe62632e1c357cb8b1dc7187cf
Showing with 109 additions and 65 deletions.
  1. +39 −13 build/textarea/editor.html
  2. +69 −51 build/textarea/src/ace-uncompressed.js
  3. +1 −1 build/textarea/src/ace.js
View
@@ -7,19 +7,38 @@
</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>
+<button id="buBuild">Build Link</button> <br> <a href="#"></a>
<script>
function inject() {
var baseUrl = "src/";
- var load = function(path, callback) {
+ function load(path, module, callback) {
path = baseUrl + path;
if (!load.scripts[path]) {
load.scripts[path] = {
@@ -29,14 +48,21 @@
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('script');
- s.onload = function() {
- load.scripts[path].loaded = true;
- load.scripts[path].callbacks.forEach(function(callback) {
- callback();
- });
+
+ 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 {
@@ -45,18 +71,18 @@
};
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__;
- ace.load = load;
- ace.options.mode = "javascript";
- var areas = document.querySelectorAll("textarea");
+ var Event = ace.require('pilot/event');
+ var areas = document.getElementsByTagName("textarea");
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) {
ace.transformTextarea(e.target);
}
- }, false);
+ });
}
});
}
@@ -12460,46 +12460,44 @@ var deps = [
];
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 catalog = require("pilot/plugin_manager").catalog;
+catalog.registerPlugins([ "pilot/index" ]);
- 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;
+var Dom = require("pilot/dom");
+var Event = require("pilot/event");
+var UA = require("pilot/useragent")
- window.__ace_shadowed__.edit = function(el) {
- if (typeof(el) == "string") {
- el = document.getElementById(el);
- }
+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 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 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;
+ 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();
- 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.
@@ -12511,9 +12509,15 @@ require(deps, function() {
* is hidden and has no dimension styles).
*/
var getCSSProperty = function(element, container, property) {
- var ret = element.style[property]
- || document.defaultView.getComputedStyle(element, '').
- getPropertyValue(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];
@@ -12573,15 +12577,15 @@ function setupContainer(element, getValue) {
// The complete width is the width of the textarea + the padding
// to the left and right.
- var width = getCSSProperty(element, container, 'width');
- var height = getCSSProperty(element, container, 'height');
+ 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);
};
- window.addEventListener('resize', resizeEvent, false);
+ Event.addListener(window, 'resize', resizeEvent);
// Call the resizeEvent once, so that the size of the container is
// calculated.
@@ -12632,7 +12636,8 @@ window.__ace_shadowed__.transformTextarea = function(element) {
top: "0px",
left: "0px",
right: "0px",
- bottom: "0px"
+ bottom: "0px",
+ border: "1px solid gray"
});
container.appendChild(editorDiv);
@@ -12650,20 +12655,26 @@ window.__ace_shadowed__.transformTextarea = function(element) {
settingOpener.innerHTML = "I";
var settingDiv = document.createElement("div");
- applyStyles(settingDiv, {
+ var settingDivStyles = {
top: "0px",
left: "0px",
right: "0px",
bottom: "0px",
position: "absolute",
padding: "5px",
- background: "rgba(0, 0, 0, 0.6)",
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:
@@ -12691,7 +12702,6 @@ window.__ace_shadowed__.transformTextarea = function(element) {
}
function setupApi(editor, editorDiv, settingDiv, ace, options) {
- var load = ace.load;
var session = editor.getSession();
var renderer = editor.renderer;
@@ -12707,6 +12717,8 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
setOption: function(key, value) {
if (options[key] == value) return;
+ var load = window.__ace_shadowed_load__;
+
switch (key) {
case "gutter":
renderer.setShowGutter(toBool(value));
@@ -12715,7 +12727,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
case "mode":
if (value != "text") {
// 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;
session.setMode(new aceMode());
});
@@ -12727,7 +12739,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options) {
case "theme":
if (value != "textmate") {
// 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);
});
} else {
@@ -12827,7 +12839,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
mono_industrial: "Mono Industrial",
monokai: "Monokai",
pastel_on_dark: "Pastel On Dark",
- twilight: "Twilight",
+ twilight: "Twilight"
},
gutter: BOOL,
fontSize: {
@@ -12874,13 +12886,17 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
table.push("</table>");
settingDiv.innerHTML = table.join("");
- var selects = settingDiv.querySelectorAll("select");
+ var selects = settingDiv.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
- selects[i].onchange = function(e) {
- var option = e.target.title;
- var value = e.target.value;
- api.setOption(option, value);
- }
+ 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");
@@ -12906,4 +12922,6 @@ window.__ace_shadowed__.options = {
showPrintMargin: "false"
}
+});
+
})()

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 6992efd

Please sign in to comment.