From 95b2fb4c3a4fffafb809c03e39511e2046cdd36c Mon Sep 17 00:00:00 2001 From: pvincent Date: Fri, 6 Mar 2026 11:06:38 +0000 Subject: [PATCH] remote_dialog part1 --- app/controllers/edge_controller.rb | 2 +- app/helpers/turbo_stream_actions_helper.rb | 4 +++ app/javascript/initializers/stream_actions.js | 6 +++- app/views/edge/_turbo_dialog.html.erb | 13 +++++++++ app/views/layouts/application.html.erb | 2 +- app/views/layouts/components/_dialog.html.erb | 8 +++++ .../layouts/components/_dialogs.html.erb | 22 ++++++++++++++ .../layouts/components/_main_dialog.html.erb | 29 ------------------- 8 files changed, 54 insertions(+), 32 deletions(-) create mode 100644 app/views/edge/_turbo_dialog.html.erb create mode 100644 app/views/layouts/components/_dialog.html.erb create mode 100644 app/views/layouts/components/_dialogs.html.erb delete mode 100644 app/views/layouts/components/_main_dialog.html.erb diff --git a/app/controllers/edge_controller.rb b/app/controllers/edge_controller.rb index 59f5e11..deaec29 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.console_log(text: 'Hello world server-side') + render turbo_stream: turbo_stream.remote_dialog(id: 'remote-dialog', title: 'my remote title', partial: 'turbo_dialog') end end diff --git a/app/helpers/turbo_stream_actions_helper.rb b/app/helpers/turbo_stream_actions_helper.rb index ac5c9ba..87d115d 100644 --- a/app/helpers/turbo_stream_actions_helper.rb +++ b/app/helpers/turbo_stream_actions_helper.rb @@ -2,6 +2,10 @@ module TurboStreamActionsHelper def console_log(text) turbo_stream_action_tag :console_log, text: text end + + def remote_dialog(dialog_id = 'remote-dialog', **rendering, &block) + action :remoteDialog, nil, **rendering, &block + end end Turbo::Streams::TagBuilder.prepend(TurboStreamActionsHelper) diff --git a/app/javascript/initializers/stream_actions.js b/app/javascript/initializers/stream_actions.js index 929dfa7..e08782d 100644 --- a/app/javascript/initializers/stream_actions.js +++ b/app/javascript/initializers/stream_actions.js @@ -1,4 +1,8 @@ Turbo.StreamActions.console_log = function () { const text = this.getAttribute("text") console.log(text) -} \ No newline at end of file +} + +Turbo.StreamActions.remoteDialog = function () { + console.log('remote-dialog', this) +} diff --git a/app/views/edge/_turbo_dialog.html.erb b/app/views/edge/_turbo_dialog.html.erb new file mode 100644 index 0000000..1cf9796 --- /dev/null +++ b/app/views/edge/_turbo_dialog.html.erb @@ -0,0 +1,13 @@ +<%= 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. +

+ +
+ <%= content_tag :button, 'OK2', value: :confirm, class: "btn btn-primary" %> + <%= content_tag :button, 'Cancel2', value: :cancel, class: "btn btn-ghost" %> +
+<% end %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 231b8e5..5e35f09 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -26,9 +26,9 @@ - <%= render '/layouts/components/main_dialog' %> <%= render '/layouts/components/navbar' %>
<%= yield %>
<%= render '/layouts/components/footer' %> + <%= render '/layouts/components/dialogs' %> diff --git a/app/views/layouts/components/_dialog.html.erb b/app/views/layouts/components/_dialog.html.erb new file mode 100644 index 0000000..4e8d8a4 --- /dev/null +++ b/app/views/layouts/components/_dialog.html.erb @@ -0,0 +1,8 @@ +<%# locals: (id:, title:) %> + + +
+

<%= title %>

+ <%= yield %> +
+ diff --git a/app/views/layouts/components/_dialogs.html.erb b/app/views/layouts/components/_dialogs.html.erb new file mode 100644 index 0000000..470bf7d --- /dev/null +++ b/app/views/layouts/components/_dialogs.html.erb @@ -0,0 +1,22 @@ +<%= render 'layouts/components/dialog', id: 'front-dialog', title:'Demande de confirmation' do %> +

CONTENT

+ +
+ <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %> + <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %> +
+<% end %> + +<%= render 'layouts/components/dialog', id: 'remote-dialog', title:'Demande de confirmation' 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. +

+ +
+ <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %> + <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %> +
+<% end %> diff --git a/app/views/layouts/components/_main_dialog.html.erb b/app/views/layouts/components/_main_dialog.html.erb deleted file mode 100644 index 9a8aed4..0000000 --- a/app/views/layouts/components/_main_dialog.html.erb +++ /dev/null @@ -1,29 +0,0 @@ - -
-

Demande de confirmation

-

- -
- <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %> - <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %> -
-
- - - -
-

Remote Dialog

- -

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

- -
- <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %> - <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %> -
-
-