Toasts now work with turbo

assets/controllers/common/toast_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus';
+import { Toast } from 'bootstrap';
+
+export default class extends Controller {
+    connect() {
+        //Move all toasts from the page into our toast container and show them
+
+        const toastContainer = document.getElementById('toast-container');
+        if (this.element.parentNode !== toastContainer) {
+            toastContainer.appendChild(this.element);
+            return;
+        }
+
+        const toast = new Toast(this.element);
+        toast.show();
+    }
+}

assets/js/register_events.js

@@ -12,7 +12,6 @@ import "bootstrap-fileinput";
 
 const RegisterEventHelper = class {
     constructor() {
-        this.registerToasts();
         this.registerTooltips();
         this.registerJumpToTopBtn();
 
@@ -28,10 +27,6 @@ const RegisterEventHelper = class {
         document.addEventListener('turbo:load', fn);
     }
 
-    registerToasts() {
-        this.registerLoadHandler(() =>  $(".toast").toast('show'));
-    }
-
     registerTooltips() {
         this.registerLoadHandler(() => {
             $(".tooltip").remove();

templates/_flash.html.twig

@@ -1,31 +0,0 @@
-{# The container to show the flash messages #}
-
-<div class="toast-container" id="message-container" style="min-width: 20%;">
-    {% for label, messages in app.flashes() %}
-        {% for message in messages %}
-            {% set flash_title = label|replace({'success': 'flash.success', 'error': 'flash.error'
-                , 'warning': 'flash.warning', 'notice': 'flash.notice', 'info': 'flash.info'}) %}
-            {% set flash_symbol = label|replace({'success': 'fa-check-circle', 'error': 'fa-exclamation-triangle'
-                , 'warning': 'fa-exclamation-circle', 'notice': 'fa-flag', 'info': 'fa-flag'}) %}
-
-            {% set flash_bg = label|replace({'success': 'bg-success text-white',
-                'error': 'bg-danger text-white', 'warning': 'bg-warning text-white',
-                'notice': 'bg-info text-white', 'info': 'bg-light'})%}
-
-            <div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
-                <div class="toast-header {{ flash_bg }}">
-                    {# <img src="..." class="rounded mr-2" alt="...">#}
-                    <i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
-                    <strong class="mr-auto">{{ flash_title|trans }}</strong>
-                    <small class="{% if "text-white" in flash_bg %}text-white{% else %}text-muted{% endif %}">{{ "now" | format_datetime("short", "short") }}</small>
-                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="toast-body {{ flash_bg }}">
-                    {{ message | trans }}
-                </div>
-            </div>
-        {% endfor %}
-    {% endfor %}
-</div>

templates/_toast.html.twig

@@ -0,0 +1,23 @@
+{% set flash_title = label|replace({'success': 'flash.success', 'error': 'flash.error'
+    , 'warning': 'flash.warning', 'notice': 'flash.notice', 'info': 'flash.info'}) %}
+        {% set flash_symbol = label|replace({'success': 'fa-check-circle', 'error': 'fa-exclamation-triangle'
+            , 'warning': 'fa-exclamation-circle', 'notice': 'fa-flag', 'info': 'fa-flag'}) %}
+
+        {% set flash_bg = label|replace({'success': 'bg-success text-white',
+            'error': 'bg-danger text-white', 'warning': 'bg-warning text-white',
+            'notice': 'bg-info text-white', 'info': 'bg-light'})%}
+
+<div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000" {{ stimulus_controller('common/toast') }}>
+    <div class="toast-header {{ flash_bg }}">
+        {# <img src="..." class="rounded mr-2" alt="...">#}
+        <i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
+        <strong class="mr-auto">{{ flash_title|trans }}</strong>
+        <small class="{% if "text-white" in flash_bg %}text-white{% else %}text-muted{% endif %}">{{ "now" | format_datetime("short", "short") }}</small>
+        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="toast-body {{ flash_bg }}">
+        {{ message | trans }}
+    </div>
+</div>

templates/_toast_container.html.twig

@@ -0,0 +1,4 @@
+{# The container to show the flash messages #}
+<div class="toast-container" id="toast-container" style="min-width: 20%;">
+
+</div>

templates/base.html.twig

@@ -55,20 +55,19 @@
 </head>
 <body data-base-url="{{ url('homepage', {'_locale': app.request.locale}) }}">
 {% block body %}
-
     <header>
-
         <turbo-frame id="navbar-frame" target="content" data-turbo-action="advance">
             {% include "_navbar.html.twig" %}
         </turbo-frame>
 
-        {% include "_flash.html.twig" %}
-
     </header>
 
     <main>
         <div class="container-fluid">
             <div class="row">
+
+                {% include "_toast_container.html.twig" %}
+
                 <div class="collapse d-md-block bg-light" id="sidebar-container">
                     <nav  class="fixed-sidebar col-md-3 col-lg-2 " id="fixed-sidebar">
                         <turbo-frame id="sidebar" target="content" data-turbo-action="advance">
@@ -89,6 +88,16 @@
                             {% block content %}
                             {% endblock %}
 
+                            <div class="toasts-global d-none">
+                            {% for label, messages in app.flashes() %}
+                                {% for message in messages %}
+                                    {{ include('_toast.html.twig', {
+                                        'label': label,
+                                        'message': message
+                                    }) }}
+                                {% endfor %}
+                            {% endfor %}
+                            </div>
                         </turbo-frame>
 
                         {% block scripts %}
@@ -108,7 +117,6 @@
         <i class="fas fa-angle-up fa-fw"></i>
     </a>
 
-
 {% endblock %}
 
 </body>