FlashController static variables

app/javascript/controllers/flash_controller.js

@@ -1,92 +1,45 @@
 import { Controller } from "@hotwired/stimulus"
 import Toastify from 'toastify-js'
 
-let _should_popup = false
+export default class FlashController extends Controller {
 
-export default class extends Controller {
-
-  _should_popup = false
-  static targets = ['flashItem']
-
-  OPTIONS = {
+  static TOASTIFY_DEFAULTS = {
     selector: 'flashbar',
     escapeMarkup: false,
     close: true,
     position: 'center',
     offset: { y: 30 },
   }
-
-  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
-    }
-  }
+  static should_popup = true
+  static targets = ['flashItem']
 
   connect() {
-    if (_should_popup) {
-      // console.warn('popup on connect', _should_popup, this.flashItemTargets.length)
-      this.doPopup()
-      _should_popup = false
-    }
+    if (FlashController.should_popup) { this.doPopup() }
   }
 
-  // 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"))
-  // }
+  enable() { FlashController.should_popup = true }
+  disable() { FlashController.should_popup = false }
+  iconNotice() { return this.icon('M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z') }
+  iconAlert() { return this.icon('M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z') }
+  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>` }
 
   doPopup() {
+    FlashController.should_popup = false
     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}" />
     </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('M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z') }
-  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) {
@@ -105,7 +58,7 @@ export default class extends Controller {
 
   notice(message) {
     Toastify({
-      ...this.OPTIONS,
+      ...FlashController.TOASTIFY_DEFAULTS,
       text: this.textNotice(message),
       className: this.classNameNotice(),
     }).showToast();
@@ -114,7 +67,7 @@ export default class extends Controller {
 
   alert(message) {
     Toastify({
-      ...this.OPTIONS,
+      ...FlashController.TOASTIFY_DEFAULTS,
       text: this.textAlert(message),
       className: this.classNameAlert(),
     }).showToast();

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

@@ -1,7 +1,10 @@
 <%= 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"
+    data-action="
+    turbo:before-fetch-request@window->flash#enable
+    turbo:visit@window->flash#disable
+    turbo:load@window->flash#doPopup"
     >
     <% flash.each do |type, messages| %>
       <%= Time.now%>