Add editableList widget and update Switch/Change nodes to use it

Gruntfile.js

@@ -126,7 +126,8 @@ module.exports = function(grunt) {
                     "editor/js/ui/notifications.js",
                     "editor/js/ui/subflow.js",
                     "editor/js/ui/touch/radialMenu.js",
-                    "editor/js/ui/typedInput.js"
+                    "editor/js/ui/typedInput.js",
+                    "editor/js/ui/editableList.js"
                 ],
                 dest: "public/red/red.js"
             },

editor/js/ui/editableList.js

@@ -0,0 +1,130 @@
+/**
+ * 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.editableList", {
+        _create: function() {
+            var that = this;
+
+            this.element.addClass('red-ui-editableList-list');
+            this.uiWidth = this.element.width();
+            this.uiContainer = this.element
+                .wrap( "<div>" )
+                .parent();
+            this.topContainer = this.uiContainer.wrap("<div>").parent();
+
+            this.topContainer.addClass('red-ui-editableList');
+
+            var addLabel = "foo";
+            if (RED && RED._) {
+                addLabel = RED._("editableList.add");
+            }
+
+            var addButton = $('<a href="#" class="editor-button editor-button-small" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>').appendTo(this.topContainer);
+            addButton.click(function(evt) {
+                evt.preventDefault();
+                that.addItem({});
+            });
+
+            this.uiContainer.addClass("red-ui-editableList-container");
+
+            this.uiHeight = this.element.height();
+
+            var minHeight = this.element.css("minHeight");
+            if (minHeight !== '0px') {
+                this.uiContainer.css("minHeight",minHeight);
+                this.element.css("minHeight",0);
+            }
+
+            if (this.options.sortable) {
+                this.element.sortable({
+                    axis: "y",
+                    update: function( event, ui ) {
+                        if (that.options.updateOrder) {
+                            that.options.updateOrder(that.items());
+                        }
+                    },
+                    handle:".red-ui-editableList-item-handle",
+                    cursor: "move"
+                });
+            }
+
+            this._resize();
+
+            // this.menu = this._createMenu(this.types, function(v) { that.type(v) });
+            // this.type(this.options.default||this.types[0].value);
+        },
+        _resize: function() {
+            var currentFullHeight = this.topContainer.height();
+            var innerHeight = this.uiContainer.height();
+            var delta = currentFullHeight - innerHeight;
+            this.uiContainer.height(this.uiHeight-delta);
+            if (this.options.resize) {
+                this.options.resize();
+            }
+            if (this.options.resizeItem) {
+                var that = this;
+                this.element.children().each(function(i) {
+                    that.options.resizeItem($(this).find(".red-ui-editableList-item-content"));
+                });
+            }
+        },
+        _destroy: function() {
+        },
+        width: function(desiredWidth) {
+            this.uiWidth = desiredWidth;
+            this._resize();
+        },
+        height: function(desiredHeight) {
+            this.uiHeight = desiredHeight;
+            this._resize();
+        },
+        addItem: function(data) {
+            var that = this;
+            data = data || {};
+            var li = $('<li>').appendTo(this.element);
+            li.data('data',data);
+            var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li);
+            if (this.options.sortable) {
+                $('<i class="red-ui-editableList-item-handle fa fa-bars"></i>').appendTo(li);
+                li.addClass("red-ui-editableList-item-sortable");
+            }
+            if (this.options.deletable) {
+                var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-delete editor-button editor-button-small"}).appendTo(li);
+                $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
+                li.addClass("red-ui-editableList-item-deletable");
+                deleteButton.click(function() {
+                    li.addClass("red-ui-editableList-item-deleting")
+                    li.fadeOut(300, function() {
+                        $(this).remove();
+                        if (that.options.deleteItem) {
+                            that.options.deleteItem(li.data('data'));
+                        }
+                    });
+                });
+            }
+            if (this.options.addItem) {
+                var index = that.element.children().length-1;
+                setTimeout(function() {
+                    that.options.addItem(row,index,data);
+                },0);
+            }
+        },
+        items: function() {
+            return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); });
+        }
+    });
+})(jQuery);

editor/sass/editableList.scss

@@ -0,0 +1,67 @@
+/**
+ * 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-editableList-container {
+     min-height: 200px;
+     border: 1px solid $form-input-border-color;
+     border-radius: 4px;
+     padding: 5px;
+     margin: 0;
+     vertical-align: middle;
+     box-sizing: border-box;
+     overflow-y:scroll;
+
+     .red-ui-editableList-list {
+         list-style-type:none;
+         margin: 0;
+     }
+
+     li {
+         position: relative;
+         background: #fff;
+         margin:0;
+         padding:8px 0px;
+         border-bottom: 1px solid $secondary-border-color;
+
+         .red-ui-editableList-item-handle {
+             position: absolute;
+             top: 50%;
+             left: 2px;
+             margin-top: -7px;
+             color: #eee;
+             cursor: move;
+         }
+         .red-ui-editableList-item-delete {
+             position: absolute;
+             top: 50%;
+             right: 0px;
+             margin-top: -9px;
+         }
+         //.red-ui-editableList-item-content { outline: 1px solid red}
+
+         &.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
+             margin-left: 22px;
+         }
+         &.red-ui-editableList-item-deletable .red-ui-editableList-item-content {
+             margin-right: 28px;
+         }
+         &.red-ui-editableList-item-deleting {
+             background: #fee;
+         }
+     }
+
+ }

editor/sass/style.scss

@@ -42,6 +42,7 @@
 @import "flow";
 
 @import "typedInput";
+@import "editableList";
 
 @import "dragdrop";
 

nodes/core/logic/10-switch.html

@@ -1,5 +1,5 @@
 <!--
-  Copyright 2013, 2015 IBM Corp.
+  Copyright 2013, 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.
@@ -22,13 +22,8 @@
     <div class="form-row">
         <span data-i18n="switch.label.property"></span> <input type="text" id="node-input-property" style="width: 300px;"/>
     </div>
-    <div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
+    <div class="form-row node-input-rule-container-row">
-        <div id="node-input-rule-container-div" style="min-height: 200px; box-sizing: border-box; border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
+        <ol id="node-input-rule-container"></ol>
-            <ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;"></ol>
-        </div>
-    </div>
-    <div class="form-row">
-        <a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
     </div>
     <div class="form-row">
         <select id="node-input-checkall" style="width:100%; margin-right:5px;">
@@ -89,9 +84,10 @@
             var andLabel = this._("switch.and");
             var caseLabel = this._("switch.ignorecase");
 
-            this.resizeRule = function(rule,newWidth) {
+            function resizeRule(rule) {
+                var newWidth = rule.width();
                 var selectField = rule.find("select");
-                var type = selectField.children("option:selected").val();
+                var type = selectField.children("option:selected").val()||"";
                 var valueField = rule.find(".node-input-rule-value");
                 var btwnField1 = rule.find(".node-input-rule-btwn-value");
                 var btwnField2 = rule.find(".node-input-rule-btwn-value2");
@@ -104,50 +100,40 @@
                     selectWidth = 120;
                 }
                 selectField.width(selectWidth);
-
                 if (type === "btwn") {
-                    var labelWidth = rule.find(".node-input-rule-btwn-label").width();
+                    btwnField1.typedInput("width",(newWidth-selectWidth-80));
-                    btwnField1.typedInput("width",(newWidth-selectWidth-120));
+                    btwnField2.typedInput("width",(newWidth-selectWidth-80));
-                    btwnField2.typedInput("width",(newWidth-selectWidth-120));
                 } else {
                     if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
                         // valueField.hide();
                     } else {
-                        valueField.typedInput("width",(newWidth-selectWidth-120));
+                        valueField.typedInput("width",(newWidth-selectWidth-80));
                     }
                 }
             }
 
-            function generateRule(i,rule) {
+            $("#node-input-rule-container").css('min-height','300px').css('min-width','450px').editableList({
-                var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
+                addItem: function(container,i,opt) {
+                    var rule = opt||{t:"",v:"",v2:""};
                     var row = $('<div/>').appendTo(container);
                     var row2 = $('<div/>',{style:"padding-top: 5px; padding-left: 175px;"}).appendTo(container);
-                var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 120px;"}).appendTo(container);
+                    var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container);
-
-                $('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);
-
                     var selectField = $('<select/>',{style:"width:120px; margin-left: 5px; text-align: center;"}).appendTo(row);
                     for (var d in operators) {
                         selectField.append($("<option></option>").val(operators[d].v).text(operators[d].t));
                     }
-
                     var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px; width: 145px;"}).appendTo(row).typedInput({default:'str',types:['msg','flow','global','str','num',previousValueType]});
                     var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
                     var btwnAndLabel = $('<span/>',{class:"node-input-rule-btwn-label"}).text(" "+andLabel+" ").appendTo(row3);
                     var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"margin-left:2px;"}).appendTo(row3).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
-
+                    var finalspan = $('<span/>',{style:"float: right;margin-top: 6px;margin-right: 10px;"}).appendTo(row);
-                var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
+                    finalspan.append(' &#8594; <span class="node-input-rule-index">'+(i+1)+'</span> ');
-                finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
-
-                var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
-                $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
-
                     var caseSensitive = $('<input/>',{id:"node-input-rule-case-"+i,class:"node-input-rule-case",type:"checkbox",style:"width:auto;vertical-align:top"}).appendTo(row2);
                     $('<label/>',{for:"node-input-rule-case-"+i,style:"margin-left: 3px;"}).text(caseLabel).appendTo(row2);
                     selectField.change(function() {
-                    var width = $("#node-input-rule-container").width();
+                        resizeRule(container);
                         var type = selectField.children("option:selected").val();
-                    node.resizeRule(container,width);
+
                         if (type === "btwn") {
                             valueField.parent().hide();
                             btwnValueField.parent().show();
@@ -170,20 +156,6 @@
                             row3.hide();
                         }
                     });
-
-                deleteButton.click(function() {
-                    container.css({"background":"#fee"});
-                    container.fadeOut(300, function() {
-                        $(this).remove();
-                        $("#node-input-rule-container").children().each(function(i) {
-                            $(this).find(".node-input-rule-index").html(i+1);
-                        });
-
-                    });
-                });
-
-                $("#node-input-rule-container").append(container);
-
                     selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
                     if (rule.t == "btwn") {
                         btwnValueField.typedInput('value',rule.v);
@@ -200,33 +172,27 @@
                         caseSensitive.prop('checked',false);
                     }
                     selectField.change();
-            }
+                },
-
+                deleteItem: function(opt) {
-            $("#node-input-add-rule").click(function() {
+                    var rules = $("#node-input-rule-container").editableList('items');
-                generateRule($("#node-input-rule-container").children().length+1,{t:"",v:"",v2:""});
+                    rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
-                $("#node-input-rule-container-div").scrollTop($("#node-input-rule-container-div").get(0).scrollHeight);
+                },
+                resizeItem: resizeRule,
+                updateOrder: function(rules) {
+                    var rules = $("#node-input-rule-container").editableList('items');
+                    rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
+                },
+                sortable: true,
+                deletable: true
             });
 
             for (var i=0;i<this.rules.length;i++) {
                 var rule = this.rules[i];
-                generateRule(i+1,rule);
+                $("#node-input-rule-container").editableList('addItem',rule);
             }
-
-            $( "#node-input-rule-container" ).sortable({
-                axis: "y",
-                update: function( event, ui ) {
-                    var rules = $("#node-input-rule-container").children();
-                    rules.each(function(i) {
-                        $(this).find(".node-input-rule-index").html(i+1);
-                    });
-                },
-                handle:".node-input-rule-handle",
-                cursor: "move"
-            });
-            $( "#node-input-rule-container .node-input-rule-handle" ).disableSelection();
         },
         oneditsave: function() {
-            var rules = $("#node-input-rule-container").children();
+            var rules = $("#node-input-rule-container").editableList('items');
             var ruleset;
             var node = this;
             node.rules= [];
@@ -261,14 +227,7 @@
             }
             var editorRow = $("#dialog-form>div.node-input-rule-container-row");
             height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-            $("#node-input-rule-container-div").css("height",height+"px");
+            $("#node-input-rule-container").editableList('height',height);
-
-            var rules = $("#node-input-rule-container").children();
-            var newWidth = $("#node-input-rule-container").width();
-            var node = this;
-            rules.each(function(i) {
-                node.resizeRule($(this),newWidth);
-            })
         }
     });
 </script>

nodes/core/logic/15-change.html

@@ -22,13 +22,8 @@
     <div class="form-row" style="margin-bottom:0;">
         <label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>
     </div>
-    <div class="form-row node-input-rule-container-row" style="margin-bottom:0px;">
+    <div class="form-row node-input-rule-container-row">
-        <div id="node-input-rule-container-div" style="min-height: 200px; box-sizing:border-box; border-radius:5px; height:300px; padding:5px; border:1px solid #ccc; overflow-y:scroll;">
+        <ol id="node-input-rule-container"></ol>
-            <ol id="node-input-rule-container" style=" list-style-type:none; margin:0;"></ol>
-        </div>
-    </div>
-    <div class="form-row">
-        <a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
     </div>
 </script>
 
@@ -106,7 +101,14 @@
             var replace = this._("change.action.replace");
             var regex = this._("change.label.regex");
 
-            function generateRule(rule) {
+            function resizeRule(rule) {
+                var newWidth = rule.width();
+                rule.find('.red-ui-typedInput').typedInput("width",newWidth-150);
+
+            }
+            $('#node-input-rule-container').css('min-height','300px').css('min-width','450px').editableList({
+                addItem: function(container,i,opt) {
+                    var rule = opt||{t:"replace",p:"payload"};
                     if (rule.t === "change" && rule.re) {
                         rule.fromt = 're';
                         delete rule.re;
@@ -123,7 +125,6 @@
                         rule.tot = "msg";
                     }
 
-                var container = $('<li/>',{style:"background:#fff; margin:0; padding:8px 0px; border-bottom:1px solid #ccc;"});
                     var row1 = $('<div/>').appendTo(container);
                     var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
                     var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
@@ -138,11 +139,6 @@
                     var propertyName = $('<input/>',{style:"width:250px",class:"node-input-rule-property-name",type:"text"})
                         .appendTo(row1)
                         .typedInput({types:['msg','flow','global']});
-                var finalspan = $('<span/>',{style:"float:right; margin-right:10px;"})
-                    .appendTo(row1);
-                var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top:7px; margin-left:5px;"})
-                    .appendTo(finalspan);
-                $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
 
                     $('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
                         .text(to)
@@ -194,13 +190,7 @@
                             row3.hide();
                             row4.show();
                         }
-                });
+                        resizeRule(container);
-
-                deleteButton.click(function() {
-                    container.css({"background":"#fee"});
-                    container.fadeOut(300, function() {
-                        $(this).remove();
-                    });
                     });
 
                     selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
@@ -217,12 +207,11 @@
                     selectField.change();
 
                     var newWidth = $("#node-input-rule-container").width();
-                container.find('.red-ui-typedInput').typedInput("width",newWidth-180);
+                    resizeRule(container);
-
+                },
-                $("#node-input-rule-container").append(container);
+                resizeItem: resizeRule,
-            }
+                deletable: true,
-            $("#node-input-add-rule").click(function() {
+                sortable: true
-                generateRule({t:"replace",p:"payload"});
             });
 
             if (!this.rules) {
@@ -250,11 +239,12 @@
             }
 
             for (var i=0;i<this.rules.length;i++) {
-                generateRule(this.rules[i]);
+                var rule = this.rules[i];
+                $("#node-input-rule-container").editableList('addItem',rule);
             }
         },
         oneditsave: function() {
-            var rules = $("#node-input-rule-container").children();
+            var rules = $("#node-input-rule-container").editableList('items');
             var ruleset;
             var node = this;
             node.rules= [];
@@ -289,14 +279,8 @@
             }
             var editorRow = $("#dialog-form>div.node-input-rule-container-row");
             height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-            $("#node-input-rule-container-div").css("height",height+"px");
 
-            var rules = $("#node-input-rule-container").children();
+            $("#node-input-rule-container").editableList('height',height);
-            var newWidth = $("#node-input-rule-container").width();
-            rules.each(function(i) {
-                $(this).find('.red-ui-typedInput').typedInput("width",newWidth-180);
-            })
-            $("#node-input-name").width(newWidth-130);
         }
     });
 </script>

red/api/locales/en-US/editor.json

@@ -232,5 +232,8 @@
             "json": "JSON",
             "date": "timestamp"
         }
+    },
+    "editableList": {
+        "add": "add"
     }
 }