Make bookmarklet more IE compatible, but not working yet

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 catalog = require("pilot/plugin_manager").catalog;
-    var Event = require("pilot/event");
+catalog.registerPlugins([ "pilot/index" ]);
 
-    var Editor = require("ace/editor").Editor;
+var Dom = require("pilot/dom");
-    var EditSession = require("ace/edit_session").EditSession;
+var Event = require("pilot/event");
-    var UndoManager = require("ace/undomanager").UndoManager;
+var UA = require("pilot/useragent")
-    var Renderer = require("ace/virtual_renderer").VirtualRenderer;
 
-    window.__ace_shadowed__.edit = function(el) {
+var Editor = require("ace/editor").Editor;
-        if (typeof(el) == "string") {
+var EditSession = require("ace/edit_session").EditSession;
-            el = document.getElementById(el);
+var UndoManager = require("ace/undomanager").UndoManager;
-        }
+var Renderer = require("ace/virtual_renderer").VirtualRenderer;
 
-        var doc = new EditSession(Dom.getInnerText(el));
+window.__ace_shadowed__.edit = function(el) {
-        doc.setUndoManager(new UndoManager());
+    if (typeof(el) == "string") {
-        el.innerHTML = '';
+        el = document.getElementById(el);
+    }
 
-        var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
+    var doc = new EditSession(Dom.getInnerText(el));
-        editor.setSession(doc);
+    doc.setUndoManager(new UndoManager());
+    el.innerHTML = '';
 
-        var env = require("pilot/environment").create();
+    var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
-        catalog.startupPlugins({ env: env }).then(function() {
+    editor.setSession(doc);
-            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.
@@ -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]
+    var ret = element.style[property];
-                || document.defaultView.getComputedStyle(element, '').
+
-                                        getPropertyValue(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 width = getCSSProperty(element, container, 'width') || (element.clientWidth + "px");
-        var height = getCSSProperty(element, container, 'height');
+        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("</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 onChange = (function() {
-            var option = e.target.title;
+            var select = selects[i];
-            var value  = e.target.value;
+            return function() {
-            api.setOption(option, value);
+                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"
 }
 
+});
+
 })()

build_support/editor_textarea.html

@@ -19,7 +19,7 @@ SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textare
 <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 +29,21 @@ function inject() {
 
             var head = document.getElementsByTagName('head')[0];
             var s = document.createElement('script');
-            s.onload = function() {
+
-                load.scripts[path].loaded = true;
+            function c() {
-                load.scripts[path].callbacks.forEach(function(callback) {
+                if (window.__ace_shadowed__ && window.__ace_shadowed__.define.modules[module]) {
-                    callback();
+                    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 {
@@ -46,17 +53,19 @@ function inject() {
 
     load.scripts = {};
 
-    load('ace.js', function() {
+    window.__ace_shadowed_load__ = load;
+
+    load('ace-uncompressed.js', 'text!ace/css/editor.css', function() {
         var ace = window.__ace_shadowed__;
-        ace.load = load;
+        var Event = ace.require('pilot/event');
         ace.options.mode = "javascript";
-        var areas = document.querySelectorAll("textarea");
+        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);
+            });
         }
     });
 }