diff --git a/app/controllers/edge_controller.rb b/app/controllers/edge_controller.rb index deaec29..5ed3bd7 100644 --- a/app/controllers/edge_controller.rb +++ b/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 diff --git a/app/helpers/turbo_stream_actions_helper.rb b/app/helpers/turbo_stream_actions_helper.rb index 87d115d..22c9c61 100644 --- a/app/helpers/turbo_stream_actions_helper.rb +++ b/app/helpers/turbo_stream_actions_helper.rb @@ -3,9 +3,10 @@ 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 - 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) diff --git a/app/javascript/initializers/forms.js b/app/javascript/initializers/forms.js index a30c9ba..30f6c51 100644 --- a/app/javascript/initializers/forms.js +++ b/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) { diff --git a/app/javascript/initializers/stream_actions.js b/app/javascript/initializers/stream_actions.js index e08782d..a3bcad1 100644 --- a/app/javascript/initializers/stream_actions.js +++ b/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) } diff --git a/app/views/edge/_turbo_dialog.html.erb b/app/views/edge/_turbo_dialog.html.erb deleted file mode 100644 index 1cf9796..0000000 --- a/app/views/edge/_turbo_dialog.html.erb +++ /dev/null @@ -1,13 +0,0 @@ -<%= render 'layouts/components/dialog', id: 'remote-dialog', title:'my title' do %> -

- 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. -

- - -<% end %> diff --git a/app/views/edge/_turbo_edit.html.erb b/app/views/edge/_turbo_edit.html.erb new file mode 100644 index 0000000..ea3ac10 --- /dev/null +++ b/app/views/edge/_turbo_edit.html.erb @@ -0,0 +1,8 @@ +

+ Here is a content + actions +

+ + diff --git a/app/views/edge/index.html.erb b/app/views/edge/index.html.erb index 6e72986..9453995 100644 --- a/app/views/edge/index.html.erb +++ b/app/views/edge/index.html.erb @@ -8,7 +8,7 @@
  • - <%= 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)" %>
  • diff --git a/app/views/layouts/components/_dialog.html.erb b/app/views/layouts/components/_dialog.html.erb index 4e8d8a4..ca0f350 100644 --- a/app/views/layouts/components/_dialog.html.erb +++ b/app/views/layouts/components/_dialog.html.erb @@ -1,8 +1,7 @@ <%# locals: (id:, title:) %> -