dialog close

app/javascript/initializers/confirm.js

@@ -1,19 +0,0 @@
-Turbo.config.forms.confirm = (title) => {
-  const dialog = document.getElementById("main-dialog")
-  const dialogTitle = dialog.querySelector('[data-modal=title]')
-  const previousTitleContent = dialogTitle.textContent
-
-  dialogTitle.textContent = title
-  dialog.showModal()
-
-  return new Promise((resolve, _) => {
-    dialog.addEventListener(
-      "close",
-      () => {
-        dialogTitle.textContent = previousTitleContent
-        resolve(dialog.returnValue == "confirm")
-      },
-      { once: true },
-    );
-  });
-}

app/javascript/initializers/forms.js

@@ -0,0 +1,32 @@
+Turbo.config.forms.confirm = (title) => {
+  console.log('confirm called')
+  const dialog = document.getElementById("front-dialog")
+  dialog.showModal()
+  return new Promise((resolve) => {
+    dialog.addEventListener("close", () => { resolve(dialog.returnValue == "confirm") }, { once: true })
+  })
+}
+
+Turbo.config.forms.showModal = (dialogId) => {
+  console.log('showModal called', dialogId)
+}
+document.addEventListener('turbo:submit-start', (e) => {
+  const dialogId = e.explicitOriginalTarget.dataset.turboShowModal
+  if (dialogId) {
+    e.detail.formSubmission.stop()
+    Turbo.config.forms.showModal(dialogId)
+  }
+})
+
+Turbo.config.forms.closeModal = (dialogId) => {
+  console.log('closeModal called', dialogId)
+}
+document.addEventListener('turbo:submit-start', (e) => {
+  const dialogId = e.explicitOriginalTarget.dataset.turboCloseModal
+  if (dialogId) {
+    e.detail.formSubmission.stop()
+    Turbo.config.forms.closeModal(dialogId)
+  }
+})
+
+

app/javascript/initializers/index.js

@@ -1,6 +1,6 @@
 import "@hotwired/turbo-rails"
 
 import "initializers/drive"
-import "initializers/confirm"
+import "initializers/forms"
 import "initializers/stream_actions"
 

app/views/edge/index.html.erb

@@ -2,7 +2,21 @@
 
 <ul class="m-2 flex gap-2">
   <li>
-    <%= button_link_to 'Edit', class: "btn btn-primary", command: 'show-modal', commandfor: 'main-dialog' %>
+    <%= content_tag :button, 'Edit', class: "btn btn-primary", command: 'show-modal', commandfor: 'remote-dialog' %>
+
+    <button
+      class="btn btn-primary"
+      command="show-modal"
+      commandfor="remote-dialog"
+    >
+      Edit1
+    </button>
+
+    <%= button_to 'Close Modal','#', class: "btn btn-primary", data: { turbo_close_modal: 'front-dialog'} %>
+
+    <button class="btn btn-primary" data-turbo-mine="remote-dialog">
+      Show remote Modal
+    </button>
   </li>
 
   <li>

app/views/layouts/components/_main_dialog.html.erb

@@ -1,6 +1,6 @@
-<dialog id="main-dialog" class="modal">
+<dialog id="front-dialog" class="modal">
   <div class="modal-box bg-base-200">
-    <h3 data-modal="title" class="text-lg font-bold">Dialog Title</h3>
+    <h3 data-modal="title" class="text-lg font-bold">Front Dialog</h3>
 
     <p class="mb-6">
       This is a centered dialog using the HTML dialog element with Tailwind CSS.
@@ -9,9 +9,27 @@
       Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
     </p>
 
-    <div class="modal-action items-center text-center">
-      <%= button_link_to 'OK', value: 'confirm', class: "btn btn-primary", command: 'close', commandfor: 'main-dialog' %>
-      <%= button_link_to 'Cancel', value: 'cancel', class: "btn btn-ghost", command: 'close', commandfor: 'main-dialog' %>
-    </div>
+    <form method="dialog" class="modal-action">
+      <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
+      <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
+    </form>
+  </div>
+</dialog>
+
+<dialog id="remote-dialog" class="modal">
+  <div class="modal-box bg-base-200">
+    <h3 data-modal="title" class="text-lg font-bold">Remote Dialog</h3>
+
+    <p class="mb-6">
+      This is a centered dialog using the HTML dialog element with Tailwind CSS.
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro quisquam
+      enim blanditiis iusto neque accusantium minus, aspernatur ex eius at.
+      Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
+    </p>
+
+    <form method="dialog" class="modal-action items-end text-center">
+      <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
+      <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
+    </form>
   </div>
 </dialog>