From e4d1d3fedcf07bc732edde503ec61206af57eb60 Mon Sep 17 00:00:00 2001 From: Julian Viereck Date: Wed, 16 Feb 2011 01:02:27 +0800 Subject: [PATCH 1/5] Make bookmarklet more IE compatible, but not working yet --- build_support/boot_textarea.js | 120 +++++++++++++++++------------ build_support/editor_textarea.html | 31 +++++--- 2 files changed, 89 insertions(+), 62 deletions(-) diff --git a/build_support/boot_textarea.js b/build_support/boot_textarea.js index 111a6043..2c95097f 100644 --- a/build_support/boot_textarea.js +++ b/build_support/boot_textarea.js @@ -52,46 +52,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. @@ -103,9 +101,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]; @@ -165,15 +169,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. @@ -224,7 +228,8 @@ window.__ace_shadowed__.transformTextarea = function(element) { top: "0px", left: "0px", right: "0px", - bottom: "0px" + bottom: "0px", + border: "1px solid gray" }); container.appendChild(editorDiv); @@ -242,20 +247,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: @@ -283,7 +294,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; @@ -299,6 +309,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)); @@ -307,7 +319,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()); }); @@ -319,7 +331,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 { @@ -419,7 +431,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: { @@ -466,13 +478,17 @@ function setupSettingPanel(settingDiv, settingOpener, api, options) { table.push(""); 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"); @@ -498,4 +514,6 @@ window.__ace_shadowed__.options = { showPrintMargin: "false" } +}); + })() diff --git a/build_support/editor_textarea.html b/build_support/editor_textarea.html index 75e30801..93aa2d6e 100644 --- a/build_support/editor_textarea.html +++ b/build_support/editor_textarea.html @@ -19,7 +19,7 @@ SourceUrl: Date: Wed, 16 Feb 2011 01:19:30 +0800 Subject: [PATCH 2/5] Add link to Ace Bookmarklet Builder and add some notes on how to use the bookmarklet --- build/Readme.md | 10 ++++++---- build_support/editor_textarea.html | 25 +++++++++++++++++++++---- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/build/Readme.md b/build/Readme.md index 10b84fc9..814ba5ee 100644 --- a/build/Readme.md +++ b/build/Readme.md @@ -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. +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 ------- @@ -49,19 +51,19 @@ The easiest version is simply: var editor = ace.edit("editor"); }; - + To change the theme simply include the Theme's JavaScript file - + and configure the editor to use the theme: 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 - + the mode can be used like this: var JavaScriptMode = require("ace/mode/javascript").Mode; diff --git a/build_support/editor_textarea.html b/build_support/editor_textarea.html index 93aa2d6e..c3c9a2b5 100644 --- a/build_support/editor_textarea.html +++ b/build_support/editor_textarea.html @@ -7,6 +7,25 @@ +

Ace Bookmarklet Builder

+ +

+WARNING: Currently, this is only fully supported in non IE browsers. +

+ +

+How to use it: +

+

+
SourceUrl: -
+