Sfoglia il codice sorgente

HUE-6815 [frontend] Improve the onClickOutside binding

Johan Ahlen 8 anni fa
parent
commit
54a24e6

+ 16 - 5
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -2436,14 +2436,25 @@
     }
   };
 
-  ko.bindingHandlers.clickOutside = {
-    init: function (element, valueAccessor) {
-      var func = valueAccessor();
+  ko.bindingHandlers.onClickOutside = {
+    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
+      var options = valueAccessor();
+      var func = (typeof options === 'function') ? options : options.onOutside;
 
-      $(document).on('click', function (event) {
+      var onDocumentClick = function (event) {
         if ($.contains(document, event.target) && !$.contains(element, event.target)) {
-          func();
+          var result = func.bind(viewModel)();
+          if (typeof result === 'undefined' || result) {
+            $(document).off('click', onDocumentClick);
+          }
         }
+      };
+
+      $(document).off('click', onDocumentClick);
+      $(document).on('click', onDocumentClick);
+
+      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
+        $(document).off('click', onDocumentClick);
       });
     }
   };

+ 2 - 2
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -658,14 +658,14 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
   <div class="query-history-container" data-bind="onComplete: function(){ redrawFixedHeaders(200); }">
     <div data-bind="delayedOverflow, css: resultsKlass" style="margin-top: 5px; position: relative;">
       <ul class="nav nav-tabs">
-        <li data-bind="click: function(){ currentQueryTab('queryHistory'); }, css: {'active': currentQueryTab() == 'queryHistory'}, clickOutside: function () { if ($parent.historyFilterVisible() && $parent.historyFilter() === '') { $parent.historyFilterVisible(false) } }">
+        <li data-bind="click: function(){ currentQueryTab('queryHistory'); }, css: {'active': currentQueryTab() == 'queryHistory'}, onClickOutside: function () { if ($parent.historyFilterVisible() && $parent.historyFilter() === '') { $parent.historyFilterVisible(false) } }">
           <a class="inactive-action" href="#queryHistory" data-toggle="tab">${_('Query History')}
             <div class="inline-block inactive-action margin-left-10 pointer" title="${_('Search the query history')}" data-bind="click: function(data, e){ $parent.historyFilterVisible(!$parent.historyFilterVisible()); if ($parent.historyFilterVisible()) { window.setTimeout(function(){ $(e.target).parent().siblings('input').focus(); }, 0); } else { $parent.historyFilter('') }}"><i class="snippet-icon fa fa-search"></i></div>
             <input class="input-small inline-tab-filter" type="text" data-bind="visible: $parent.historyFilterVisible, clearable: $parent.historyFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Search...') }">
             <div class="inline-block inactive-action pointer" title="${_('Clear the query history')}" data-target="#clearHistoryModal${ suffix }" data-toggle="modal" rel="tooltip" data-bind="visible: $parent.history().length > 0"><i class="snippet-icon fa fa-calendar-times-o"></i></div>
           </a>
         </li>
-        <li data-bind="click: function(){ currentQueryTab('savedQueries'); }, css: {'active': currentQueryTab() == 'savedQueries'}, clickOutside: function () { if (queriesFilterVisible() && queriesFilter() === '') { queriesFilterVisible(false) } }">
+        <li data-bind="click: function(){ currentQueryTab('savedQueries'); }, css: {'active': currentQueryTab() == 'savedQueries'}, onClickOutside: function () { if (queriesFilterVisible() && queriesFilter() === '') { queriesFilterVisible(false) } }">
           <a class="inactive-action" href="#savedQueries" data-toggle="tab">${_('Saved Queries')}
             <div class="inline-block inactive-action margin-left-10 pointer" title="${_('Search the saved queries')}" data-bind="visible: !queriesHasErrors(), click: function(data, e){ queriesFilterVisible(!queriesFilterVisible()); if (queriesFilterVisible()) { window.setTimeout(function(){ $(e.target).parent().siblings('input').focus(); }, 0); } else { queriesFilter('') }}"><i class="snippet-icon fa fa-search"></i></div>
             <input class="input-small inline-tab-filter" type="text" data-bind="visible: queriesFilterVisible, clearable: queriesFilter, valueUpdate:'afterkeydown'" placeholder="${ _('Search...') }">