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.remote_dialog(id: 'remote-dialog', title: 'my remote title', partial: 'turbo_dialog')
+    render turbo_stream: turbo_stream.remote_dialog(title: 'my remote title', partial: 'turbo_edit')
   end
 end

app/helpers/turbo_stream_actions_helper.rb

@@ -3,8 +3,9 @@ module TurboStreamActionsHelper
     turbo_stream_action_tag :console_log, text: text
   end
 
-    def remote_dialog(dialog_id = 'remote-dialog', **rendering, &block)
-      action :remoteDialog, nil, **rendering, &block
+  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
 

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

@@ -4,5 +4,8 @@ Turbo.StreamActions.console_log = function () {
 }
 
 Turbo.StreamActions.remoteDialog = function () {
-  console.log('remote-dialog', this)
+  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_dialog.html.erb

@@ -1,13 +0,0 @@
-<%= render 'layouts/components/dialog', id: 'remote-dialog', title:'my title' 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, 'OK2', value: :confirm, class: "btn btn-primary" %>
-    <%= content_tag :button, 'Cancel2', value: :cancel, class: "btn btn-ghost" %>
-  </form>
-<% end %>

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/components/_dialog.html.erb

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