Move common components and add searchBox

Gruntfile.js

@@ -108,11 +108,14 @@ module.exports = function(grunt) {
                     "editor/js/nodes.js",
                     "editor/js/history.js",
                     "editor/js/validators.js",
+                    "editor/js/ui/common/editableList.js",
+                    "editor/js/ui/common/menu.js",
+                    "editor/js/ui/common/popover.js",
+                    "editor/js/ui/common/searchBox.js",
+                    "editor/js/ui/common/tabs.js",
+                    "editor/js/ui/common/typedInput.js",
                     "editor/js/ui/deploy.js",
-                    "editor/js/ui/menu.js",
                     "editor/js/ui/keyboard.js",
-                    "editor/js/ui/tabs.js",
-                    "editor/js/ui/popover.js",
                     "editor/js/ui/workspaces.js",
                     "editor/js/ui/view.js",
                     "editor/js/ui/sidebar.js",
@@ -126,9 +129,7 @@ module.exports = function(grunt) {
                     "editor/js/ui/library.js",
                     "editor/js/ui/notifications.js",
                     "editor/js/ui/subflow.js",
-                    "editor/js/ui/touch/radialMenu.js",
-                    "editor/js/ui/typedInput.js",
-                    "editor/js/ui/editableList.js"
+                    "editor/js/ui/touch/radialMenu.js"
                 ],
                 dest: "public/red/red.js"
             },

editor/js/ui/common/editableList.js

@@ -159,6 +159,7 @@
         },
         _refreshFilter: function() {
             var that = this;
+            var count = 0;
             if (!this.activeFilter) {
                 this.element.children().show();
             }
@@ -168,14 +169,17 @@
                 try {
                     if (that.activeFilter(data)) {
                         el.parent().show();
+                        count++;
                     } else {
                         el.parent().hide();
                     }
                 } catch(err) {
                     console.log(err);
                     el.parent().show();
+                    count++;
                 }
             });
+            return count;
         },
         width: function(desiredWidth) {
             this.uiWidth = desiredWidth;
@@ -265,7 +269,10 @@
             if (filter !== undefined) {
                 this.activeFilter = filter;
             }
-            this._refreshFilter();
+            return this._refreshFilter();
+        },
+        length: function() {
+            return this.element.children().length;
         }
     });
 })(jQuery);

editor/js/ui/common/searchBox.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+(function($) {
+
+    $.widget( "nodered.searchBox", {
+        _create: function() {
+            var that = this;
+
+            this.currentTimeout = null;
+            this.lastSent = "";
+            this.element.val("");
+            this.uiContainer = this.element.wrap("<div>").parent();
+            this.uiContainer.addClass("red-ui-searchBox-container");
+
+            $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
+            this.clearButton = $('<a href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer);
+            this.clearButton.on("click",function(e) {
+                e.preventDefault();
+                that.element.val("");
+                that._change("",true);
+                that.element.focus();
+            });
+
+            this.resultCount = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
+
+            this.element.val("");
+            this.element.on("keyup",function() {
+                that._change($(this).val());
+            });
+
+            this.element.on("focus",function() {
+                $("body").one("mousedown",function() {
+                    that.element.blur();
+                });
+            });
+
+        },
+        _change: function(val,instant) {
+            var fireEvent = false;
+            if (val === "") {
+                this.clearButton.hide();
+                fireEvent = true;
+            } else {
+                this.clearButton.show();
+                fireEvent = (val.length >= (this.options.minimumLength||0));
+            }
+            if (fireEvent) {
+                if (!instant && this.options.delay > 0) {
+                    clearTimeout(this.currentTimeout);
+                    var that = this;
+                    this.currentTimeout = setTimeout(function() {
+                        that._trigger("change");
+                    },this.options.delay);
+                } else {
+                    this._trigger("change");
+                }
+            }
+        },
+        value: function(val) {
+            if (val === undefined) {
+                return this.element.val();
+            } else {
+                this.element.val(val);
+                this._change(val);
+            }
+        },
+        count: function(val) {
+            if (val === undefined || val === null || val === "") {
+                this.resultCount.text("").hide();
+            } else {
+                this.resultCount.text(val).show();
+            }
+        }
+    });
+})(jQuery);

editor/sass/style.scss

@@ -43,8 +43,9 @@
 @import "palette-editor";
 
 
-@import "typedInput";
-@import "editableList";
+@import "ui/common/editableList";
+@import "ui/common/searchBox";
+@import "ui/common/typedInput";
 
 @import "dragdrop";
 

editor/sass/ui/common/searchBox.scss

@@ -0,0 +1,69 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+
+.red-ui-searchBox-container {
+    i {
+        font-size: 10px;
+        color: #666;
+    }
+    i.fa-search {
+        position: absolute;
+        pointer-events: none;
+        left: 12px;
+        top: 12px;
+    }
+    i.fa-times {
+        position: absolute;
+        right: 7px;
+        top: 12px;
+    }
+    input {
+        border-radius: 0;
+        border: none;
+        width: 100%;
+        box-shadow: none;
+        -webkit-box-shadow: none;
+        padding: 3px 17px 3px 22px;
+        margin: 0px;
+        height: 30px;
+        box-sizing:border-box;
+
+        &:focus {
+            border: none;
+            box-shadow: none;
+            -webkit-box-shadow: none;
+        }
+    }
+    a {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 20px;
+        display: none;
+    }
+    .red-ui-searchBox-resultCount {
+        position: absolute;
+        right: 22px;
+        top: 7px;
+        background: #eee;
+        color: #666;
+        padding: 1px 8px;
+        font-size: 9px;
+        border-radius: 4px;
+    }
+}

editor/sass/widgetStyle.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+@import "colors";
+@import "mixins";
+
+@import "forms";
+@import "jquery";
+@import "typedInput";
+@import "editableList";