flash-container as shadow root

app/javascript/controllers/flash_controller.js

@@ -3,46 +3,64 @@ import Toastify from 'toastify-js'
 
 export default class extends Controller {
 
+  OPTIONS = {
+    selector: 'flash-container',
+    escapeMarkup: false,
+    close: true,
+    position: 'center',
+    offset: { y: 30 },
+  }
+
   count = 1
 
   connect() {
     console.log('FLASH stimulus ready!')
   }
 
-  notice() {
-    const message = `
-      <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      <div>
-      This <i>is</i> toast #${this.count++} + a long message which should wrap over 2 or more lines.<br/>
-      lorem ipsum lorem ipsume lorem ipsum lorem ipsume<br>
-       lorem ipsum lorem ipsume
-      </div>
-    `
-    console.warn(Toastify.defaults.selector)
-    console.info(message)
+  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}" />
+    </svg>`
+  }
+
+  iconNotice() { return this.icon('M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z') }
+  iconAlert() { return this.icon('M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z') }
+  className(toastType) { return `alert alert-${toastType} inset-ring-2 shadow-xl/50` }
+  classNameNotice() { return this.className('success') }
+  classNameAlert() { return this.className('error') }
+  textNotice(message) { return `${this.iconNotice()}<div>${message}</div>` }
+  textAlert(message) { return `${this.iconAlert()}<div>${message}</div>` }
+
+  popup(event) {
+    const { type, message } = event.detail
+    switch (type) {
+      case 'notice':
+        this.notice(message)
+        break
+      case 'alert':
+        this.alert(message)
+        break
+      default:
+        console.error(`undefined popup message type: ${type}`)
+    }
+  }
+
+  notice(message) {
     Toastify({
-      selector: 'flash-container',
-      text: message,
-      escapeMarkup: false,
-      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,
-      // duration: 0,
-      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'
-      },
+      ...this.OPTIONS,
+      text: this.textNotice(message),
+      className: this.classNameNotice(),
     }).showToast();
-
+    console.info(message)
   }
 
-  alert() {
-    console.warn('show alert')
+  alert(message) {
+    Toastify({
+      ...this.OPTIONS,
+      text: this.textAlert(message),
+      className: this.classNameAlert(),
+    }).showToast();
+    console.warn(message)
   }
 
   random() {

app/views/layouts/components/_flash.html.erb

@@ -1,4 +1,9 @@
-<div id='flash-container' style='max-width: calc(50% - 20px)'>
+<div 
+    id='flash-container' 
+    style='max-width: calc(50% - 20px)' 
+    data-controller='flash'
+    data-action="popup-toast@window->flash#popup"
+  >
   <!-- 
   here is a shadow root which serves as a placeholder for the toaster area.
   max-width gets inherited from this node.
@@ -12,8 +17,7 @@
     source code<br/>
   </aside>
 
-  <aside data-controller="flash"
-  data-action="popup-toast@window->flash#notice">
+  <aside data-controller='flash'>
     <% if flash.any? %>
       <h2 class='bold text-2xl'>FLASH</h2>
       <ul>

app/views/notification/index.html.erb

@@ -28,13 +28,29 @@
       Your purchase has been confirmed!<br/>
     </div>
   </div>
+
+  <div role="alert" class="alert alert-error inset-ring-2">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+    <span>Error! Task failed successfully.</span>
+  </div>
 </section>
 
 <div>
   <h2 class="text-bold text-2xl">By using <span class="italic">stimulus</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 Event('popup-toast'))", class: 'btn btn-primary'%>
+      <%= link_to 'Notice', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
+        type: 'notice',
+        message: 'this is a message from Stimulus'
+      }}))", class: 'btn btn-primary'%>
+    </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-primary'%>
     </li>
   </ul>
 </div>