update package
This commit is contained in:
Fabian Jakobs
parent
c23c5713e1
commit
6992efd692
3 changed files with 109 additions and 65 deletions
|
|
@ -7,6 +7,25 @@
|
|||
</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;
|
||||
|
|
@ -14,12 +33,12 @@
|
|||
</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 @@ function inject() {
|
|||
|
||||
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 @@ function inject() {
|
|||
};
|
||||
|
||||
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;
|
||||
|
||||
var doc = new EditSession(Dom.getInnerText(el));
|
||||
doc.setUndoManager(new UndoManager());
|
||||
el.innerHTML = '';
|
||||
window.__ace_shadowed__.edit = function(el) {
|
||||
if (typeof(el) == "string") {
|
||||
el = document.getElementById(el);
|
||||
}
|
||||
|
||||
var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
|
||||
editor.setSession(doc);
|
||||
var doc = new EditSession(Dom.getInnerText(el));
|
||||
doc.setUndoManager(new UndoManager());
|
||||
el.innerHTML = '';
|
||||
|
||||
var env = require("pilot/environment").create();
|
||||
catalog.startupPlugins({ env: env }).then(function() {
|
||||
env.document = doc;
|
||||
env.editor = env;
|
||||
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();
|
||||
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"
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})()
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue