Update Inject node to use typedInput

editor/js/ui/typedInput.js

@@ -52,8 +52,30 @@
             });
             this.uiSelect.addClass("red-ui-typedInput-container");
 
+            this.options.options = this.options.options||Object.keys(allOptions);
+
+            var hasSubOptions = false;
+            this.typeMap = {};
+            this.types = this.options.options.map(function(opt) {
+                var result;
+                if (typeof opt === 'string') {
+                    result = allOptions[opt];
+                } else {
+                    result = opt;
+                }
+                that.typeMap[result.value] = result;
+                if (result.options) {
+                    hasSubOptions = true;
+                }
+                return result;
+            });
+
             if (this.options.typeField) {
                 this.typeField = $(this.options.typeField).hide();
+                var t = this.typeField.val();
+                if (t && this.typeMap[t]) {
+                    this.options.default = t;
+                }
             } else {
                 this.typeField = $("<input>",{type:'hidden'}).appendTo(this.uiSelect);
             }
@@ -76,9 +98,8 @@
                 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) {
+            if (hasSubOptions) {
                 // 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);
@@ -93,7 +114,7 @@
                     }
                 });
             }
-            this.menu = this._createMenu(this.options.options, function(v) { that.type(v) });
+            this.menu = this._createMenu(this.types, function(v) { that.type(v) });
             this.type(this.options.default||this.options.options[0]);
         },
         _hideMenu: function(menu) {
@@ -104,10 +125,9 @@
         _createMenu: function(opts,callback) {
             var that = this;
             var menu = $("<div>").addClass("red-ui-typedInput-options");
-            opts.forEach(function(key) {
+            opts.forEach(function(opt) {
-                var opt = allOptions[key];
+                if (typeof opt === 'string') {
-                if (!opt) {
+                    opt = {value:opt,label:opt};
-                    opt = {value:key,label:key};
                 }
                 var op = $('<a href="#">').attr("value",opt.value).appendTo(menu);
                 if (opt.label) {
@@ -121,7 +141,7 @@
 
                 op.click(function(event) {
                     event.preventDefault();
-                    callback(key);
+                    callback(opt.value);
                     that._hideMenu(menu);
                 });
             });
@@ -144,7 +164,7 @@
                 top: (height+pos.top-3)+"px",
                 left: (2+pos.left)+"px",
             });
-            menu.slideDown(200);
+            menu.slideDown(100);
             this._delay(function() {
                 that.uiSelect.addClass('red-ui-typedInput-focus');
                 $(document).on("mousedown.close-property-select", function(event) {
@@ -173,6 +193,11 @@
             return labelWidth;
         },
         _resize: function() {
+
+            if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) {
+                this.selectTrigger.width(this.uiWidth+5);
+            } else {
+                this.selectTrigger.width('auto');
                 var labelWidth = this._getLabelWidth(this.selectTrigger);
 
                 var newWidth = this.uiWidth-labelWidth+4;
@@ -183,6 +208,7 @@
                     labelWidth = this._getLabelWidth(this.optionSelectLabel)-4;
                     this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth));
                 }
+            }
         },
         _destroy: function() {
             this.menu.remove();
@@ -195,8 +221,8 @@
             if (!arguments.length) {
                 return this.element.val();
             } else {
-                if (allOptions[this.propertyType].options) {
+                if (this.typeMap[this.propertyType].options) {
-                    if (allOptions[this.propertyType].options.indexOf(value) === -1) {
+                    if (this.typeMap[this.propertyType].options.indexOf(value) === -1) {
                         value = "";
                     }
                     this.optionSelectLabel.text(value);
@@ -209,7 +235,7 @@
             if (!arguments.length) {
                 return this.propertyType;
             } else {
-                var opt = allOptions[type];
+                var opt = this.typeMap[type];
                 if (opt && this.propertyType !== type) {
                     this.propertyType = type;
                     this.typeField.val(type);
@@ -243,7 +269,12 @@
                         if (this.optionSelectTrigger) {
                             this.optionSelectTrigger.hide();
                         }
+                        if (opt.hasValue === false) {
+                            this.element.val("");
+                            this.element.hide();
+                        } else {
                             this.element.show();
+                        }
                         this.element.trigger('change');
                     }
                     this._resize();
@@ -254,8 +285,8 @@
             var result;
             var value = this.value();
             var type = this.type();
-            if (allOptions[type] && allOptions[type].validate) {
+            if (this.typeMap[type] && this.typeMap[type].validate) {
-                var val = allOptions[type].validate;
+                var val = this.typeMap[type].validate;
                 if (typeof val === 'function') {
                     result = val(value);
                 } else {

nodes/core/core/20-inject.html

@@ -15,6 +15,7 @@
 -->
 
 <script type="text/x-red" data-template-name="inject">
+<!--
     <div class="form-row node-input-payload">
         <label for="node-input-payloadType"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
         <select id="node-input-payloadType" style="width:73%">
@@ -28,6 +29,12 @@
         <label for="node-input-payload"></label>
         <input type="text" id="node-input-payload" style="width:70%">
     </div>
+-->
+    <div class="form-row">
+        <label for="node-input-payload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
+        <input type="text" id="node-input-payload" style="width:300px">
+        <input type="hidden" id="node-input-payloadType">
+    </div>
 
     <div class="form-row">
         <label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
@@ -196,23 +203,51 @@
         outputs:1,
         icon: "inject.png",
         label: function() {
-            if (this.payloadType === "string") {
+            if (this.name) {
+                return this.name;
+            } else if (this.payloadType === "string" ||
+                    this.payloadType === "str" ||
+                    this.payloadType === "num" ||
+                    this.payloadType === "bool" ||
+                    this.payloadType === "json") {
                 if ((this.topic !== "") && ((this.topic.length + this.payload.length) <= 32)) {
-                    return this.name||this.topic + ":" + this.payload;
+                    return this.topic + ":" + this.payload;
+                } else if (this.payload.length > 0 && this.payload.length < 24) {
+                    return this.payload;
+                } else {
+                    return this._("inject.inject");
                 }
-                else if (this.payload.length < 24) {
+            } else if (this.payloadType === 'date') {
-                    return this.name||this.payload;
+                return this._("inject.timestamp")
+            } else if (this.payloadType === 'flow' && this.payload.length < 19) {
+                return 'flow.'+this.payload;
+            } else if (this.payloadType === 'global' && this.payload.length < 17) {
+                return 'global.'+this.payload;
+            } else {
+                return this._("inject.inject");
             }
-            }
-            if ((this.topic.length < 24) && (this.topic.length > 0)) {
-                return this.name||this.topic;
-            }
-            else { return this.name||(this.payloadType==="date"?this._("inject.timestamp"):null)||this._("inject.inject"); }
         },
         labelStyle: function() {
             return this.name?"node_label_italic":"";
         },
         oneditprepare: function() {
+            if (this.payloadType == null) {
+                if (this.payload == "") {
+                    this.payloadType = "date";
+                } else {
+                    this.payloadType = "str";
+                }
+            } else if (this.payloadType === 'string' || this.payloadType === 'none') {
+                this.payloadType = "str";
+            }
+            $("#node-input-payloadType").val(this.payloadType);
+
+            $("#node-input-payload").typedInput({
+                default: 'str',
+                typeField: $("#node-input-payloadType"),
+                options:['flow','global','str','num','bool','json',{value:"date",label:this._("inject.timestamp"),hasValue:false}]
+            });
+
             $("#inject-time-type-select").change(function() {
                 $("#node-input-crontab").val('');
                 var id = $("#inject-time-type-select option:selected").val();
@@ -373,24 +408,8 @@
             $("#inject-time-type-select option").filter(function() {return $(this).val() == repeattype;}).attr('selected',true);
             $("#inject-time-row-"+repeattype).show();
 
-            if (this.payloadType == null) {
+            $("#node-input-payload").typedInput('type',this.payloadType);
-                if (this.payload == "") {
-                    this.payloadType = "date";
-                } else {
-                    this.payloadType = "string";
-                }
-            }
 
-            $("#node-input-payloadType").change(function() {
-                var id = $("#node-input-payloadType option:selected").val();
-                if (id === "string") {
-                    $("#node-input-row-payload").show();
-                } else {
-                    $("#node-input-row-payload").hide();
-                }
-            });
-            $("#node-input-payloadType").val(this.payloadType);
-            $("#node-input-payloadType").change();
             $("#inject-time-type-select").change();
             $("#inject-time-interval-time-start").change();
 

nodes/core/core/20-inject.js

@@ -53,10 +53,12 @@ module.exports = function(RED) {
             var msg = {topic:this.topic};
             if ( (this.payloadType == null && this.payload === "") || this.payloadType === "date") {
                 msg.payload = Date.now();
-            } else if (this.payloadType == null || this.payloadType === "string") {
+            } else if (this.payloadType == null) {
                 msg.payload = this.payload;
-            } else {
+            } else if (this.payloadType == 'none') {
                 msg.payload = "";
+            } else {
+                msg.payload = RED.util.evaluateNodeProperty(this.payload,this.payloadType,this,msg);
             }
             this.send(msg);
             msg = null;

nodes/core/locales/en-US/messages.json

@@ -37,8 +37,6 @@
             "repeat": "Repeat"
         },
         "timestamp": "timestamp",
-        "string": "string",
-        "blank": "blank",
         "none": "none",
         "interval": "interval",
         "interval-time": "interval between times",

nodes/core/logic/10-switch.html

@@ -184,12 +184,12 @@
 
                 selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
                 if (rule.t == "btwn") {
-                    btwnValueField.val(rule.v);
+                    btwnValueField.typedInput('value',rule.v);
                     btwnValueField.typedInput('type',rule.vt||'num');
-                    btwnValue2Field.val(rule.v2);
+                    btwnValue2Field.typedInput('value',rule.v2);
                     btwnValue2Field.typedInput('type',rule.v2t||'num');
                 } else if (typeof rule.v != "undefined") {
-                    valueField.val(rule.v);
+                    valueField.typedInput('value',rule.v);
                     valueField.typedInput('type',rule.vt||'str');
                 }
                 if (rule.case) {
@@ -266,12 +266,12 @@
                 var r = {t:type};
                 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.v = rule.find(".node-input-rule-btwn-value").typedInput('value');
                         r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
-                        r.v2 = rule.find(".node-input-rule-btwn-value2").val();
+                        r.v2 = rule.find(".node-input-rule-btwn-value2").typedInput('value');
                         r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
                     } else {
-                        r.v = rule.find(".node-input-rule-value").val();
+                        r.v = rule.find(".node-input-rule-value").typedInput('value');
                         r.vt = rule.find(".node-input-rule-value").typedInput('type');
                     }
                     if (type === "regex") {

nodes/core/logic/15-change.html

@@ -172,13 +172,13 @@
                 });
 
                 selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
-                propertyName.val(rule.p);
+                propertyName.typedInput('value',rule.p);
                 propertyName.typedInput('type',rule.pt)
-                propertyValue.val(rule.to);
+                propertyValue.typedInput('value',rule.to);
                 propertyValue.typedInput('type',rule.tot)
-                fromValue.val(rule.from);
+                fromValue.typedInput('value',rule.from);
                 fromValue.typedInput('type',rule.fromt)
-                toValue.val(rule.to);
+                toValue.typedInput('value',rule.to);
                 toValue.typedInput('type',rule.tot)
                 selectField.change();
 
@@ -258,18 +258,17 @@
                 var type = rule.find(".node-input-rule-type option:selected").val();
                 var r = {
                     t:type,
-                    p:rule.find(".node-input-rule-property-name").val(),
+                    p:rule.find(".node-input-rule-property-name").typedInput('value'),
                     pt:rule.find(".node-input-rule-property-name").typedInput('type')
                 };
                 if (type === "set") {
-                    r.to = rule.find(".node-input-rule-property-value").val();
+                    r.to = rule.find(".node-input-rule-property-value").typedInput('value');
                     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.from = rule.find(".node-input-rule-property-search-value").typedInput('value');
                     r.fromt = rule.find(".node-input-rule-property-search-value").typedInput('type');
-                    r.to = rule.find(".node-input-rule-property-replace-value").val();
+                    r.to = rule.find(".node-input-rule-property-replace-value").typedInput('value');
                     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);
             });