Prechádzať zdrojové kódy

HUE-5235 [editor] Allow to type any setting in the session tab

Enrico Berti 9 rokov pred
rodič
commit
d49eda0

+ 103 - 112
desktop/core/src/desktop/static/desktop/ext/js/knockout-selectize.js

@@ -1,132 +1,123 @@
-// Based on source from:
+// From: https://gist.githubusercontent.com/xtranophilist/8001624/raw/ko_selectize.js
 
-(function (factory) {
-  if(typeof define === "function") {
-    define("ko.selectize", ["knockout", "selectize"], factory);
-  } else {
-    factory(ko, selectize);
-  }
-}(function (ko) {
-  var inject_binding = function (allBindings, key, value) {
-    return {
-      has: function (bindingKey) {
-        return (bindingKey == key) || allBindings.has(bindingKey);
-      },
-      get: function (bindingKey) {
-        var binding = allBindings.get(bindingKey);
-        if (bindingKey == key) {
-          binding = binding ? [].concat(binding, value) : value;
-        }
-        return binding;
+var inject_binding = function (allBindings, key, value) {
+  //https://github.com/knockout/knockout/pull/932#issuecomment-26547528
+  return {
+    has: function (bindingKey) {
+      return (bindingKey == key) || allBindings.has(bindingKey);
+    },
+    get: function (bindingKey) {
+      var binding = allBindings.get(bindingKey);
+      if (bindingKey == key) {
+        binding = binding ? [].concat(binding, value) : value;
       }
-    };
+      return binding;
+    }
   };
+}
+
+ko.bindingHandlers.selectize = {
+  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
+    if (!allBindingsAccessor.has('optionsText'))
+      allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsText', 'name');
+    if (!allBindingsAccessor.has('optionsValue'))
+      allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsValue', 'id');
+    if (typeof allBindingsAccessor.get('optionsCaption') == 'undefined')
+      allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsCaption', 'Choose...');
+
+    ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
+
+    var options = {
+      valueField: allBindingsAccessor.get('optionsValue'),
+      labelField: allBindingsAccessor.get('optionsText'),
+      searchField: allBindingsAccessor.get('optionsText')
+    }
 
-  ko.bindingHandlers.selectize = {
-    after: ['options'],
-    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
-      if (!allBindingsAccessor.has('optionsText'))
-        allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsText', 'name');
-      if (!allBindingsAccessor.has('optionsValue'))
-        allBindingsAccessor = inject_binding(allBindingsAccessor, 'optionsValue', 'id');
-
-      ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
-
-      var options = {
-        valueField: allBindingsAccessor.get('optionsValue'),
-        labelField: allBindingsAccessor.get('optionsText'),
-        searchField: allBindingsAccessor.get('optionsText'),
-        create: true,
-        createOnBlur: true,
-        allowEmptyOption: true
-      };
-
-      if (allBindingsAccessor.has('options')) {
-        var passed_options = allBindingsAccessor.get('options');
-        for (var attr_name in passed_options) {
-          options[attr_name] = passed_options[attr_name];
-        }
+    if (allBindingsAccessor.has('selectizeOptions')) {
+      var passed_options = allBindingsAccessor.get('selectizeOptions')
+      for (var attr_name in passed_options) {
+        options[attr_name] = passed_options[attr_name];
       }
+    }
 
-      var $select = $(element).selectize(options)[0].selectize;
-
-      if (typeof allBindingsAccessor.get('value') == 'function') {
-        $select.addItem(allBindingsAccessor.get('value')());
-        allBindingsAccessor.get('value').subscribe(function (new_val) {
-          $select.addItem(new_val);
-        })
-      }
+    var $select = $(element).selectize(options)[0].selectize;
 
-      if (typeof allBindingsAccessor.get('selectedOptions') == 'function') {
-        allBindingsAccessor.get('selectedOptions').subscribe(function (new_val) {
-          // Removing items which are not in new value
-          var values = $select.getValue();
-          var items_to_remove = [];
-          for (var k in values) {
-            if (new_val.indexOf(values[k]) == -1) {
-              items_to_remove.push(values[k]);
-            }
-          }
+    if (typeof allBindingsAccessor.get('value') == 'function') {
+      $select.addItem(allBindingsAccessor.get('value')());
+      allBindingsAccessor.get('value').subscribe(function (new_val) {
+        $select.addItem(new_val);
+      })
+    }
 
-          for (var k in items_to_remove) {
-            $select.removeItem(items_to_remove[k]);
+    if (typeof allBindingsAccessor.get('selectedOptions') == 'function') {
+      allBindingsAccessor.get('selectedOptions').subscribe(function (new_val) {
+        // Removing items which are not in new value
+        var values = $select.getValue();
+        var items_to_remove = [];
+        for (var k in values) {
+          if (new_val.indexOf(values[k]) == -1) {
+            items_to_remove.push(values[k]);
           }
+        }
 
-          for (var k in new_val) {
-            $select.addItem(new_val[k]);
-          }
+        for (var k in items_to_remove) {
+          $select.removeItem(items_to_remove[k]);
+        }
 
-        });
-        var selected = allBindingsAccessor.get('selectedOptions')();
-        for (var k in selected) {
-          $select.addItem(selected[k]);
+        for (var k in new_val) {
+          $select.addItem(new_val[k]);
         }
+
+      });
+      var selected = allBindingsAccessor.get('selectedOptions')();
+      for (var k in selected) {
+        $select.addItem(selected[k]);
       }
+    }
 
 
-      if (typeof init_selectize == 'function') {
-        init_selectize($select);
-      }
+    if (typeof init_selectize == 'function') {
+      init_selectize($select);
+    }
 
-      if (typeof valueAccessor().subscribe == 'function') {
-        valueAccessor().subscribe(function (changes) {
-          // To avoid having duplicate keys, all delete operations will go first
-          var addedItems = new Array();
-          changes.forEach(function (change) {
-            switch (change.status) {
-              case 'added':
-                addedItems.push(change.value);
-                break;
-              case 'deleted':
-                var itemId = change.value[options.valueField];
-                if (itemId != null) $select.removeOption(itemId);
-            }
-          });
-          addedItems.forEach(function (item) {
-            $select.addOption(item);
-          });
-
-        }, null, "arrayChange");
-      }
+    if (typeof valueAccessor().subscribe == 'function') {
+      valueAccessor().subscribe(function (changes) {
+        // To avoid having duplicate keys, all delete operations will go first
+        var addedItems = new Array();
+        changes.forEach(function (change) {
+          switch (change.status) {
+            case 'added':
+              addedItems.push(change.value);
+              break;
+            case 'deleted':
+              var itemId = change.value[options.valueField];
+              if (itemId != null) $select.removeOption(itemId);
+          }
+        });
+        addedItems.forEach(function (item) {
+          $select.addOption(item);
+        });
 
-    },
-    update: function (element, valueAccessor, allBindingsAccessor) {
-
-      if (allBindingsAccessor.has('object')) {
-        var optionsValue = allBindingsAccessor.get('optionsValue') || 'id';
-        var value_accessor = valueAccessor();
-        var selected_obj = $.grep(value_accessor(), function (i) {
-          if (typeof i[optionsValue] == 'function')
-            var id = i[optionsValue];
-          else
-            var id = i[optionsValue];
-          return id == allBindingsAccessor.get('value')();
-        })[0];
-
-        if (selected_obj) {
-          allBindingsAccessor.get('object')(selected_obj);
-        }
+      }, null, "arrayChange");
+    }
+
+  },
+  update: function (element, valueAccessor, allBindingsAccessor) {
+
+    if (allBindingsAccessor.has('object')) {
+      var optionsValue = allBindingsAccessor.get('optionsValue') || 'id';
+      var value_accessor = valueAccessor();
+      var selected_obj = $.grep(value_accessor(), function (i) {
+        if (typeof i[optionsValue] == 'function')
+          var id = i[optionsValue]
+        else
+          var id = i[optionsValue]
+        return id == allBindingsAccessor.get('value')();
+      })[0];
+
+      if (selected_obj) {
+        allBindingsAccessor.get('object')(selected_obj);
       }
     }
   }
-}));
+}

+ 9 - 8
desktop/core/src/desktop/templates/config_ko_components.mako

@@ -86,6 +86,11 @@ from desktop.views import _ko
   <script type="text/html" id="property-selector-template">
     <!-- ko foreach: selectedProperties -->
     <div>
+      <div class="config-property-remove">
+        <a class="inactive-action" href="javascript:void(0)" data-bind="click: function() { $parent.removeProperty($data) }" title="${ _('Remove') }">
+          <i class="fa fa-times"></i>
+        </a>
+      </div>
       <!-- ko template: {
         name: 'property',
         data: {
@@ -97,11 +102,6 @@ from desktop.views import _ko
           visibleObservable: $parent.visibleObservable
         }
       } --><!-- /ko -->
-      <div class="config-property-remove">
-        <a class="inactive-action" href="javascript:void(0)" data-bind="click: function() { $parent.removeProperty($data) }" title="${ _('Remove') }">
-          <i class="fa fa-times"></i>
-        </a>
-      </div>
     </div>
     <!-- /ko -->
     <div class="config-property-available margin-left-10" data-bind="visible: availableProperties().length > 0">
@@ -427,8 +427,8 @@ from desktop.views import _ko
     <ul data-bind="sortable: { data: values, options: { axis: 'y', containment: 'parent', handle: '.move-widget' }}, visible: values().length" class="unstyled">
       <li style="clear:both;">
         <!-- ko if: $parent.options.length > 0 -->
-        <div class="selectize-wrapper" style="min-width: 200px;">
-          <select placeholder="${ _('Key') }" data-bind="selectize: $parent.options, value: key, options: $parent.options, optionsText: 'value', optionsValue: 'value'"></select>
+        <div class="selectize-wrapper" style="width: 200px;">
+          <select placeholder="${ _('Key') }" data-bind="selectize: $parent.options, selectizeOptions: {create: true}, value: key, options: $parent.options, optionsText: 'value', optionsValue: 'value'"></select>
         </div>
         <!-- /ko -->
         <div class="input-append" style="margin-bottom: 4px">
@@ -441,11 +441,12 @@ from desktop.views import _ko
         </div>
       </li>
     </ul>
-    <div class="config-property-add-value" style="margin-top: 5px;">
+    <div class="config-property-add-value" style="margin-top: 5px; float: left">
       <a class="inactive-action pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
         <i class="fa fa-plus"></i>
       </a>
     </div>
+    <div class="clearfix"></div>
   </script>
 
   <script type="text/javascript" charset="utf-8">

+ 1 - 1
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -76,7 +76,7 @@ body {
   z-index: 401;
   overflow-y: auto;
   padding: 10px 0;
-  width: 380px;
+  width: 420px;
   right: -440px;
   box-shadow: 0 0 20px rgba(14, 18, 21, .38);
   outline: none !important;

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -54,6 +54,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 % endif
 <script src="${ static('desktop/ext/js/knockout-mapping.min.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
+<script src="${ static('desktop/ext/js/knockout-selectize.js') }"></script>
 <script src="${ static('desktop/js/ko.editable.js') }"></script>
 <script src="${ static('desktop/js/ko.hue-bindings.js') }"></script>
 <script src="${ static('desktop/js/ko.switch-case.js') }"></script>