flexdash-iframe.html

<!-- FlexDash iframe node for Node-RED
     Copyright ©2022 by Thorsten von Eicken, see LICENSE
-->

<script type="text/javascript">
  RED.nodes.registerType("flexdash iframe", {
    category: "flexdash",
    color: "#F0E4B8",
    inputs: 1,
    outputs: 0,
    icon: "font-awesome/fa-window-frame", // icon in flow editor
    paletteLabel: "iframe tab",

    defaults: {
      name: { value: "" },
      icon: { value: "mdi-view-dashboard" }, // icon in FlexDash tab bar
      fd: { value: "" }, // node id of dashboard
      fd_children: { value: "" }, // comma-separated list of child node IDs (always empty for iframe)
      title: { value: "" },
      url: { value: "" }, // URL to display in iframe
      slot: { value: "a" }, // slot used for caching iframe content
      weak_fd: {
        type: "flexdash dashboard",
        value: "",
        required: false,
        validate(v) {
          const configNode = RED.nodes.node(v || this.fd)
          return configNode && (configNode.valid == null || configNode.valid)
        },
      },
    },

    label() {
      const i = this.icon && this.icon.replace(/^mdi-/, "")
      return this.name || i || "iframe tab"
    },
    labelStyle() {
      return this.name ? "node_label_italic" : ""
    },

    oneditprepare() {
      try {
        $("#node-input-slot").typedInput({
          types: [{ value: "slot", options: ["a", "b"] }],
        })

        // set weak_fd to value of fd, see oneditsave for explanation
        if (this.fd) $(`#node-input-weak_fd [value=${this.fd}]`).attr("selected", "")
        $(`#node-input-weak_fd`).attr("nrid", this.id)

        // help button in top tray bar - thanks Kevin!
        $(
          '<button type="button" class="ui-button ui-corner-all ui-widget">' +
            '<i class="fa fa-book"></i> help</button>'
        )
          .on("click", () => {
            RED.sidebar.help.show(this.type)
          })
          .insertBefore($("#node-config-dialog-cancel"))
      } catch (e) {
        console.log("FlexDash iframe prepare error", e)
        throw e
      }
    },

    oneditsave() {
      try {
        // switch the flexdash dashboard ID to a different field so we don't depend on it on export;
        // this is a hideous hack... createExportableNodeSet exports config nodes referenced in
        // params that have a type field. So we move the weak_fd ID to fd and voila, no dependency!
        const weak_fd = $("#node-input-weak_fd")
        $("#node-input-fd").val(weak_fd.val())
        weak_fd.val("")
      } catch (e) {
        console.log("FlexDash tab save error", e)
        throw e
      }
    },
  })
</script>

<script type="text/html" data-template-name="flexdash iframe">
  <div class="form-row">
    <label for="node-input-name"><i class="icon-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
    <small class="fd-indent">Name of iframe config node in Node-RED. Not displayed in dashboard.
    </small>
  </div>
  <div class="form-row">
    <label for="node-input-title">Title</label>
    <input type="text" id="node-input-title" placeholder="Title">
    <small class="fd-indent">Name shown in the dashboard's tab bar. Leave Empty to only show icon.
    </small>
  </div>
  <div class="form-row">
    <label for="node-input-icon">Icon (material design icons)</span></label>
    <input type="text" id="node-input-icon" placeholder="mdi-airplane-takeoff" />
    <small class="fd-indent">Material design icon to show in tab bar. Include the 'mdi-' prefix.
      See <a href="https://materialdesignicons.com">https://materialdesignicons.com</a>
    </small>
  </div>
  <div class="form-row">
    <label for="node-input-weak_fd">Dashboard</label>
    <input type="text" id="node-input-weak_fd">
    <small class="fd-indent">Dashboard to which this tab belongs.</small>
  </div>
  <div class="form-row">
    <label for="node-input-url">URL</label>
    <input type="text" id="node-input-url" placeholder="https://">
    <small class="fd-indent">URL of web page to show in iframe.</small>
  </div>
  <div class="form-row">
    <label for="node-input-slot">Cache slot</label>
    <input type="text" id="node-input-slot">
    <small class="fd-indent">Cache slot for iframe content to avoid reload when switching tabs.</small>
  </div>

  <!-- hidden fields -->
  <input type="hidden" id="node-input-fd_children">
  <input type="hidden" id="node-input-fd">
</script>

<script type="text/html" data-help-name="flexdash iframe">
  <p>Represents an iframe tab in FlexDash</p>
</script>