Ace Bookmarklet Builder
@@ -73,7 +77,7 @@ function inject(callback) {
}
});
}
- callback();
+ callback && callback();
});
}
diff --git a/build_support/style.css b/build_support/style.css
index 43f46d0e..77caf67d 100644
--- a/build_support/style.css
+++ b/build_support/style.css
@@ -74,7 +74,6 @@ PRE{
.content {
width:970px;
position:relative;
- overflow:hidden;
margin:0 auto;
}
@@ -115,7 +114,6 @@ PRE{
#wrapper .content .column1 {
position:relative;
- overflow:hidden;
float:left;
width:315px;
margin-right:31px;
diff --git a/lib/ace/document.js b/lib/ace/document.js
index 87130012..99afe895 100644
--- a/lib/ace/document.js
+++ b/lib/ace/document.js
@@ -61,13 +61,12 @@ var Anchor = require("./anchor").Anchor;
var Document = function(text) {
this.$lines = [];
- if (Array.isArray(text)) {
- this.insertLines(0, text);
- }
// There has to be one line at least in the document. If you pass an empty
// string to the insert function, nothing will happen. Workaround.
- else if (text.length == 0) {
+ if (text.length == 0) {
this.$lines = [""];
+ } else if (Array.isArray(text)) {
+ this.insertLines(0, text);
} else {
this.insert({row: 0, column:0}, text);
}
diff --git a/lib/ace/ext/textarea.js b/lib/ace/ext/textarea.js
index 2ca5b9c8..c46579d8 100644
--- a/lib/ace/ext/textarea.js
+++ b/lib/ace/ext/textarea.js
@@ -21,6 +21,7 @@
* Contributor(s):
* Kevin Dangoor (kdangoor@mozilla.com)
* Julian Viereck
+ * Harutyun Amirjanyan [harutyun@c9.io]
*
* 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
@@ -39,20 +40,22 @@
define(function(require, exports, module) {
"use strict";
-var Event = require("../lib/event");
+var event = require("../lib/event");
var UA = require("../lib/useragent");
var net = require("../lib/net");
var ace = require("../ace");
require("ace/theme/textmate");
+module.exports = exports = ace;
+
/*
* 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
+ * calculated property is used (this can happen in cases where the textarea
* is hidden and has no dimension styles).
*/
var getCSSProperty = function(element, container, property) {
@@ -131,7 +134,7 @@ function setupContainer(element, getValue) {
style += 'display:inline-block;';
container.setAttribute('style', style);
};
- Event.addListener(window, 'resize', resizeEvent);
+ event.addListener(window, 'resize', resizeEvent);
// Call the resizeEvent once, so that the size of the container is
// calculated.
@@ -194,11 +197,13 @@ exports.transformTextarea = function(element, loader) {
right: "0px",
bottom: "0px",
background: "red",
- cursor: "pointer",
- textAlign: "center",
- fontSize: "12px"
+ cursor: "nw-resize",
+ borderStyle: "solid",
+ borderWidth: "9px 8px 10px 9px",
+ width: "2px",
+ borderColor: "lightblue gray gray lightblue",
+ zIndex: 101
});
- settingOpener.innerHTML = "I";
var settingDiv = document.createElement("div");
var settingDivStyles = {
@@ -236,12 +241,41 @@ exports.transformTextarea = function(element, loader) {
editorDiv.appendChild(settingOpener);
// Create the API.
- var api = setupApi(editor, editorDiv, settingDiv, ace, options, loader);
+ setupApi(editor, editorDiv, settingDiv, ace, options, loader);
// Create the setting's panel.
- setupSettingPanel(settingDiv, settingOpener, api, options);
+ setupSettingPanel(settingDiv, settingOpener, editor, options);
+
+ var state = "";
+ event.addListener(settingOpener, "mousemove", function(e) {
+ var rect = this.getBoundingClientRect();
+ var x = e.clientX - rect.left, y = e.clientY - rect.top;
+ if (x + y < (rect.width + rect.height)/2) {
+ this.style.cursor = "pointer";
+ state = "toggle";
+ } else {
+ state = "resize";
+ this.style.cursor = "nw-resize";
+ }
+ });
+
+ event.addListener(settingOpener, "mousedown", function(e) {
+ if (state == "toggle") {
+ editor.setDisplaySettings();
+ return;
+ }
+ container.style.zIndex = 100000;
+ var rect = container.getBoundingClientRect();
+ var startX = rect.width + rect.left - e.clientX;
+ var startY = rect.height + rect.top - e.clientY;
+ event.capture(settingOpener, function(e) {
+ container.style.width = e.clientX - rect.left + startX + "px";
+ container.style.height = e.clientY - rect.top + startY + "px";
+ editor.resize();
+ }, function() {});
+ });
- return api;
+ return editor;
};
function load(url, module, callback) {
@@ -259,103 +293,103 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
return value == "true";
}
- var ret = {
- setDisplaySettings: function(display) {
- settingDiv.style.display = display ? "block" : "none";
- },
+ editor.setDisplaySettings = function(display) {
+ if (display == null)
+ display = settingDiv.style.display == "none";
+ settingDiv.style.display = display ? "block" : "none";
+ };
+
+ editor.setOption = function(key, value) {
+ if (options[key] == value) return;
- setOption: function(key, value) {
- if (options[key] == value) return;
+ switch (key) {
+ case "gutter":
+ renderer.setShowGutter(toBool(value));
+ break;
- switch (key) {
- case "gutter":
- renderer.setShowGutter(toBool(value));
- break;
+ case "mode":
+ if (value != "text") {
+ // Load the required mode file. Files get loaded only once.
+ loader("mode-" + value + ".js", "ace/mode/" + value, function() {
+ var aceMode = require("../mode/" + value).Mode;
+ session.setMode(new aceMode());
+ });
+ } else {
+ session.setMode(new (require("../mode/text").Mode));
+ }
+ break;
- case "mode":
- if (value != "text") {
- // Load the required mode file. Files get loaded only once.
- loader("mode-" + value + ".js", "ace/mode/" + value, function() {
- var aceMode = require("../mode/" + value).Mode;
- session.setMode(new aceMode());
- });
- } else {
- session.setMode(new (require("../mode/text").Mode));
- }
- break;
+ case "theme":
+ if (value != "textmate") {
+ // Load the required theme file. Files get loaded only once.
+ loader("theme-" + value + ".js", "ace/theme/" + value, function() {
+ editor.setTheme("ace/theme/" + value);
+ });
+ } else {
+ editor.setTheme("ace/theme/textmate");
+ }
+ break;
- case "theme":
- if (value != "textmate") {
- // Load the required theme file. Files get loaded only once.
- loader("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 "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 "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 "useSoftTabs":
- session.setUseSoftTabs(toBool(value));
- break;
+ case "showPrintMargin":
+ renderer.setShowPrintMargin(toBool(value));
+ break;
- case "showPrintMargin":
- renderer.setShowPrintMargin(toBool(value));
- break;
-
- case "showInvisibles":
- editor.setShowInvisibles(toBool(value));
- break;
- }
-
- options[key] = value;
- },
-
- getOption: function(key) {
- return options[key];
- },
-
- getOptions: function() {
- return options;
+ case "showInvisibles":
+ editor.setShowInvisibles(toBool(value));
+ break;
}
+
+ options[key] = value;
+ };
+
+ editor.getOption = function(key) {
+ return options[key];
+ };
+
+ editor.getOptions = function() {
+ return options;
};
for (var option in exports.options) {
- ret.setOption(option, exports.options[option]);
+ editor.setOption(option, exports.options[option]);
}
- return ret;
+ return editor;
}
-function setupSettingPanel(settingDiv, settingOpener, api, options) {
+function setupSettingPanel(settingDiv, settingOpener, editor, options) {
var BOOL = {
"true": true,
"false": false
@@ -472,7 +506,7 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
return function() {
var option = select.title;
var value = select.value;
- api.setOption(option, value);
+ editor.setOption(option, value);
};
})();
selects[i].onchange = onChange;
@@ -481,14 +515,10 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) {
var button = document.createElement("input");
button.type = "button";
button.value = "Hide";
- button.onclick = function() {
- api.setDisplaySettings(false);
- };
+ event.addListener(button, "click", function() {
+ editor.setDisplaySettings(false);
+ });
settingDiv.appendChild(button);
-
- settingOpener.onclick = function() {
- api.setDisplaySettings(true);
- };
}
// Default startup options.