Browse Source

[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 years ago
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 = {
 ko.bindingHandlers.aceEditor = {
   init: function (element, valueAccessor) {
   init: function (element, valueAccessor) {
+
     var $el = $(element);
     var $el = $(element);
     var options = ko.unwrap(valueAccessor());
     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;
     var assistHelper = options.assistHelper;
 
 
-    $el.text(options.value());
+    $el.text(snippet.statement_raw());
 
 
     var editor = ace.edit($el.attr("id"));
     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) {
     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");
     editor.setTheme($.totalStorage("hue.ace.theme") || "ace/theme/hue");
 
 
@@ -1693,19 +1683,18 @@ ko.bindingHandlers.aceEditor = {
     };
     };
 
 
     var userOptions = $.totalStorage("hue.ace.options") || {};
     var userOptions = $.totalStorage("hue.ace.options") || {};
-    $.extend(editorOptions, options.editorOptions || userOptions);
+    $.extend(editorOptions, userOptions);
 
 
     editor.setOptions(editorOptions);
     editor.setOptions(editorOptions);
 
 
-    if (options.autocompleter) {
-      editor.session.setCompleters([options.autocompleter]);
-    }
+    editor.session.setCompleters([snippet.autocompleter]);
 
 
     var placeHolderElement = null;
     var placeHolderElement = null;
     var placeHolderVisible = false;
     var placeHolderVisible = false;
-    if (options.placeholder) {
+    var placeHolderText = snippet.getPlaceHolder();
+    if (placeHolderText) {
       placeHolderElement = $("<div>")
       placeHolderElement = $("<div>")
-        .text(options.placeholder)
+        .text(placeHolderText)
         .css("margin-left", "6px")
         .css("margin-left", "6px")
         .addClass("ace_invisible ace_emptyMessage");
         .addClass("ace_invisible ace_emptyMessage");
       if (editor.getValue().length == 0) {
       if (editor.getValue().length == 0) {
@@ -1723,35 +1712,24 @@ ko.bindingHandlers.aceEditor = {
         placeHolderVisible = false;
         placeHolderVisible = false;
       }
       }
       if (options.updateOnInput){
       if (options.updateOnInput){
-        options.value(editor.getValue());
+        snippet.statement_raw(editor.getValue());
       }
       }
     });
     });
 
 
     editor.on("focus", function () {
     editor.on("focus", function () {
       $(".ace-editor").data("last-active-editor", false);
       $(".ace-editor").data("last-active-editor", false);
       $el.data("last-active-editor", true);
       $el.data("last-active-editor", true);
-      onFocus(editor);
     });
     });
 
 
     editor.on("blur", function () {
     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 currentAssistTables = {};
 
 
     var refreshTables = function() {
     var refreshTables = function() {
       currentAssistTables = {};
       currentAssistTables = {};
-      if (typeof assistHelper.activeDatabase() != undefined && assistHelper.activeDatabase() != null) {
+      if (typeof assistHelper.activeDatabase() !== "undefined" && assistHelper.activeDatabase() != null) {
         assistHelper.fetchTables(function(data) {
         assistHelper.fetchTables(function(data) {
           $.each(data.tables, function(index, table) {
           $.each(data.tables, function(index, table) {
             currentAssistTables[table] = true;
             currentAssistTables[table] = true;
@@ -1912,8 +1890,9 @@ ko.bindingHandlers.aceEditor = {
 
 
     editor.previousSize = 0;
     editor.previousSize = 0;
 
 
+    // TODO: Get rid of this
     window.setInterval(function(){
     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);
     }, 100);
 
 
     editor.middleClick = false;
     editor.middleClick = false;
@@ -1935,21 +1914,20 @@ ko.bindingHandlers.aceEditor = {
 
 
     editor.on("change", function (e) {
     editor.on("change", function (e) {
       editor.clearErrors();
       editor.clearErrors();
-      editor.session.getMode().$id = valueAccessor().mode;
+      editor.session.getMode().$id = snippet.getAceMode();
       var currentSize = editor.session.getLength();
       var currentSize = editor.session.getLength();
       if (currentSize != editor.previousSize && currentSize >= editorOptions.minLines && currentSize <= editorOptions.maxLines){
       if (currentSize != editor.previousSize && currentSize >= editorOptions.minLines && currentSize <= editorOptions.maxLines){
         editor.previousSize = editor.session.getLength();
         editor.previousSize = editor.session.getLength();
         $(document).trigger("editorSizeChanged");
         $(document).trigger("editorSizeChanged");
       }
       }
-      onChange(e, editor, valueAccessor);
     });
     });
 
 
     editor.commands.addCommand({
     editor.commands.addCommand({
       name: "execute",
       name: "execute",
       bindKey: {win: "Ctrl-Enter", mac: "Command-Enter|Ctrl-Enter"},
       bindKey: {win: "Ctrl-Enter", mac: "Command-Enter|Ctrl-Enter"},
       exec: function () {
       exec: function () {
-        options.value(editor.getValue());
-        onExecute();
+        snippet.statement_raw(editor.getValue());
+        snippet.execute();
       }
       }
     });
     });
 
 
@@ -1974,7 +1952,7 @@ ko.bindingHandlers.aceEditor = {
           }, 100);
           }, 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 == ".") {
       if ((editor.session.getMode().$id == "ace/mode/hive" || editor.session.getMode().$id == "ace/mode/impala") && e.args == ".") {
         editor.execCommand("startAutocomplete");
         editor.execCommand("startAutocomplete");
       }
       }
@@ -2015,17 +1993,18 @@ ko.bindingHandlers.aceEditor = {
           editor.enableAutocomplete();
           editor.enableAutocomplete();
         }
         }
       }
       }
-      onAfterExec(e, editor, valueAccessor);
     });
     });
 
 
-    editor.$blockScrolling = Infinity
-    options.aceInstance(editor);
+    editor.$blockScrolling = Infinity;
+    snippet.ace(editor);
   },
   },
+
   update: function (element, valueAccessor) {
   update: function (element, valueAccessor) {
     var options = ko.unwrap(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.ace = ko.observable(null);
   self.errors = ko.observableArray([]);
   self.errors = ko.observableArray([]);
 
 
+  self.getAceMode = function() {
+    return vm.getSnippetViewSettings(self.type()).aceMode;
+  };
+
   self.isSqlDialect = function () {
   self.isSqlDialect = function () {
     return vm.getSnippetViewSettings(self.type()).sqlDialect;
     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.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.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.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="row-fluid" style="margin-bottom: 5px">
     <div class="editor span12" data-bind="verticalSlide: codeVisible">
     <div class="editor span12" data-bind="verticalSlide: codeVisible">
       <div class="ace-editor" data-bind="attr: { id: id() }, delayedOverflow, aceEditor: {
       <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,
           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>
     <div class="clearfix"></div>
     <div class="clearfix"></div>
     <ul data-bind="foreach: variables" class="unstyled inline">
     <ul data-bind="foreach: variables" class="unstyled inline">
@@ -673,11 +668,9 @@ from desktop.views import _ko
       <div class="row-fluid">
       <div class="row-fluid">
         <div class="span6">
         <div class="span6">
           <div class="ace-editor" data-bind="attr: { id: id() }, aceEditor: {
           <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>
         <div class="span6">
         <div class="span6">
           <div data-bind="html: renderMarkdown(statement_raw(), id()), attr: {'id': 'liveMD'+id()}"></div>
           <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") }'
       snippetImage: '${ static("spark/art/icon_spark_48.png") }'
     },
     },
     text: {
     text: {
+      placeholder: '${ _('Type your markdown here') }',
+      aceMode: 'markdown',
       snippetIcon: 'fa-header'
       snippetIcon: 'fa-header'
     }
     }
   };
   };