Rename propertySelect to typedInput and add boolean opt

Gruntfile.js

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

editor/js/ui/propertySelect.js

@@ -1,176 +0,0 @@
-/**
- * Copyright 2015 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($) {
-    var allOptions = {
-        msg: {value:"msg",label:"msg.",style:"code"},
-        flow: {value:"flow",label:"flow.",style:"code"},
-        global: {value:"global",label:"global.",style:"code"},
-        str: {value:"str",label:"string",icon:"red/images/az.png"},
-        num: {value:"num",label:"number",icon:"red/images/09.png"},
-        json: {value:"json",label:"JSON",icon:"red/images/json.png"},
-        re: {value:"re",label:"regular expression",icon:"red/images/re.png"}
-    };
-    var nlsd = false;
-
-    $.widget( "nodered.propertySelect", {
-        _create: function() {
-            if (!nlsd && RED && RED._) {
-                for (var i in allOptions) {
-                    if (allOptions.hasOwnProperty(i)) {
-                        allOptions[i].label = RED._("propertySelect.type."+i,{defaultValue:allOptions[i].label});
-                    }
-                }
-            }
-            nlsd = true;
-
-            var that = this;
-            this.disarmClick = false;
-            this.element.addClass('red-ui-propertySelect');
-            this.uiWidth = this.element.width();
-
-            this.uiSelect = this.element
-                .wrap( "<div>" )
-                .parent();
-
-            ["Top","Right","Bottom","Left"].forEach(function(d) {
-                var m = that.element.css("margin"+d);
-                that.uiSelect.css("margin"+d,m);
-                that.element.css("margin"+d,0);
-            });
-            
-            this.uiSelect.addClass("red-ui-propertySelect-container");
-
-            this.selectTrigger = $('<a href="#" class="foo"><i class="fa fa-sort-desc"></i></a>').prependTo(this.uiSelect);
-            this.selectLabel = $('<span>msg.</span>').appendTo(this.selectTrigger);
-
-            this.element.on('focus', function() {
-                that.uiSelect.addClass('red-ui-propertySelect-focus');
-            });
-            this.element.on('blur', function() {
-                that.uiSelect.removeClass('red-ui-propertySelect-focus');
-            });
-
-            this.selectTrigger.click(function(event) {
-                event.preventDefault();
-                if (that.disarmClick) {
-                    that.disarmClick = false;
-                    return
-                }
-                that._showMenu();
-            });
-            this.options.options = this.options.options||Object.keys(allOptions);
-            this._createMenu(this.options.options);
-            this.type(this.options.default||this.options.options[0])
-            this._delay(function() {
-                //this._resize();
-            });
-        },
-        _hideMenu: function() {
-            $(document).off("mousedown.close-property-select");
-            this.menu.hide();
-            this.element.focus();
-        },
-        _createMenu: function(opts) {
-            var that = this;
-            this.menu = $("<div>").addClass("red-ui-propertySelect-options");
-            opts.forEach(function(key) {
-                var opt = allOptions[key];
-                if (opt) {
-                    var op = $('<a href="#">').attr("value",opt.value).appendTo(that.menu);
-                    if (opt.label) {
-                        op.text(opt.label);
-                    }
-                    if (opt.icon) {
-                        $('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
-                    } else {
-                        op.css({paddingLeft: "18px"});
-                    }
-
-                    op.click(function(event) {
-                        event.preventDefault();
-                        that.type(key);
-                        that._hideMenu();
-                    });
-                }
-            });
-            this.menu.css({
-                display: "none",
-            });
-            this.menu.appendTo(document.body);
-
-        },
-        _showMenu: function() {
-            var that = this;
-            var pos = this.selectTrigger.offset();
-            var height = this.selectTrigger.height();
-            this.menu.css({
-                top: (height+pos.top)+"px",
-                left: (2+pos.left)+"px"
-            });
-            this.menu.slideDown(200);
-            this._delay(function() {
-                that.uiSelect.addClass('red-ui-propertySelect-focus');
-                $(document).on("mousedown.close-property-select", function(event) {
-                    if(!$(event.target).closest(that.menu).length) {
-                        that._hideMenu();
-                    }
-                    if ($(event.target).closest(that.selectTrigger).length) {
-                        that.disarmClick = true;
-                        event.preventDefault();
-                    }
-                })
-            });
-        },
-        _resize: function() {
-            var labelWidth = this.selectTrigger.width();
-            if (labelWidth === 0) {
-                var newTrigger = this.selectTrigger.clone();
-                newTrigger.css({
-                    position:"absolute",
-                    top:0,
-                    left:-1000
-                }).appendTo(document.body);
-                labelWidth = newTrigger.width()+4;
-                newTrigger.remove();
-            }
-            this.element.width(this.uiWidth-labelWidth+4);
-        },
-        width: function(desiredWidth) {
-            this.uiWidth = desiredWidth;
-            this._resize();
-        },
-        _destroy: function() {
-            this.menu.remove();
-        },
-        type: function(type) {
-            if (!arguments.length) {
-                return this.propertyType;
-            } else {
-                var opt = allOptions[type];
-                if (opt) {
-                    this.propertyType = type;
-                    this.selectLabel.empty();
-                    if (opt.icon) {
-                        $('<img>',{src:opt.icon,style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
-                    } else {
-                        this.selectLabel.text(opt.label);
-                    }
-                    this._resize();
-                }
-            }
-        }
-    });
-})(jQuery);

editor/js/ui/typedInput.js

@@ -0,0 +1,275 @@
+/**
+ * Copyright 2015 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($) {
+    var allOptions = {
+        msg: {value:"msg",label:"msg.",validate:/^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]+)*/i},
+        flow: {value:"flow",label:"flow.",validate:/^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]+)*/i},
+        global: {value:"global",label:"global.",validate:/^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]+)*/i},
+        str: {value:"str",label:"string",icon:"red/images/az.png"},
+        num: {value:"num",label:"number",icon:"red/images/09.png",validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/},
+        bool: {value:"bool",label:"boolean",icon:"red/images/bool.png",options:["true","false"]},
+        json: {value:"json",label:"JSON",icon:"red/images/json.png", validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}}},
+        re: {value:"re",label:"regular expression",icon:"red/images/re.png"}
+    };
+    var nlsd = false;
+
+    $.widget( "nodered.typedInput", {
+        _create: function() {
+            if (!nlsd && RED && RED._) {
+                for (var i in allOptions) {
+                    if (allOptions.hasOwnProperty(i)) {
+                        allOptions[i].label = RED._("typedInput.type."+i,{defaultValue:allOptions[i].label});
+                    }
+                }
+            }
+            nlsd = true;
+            var that = this;
+
+            this.disarmClick = false;
+            this.element.addClass('red-ui-typedInput');
+            this.uiWidth = this.element.width();
+            this.uiSelect = this.element
+                .wrap( "<div>" )
+                .parent();
+
+            ["Right","Left"].forEach(function(d) {
+                var m = that.element.css("margin"+d);
+                that.uiSelect.css("margin"+d,m);
+                that.element.css("margin"+d,0);
+            });
+            this.uiSelect.addClass("red-ui-typedInput-container");
+
+            if (this.options.typeField) {
+                this.typeField = $(this.options.typeField).hide();
+            } else {
+                this.typeField = $("<input>",{type:'hidden'}).appendTo(this.uiSelect);
+            }
+
+            this.selectTrigger = $('<a href="#"><i class="fa fa-sort-desc"></i></a>').prependTo(this.uiSelect);
+            this.selectLabel = $('<span></span>').appendTo(this.selectTrigger);
+
+            this.element.on('focus', function() {
+                that.uiSelect.addClass('red-ui-typedInput-focus');
+            });
+            this.element.on('blur', function() {
+                that.uiSelect.removeClass('red-ui-typedInput-focus');
+            });
+            this.element.on('change', function() {
+                that.validate();
+            })
+
+            this.selectTrigger.click(function(event) {
+                event.preventDefault();
+                that._showMenu(that.menu,that.selectTrigger);
+            });
+
+            this.options.options = this.options.options||Object.keys(allOptions);
+
+            if (this.options.options.filter(function(opt) { return allOptions[opt] && allOptions[opt].hasOwnProperty('options')}).length > 0) {
+                // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
+                this.optionSelectTrigger = $('<a href="#" class="red-ui-typedInput-option-trigger" style="display:inline-block"><i class="fa fa-sort-desc"></i></a>').appendTo(this.uiSelect);
+                this.optionSelectLabel = $('<span></span>').prependTo(this.optionSelectTrigger);
+                this.optionSelectTrigger.click(function(event) {
+                    event.preventDefault();
+                    if (that.optionMenu) {
+                        that.optionMenu.css({
+                            minWidth:that.optionSelectLabel.width()
+                        });
+
+                        that._showMenu(that.optionMenu,that.optionSelectLabel)
+                    }
+                });
+            }
+            this.menu = this._createMenu(this.options.options, function(v) { that.type(v) });
+            this.type(this.options.default||this.options.options[0]);
+        },
+        _hideMenu: function(menu) {
+            $(document).off("mousedown.close-property-select");
+            menu.hide();
+            this.element.focus();
+        },
+        _createMenu: function(opts,callback) {
+            var that = this;
+            var menu = $("<div>").addClass("red-ui-typedInput-options");
+            opts.forEach(function(key) {
+                var opt = allOptions[key];
+                if (!opt) {
+                    opt = {value:key,label:key};
+                }
+                var op = $('<a href="#">').attr("value",opt.value).appendTo(menu);
+                if (opt.label) {
+                    op.text(opt.label);
+                }
+                if (opt.icon) {
+                    $('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
+                } else {
+                    op.css({paddingLeft: "18px"});
+                }
+
+                op.click(function(event) {
+                    event.preventDefault();
+                    callback(key);
+                    that._hideMenu(menu);
+                });
+            });
+            menu.css({
+                display: "none",
+            });
+            menu.appendTo(document.body);
+            return menu;
+
+        },
+        _showMenu: function(menu,relativeTo) {
+            if (this.disarmClick) {
+                this.disarmClick = false;
+                return
+            }
+            var that = this;
+            var pos = relativeTo.offset();
+            var height = relativeTo.height();
+            menu.css({
+                top: (height+pos.top-3)+"px",
+                left: (2+pos.left)+"px",
+            });
+            menu.slideDown(200);
+            this._delay(function() {
+                that.uiSelect.addClass('red-ui-typedInput-focus');
+                $(document).on("mousedown.close-property-select", function(event) {
+                    if(!$(event.target).closest(menu).length) {
+                        that._hideMenu(menu);
+                    }
+                    if ($(event.target).closest(relativeTo).length) {
+                        that.disarmClick = true;
+                        event.preventDefault();
+                    }
+                })
+            });
+        },
+        _getLabelWidth: function(label) {
+            var labelWidth = label.width();
+            if (labelWidth === 0) {
+                var newTrigger = label.clone();
+                newTrigger.css({
+                    position:"absolute",
+                    top:0,
+                    left:-1000
+                }).appendTo(document.body);
+                labelWidth = newTrigger.width()+4;
+                newTrigger.remove();
+            }
+            return labelWidth;
+        },
+        _resize: function() {
+            var labelWidth = this._getLabelWidth(this.selectTrigger);
+
+            var newWidth = this.uiWidth-labelWidth+4;
+            this.element.width(newWidth);
+
+            if (this.optionSelectTrigger) {
+                var triggerWidth = this._getLabelWidth(this.optionSelectTrigger);
+                labelWidth = this._getLabelWidth(this.optionSelectLabel)-4;
+                this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth));
+            }
+        },
+        _destroy: function() {
+            this.menu.remove();
+        },
+        width: function(desiredWidth) {
+            this.uiWidth = desiredWidth;
+            this._resize();
+        },
+        value: function(value) {
+            if (!arguments.length) {
+                return this.element.val();
+            } else {
+                if (allOptions[this.propertyType].options) {
+                    if (allOptions[this.propertyType].options.indexOf(value) === -1) {
+                        value = "";
+                    }
+                    this.optionSelectLabel.text(value);
+                }
+                this.element.val(value);
+                this.element.trigger('change');
+            }
+        },
+        type: function(type) {
+            if (!arguments.length) {
+                return this.propertyType;
+            } else {
+                var opt = allOptions[type];
+                if (opt && this.propertyType !== type) {
+                    this.propertyType = type;
+                    this.typeField.val(type);
+                    this.selectLabel.empty();
+                    if (opt.icon) {
+                        $('<img>',{src:opt.icon,style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
+                    } else {
+                        this.selectLabel.text(opt.label);
+                    }
+                    if (opt.options) {
+                        if (this.optionSelectTrigger) {
+                            this.optionSelectTrigger.show();
+                            this.element.hide();
+                            var that = this;
+                            this.optionMenu = this._createMenu(opt.options,function(v){
+                                that.optionSelectLabel.text(v);
+                                that.value(v);
+                            });
+                            var currentVal = this.element.val();
+                            if (opt.options.indexOf(currentVal) !== -1) {
+                                this.optionSelectLabel.text(currentVal);
+                            } else {
+                                this.value(opt.options[0]);
+                            }
+                        }
+                    } else {
+                        if (this.optionMenu) {
+                            this.optionMenu.remove();
+                            this.optionMenu = null;
+                        }
+                        if (this.optionSelectTrigger) {
+                            this.optionSelectTrigger.hide();
+                        }
+                        this.element.show();
+                        this.element.trigger('change');
+                    }
+                    this._resize();
+                }
+            }
+        },
+        validate: function() {
+            var result;
+            var value = this.value();
+            var type = this.type();
+            if (allOptions[type] && allOptions[type].validate) {
+                var val = allOptions[type].validate;
+                if (typeof val === 'function') {
+                    result = val(value);
+                } else {
+                    result = val.test(value);
+                }
+            } else {
+                result = true;
+            }
+            if (result) {
+                this.uiSelect.removeClass('input-error');
+            } else {
+                this.uiSelect.addClass('input-error');
+            }
+            return result;
+        }
+    });
+})(jQuery);

editor/sass/colors.scss

@@ -44,6 +44,6 @@ $workspace-button-color-focus: #999;
 $workspace-button-color-hover: #666;
 $workspace-button-color-active: #666;
 
-$propertySelect-button-background: #efefef;
+$typedInput-button-background: #efefef;
-$propertySelect-button-background-hover: #ddd;
+$typedInput-button-background-hover: #ddd;
-$propertySelect-button-background-active: #e3e3e3;
+$typedInput-button-background-active: #e3e3e3;

editor/sass/style.scss

@@ -41,7 +41,7 @@
 @import "popover";
 @import "flow";
 
-@import "propertySelect";
+@import "typedInput";
 
 @import "dragdrop";
 

editor/sass/typedInput.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-.red-ui-propertySelect-container {
+.red-ui-typedInput-container {
     border: 1px solid $form-input-border-color;
     border-radius: 4px;
     height: 34px;
@@ -36,7 +36,7 @@
         vertical-align: middle;
     }
 
-    &.red-ui-propertySelect-focus {
+    &.red-ui-typedInput-focus:not(.input-error) {
         border-color: $form-input-focus-color !important;
     }
 
@@ -45,7 +45,7 @@
         border-bottom-left-radius: 4px;
         padding: 0 1px 0 5px;
         display:inline-block;
-        background: $propertySelect-button-background;
+        background: $typedInput-button-background;
         height: 32px;
         line-height: 32px;
         vertical-align: middle;
@@ -58,20 +58,43 @@
             vertical-align: middle;
         }
 
+        span {
+            display: inline-block;
+            height: 100%;
+            padding: 0 1px 0 5px;
+        }
+
         &:hover {
             text-decoration: none;
-            background: $propertySelect-button-background-hover;
+            background: $typedInput-button-background-hover;
         }
         &:focus {
             text-decoration: none;
         }
         &:active {
-            background: $propertySelect-button-background-active;
+            background: $typedInput-button-background-active;
             text-decoration: none;
         }
     }
+
+    a.red-ui-typedInput-option-trigger {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        padding: 0 5px 0 0;
+
+        i {
+            margin-right: 0;
+            margin-left: 4px;
+        }
+        span {
+            background:#fff;
+            padding: 0 5px 0 5px;
+        }
+    }
 }
-.red-ui-propertySelect-options {
+.red-ui-typedInput-options {
     @include component-shadow;
     position: absolute;
     border: 1px solid $primary-border-color;
@@ -84,13 +107,13 @@
         color: #333;
         &:hover {
             text-decoration: none;
-            background: $propertySelect-button-background-hover;
+            background: $typedInput-button-background-hover;
         }
         &:focus {
             text-decoration: none;
         }
         &:active {
-            background: $propertySelect-button-background-active;
+            background: $typedInput-button-background-active;
             text-decoration: none;
         }
 

nodes/core/logic/10-switch.html

@@ -65,7 +65,7 @@
             return this.name||"switch";
         },
         oneditprepare: function() {
-            $("#node-input-property").propertySelect({default:this.propertyType||'msg',options:['msg','flow','global']});
+            $("#node-input-property").typedInput({default:this.propertyType||'msg',options:['msg','flow','global']});
             var operators = [
                 {v:"eq",t:"=="},
                 {v:"neq",t:"!="},
@@ -104,13 +104,13 @@
 
                 if (type === "btwn") {
                     var labelWidth = rule.find(".node-input-rule-btwn-label").width();
-                    btwnField1.propertySelect("width",(width-selectWidth-120));
+                    btwnField1.typedInput("width",(width-selectWidth-120));
-                    btwnField2.propertySelect("width",(width-selectWidth-120));
+                    btwnField2.typedInput("width",(width-selectWidth-120));
                 } else {
                     if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
                         // valueField.hide();
                     } else {
-                        valueField.propertySelect("width",(width-selectWidth-120));
+                        valueField.typedInput("width",(width-selectWidth-120));
                     }
                 }
             }
@@ -128,10 +128,10 @@
                     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).propertySelect({default:'str',options:['msg','flow','global','str','num']});
+                var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px; width: 145px;"}).appendTo(row).typedInput({default:'str',options:['msg','flow','global','str','num']});
-                var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).propertySelect({default:'num',options:['msg','flow','global','str','num']});
+                var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',options:['msg','flow','global','str','num']});
                 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).propertySelect({default:'num',options:['msg','flow','global','str','num']});
+                var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"margin-left:2px;"}).appendTo(row3).typedInput({default:'num',options:['msg','flow','global','str','num']});
 
                 var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
                 finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
@@ -185,12 +185,12 @@
                 selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
                 if (rule.t == "btwn") {
                     btwnValueField.val(rule.v);
-                    btwnValueField.propertySelect('type',rule.vt||'num');
+                    btwnValueField.typedInput('type',rule.vt||'num');
                     btwnValue2Field.val(rule.v2);
-                    btwnValue2Field.propertySelect('type',rule.v2t||'num');
+                    btwnValue2Field.typedInput('type',rule.v2t||'num');
                 } else if (typeof rule.v != "undefined") {
                     valueField.val(rule.v);
-                    valueField.propertySelect('type',rule.vt||'str');
+                    valueField.typedInput('type',rule.vt||'str');
                 }
                 if (rule.case) {
                     caseSensitive.prop('checked',true);
@@ -267,12 +267,12 @@
                 if (!(type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else")) {
                     if (type === "btwn") {
                         r.v = rule.find(".node-input-rule-btwn-value").val();
-                        r.vt = rule.find(".node-input-rule-btwn-value").propertySelect('type');
+                        r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
                         r.v2 = rule.find(".node-input-rule-btwn-value2").val();
-                        r.v2t = rule.find(".node-input-rule-btwn-value2").propertySelect('type');
+                        r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
                     } else {
                         r.v = rule.find(".node-input-rule-value").val();
-                        r.vt = rule.find(".node-input-rule-value").propertySelect('type');
+                        r.vt = rule.find(".node-input-rule-value").typedInput('type');
                     }
                     if (type === "regex") {
                         r.case = rule.find(".node-input-rule-case").prop("checked");
@@ -281,7 +281,7 @@
                 node.rules.push(r);
             });
             this.outputs = node.rules.length;
-            this.propertyType = $("#node-input-property").propertySelect('type');
+            this.propertyType = $("#node-input-property").typedInput('type');
         }
     });
 </script>

nodes/core/logic/15-change.html

@@ -17,7 +17,7 @@
 <script type="text/x-red" data-template-name="change">
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
+        <input type="text" id="node-input-name" style="width: 370px;" data-i18n="[placeholder]common.label.name">
     </div>
     <div class="form-row" style="margin-bottom:0;">
         <label><i class="fa fa-list"></i> <span data-i18n="change.label.rules"></span></label>
@@ -101,8 +101,8 @@
             var regex = this._("change.label.regex");
 
             function resizeRule(rule,width) {
-                rule.find('input[type="text"]:not(.red-ui-propertySelect)').width(width-180);
+                rule.find('input[type="text"]:not(.red-ui-typedInput)').width(width-180);
-                rule.find('.red-ui-propertySelect').propertySelect("width",width-180);
+                rule.find('.red-ui-typedInput').typedInput("width",width-180);
             }
 
             function generateRule(rule) {
@@ -133,22 +133,21 @@
                     selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
                 }
 
-                var propertyName = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-name",type:"text"}).appendTo(row1).propertySelect({options:['msg','flow','global']});
+                var propertyName = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-name",type:"text"}).appendTo(row1).typedInput({options:['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).appendTo(row2);
-                var propertyValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-value",type:"text"}).appendTo(row2).propertySelect({default:'str',options:['msg','flow','global','str','num','json']});
+                var propertyValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-value",type:"text"}).appendTo(row2).typedInput({default:'str',options:['msg','flow','global','str','num','bool','json']});
                 var row3_1 = $('<div/>').appendTo(row3);
                 $('<div/>',{style:"display: inline-block;text-align:right; width:120px;padding-right: 10px; box-sizing: border-box;"}).text(search).appendTo(row3_1);
-                var fromValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-search-value",type:"text"}).appendTo(row3_1).propertySelect({default:'str',options:['msg','flow','global','str','re']});
+                var fromValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-search-value",type:"text"}).appendTo(row3_1).typedInput({default:'str',options:['msg','flow','global','str','re']});
 
                 var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
                 $('<div/>',{style:"display: inline-block;text-align:right; width:120px;padding-right: 10px; box-sizing: border-box;"}).text(replace).appendTo(row3_2);
-                var toValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-replace-value",type:"text"}).appendTo(row3_2).propertySelect({default:'str',options:['msg','flow','global','str','num','json']});
+                var toValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-replace-value",type:"text"}).appendTo(row3_2).typedInput({default:'str',options:['msg','flow','global','str','num','json']});
 
                 selectField.change(function() {
                     var width = $("#node-input-rule-container").width();
@@ -174,13 +173,13 @@
 
                 selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
                 propertyName.val(rule.p);
-                propertyName.propertySelect('type',rule.pt)
+                propertyName.typedInput('type',rule.pt)
                 propertyValue.val(rule.to);
-                propertyValue.propertySelect('type',rule.tot)
+                propertyValue.typedInput('type',rule.tot)
                 fromValue.val(rule.from);
-                fromValue.propertySelect('type',rule.fromt)
+                fromValue.typedInput('type',rule.fromt)
                 toValue.val(rule.to);
-                toValue.propertySelect('type',rule.tot)
+                toValue.typedInput('type',rule.tot)
                 selectField.change();
 
                 $("#node-input-rule-container").append(container);
@@ -232,6 +231,7 @@
                 rules.each(function(i) {
                     resizeRule($(this),newWidth);
                 })
+                $("#node-input-name").width(newWidth-130);
             };
             $( "#dialog" ).on("dialogresize", changeDialogResize);
             $( "#dialog" ).one("dialogopen", function(ev) {
@@ -259,16 +259,16 @@
                 var r = {
                     t:type,
                     p:rule.find(".node-input-rule-property-name").val(),
-                    pt:rule.find(".node-input-rule-property-name").propertySelect('type')
+                    pt:rule.find(".node-input-rule-property-name").typedInput('type')
                 };
                 if (type === "set") {
                     r.to = rule.find(".node-input-rule-property-value").val();
-                    r.tot = rule.find(".node-input-rule-property-value").propertySelect('type');
+                    r.tot = rule.find(".node-input-rule-property-value").typedInput('type');
                 } else if (type === "change") {
                     r.from = rule.find(".node-input-rule-property-search-value").val();
-                    r.fromt = rule.find(".node-input-rule-property-search-value").propertySelect('type');
+                    r.fromt = rule.find(".node-input-rule-property-search-value").typedInput('type');
                     r.to = rule.find(".node-input-rule-property-replace-value").val();
-                    r.tot = rule.find(".node-input-rule-property-replace-value").propertySelect('type');
+                    r.tot = rule.find(".node-input-rule-property-replace-value").typedInput('type');
                     r.re = rule.find(".node-input-rule-property-re").prop('checked');
                 }
                 node.rules.push(r);

nodes/core/logic/15-change.js

@@ -84,6 +84,8 @@ module.exports = function(RED) {
                     valid = false;
                     this.error(RED._("change.errors.invalid-json"));
                 }
+            } else if (rule.tot === 'bool') {
+                rule.to = /^true$/i.test(rule.to);
             }
         }
 

red/runtime/util.js

@@ -164,6 +164,8 @@ function evaluateNodeProperty(value, type, node, msg) {
         return node.context().flow.get(value);
     } else if (type === 'global' && node) {
         return node.context().global.get(value);
+    } else if (type === 'bool') {
+        return /^true$/i.test(value)
     }
     return value;
 }