Эх сурвалжийг харах

[notebook] Cleanup the ace editor binding

Instead of passing the snippet in parts to the binding I've changed it to pass the entire snippet instead. I've also removed some of the unused functionality of the binding.
Johan Ahlen 10 жил өмнө
parent
commit
749c16e

+ 36 - 57
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1644,40 +1644,30 @@ ko.bindingHandlers.delayedOverflow = {
 
 ko.bindingHandlers.aceEditor = {
   init: function (element, valueAccessor) {
+
     var $el = $(element);
     var options = ko.unwrap(valueAccessor());
-    var onFocus = options.onFocus || function () {};
-    var onBlur = options.onBlur || function () {};
-    var onChange = options.onChange || function () {};
-    var onCopy = options.onCopy || function () {};
-    var onPaste = options.onPaste || function () {};
-    var onAfterExec = options.onAfterExec || function () {};
-    var onExecute = options.onExecute || function () {};
+    var snippet = options.snippet;
     var assistHelper = options.assistHelper;
 
-    $el.text(options.value());
+    $el.text(snippet.statement_raw());
 
     var editor = ace.edit($el.attr("id"));
-    editor.session.setMode(options.mode);
+    editor.session.setMode(snippet.getAceMode());
     if (navigator.platform && navigator.platform.toLowerCase().indexOf("linux") > -1) {
-      editor.setOptions({fontSize: "14px"})
+      editor.setOptions({ fontSize: "14px" });
     }
-    editor.on("focus", function () {
-      huePubSub.publish("hue.ace.activeMode", ko.unwrap(options.mode));
-    });
 
-    if (ko.isObservable(options.errors)) {
-      options.errors.subscribe(function(errors) {
-        editor.clearErrors();
-        if (errors.length > 0) {
-          errors.forEach(function (err) {
-            if (err.line !== null) {
-              editor.addError(err.message, err.line);
-            }
-          });
-        }
-      });
-    }
+    snippet.errors.subscribe(function(newErrors) {
+      editor.clearErrors();
+      if (newErrors.length > 0) {
+        newErrors.forEach(function (err) {
+          if (err.line !== null) {
+            editor.addError(err.message, err.line);
+          }
+        });
+      }
+    });
 
     editor.setTheme($.totalStorage("hue.ace.theme") || "ace/theme/hue");
 
@@ -1693,19 +1683,18 @@ ko.bindingHandlers.aceEditor = {
     };
 
     var userOptions = $.totalStorage("hue.ace.options") || {};
-    $.extend(editorOptions, options.editorOptions || userOptions);
+    $.extend(editorOptions, userOptions);
 
     editor.setOptions(editorOptions);
 
-    if (options.autocompleter) {
-      editor.session.setCompleters([options.autocompleter]);
-    }
+    editor.session.setCompleters([snippet.autocompleter]);
 
     var placeHolderElement = null;
     var placeHolderVisible = false;
-    if (options.placeholder) {
+    var placeHolderText = snippet.getPlaceHolder();
+    if (placeHolderText) {
       placeHolderElement = $("<div>")
-        .text(options.placeholder)
+        .text(placeHolderText)
         .css("margin-left", "6px")
         .addClass("ace_invisible ace_emptyMessage");
       if (editor.getValue().length == 0) {
@@ -1723,35 +1712,24 @@ ko.bindingHandlers.aceEditor = {
         placeHolderVisible = false;
       }
       if (options.updateOnInput){
-        options.value(editor.getValue());
+        snippet.statement_raw(editor.getValue());
       }
     });
 
     editor.on("focus", function () {
       $(".ace-editor").data("last-active-editor", false);
       $el.data("last-active-editor", true);
-      onFocus(editor);
     });
 
     editor.on("blur", function () {
-      options.value(editor.getValue());
-      onBlur(editor);
-    });
-
-    editor.on("copy", function () {
-      onCopy(editor);
-    });
-
-    editor.on("paste", function () {
-      onPaste(editor);
+      snippet.statement_raw(editor.getValue());
     });
 
-
     var currentAssistTables = {};
 
     var refreshTables = function() {
       currentAssistTables = {};
-      if (typeof assistHelper.activeDatabase() != undefined && assistHelper.activeDatabase() != null) {
+      if (typeof assistHelper.activeDatabase() !== "undefined" && assistHelper.activeDatabase() != null) {
         assistHelper.fetchTables(function(data) {
           $.each(data.tables, function(index, table) {
             currentAssistTables[table] = true;
@@ -1912,8 +1890,9 @@ ko.bindingHandlers.aceEditor = {
 
     editor.previousSize = 0;
 
+    // TODO: Get rid of this
     window.setInterval(function(){
-      editor.session.getMode().$id = valueAccessor().mode; // forces the id again because of Ace command internals
+      editor.session.getMode().$id = snippet.getAceMode(); // forces the id again because of Ace command internals
     }, 100);
 
     editor.middleClick = false;
@@ -1935,21 +1914,20 @@ ko.bindingHandlers.aceEditor = {
 
     editor.on("change", function (e) {
       editor.clearErrors();
-      editor.session.getMode().$id = valueAccessor().mode;
+      editor.session.getMode().$id = snippet.getAceMode();
       var currentSize = editor.session.getLength();
       if (currentSize != editor.previousSize && currentSize >= editorOptions.minLines && currentSize <= editorOptions.maxLines){
         editor.previousSize = editor.session.getLength();
         $(document).trigger("editorSizeChanged");
       }
-      onChange(e, editor, valueAccessor);
     });
 
     editor.commands.addCommand({
       name: "execute",
       bindKey: {win: "Ctrl-Enter", mac: "Command-Enter|Ctrl-Enter"},
       exec: function () {
-        options.value(editor.getValue());
-        onExecute();
+        snippet.statement_raw(editor.getValue());
+        snippet.execute();
       }
     });
 
@@ -1974,7 +1952,7 @@ ko.bindingHandlers.aceEditor = {
           }, 100);
         }
       }
-      editor.session.getMode().$id = valueAccessor().mode; // forces the id again because of Ace command internals
+      editor.session.getMode().$id = snippet.getAceMode(); // forces the id again because of Ace command internals
       if ((editor.session.getMode().$id == "ace/mode/hive" || editor.session.getMode().$id == "ace/mode/impala") && e.args == ".") {
         editor.execCommand("startAutocomplete");
       }
@@ -2015,17 +1993,18 @@ ko.bindingHandlers.aceEditor = {
           editor.enableAutocomplete();
         }
       }
-      onAfterExec(e, editor, valueAccessor);
     });
 
-    editor.$blockScrolling = Infinity
-    options.aceInstance(editor);
+    editor.$blockScrolling = Infinity;
+    snippet.ace(editor);
   },
+
   update: function (element, valueAccessor) {
     var options = ko.unwrap(valueAccessor());
-    if (options.aceInstance()) {
-      var editor = options.aceInstance();
-      editor.session.setMode(options.mode);
+    var snippet = options.snippet;
+    if (snippet.ace()) {
+      var editor = snippet.ace();
+      editor.session.setMode(snippet.getAceMode());
     }
   }
 };

+ 8 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -145,10 +145,18 @@ var Snippet = function (vm, notebook, snippet) {
   self.ace = ko.observable(null);
   self.errors = ko.observableArray([]);
 
+  self.getAceMode = function() {
+    return vm.getSnippetViewSettings(self.type()).aceMode;
+  };
+
   self.isSqlDialect = function () {
     return vm.getSnippetViewSettings(self.type()).sqlDialect;
   };
 
+  self.getPlaceHolder = function() {
+    return vm.getSnippetViewSettings(self.type()).placeHolder;
+  };
+
   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

+ 8 - 13
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -465,15 +465,10 @@ from desktop.views import _ko
   <div class="row-fluid" style="margin-bottom: 5px">
     <div class="editor span12" data-bind="verticalSlide: codeVisible">
       <div class="ace-editor" data-bind="attr: { id: id() }, delayedOverflow, aceEditor: {
-          value: statement_raw,
-          onExecute: execute,
-          aceInstance: ace,
-          mode: viewSettings().aceMode,
-          errors: errors,
-          autocompleter: autocompleter,
+          snippet: $data,
           assistHelper: assistHelper,
-          openIt: '${ _ko("Alt or Ctrl + Click to open it") }',
-          placeholder: viewSettings().placeHolder }"></div>
+          openIt: '${ _ko("Alt or Ctrl + Click to open it") }'
+          }"></div>
       </div>
     <div class="clearfix"></div>
     <ul data-bind="foreach: variables" class="unstyled inline">
@@ -673,11 +668,9 @@ from desktop.views import _ko
       <div class="row-fluid">
         <div class="span6">
           <div class="ace-editor" data-bind="attr: { id: id() }, aceEditor: {
-            value: statement_raw,
-            aceInstance: ace,
-            updateOnInput: true,
-            mode: ko.observable('markdown'),
-            placeholder: '${ _('Type your markdown here') }' }"></div>
+              snippet: $data,
+              updateOnInput: true
+            "></div>
         </div>
         <div class="span6">
           <div data-bind="html: renderMarkdown(statement_raw(), id()), attr: {'id': 'liveMD'+id()}"></div>
@@ -1013,6 +1006,8 @@ from desktop.views import _ko
       snippetImage: '${ static("spark/art/icon_spark_48.png") }'
     },
     text: {
+      placeholder: '${ _('Type your markdown here') }',
+      aceMode: 'markdown',
       snippetIcon: 'fa-header'
     }
   };