improve textarea plugin

build_support/editor_textarea.html

@@ -88,7 +88,7 @@ inject(function () {
     var ace = window.__ace_shadowed__;
     var t = document.querySelector("textarea");
     textAce = ace.transformTextarea(t, window.__ace_loader__);
-    textAce.setDisplaySettings(true);
+    setTimeout(function(){textAce.setDisplaySettings(true)});
 });
 
 

lib/ace/ext/textarea.js

@@ -177,7 +177,8 @@ exports.transformTextarea = function(element, loader) {
         left: "0px",
         right: "0px",
         bottom: "0px",
-        border: "1px solid gray"
+        border: "1px solid gray",
+        position: "absolute"
     });
     container.appendChild(editorDiv);
 
@@ -198,7 +199,7 @@ exports.transformTextarea = function(element, loader) {
     var settingDiv = document.createElement("div");
     var settingDivStyles = {
         top: "0px",
-        left: "0px",
+        left: "20%",
         right: "0px",
         bottom: "0px",
         position: "absolute",
@@ -207,7 +208,8 @@ exports.transformTextarea = function(element, loader) {
         color: "white",
         display: "none",
         overflow: "auto",
-        fontSize: "14px"
+        fontSize: "14px",
+        boxShadow: "-5px 2px 3px gray"
     };
     if (!UA.isOldIE) {
         settingDivStyles.backgroundColor = "rgba(0, 0, 0, 0.6)";
@@ -228,7 +230,7 @@ exports.transformTextarea = function(element, loader) {
     editor.focus();
 
     // Add the settingPanel opener to the editor's div.
-    editorDiv.appendChild(settingOpener);
+    container.appendChild(settingOpener);
 
     // Create the API.
     setupApi(editor, editorDiv, settingDiv, ace, options, loader);
@@ -280,13 +282,22 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
     loader = loader || load;
 
     function toBool(value) {
-        return value == "true";
+        return value === "true" || value == true;
     }
 
     editor.setDisplaySettings = function(display) {
         if (display == null)
             display = settingDiv.style.display == "none";
-        settingDiv.style.display = display ? "block" : "none";
+        if (display) {
+            settingDiv.style.display = "block";
+            settingDiv.hideButton.focus();
+            editor.on("focus", function onFocus() {
+                editor.removeListener("focus", onFocus);
+                settingDiv.style.display = "none"
+            });
+        } else {
+            editor.focus();
+        };
     };
     
     editor.setOption = function(key, value) {
@@ -393,10 +404,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
 }
 
 function setupSettingPanel(settingDiv, settingOpener, editor, options) {
-    var BOOL = {
-        "true":  true,
-        "false": false
-    };
+    var BOOL = null;
 
     var desc = {
         mode:            "Mode:",
@@ -484,6 +492,14 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
     table.push("<table><tr><th>Setting</th><th>Value</th></tr>");
 
     function renderOption(builder, option, obj, cValue) {
+        if (!obj) {
+            builder.push(
+                "<input type='checkbox' title='", option, "' ",
+                    cValue == "true" ? "checked='true'" : "",
+               "'></input>"
+            );
+            return
+        }
         builder.push("<select title='" + option + "'>");
         for (var value in obj) {
             builder.push("<option value='" + value + "' ");
@@ -508,18 +524,21 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
     table.push("</table>");
     settingDiv.innerHTML = table.join("");
 
+    var onChange = function(e) {
+        var select = e.currentTarget;
+        editor.setOption(select.title, select.value);
+    };
+    var onClick = function(e) {
+        var cb = e.currentTarget;
+        editor.setOption(cb.title, cb.checked);
+    };
     var selects = settingDiv.getElementsByTagName("select");
-    for (var i = 0; i < selects.length; i++) {
-        var onChange = (function() {
-            var select = selects[i];
-            return function() {
-                var option = select.title;
-                var value  = select.value;
-                editor.setOption(option, value);
-            };
-        })();
+    for (var i = 0; i < selects.length; i++)
         selects[i].onchange = onChange;
-    }
+    var cbs = settingDiv.getElementsByTagName("input");
+    for (var i = 0; i < cbs.length; i++)
+        cbs[i].onclick = onClick;
+
 
     var button = document.createElement("input");
     button.type = "button";
@@ -528,6 +547,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
         editor.setDisplaySettings(false);
     });
     settingDiv.appendChild(button);
+    settingDiv.hideButton = button;
 }
 
 // Default startup options.
@@ -540,7 +560,7 @@ exports.options = {
     keybindings:        "ace",
     showPrintMargin:    "false",
     useSoftTabs:        "true",
-    showInvisibles:     "true"
+    showInvisibles:     "false"
 };
 
 });