remote ok

app/controllers/edge_controller.rb

@@ -2,6 +2,6 @@ class EdgeController < ApplicationController
   def index; end
 
   def turbo_edit
-    render turbo_stream: turbo_stream.console_log(text: 'Hello world server-side')
+    render turbo_stream: turbo_stream.remote_dialog(title: 'my remote title', partial: 'turbo_edit')
   end
 end

app/helpers/turbo_stream_actions_helper.rb

@@ -2,6 +2,11 @@ module TurboStreamActionsHelper
   def console_log(text)
     turbo_stream_action_tag :console_log, text: text
   end
+
+  def remote_dialog(content = nil, title:, id: 'remote-dialog', **rendering, &)
+    template = render_template(nil, content, **rendering, &)
+    turbo_stream_action_tag :remoteDialog, dialogId: id, dialogTitle: title, template:
+  end
 end
 
 Turbo::Streams::TagBuilder.prepend(TurboStreamActionsHelper)

app/javascript/initializers/forms.js

@@ -1,6 +1,7 @@
 
 /** the confirm action opens the 'front-dialog' by default, customize if needed! */
 Turbo.config.forms.confirm_dialog_id = 'front-dialog'
+Turbo.config.forms.confirm_dialog_title_selector = '[data-dialog-title]'
 Turbo.config.forms.confirm_dialog_content_selector = '[data-dialog-content]'
 
 /** content might be either a String or a Boolean 
@@ -27,14 +28,29 @@ Turbo.config.forms.confirm = (content) => {
  * 
  * in case of True: default dialog gets selected, (ie `Turbo.config.forms.confirm_dialog_id`)
 */
-Turbo.config.forms.showModal = (dialogId) => {
+Turbo.config.forms.showModal = (dialogId, dialogTitle, dialogContent) => {
   if (dialogId.toString() == 'false') return
   if (dialogId.toString() == 'true') dialogId = Turbo.config.forms.confirm_dialog_id
+  if (dialogTitle == null) dialogTitle = dialogId
 
   const dialog = document.getElementById(dialogId)
-  if (dialog) dialog.showModal()
+  if (dialog) {
+    const dialogTitleElement = dialog.querySelector(Turbo.config.forms.confirm_dialog_title_selector)
+    if (dialogTitleElement) dialogTitleElement.textContent = dialogTitle
+    else console.warn(`dialogTitle element not found! missing selector='${Turbo.config.forms.confirm_dialog_title_selector}'`)
+
+    if (dialogContent) {
+      const dialogContentElement = dialog.querySelector(Turbo.config.forms.confirm_dialog_content_selector)
+      if (dialogContentElement) dialogContentElement.replaceChildren(dialogContent)
+      else console.warn(`dialogContent element not found! missing selector='${Turbo.config.forms.confirm_dialog_content_selector}'`)
+    }
+
+    dialog.showModal()
+  }
   else console.warn(`dialog id=<${dialogId}> not found!`)
 }
+
+
 document.addEventListener('turbo:submit-start', (e) => {
   const dialogId = e.explicitOriginalTarget.dataset.turboShowModal
   if (dialogId) {

app/javascript/initializers/stream_actions.js

@@ -1,4 +1,11 @@
 Turbo.StreamActions.console_log = function () {
   const text = this.getAttribute("text")
   console.log(text)
-}
+}
+
+Turbo.StreamActions.remoteDialog = function () {
+  const dialogId = this.getAttribute("dialogId")
+  const dialogTitle = this.getAttribute("dialogTitle")
+  const dialogContent = this.firstChild.content
+  Turbo.config.forms.showModal(dialogId, dialogTitle, dialogContent)
+}

app/views/edge/_turbo_edit.html.erb

@@ -0,0 +1,8 @@
+<p class="mb-6">
+  Here is a content + actions
+</p>
+
+<form method="dialog" class="modal-action items-end text-center">
+  <%= content_tag :button, 'OK2', value: :confirm, class: "btn btn-primary" %>
+  <%= content_tag :button, 'Cancel2', value: :cancel, class: "btn btn-ghost" %>
+</form>

app/views/edge/index.html.erb

@@ -8,7 +8,7 @@
 
   <li>
     <form method="dialog" class="flex flex-col">
-      <%= content_tag :button, 'Show Modal Remote', class: "btn btn-primary", onclick: "Turbo.config.forms.showModal('remote-dialog')" %>
+      <%= content_tag :button, 'Show Modal Remote', class: "btn btn-primary", onclick: "Turbo.config.forms.showModal('remote-dialog',' My Remote')" %>
       <%= content_tag :button, 'Show Modal Remote2', class: "btn btn-primary", onclick: "Turbo.config.forms.showModal(false)" %>
     </form>
   </li>

app/views/layouts/application.html.erb

@@ -26,9 +26,9 @@
   </head>
 
   <body class="flex flex-col">
-    <%= render '/layouts/components/main_dialog' %>
     <%= render '/layouts/components/navbar' %>
     <main class="m-8 min-h-60"><%= yield %></main>
     <%= render '/layouts/components/footer' %>
+    <%= render '/layouts/components/dialogs' %>
   </body>
 </html>

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

@@ -0,0 +1,7 @@
+<%# locals: (id:, title:) %>
+<dialog id="<%= id %>" class="modal">
+  <div class="modal-box bg-base-200">
+    <h3 class="text-lg font-bold" data-dialog-title><%= title %></h3>
+    <div class="modal-content" data-dialog-content><%= yield %></div>
+  </div>
+</dialog>

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

@@ -0,0 +1,22 @@
+<%= render 'layouts/components/dialog', id: 'front-dialog', title:'Demande de confirmation' do %>
+  <p data-dialog-content class="mb-6">CONTENT</p>
+
+  <form method="dialog" class="modal-action">
+    <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
+    <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
+  </form>
+<% end %>
+
+<%= render 'layouts/components/dialog', id: 'remote-dialog', title:'Demande de confirmation' do %>
+  <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, 'OK', value: :confirm, class: "btn btn-primary" %>
+    <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
+  </form>
+<% end %>

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

@@ -1,29 +0,0 @@
-<dialog id="front-dialog" class="modal">
-  <div class="modal-box bg-base-200">
-    <h3 class="text-lg font-bold">Demande de confirmation</h3>
-    <p data-dialog-content class="mb-6"></p>
-
-    <form method="dialog" class="modal-action">
-      <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
-      <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
-    </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, 'OK', value: :confirm, class: "btn btn-primary" %>
-      <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
-    </form>
-  </div>
-</dialog>