node-red-contrib-polymer/nodes/nav_site.html

Polymer based dashboard UI for Node-RED

<script type="text/javascript">
    RED.nodes.registerType('polymer_nav_site', {
        category: 'polymer',
        color: '#869baf',
        defaults: {
            name: {value: ''},
            title: {value: ''},
            theme: {value: ''},
            css: {value: ''},
            forceNarrow: {value: false},
            saveScroll: {value: false},
            fixed: {value: false},
            reveals: {value: true},
            pageOrder: {value: []}
        },
        inputs: 1,
        outputs: 1,
        //icon: "ui_switch.png",
        paletteLabel: 'site',
        label: function() { return this.name || 'site'; },
        oneditprepare: function () {
            var site = this;
            var $pagelist = jQuery("#node-input-sort-container");
            $pagelist.css('min-height','250px').css('min-width','450px').editableList({
                sortable: true,
                addButton: false,
                addItem: function(row, index, data) {
                    $(row).html(data.name);
                }
            });
            var pages = {};

            RED.nodes.eachNode(function (page) {
                if (page.type === 'polymer_nav_page' && page.parent === site.id) pages[page.id] = page;
            });

            if (!site.pageOrder) site.pageOrder = [];
            site.pageOrder.forEach(function (pageId) {
                if (pages[pageId]) $pagelist.editableList('addItem', pages[pageId]);
            });

            Object.keys(pages).forEach(function (pageId) {
                if (site.pageOrder.indexOf(pageId) === -1) $pagelist.editableList('addItem', pages[pageId]);
            });


            this.editor = RED.editor.createEditor({
                id: 'node-input-css-editor',
                mode: 'ace/mode/html',
                value: jQuery("#node-input-css").val()
            });

            this.editor.focus();


        },
        oneditsave: function() {
            var annot = this.editor.getSession().getAnnotations();
            this.noerr = 0;
            $("#node-input-noerr").val(0);
            for (var k=0; k < annot.length; k++) {
                if (annot[k].type === "error") {
                    $("#node-input-noerr").val(annot.length);
                    this.noerr = annot.length;
                }
            }
            $("#node-input-css").val(this.editor.getValue());
            delete this.editor;

            var $pagelist = jQuery("#node-input-sort-container");
            var pages = $pagelist.editableList('items');
            var pageOrder = [];
            pages.each(function () {
                pageOrder.push($(this).data('data').id);
            });
            this.pageOrder = pageOrder;
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-css-editor-row)");
            var height = $("#dialog-form").height() + 250;
            for (var i=0;i<rows.size();i++) {
                height -= $(rows[i]).outerHeight(true);
            }
            var editorRow = $("#dialog-form>div.node-css-editor-row");
            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
            $(".node-css-editor").css("height",height+"px");
            this.editor.resize();
        }

    });
</script>

<script type="text/x-red" data-template-name="polymer_nav_site">
    <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>
    <div class="form-row">
        <label for="node-input-title"><i class="fa fa-tag"></i> Title</label>
        <input type="text" id="node-input-title">
    </div>
    <div class="form-row">
        <label for="node-input-theme"><i class="fa fa-tag"></i> Theme</label>
        <select type="text" id="node-input-theme">
            <option value="bright">Bright</option>
            <option value="dark">Dark</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-forceNarrow"><i class="fa fa-tag"></i> Hide Menu</label>
        <input type="checkbox" id="node-input-forceNarrow">
    </div>
    <div class="form-row">
        <label for="node-input-fixed"><i class="fa fa-tag"></i> Fixed Header</label>
        <input type="checkbox" id="node-input-fixed">
    </div>
    <div class="form-row">
        <label for="node-input-reveals"><i class="fa fa-tag"></i> Header Reveals</label>
        <input type="checkbox" id="node-input-reveals">
    </div>
    <div class="form-row">
        <label for="node-input-saveScroll"><i class="fa fa-tag"></i> Save ScrollPos</label>
        <input type="checkbox" id="node-input-saveScroll">
    </div>
    <div class="form-row">
        <i class="fa fa-copy"></i> Page Sort Order</label>
    </div>
    <div class="form-row node-input-sort-container-row">
        <ol id="node-input-sort-container"></ol>
    </div>
    <div class="form-row">
        <label for="node-input-css"><i class="fa fa-copy"></i> Styles</label>
        <input type="hidden" id="node-input-css">
    </div>
    <div style="min-height:250px;" class="form-row node-css-editor-row">
        <div style="height:250px;" class="node-css-editor" id="node-input-css-editor" ></div>
    </div>

</script>

<script type="text/x-red" data-help-name="polymer_nav_site">

</script>