From 62df4e7fd7a677ec1a9de02fc32fb77802635c93 Mon Sep 17 00:00:00 2001 From: pvincent Date: Mon, 1 Sep 2025 18:19:30 +0000 Subject: [PATCH] working --- app/controllers/notification_controller.rb | 36 ++++++++- .../controllers/flash_controller.js | 56 +++++++++++++- app/views/layouts/components/_flash.html.erb | 15 ++++ .../layouts/components/_flashbar.html.erb | 13 +--- app/views/notification/index.html.erb | 75 +++++++++++++++---- config/routes.rb | 4 + 6 files changed, 169 insertions(+), 30 deletions(-) create mode 100644 app/views/layouts/components/_flash.html.erb diff --git a/app/controllers/notification_controller.rb b/app/controllers/notification_controller.rb index 3360f59..011acb4 100644 --- a/app/controllers/notification_controller.rb +++ b/app/controllers/notification_controller.rb @@ -1,10 +1,11 @@ +COUNT ||= 0 + class NotificationController < ApplicationController def index logger.info 'index' end def show_notice - # flash.alert = 'toto' flash.alert = %w[titi toto] if params[:multiple] == 'true' redirect_to notification_index_path, notice: 'this is a notice' end @@ -13,4 +14,37 @@ class NotificationController < ApplicationController flash.notice = ['italic message', 'normal message'] if params[:multiple] == 'true' redirect_to notification_index_path, alert: 'this is an alert' end + + def turbo_notice + COUNT += 1 + # TODO: render_stream (partial + flash -> flash.now + optional replace|append) + flash.now[:notice] = "coucou ##{COUNT}" + render turbo_stream: [ + turbo_stream.replace(:flash, partial: 'layouts/components/flash') + ] + end + + def turbo_alert + COUNT += 1 + flash.now[:alert] = "alert, do the stuff right now ##{COUNT}" + render turbo_stream: [ + turbo_stream.replace(:flash, partial: 'layouts/components/flash') + ] + end + + def turbo_more + COUNT += 1 + flash.now[:alert] = "alert, do the stuff right now ##{COUNT}" + flash.now[:notice] = ["this is extra notice ##{COUNT}", 'one more time'] + render turbo_stream: [ + turbo_stream.replace(:flash, partial: 'layouts/components/flash') + ] + end + + def turbo_none + COUNT += 1 + render turbo_stream: [ + turbo_stream.replace(:flash, partial: 'layouts/components/flash') + ] + end end diff --git a/app/javascript/controllers/flash_controller.js b/app/javascript/controllers/flash_controller.js index fa69bb7..eeacb08 100644 --- a/app/javascript/controllers/flash_controller.js +++ b/app/javascript/controllers/flash_controller.js @@ -1,8 +1,11 @@ import { Controller } from "@hotwired/stimulus" import Toastify from 'toastify-js' +let _should_popup = false + export default class extends Controller { + _should_popup = false static targets = ['flashItem'] OPTIONS = { @@ -13,12 +16,63 @@ export default class extends Controller { offset: { y: 30 }, } - onLoad(event) { + showLog(event) { + switch (event.type) { + case 'turbo:before-fetch-request': + _should_popup = true + // console.log('should popup on next connect', _should_popup) + break + case 'turbo:visit': + _should_popup = false + // console.log('redirect detected', _should_popup) + break + case 'turbo:load': + // console.log('should popup now', this.flashItemTargets.length) + this.doPopup() + break + } + } + + connect() { + if (_should_popup) { + // console.warn('popup on connect', _should_popup, this.flashItemTargets.length) + this.doPopup() + _should_popup = false + } + } + + // disconnect() { + // console.warn('disconnect') + // } + + + // flashItemTargetConnected(target) { + // console.warn('on targetConnected', target, this.element.isConnected) + // // this.popup({ detail: { type: target.dataset.type, message: target.textContent.trim() } }) + // } + + // flashItemTargetDisconnected(target) { + // console.warn('on targetDisconnected') + // } + + // onFrameLoad(event) { + // console.warn('onFrameLoad', this.element, document.documentElement.hasAttribute("data-turbolinks-preview")) + // } + + doPopup() { this.flashItemTargets.forEach((item) => { this.popup({ detail: { type: item.dataset.type, message: item.textContent.trim() } }) }) } + + onLoad(event) { + // console.warn('onLoad', this.element.parentNode.isConnected) + // this.flashItemTargets.forEach((item) => { + // this.popup({ detail: { type: item.dataset.type, message: item.textContent.trim() } }) + // }) + } + icon(drawing) { return ` diff --git a/app/views/layouts/components/_flash.html.erb b/app/views/layouts/components/_flash.html.erb new file mode 100644 index 0000000..55d6f03 --- /dev/null +++ b/app/views/layouts/components/_flash.html.erb @@ -0,0 +1,15 @@ +<%= turbo_frame_tag :flash do %> + +<% end %> \ No newline at end of file diff --git a/app/views/layouts/components/_flashbar.html.erb b/app/views/layouts/components/_flashbar.html.erb index 4c28b71..23c0c03 100644 --- a/app/views/layouts/components/_flashbar.html.erb +++ b/app/views/layouts/components/_flashbar.html.erb @@ -22,15 +22,4 @@ - +<%= render 'layouts/components/flash' %> \ No newline at end of file diff --git a/app/views/notification/index.html.erb b/app/views/notification/index.html.erb index 19de4b3..f26e00a 100644 --- a/app/views/notification/index.html.erb +++ b/app/views/notification/index.html.erb @@ -3,40 +3,83 @@
-

By using stimulus

+

By using redirect_to

-

By using redirect_to

+

By using turbo stream

+ + <%#
+
+

Choice

+
content
+
+ +
OR
+
+

Selected

+
content
+
+ +
%> +
+ +
+

By using plain Javascript

+ -
\ No newline at end of file + diff --git a/config/routes.rb b/config/routes.rb index ed53bae..6f95a6a 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -3,4 +3,8 @@ Rails.application.routes.draw do get 'notification/index' get 'notification/show_notice' get 'notification/show_alert' + get 'notification/turbo_notice' + get 'notification/turbo_alert' + get 'notification/turbo_more' + get 'notification/turbo_none' end