diff --git a/README.md b/README.md index 67c85ba..4aaea1f 100644 --- a/README.md +++ b/README.md @@ -9,3 +9,4 @@ quick try-out app for displaying toaster as flash message based on Rails8 ## building process * bin/importmap pin toastify-js +* curl -sLO --output-dir app/assets/stylesheets https://github.com/apvarun/toastify-js/raw/refs/heads/master/src/toastify.css diff --git a/TODO.md b/TODO.md index dadfecf..7509a5e 100644 --- a/TODO.md +++ b/TODO.md @@ -1,4 +1,6 @@ TODO ==== -* [ ] resolve daisyui and daisyui-theme via importmap \ No newline at end of file +* [ ] resolve daisyui and daisyui-theme via importmap +* [ ] use a simpler toast library + * [ ] https://codeshack.io/elegant-toast-notifications-javascript/ \ No newline at end of file diff --git a/app/assets/stylesheets/toastify.css b/app/assets/stylesheets/toastify.css new file mode 100644 index 0000000..6088079 --- /dev/null +++ b/app/assets/stylesheets/toastify.css @@ -0,0 +1,57 @@ +.toastify { + display: inline-block; + position: fixed; + opacity: 0; + transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); + cursor: pointer; + max-width: calc(50% - 20px); + z-index: 1000; +} + +.toastify.on { + opacity: 1; +} + +.toast-close { + background: transparent; + cursor: pointer; + opacity: 0.4; + padding: 0 0 0 2em; +} + +.toastify-right { + right: 15px; +} + +.toastify-left { + left: 15px; +} + +.toastify-top { + top: -150px; +} + +.toastify-bottom { + bottom: -150px; +} + +.toastify-center { + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + max-width: fit-content; + max-width: -moz-fit-content; +} + +@media only screen and (max-width: 360px) { + + .toastify-right, + .toastify-left { + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + max-width: fit-content; + } +} \ No newline at end of file diff --git a/app/javascript/controllers/flash_controller.js b/app/javascript/controllers/flash_controller.js index 5567766..8e3d3a4 100644 --- a/app/javascript/controllers/flash_controller.js +++ b/app/javascript/controllers/flash_controller.js @@ -1,13 +1,31 @@ import { Controller } from "@hotwired/stimulus" +import Toastify from 'toastify-js' // Connects to data-controller="flash" export default class extends Controller { + + count = 0 + connect() { console.log('FLASH stimulus ready!') } notice() { console.warn('show notice') + Toastify({ + text: `This is toast #${this.count++} + a long message which should wrap over 2 or more lines`, + className: 'alert alert-success inset-ring-2 shadow-xl/30', + close: true, + position: 'center', + // gravity: "top", // `top` or `bottom` + // stopOnFocus: true, // Prevents dismissing of toast on hover + // duration: 3000, + offset: { + // x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em' + y: 30 // vertical axis - can be a number or a string indicating unity. eg: '2em' + }, + }).showToast(); + } alert() { diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 3c7df52..47761e0 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -24,7 +24,7 @@ <%= render 'layouts/components/navbar'%> -
+
<%= yield %>
<%= render 'layouts/components/flash'%> diff --git a/app/views/layouts/components/_flash.html.erb b/app/views/layouts/components/_flash.html.erb index 48c0405..e3ea5e8 100644 --- a/app/views/layouts/components/_flash.html.erb +++ b/app/views/layouts/components/_flash.html.erb @@ -3,7 +3,8 @@

Copyleft AGPLv3

-