playbook_ui 14.15.0 → 14.16.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 988b1ee65101fb13b487e7fb3f8589b7b06a4510503b9a1d41dd84d1887ade9b
-  data.tar.gz: 2ebbaf39afdeca0386f701dc867be16170b39f8f8cbcba101e92ca8df1d9bd35
+  metadata.gz: 29999d280f49fac0febbbb14cf22004a252aab3387af1d39edafca4cc2e0852c
+  data.tar.gz: 0e8f106c77c37528bef3310388435c63917090e93642dd5cf1b586eb2afea3b7
 SHA512:
-  metadata.gz: e500e0257cd7da6adb7a707ea08e797d8322204341eaff40613dee843ee6c79d47db18c76192204a2b29576b3b3eb9ca13d8cb5ab5c2b401a7d4e775dec39450
-  data.tar.gz: dbf426e01b04c62e96af16a1fc4769659c7111a0a276c6a5a2f05ae1fa2948be612447dfea2c39d5115e068ee71cc90f16c24de34a4f2791aa719d03cdb3cda2
+  metadata.gz: 95ec7db3153f2fea683909fc058a3f6ad1a0cd84dbb3954d5545234a98ac56e1614735a70e2ab3e47200010bde3055b005ced52e2ca996a7540d3cba854a3ee5
+  data.tar.gz: 909e9c77563d5a963b919c774bdc40ff892a1c462156229a10190305ec96e118110ab6a23e54fa54d4190f72f548290edc7ec60cd5a03ca3ff03bfa5d1512e1e

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,4 +1,8 @@
-<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
+<div
+    class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
+    data-pb-dialog-wrapper="true"
+    data-overlay-click= <%= object.overlay_close %>
+>
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
@@ -33,8 +37,3 @@
             <%= content %>
     <% end %>
 </div>
-
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => dialogHelper())
-    window.addEventListener("turbo:frame-load", () => dialogHelper())
-<% end %>

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,3 +1,5 @@
+// Three places in Nitro depend on this function inside the window scope.
+// We will keep this file until we remove this dependency from Nitro.
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -0,0 +1,75 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
+
+export default class PbDialog extends PbEnhancedElement {
+  static get selector() {
+    return DIALOG_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
+    window.addEventListener("turbo:frame-load", () => this.setupDialog())
+  }
+
+  setupDialog() {
+    const openTrigger = document.querySelectorAll("[data-open-dialog]");
+    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+    const dialogs = document.querySelectorAll(".pb_dialog_rails")
+
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+      loadingButton.addEventListener("click", function () {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        let newClass = currentClass.replace("_enabled", "_disabled_loading");
+        let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+        // Disable the buttons
+        okayLoadingButton.disabled = true;
+        if (cancelButton) cancelButton.disabled = true;
+
+        okayLoadingButton.className = newClass;
+        if (cancelButton) cancelButton.className = newCancelClass;
+      });
+    }
+
+    openTrigger.forEach((open) => {
+      open.addEventListener("click", () => {
+        var openTriggerData = open.dataset.openDialog;
+        var targetDialog = document.getElementById(openTriggerData)
+        if (targetDialog.open) return;
+        targetDialog.showModal();
+      });
+    });
+
+    closeTrigger.forEach((close) => {
+      close.addEventListener("click", () => {
+        var closeTriggerData = close.dataset.closeDialog;
+        document.getElementById(closeTriggerData).close();
+      });
+    });
+
+    // Close dialog box on outside click
+    dialogs.forEach((dialogElement) => {
+      dialogElement.addEventListener("mousedown", (event) => {
+        const dialogParentDataset = dialogElement.parentElement.dataset
+        if (dialogParentDataset.overlayClick === "overlay_close") return
+
+        const dialogModal = event.target.getBoundingClientRect()
+        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+          event.clientX > dialogModal.right ||
+          event.clientY < dialogModal.top ||
+          event.clientY > dialogModal.bottom
+
+        if (clickedOutsideDialogModal) {
+          dialogElement.close()
+          event.stopPropagation()
+        }
+      })
+    })
+  }
+}