Browse Source

notyf OK

pagy
pvincent 11 months ago
parent
commit
1abd5a06ff
  1. 12
      app/javascript/application.js
  2. 32
      app/views/layouts/_notification.html.erb

12
app/javascript/application.js

@ -1,6 +1,16 @@
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import { Notyf } from 'notyf'
window.buildNotyf = ()=>{
const notyf=new Notyf({
duration: 5000,
position: { x: 'center', y: 'top' },
})
return notyf
}
// Customize Turbo default behaviour
Turbo.setProgressBarDelay(300)
Turbo.setProgressBarDelay(300)
// Turbo.session.drive = false

32
app/views/layouts/_notification.html.erb

@ -1,27 +1,13 @@
<h2>NOTIFICATION BAR</h2>
<script data-turbo-temporary>
document.addEventListener('turbo:load',(e)=>{
<% if flash.count.positive? %>
<script type="module">
import { Notyf } from 'notyf';
import Toastify from 'toastify-js'
const notyf=window.buildNotyf()
notyf.success('rails notice')
notyf.error('rails alert')
const notyf=new Notyf({
duration: 3000,
position: {
x: 'center',
y: 'top',
}
})
<% if flash.alert %>
notyf.error('<%=alert%>')
Toastify({ text: "<%=alert%>", gravity: "top", oldestFirst: false, close: true, position: "center", style: { background: "red" }}).showToast();
<%end%>
// useful to prevent flickering from turbo preview
Turbo.cache.exemptPageFromPreview()
<% if flash.notice %>
notyf.success('<%=notice%>')
Toastify({ text: "<%=notice%>", gravity: "top", oldestFirst: false, close: true, position: "center", style: { background: "green" }}).showToast();
<%end%>
console.log('notification loaded')
</script>
<%end%>
}, {once: true})
</script>
Loading…
Cancel
Save