Ver Fonte

[core] Allow styling of the Ace placeholder

This turns the placeholder into a custom element allowing us to better adjust its style.
Johan Ahlen há 10 anos atrás
pai
commit
d4c9cd0f54

+ 1 - 1
apps/spark/src/spark/static/spark/js/spark.ko.js

@@ -162,7 +162,7 @@ var Snippet = function (vm, notebook, snippet) {
   self.completers = ko.observableArray([]);
   self.errors = ko.observableArray([]);
 
-  self.statement_raw = ko.observable(typeof snippet.statement_raw != "undefined" && snippet.statement_raw != null ? snippet.statement_raw : vm.snippetPlaceholders[self.type()]);
+  self.statement_raw = ko.observable(typeof snippet.statement_raw != "undefined" && snippet.statement_raw != null ? snippet.statement_raw : '');
   self.codemirrorSize = ko.observable(typeof snippet.codemirrorSize != "undefined" && snippet.codemirrorSize != null ? snippet.codemirrorSize : 100);
   // self.statement_raw.extend({ rateLimit: 150 }); // Should prevent lag from typing but currently send the old query when using the key shortcut
   self.status = ko.observable(typeof snippet.status != "undefined" && snippet.status != null ? snippet.status : 'loading');

+ 23 - 10
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1685,27 +1685,40 @@ ko.bindingHandlers.aceEditor = {
       maxLines: 25
     }
 
-    if (editor.getValue() == "" && options.placeholder) {
-      editor.setValue(options.placeholder);
-    }
-
     var userOptions = $.totalStorage("hue.ace.options") || {};
     $.extend(editorOptions, options.editorOptions || userOptions);
 
     editor.setOptions(editorOptions);
 
-    editor.on("focus", function () {
-      if (options.placeholder && editor.getValue() == options.placeholder) {
-        editor.setValue("");
+    var placeHolderElement = null;
+    var placeHolderVisible = false;
+    if (options.placeholder) {
+      placeHolderElement = $("<div>")
+        .text(options.placeholder)
+        .css("margin-left", "6px")
+        .addClass("ace_invisible ace_emptyMessage");
+      if (editor.getValue().length == 0) {
+        placeHolderElement.appendTo(editor.renderer.scroller);
+        placeHolderVisible = true;
+      }
+    }
+
+    editor.on("input", function() {
+      if (editor.getValue().length == 0 && !placeHolderVisible) {
+        placeHolderElement.appendTo(editor.renderer.scroller);
+        placeHolderVisible = true;
+      } else if (placeHolderVisible) {
+        placeHolderElement.remove();
+        placeHolderVisible = false;
       }
+    });
+
+    editor.on("focus", function () {
       onFocus(editor);
     });
 
     editor.on("blur", function () {
       options.value(editor.getValue());
-      if (editor.getValue() == "" && options.placeholder) {
-        editor.setValue(options.placeholder);
-      }
       onBlur(editor);
     });