Initial commit

node_modules/node-red-dashboard/nodes/ui_group.html

@@ -0,0 +1,87 @@
+<script type="text/javascript">
+    // convert to i18 text
+    function c_ui_group(x) {
+        return RED._("node-red-dashboard/ui_group:ui_group."+x);
+    }
+
+    RED.nodes.registerType('ui_group',{
+        category: 'config',
+        defaults: {
+            name: {value: c_ui_group("label.default")},
+            tab: {type:"ui_tab", required: true },
+            order: {value: 0},
+            disp: {value: true},
+            width: {value: 6},
+            collapse: {value: false},
+            disabled: {value: false},
+            hidden: {value: false},
+            className: {value: ''},
+        },
+        sort: function(A,B) {
+            if (A.tab !== B.tab) {
+                var tabA = RED.nodes.node(A.tab);
+                var tabB = RED.nodes.node(B.tab);
+                if (!tabA && tabB) {
+                    return -1;
+                }
+                else if (tabA && !tabB) {
+                    return 1;
+                }
+                else {
+                    return tabA.order - tabB.order;
+                }
+            }
+            return A.order - B.order;
+        },
+        paletteLabel: 'dashboard group',
+        label: function() {
+            var tabNode = RED.nodes.node(this.tab);
+            if (tabNode) {
+                return "["+(tabNode.name||c_ui_group("label.tab"))+"] " + (this.name || c_ui_group("label.group"));
+            }
+            return "["+c_ui_group("label.unassigned")+"] " + (this.name || c_ui_group("label.group"));
+        },
+        labelStyle: function() { return this.name?"node_label_italic":""; },
+        oneditprepare: function() {
+            $("#node-input-size").elementSizer({
+                width: "#node-config-input-width",
+                auto: false
+            });
+            $("#node-config-input-disp").on("change", function() {
+                if ($("#node-config-input-disp").is(":checked")) {
+                    $("#group-collapse-flag").show();
+                }
+                else {
+                    $("#group-collapse-flag").hide();
+                    $("#node-config-input-collapse").prop("checked",false);
+                }
+            });
+        }
+    });
+</script>
+
+<script type="text/html" data-template-name="ui_group">
+    <div class="form-row">
+        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_group.label.name"></span></label>
+        <input type="text" id="node-config-input-name">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-tab"><i class="fa fa-table"></i> <span data-i18n="ui_group.label.tab"></span></label>
+        <input type="text" id="node-config-input-tab">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-className"><i class="fa fa-code"></i>  <span data-i18n="ui_group.label.className"></label>
+        <input type="text" id="node-config-input-className" data-i18n="[placeholder]ui_group.label.classNamePlaceholder"/>
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-width"><i class="fa fa-arrows-h"></i> <span data-i18n="ui_group.label.width"></span></label>
+        <input type="hidden" id="node-config-input-width">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row">
+        <input style="margin:8px 0 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-disp"> <label style="width:auto" for="node-config-input-disp"><span data-i18n="ui_group.display-name"></span></label>
+    </div>
+    <div class="form-row" id="group-collapse-flag">
+        <input style="margin:8px 0 10px 102px; width:20px;" type="checkbox" id="node-config-input-collapse"> <label style="width:auto" for="node-config-input-collapse"><span data-i18n="ui_group.collapse-name"></span></label>
+    </div>
+</script>