소스 검색

HUE-8081 [frontend] Add clear button plugin to the Selectize binding

Enrico Berti 7 년 전
부모
커밋
6fa46b7c7b

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 74 - 0
desktop/core/src/desktop/static/desktop/ext/js/selectize-plugin-clear.js

@@ -0,0 +1,74 @@
+/*! selectize clear button plugin by Alexey Petushkov | https://github.com/mentatxx/selectize-plugin-clear | Apache License (v2) */
+
+Selectize.define('clear_button', function (options) {
+    /**
+     * Escapes a string for use within HTML.
+     *
+     * @param {string} str
+     * @returns {string}
+     */
+    var escape_html = function (str) {
+        return (str + '')
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    };
+
+    options = $.extend({
+        label: '&times;',
+        title: 'Remove',
+        className: 'clearAll',
+        append: true,
+        hideWhenEmpty: true,
+        leaveOpen: false
+    }, options);
+
+    var self = this,
+        $html = $('<span class="' +
+            options.className +
+            '" tabindex="-1" title="' +
+            escape_html(options.title) +
+            '">' +
+            options.label +
+            '</span>');
+
+
+    this.setup = (function () {
+        var original = self.setup;
+        return function () {
+            // override the item rendering method to add the button to each
+            original.apply(this, arguments);
+
+            this.$wrapper.append($html);
+
+            if (options.hideWhenEmpty) {
+                var $input = this.$input;
+                var hideShowClrBtn = function ($inpt) {
+                    var val = $inpt.val();
+                    if (val) {
+                        $html.show();
+                    } else {
+                        $html.hide();
+                    }
+                }
+
+                hideShowClrBtn($input);
+                $input.change(function () {
+                    hideShowClrBtn($input);
+                });
+            }
+
+            // add event listener
+            this.$wrapper.on('click', '.' + options.className, function (e) {
+                e.preventDefault();
+                if (self.isLocked) return;
+                self.clear();
+
+                if (options.leaveOpen) {
+                    self.$control_input.focus();
+                }
+            });
+        };
+    })();
+});

+ 4 - 0
desktop/core/src/desktop/static/desktop/js/ko.selectize.js

@@ -49,6 +49,7 @@ ko.bindingHandlers.selectize = {
     ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
 
     var options = {};
+
     if (allBindingsAccessor.get('optionsValue')) {
       options.valueField = allBindingsAccessor.get('optionsValue');
     }
@@ -66,6 +67,9 @@ ko.bindingHandlers.selectize = {
             return input.length <= passed_options[attr_name]
           }
         }
+        else if (attr_name === 'clearable' && passed_options[attr_name]) {
+          options.plugins = ['clear_button'];
+        }
         else {
           options[attr_name] = passed_options[attr_name];
         }

+ 10 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-selectize.less

@@ -49,3 +49,13 @@
 .selectize-dropdown {
   z-index: 10000 !important;
 }
+
+.selectize-control.plugin-clear_button .clearAll {
+  font-size: 17px;
+  position: absolute;
+  right: 30px;
+  z-index: 10;
+  top: 5px;
+  cursor: pointer;
+  color: @cui-gray-700;
+}

+ 1 - 0
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -2947,6 +2947,7 @@ ${ dashboard.import_layout(True) }
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.hotkeys.js') }"></script>
 <script src="${ static('desktop/ext/select2/select2.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/selectize.min.js') }"></script>
+<script src="${ static('desktop/ext/js/selectize-plugin-clear.js') }"></script>
 <script src="${ static('desktop/js/ko.selectize.js') }"></script>
 <script src="${ static('dashboard/js/search.ko.js') }" type="text/javascript" charset="utf-8"></script>
 

+ 1 - 0
desktop/libs/indexer/src/indexer/templates/importer.mako

@@ -42,6 +42,7 @@ ${ commonheader(_("Importer"), "indexer", user, request, "60px") | n,unicode }
 <script src="${ static('desktop/js/jquery.hiveautocomplete.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.custom.min.js') }"></script>
 <script src="${ static('desktop/ext/js/selectize.min.js') }"></script>
+<script src="${ static('desktop/ext/js/selectize-plugin-clear.js') }"></script>
 <script src="${ static('metastore/js/metastore.ko.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
 <script src="${ static('desktop/js/ko.editable.js') }"></script>

+ 1 - 0
desktop/libs/indexer/src/indexer/templates/indexer.mako

@@ -29,6 +29,7 @@ ${ commonheader(_("Solr Indexes"), "search", user, request, "60px") | n,unicode
 
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.custom.min.js') }"></script>
 <script src="${ static('desktop/ext/js/selectize.min.js') }"></script>
+<script src="${ static('desktop/ext/js/selectize-plugin-clear.js') }"></script>
 <script src="${ static('metastore/js/metastore.ko.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
 <script src="${ static('desktop/js/ko.editable.js') }"></script>

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

@@ -49,6 +49,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 
 <script src="${ static('desktop/ext/js/clipboard.min.js') }"></script>
 <script src="${ static('desktop/ext/js/selectize.min.js') }"></script>
+<script src="${ static('desktop/ext/js/selectize-plugin-clear.js') }"></script>
 <script src="${ static('notebook/js/notebook.ko.js') }"></script>
 
 % if ENABLE_QUERY_SCHEDULING.get():

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.