pvincent
/
notification
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

working

main
pvincent 1 day ago
parent
e702725c80
commit
62df4e7fd7
6 changed files with 169 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      app/controllers/notification_controller.rb
  2. 56
      app/javascript/controllers/flash_controller.js
  3. 15
      app/views/layouts/components/_flash.html.erb
  4. 13
      app/views/layouts/components/_flashbar.html.erb
  5. 73
      app/views/notification/index.html.erb
  6. 4
      config/routes.rb

36
app/controllers/notification_controller.rb
View File

@ -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 = ['<i>italic</i> <b>message</b>', 'normal <b>message</b>'] 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

56
app/javascript/controllers/flash_controller.js
View File

@ -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 `<svg xmlns="http://>']www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current mx-4" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${drawing}" />

15
app/views/layouts/components/_flash.html.erb
View File

@ -0,0 +1,15 @@
<%= turbo_frame_tag :flash do %>
<div class='hidden'
data-controller='flash'
data-action="turbo:before-fetch-request@window->flash#showLog turbo:load@window->flash#showLog turbo:visit@window->flash#showLog"
>
<% flash.each do |type, messages| %>
<%= Time.now%>
<% Array(messages).each do |message| %>
<div data-flash-target='flashItem' data-type='<%= type %>'>
<%= message %>
</div>
<% end %>
<% end %>
</div>
<% end %>

13
app/views/layouts/components/_flashbar.html.erb
View File

@ -22,15 +22,4 @@
</div>
<div class='hidden'
data-controller='flash'
data-action="turbo:load@window->flash#onLoad"
>
<% flash.each do |type, messages| %>
<% Array(messages).each do |message| %>
<div data-flash-target='flashItem' data-type='<%= type %>'>
<%= message %>
</div>
<% end %>
<% end %>
</div>
<%= render 'layouts/components/flash' %>

73
app/views/notification/index.html.erb
View File

@ -3,40 +3,83 @@
</div>
<section>
<h2 class="text-bold text-2xl">By using <span class="italic">stimulus</span></h2>
<h2 class="text-bold text-2xl">By using <span class="italic">redirect_to</span></h2>
<ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Notice', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
type: 'notice',
message: 'this is a message from Stimulus'
}}))", class: 'btn btn-primary'%>
<%= link_to 'Notice',
notification_show_notice_path,
class: 'btn btn-primary',
data: { turbo_prefetch: false }%>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Alert', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
type: 'alert',
message: 'this is an alert'
}}))", class: 'btn btn-secondary'%>
<%= link_to 'Notice ++', notification_show_notice_path({multiple: true}), class: 'btn btn-primary', 'data-turbo-prefetch': false %>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Alert', notification_show_alert_path, class: 'btn btn-secondary', 'data-turbo-prefetch': false %>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Alert ++', notification_show_alert_path({multiple: true}), class: 'btn btn-secondary', 'data-turbo-prefetch': false %>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'None', notification_index_path, class: 'btn btn-accent btn-outline', 'data-turbo-prefetch': false %>
</li>
</ul>
</section>
<section>
<h2 class="text-bold text-2xl">By using <span class="italic">redirect_to</span></h2>
<h2 class="text-bold text-2xl">By using <span class="italic">turbo stream</span></h2>
<ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Notice', notification_show_notice_path, class: 'btn btn-primary'%>
<%= link_to notification_turbo_notice_path, class: "btn btn-primary", data: { turbo_stream: true, turbo_prefetch: false } do %>
Turbo Notice
<% end %>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to notification_turbo_alert_path, class: "btn btn-secondary", data: { turbo_stream: true, turbo_prefetch: false } do %>
Turbo Alert
<% end %>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Notice ++', notification_show_notice_path({multiple: true}), class: 'btn btn-primary'%>
<%= link_to notification_turbo_more_path, class: "btn btn-accent", data: { turbo_stream: true, turbo_prefetch: false } do %>
Turbo More
<% end %>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Alert', notification_show_alert_path, class: 'btn btn-secondary'%>
<%= link_to notification_turbo_none_path, class: "btn btn-accent btn-outline", data: { turbo_stream: true, turbo_prefetch: false } do %>
Turbo None
<% end %>
</li>
</ul>
<%# <div class="flex gap-4">
<div class="flex-1 flex-col">
<h3 class='m-2'>Choice</h3>
<div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
</div>
<div class="flex-none divider sm:divider-horizontal grow-0">OR</div>
<div class="flex-1 flex-col">
<h3 class='m-2'>Selected</h3>
<div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
</div>
</div> %>
</section>
<section>
<h2 class="text-bold text-2xl">By using plain <span class="italic">Javascript</span></h2>
<ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Alert ++', notification_show_alert_path({multiple: true}), class: 'btn btn-secondary'%>
<%= link_to 'Notice', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
type: 'notice',
message: 'this is a message from within Stimulus'
}}))", class: 'btn btn-primary'%>
</li>
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'None', notification_index_path, class: 'btn btn-accent btn-outline'%>
<%= link_to 'Alert', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
type: 'alert',
message: 'this is an alert by the way'
}}))", class: 'btn btn-secondary'%>
</li>
</ul>
</section>

4
config/routes.rb
View File

@ -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
Write Preview
Loading…
Cancel
Save