node-red/nodes/core/logic/15-change.html

<!--
  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.
  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.
-->

<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" 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>
    </div>
    <div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
        <div id="node-input-rule-container-div" style="box-sizing: border-box; border-radius: 5px; height: 300px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
            <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>

<script type="text/x-red" data-help-name="change">
    <p>Set, change, delete or move properties of a message, flow context or global context.</p>
    <p>The node can specify multiple rules that will be applied in turn.</p>
    <p>The available operations are:</p>
    <ul>
        <li><b>Set</b> - set a property. The value can be a variety of different types, or
            can be taken from an existing message or context property.</li>
        <li><b>Change</b> - search &amp; replace parts of the property. If regular expressions
            are enabled, the <b>replace with</b> property can include capture groups, for example <code>$1</code></li>
        <li><b>Delete</b> - delete a property.</li>
        <li><b>Move</b> - move or rename a property. Equivalent to set and delete in one operation.
    </ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('change', {
        color: "#E2D96E",
        category: 'function',
        defaults: {
            name: {value:""},
            rules:{value:[{t:"set",p:"payload",pt:"msg",to:"",tot:"str"}]},
            // legacy
            action: {value:""},
            property: {value:""},
            from: {value:""},
            to: {value:""},
            reg: {value:false}
        },
        inputs: 1,
        outputs: 1,
        icon: "swap.png",
        label: function() {
            if (this.name) {
                return this.name;
            }
            if (!this.rules) {
                if (this.action === "replace") {
                    return this._("change.label.set",{property:"msg."+this.property});
                } else if (this.action === "change") {
                    return this._("change.label.change",{property:"msg."+this.property});
                } else if (this.action === "move") {
                    return this._("change.label.move",{property:"msg."+this.property});
                } else {
                    return this._("change.label.delete",{property:"msg."+this.property});
                }
            } else {
                if (this.rules.length == 1) {
                    if (this.rules[0].t === "set") {
                        return this._("change.label.set",{property:(this.rules[0].pt||"msg")+"."+this.rules[0].p});
                    } else if (this.rules[0].t === "change") {
                        return this._("change.label.change",{property:(this.rules[0].pt||"msg")+"."+this.rules[0].p});
                    } else if (this.rules[0].t === "move") {
                        return this._("change.label.move",{property:(this.rules[0].pt||"msg")+"."+this.rules[0].p});
                    } else {
                        return this._("change.label.delete",{property:(this.rules[0].pt||"msg")+"."+this.rules[0].p});
                    }
                } else {
                    return this._("change.label.changeCount",{count:this.rules.length});
                }
            }
        },
        labelStyle: function() {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function() {
            var set = this._("change.action.set");
            var change = this._("change.action.change");
            var del = this._("change.action.delete");
            var move = this._("change.action.move");
            var to = this._("change.action.to");
            var search = this._("change.action.search");
            var replace = this._("change.action.replace");
            var regex = this._("change.label.regex");

            function generateRule(rule) {
                if (rule.t === "change" && rule.re) {
                    rule.fromt = 're';
                    delete rule.re;
                }
                if (rule.t === "set" && !rule.tot) {
                    if (rule.to.indexOf("msg.") === 0 && !rule.tot) {
                        rule.to = rule.to.substring(4);
                        rule.tot = "msg";
                    } else {
                        rule.tot = "str";
                    }
                }
                if (rule.t === "move" && !rule.tot) {
                    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);
                var row4 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);

                var selectField = $('<select/>',{class:"node-input-rule-type",style:"width: 110px; margin-right: 10px;"}).appendTo(row1);
                var selectOptions = [{v:"set",l:set},{v:"change",l:change},{v:"delete",l:del},{v:"move",l:move}];
                for (var i=0;i<4;i++) {
                    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)
                    .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)
                    .appendTo(row2);
                var propertyValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-value",type:"text"})
                    .appendTo(row2)
                    .typedInput({default:'str',types:['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)
                    .typedInput({default:'str',types:['msg','flow','global','str','re','num','bool']});

                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)
                    .typedInput({default:'str',types:['msg','flow','global','str','num','bool','json']});

                $('<div/>',{style:"display: inline-block;text-align:right; width:120px;padding-right: 10px; box-sizing: border-box;"})
                    .text(to)
                    .appendTo(row4);
                var moveValue = $('<input/>',{style:"width: 250px",class:"node-input-rule-property-move-value",type:"text"})
                    .appendTo(row4)
                    .typedInput({default:'msg',types:['msg','flow','global']});

                selectField.change(function() {
                    var width = $("#node-input-rule-container").width();
                    var type = $(this).val();
                    if (type == "set") {
                        row2.show();
                        row3.hide();
                        row4.hide();
                    } else if (type == "change") {
                        row2.hide();
                        row3.show();
                        row4.hide();
                    } else if (type == "delete") {
                        row2.hide();
                        row3.hide();
                        row4.hide();
                    } else if (type == "move") {
                        row2.hide();
                        row3.hide();
                        row4.show();
                    }
                });
                
                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);
                propertyName.typedInput('value',rule.p);
                propertyName.typedInput('type',rule.pt);
                propertyValue.typedInput('value',rule.to);
                propertyValue.typedInput('type',rule.tot);
                moveValue.typedInput('value',rule.to);
                moveValue.typedInput('type',rule.tot);
                fromValue.typedInput('value',rule.from);
                fromValue.typedInput('type',rule.fromt);
                toValue.typedInput('value',rule.to);
                toValue.typedInput('type',rule.tot);
                selectField.change();

                $("#node-input-rule-container").append(container);
            }
            $("#node-input-add-rule").click(function() {
                generateRule({t:"replace",p:"payload"});
            });

            if (!this.rules) {
                var rule = {
                    t:(this.action=="replace"?"set":this.action),
                    p:this.property,
                    pt:"msg"
                }

                if ((rule.t === "set")||(rule.t === "move")) {
                    rule.to = this.to;
                } else if (rule.t === "change") {
                    rule.from = this.from;
                    rule.to = this.to;
                    rule.re = this.reg;
                }

                delete this.to;
                delete this.from;
                delete this.reg;
                delete this.action;
                delete this.property;

                this.rules = [rule];
            }

            for (var i=0;i<this.rules.length;i++) {
                generateRule(this.rules[i]);
            }
        },
        oneditsave: function() {
            var rules = $("#node-input-rule-container").children();
            var ruleset;
            var node = this;
            node.rules= [];
            rules.each(function(i) {
                var rule = $(this);
                var type = rule.find(".node-input-rule-type option:selected").val();
                var r = {
                    t:type,
                    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").typedInput('value');
                    r.tot = rule.find(".node-input-rule-property-value").typedInput('type');
                } else if (type === "move") {
                    r.to = rule.find(".node-input-rule-property-move-value").typedInput('value');
                    r.tot = rule.find(".node-input-rule-property-move-value").typedInput('type');
                } else if (type === "change") {
                    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").typedInput('value');
                    r.tot = rule.find(".node-input-rule-property-replace-value").typedInput('type');
                }
                node.rules.push(r);
            });
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
            var height = size.height;
            for (var i=0;i<rows.size();i++) {
                height -= $(rows[i]).outerHeight(true);
            }
            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();
            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>