ESP3D-WEBUI/extensions_samples/modal.html

<script type="text/javascript">
//Default settings
  const defaultSettings = {
    xmin: "0",
    xmax: "100",
    precision: "4"
  };

  //Settings format
  const settingsFormat = [
    {
      id: "area",
      label: "Area",
      type: "group",
      value: [
        {
          id: "xmin",
          type: "number",
          label: "Xmin",
          append: "mm",
          help : "Minimum value of X",
          value: 0,
          placeholder: "Enter a number"
        },
        {
          id: "xmax",
          type: "number",
          label: "Xmax",
          append: "mm",
          help : "Maximum value of X",
          value: 0
        }
      ]
    },
    {
      id: "precision",
      type: "number",
      label: "Precision",
      value: 0,
      min: "0",
      max: "5"
    },
    {
      id: "active",
      type: "boolean",
      label: "Active",
      value: false,
      help : "Enable or disable the feature"
    },
    {
      id: "myselection",
      type: "select",
      label: "Choose",
      help : "Select a value",
      value: "none",
      options: [
          {
              value: "none",
              label: "none"
          },
          {
              value: "1",
              label: "Value 1"
          },
          {
              value: "2",
              label: "Value 2"
          }
        ] 
    }
  ];

// Message types
  const MESSAGE_TYPE_MODAL = "modal";
  const MODAL_ID_FIELDS = "fields_modal";
  const MODAL_ID_INPUT = "input_modal";
  const MODAL_ID_CONFIRM = "confirm_modal";
  const MODAL_ID_SIMPLE = "simple_modal";

  // Send message to parent
  function sendMessage(msg) {
    window.parent.postMessage(msg, "*");
  }

  // Handle message from parent
  function handleMessage(eventMsg) {
    if (
      eventMsg.data.type &&
      (!eventMsg.data.id || eventMsg.data.id === "modalpanel")
    ) {
      if (eventMsg.data.type === MESSAGE_TYPE_MODAL) {
        const line = eventMsg.data.content;
        const resultPanel = document.getElementById("output");
        // response is the button clicked
        console.log(line.response);
        resultPanel.innerHTML +=
          "<br><span class='text-bold'>" +
          line.initiator.content.id +
          "</span> modal sent <span class='text-primary'>" +
          JSON.stringify(line.response) +
          "</span><br>";

        if (
          line.response === "create" &&
          line.inputData &&
          line.initiator.content.id === MODAL_ID_FIELDS
        ) {
          //Inputdata cointain the values of the fields or the input modal text
          console.log(line.inputData);
          Object.keys(line.inputData).forEach((key) => {
            defaultSettings[key] = line.inputData[key];
            console.log(key, line.inputData[key]);
            const itemElement = document.createElement("div");
            itemElement.innerHTML = `<span>ID: ${key}</span>  <span>Value: ${line.inputData[key]}</span>`;
            resultPanel.appendChild(itemElement);
          });
        } else if (line.response === "create" && line.inputData) {
          resultPanel.innerHTML += line.inputData + "<br>";
        }
        resultPanel.innerHTML += "<hr>";
      }
    }
  }

  // simple modal
  function openSimpleModal() {
    sendMessage({
      type: MESSAGE_TYPE_MODAL,
      target: "webui",
      id: "modalpanel",
      content: {
        title: "This is title",
        id: MODAL_ID_SIMPLE,
        style: "default",
        bt1Txt: "S126",
        response1: "ok",
        text: "some text",
        overlay: true,
      },
    });
  }

  // Confirmation modal
  function openConfirmModal() {
    sendMessage({
      type: MESSAGE_TYPE_MODAL,
      target: "webui",
      id: "modalpanel",
      content: {
        title: "S26",
        id: MODAL_ID_CONFIRM,
        style: "question",
        bt1Txt: "S27",
        response1: "yes",
        bt2Txt: "S28",
        response2: "cancel",
        text: "S30",
        hideclose: true,
      },
    });
  }

  // Input modal
  function openInputModal() {
    sendMessage({
      type: MESSAGE_TYPE_MODAL,
      target: "webui",
      id: "modalpanel",
      content: {
        title: "S90",
        id: MODAL_ID_INPUT,
        style: "input",
        validation: "bt1",
        bt1Txt: "S106",
        response1: "create",
        bt2Txt: "S28",
        response2: "cancel",
        text: "S104",
        value: "Mydir",
        hideclose: true,
      },
    });
  }

  // Fields modal
  function openFieldsModal() {
    sendMessage({
      type: MESSAGE_TYPE_MODAL,
      target: "webui",
      id: "modalpanel",
      content: {
        title: "S14",
        id: MODAL_ID_FIELDS,
        style: "fields",
        validation: "bt1",
        bt1Txt: "S106",
        response1: "create",
        bt2Txt: "S28",
        response2: "cancel",
        fields: settingsFormat,
        values: defaultSettings,
        hideclose: true,
      },
    });
  }

  //Add event listener to listen for messages
  window.onload = (event) => {
    window.addEventListener("message", handleMessage, false);
  };
</script>

<div class="container">
  <button class="btn m-1" onclick="openSimpleModal()">
    Simple Modal
  </button>
  <button class="btn m-1" onclick="openConfirmModal()">
    Confirmation Modal
  </button>
  <button class="btn m-1" onclick="openInputModal()">
    Input Modal
  </button>
  <button class="btn m-1" onclick="openFieldsModal()">
    Fields Modal
  </button>

  <div class="container m-2" id="output"></div>
</div>