node.html

<!--
  Copyright JS Foundation and other contributors, http://js.foundation

  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="ui_prog_circ">
    <div class="form-row" id="template-row-group">
        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row" id="template-row-size">
        <label><i class="fa fa-object-group"></i> Size</label>
        <input type="hidden" id="node-input-width">
        <input type="hidden" id="node-input-height">
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <div class="form-row">
        <label for="diameter-select"><i class="fa fa-circle"></i> Diameter</label>
        <select id="diameter-select">
            <option value="30">30</option>
            <option value="50">50</option>
            <option value="70">70</option>
            <option value="90">90</option>
        </select>
        <input type="hidden" id="node-input-diameter">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="ui_prog_circ">
    <p>Sample Dashbord Widget for indicating progress of operations using circle animation</p>
    <p>Diameter of the circule can be specified from <b>Diameter</b> selection in node settings.</p>
    <p>If <code>msg.payload</code> contains <code>false</code> value, animation of the widget is stopped.</p>
    <p>Non-<code>false</code> value resumes the animation.</code>
</script>

<script type="text/javascript">
    function mk_conf(NAME) {

        var ICON = "icon.png";

        var conf = {
            category: 'dashboard',
            color: 'rgb( 63, 173, 181)',
            defaults: {
                group: {type: 'ui_group', required:true},
                name: {value: ''},
                order: {value: 0},
                width: {
                    value: 0,
                    validate: function(v) {
                        var valid = true
                        var width = v||0;
                        var currentGroup = $('#node-input-group').val()|| this.group;
                        var groupNode = RED.nodes.node(currentGroup);
                        valid = !groupNode || +width <= +groupNode.width;
                        $("#node-input-size").toggleClass("input-error",!valid);
                        return valid;
                    }},
                height: {value: 0},
                diameter: {value: "30"}
            },
            inputs:1,
            outputs:0,
            icon: ICON,
            paletteLabel: NAME,
            label: function() { return this.name || NAME; },
            oneditprepare: function() {
                $("#node-input-size").elementSizer({
                    width: "#node-input-width",
                    height: "#node-input-height",
                    group: "#node-input-group"
                });
                $("#diameter-select").change(function() {
                    var val = $("#diameter-select").val();
                    $("#node-input-diameter").val(val);
                });
                $("#diameter-select").val(this.diameter);
                $("#diameter-select").change();
            },
            oneditsave: function() {
            },
            oneditresize: function(size) {
            }
        };
        return conf;
    };

    RED.nodes.registerType("ui_prog_circ", mk_conf("progress"));
</script>