Extract Materialize Toast controller

assets/controllers/materialize/toast_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+export default class extends Controller {
+  connect() {
+    this.instance = M.toast({ text: this.element.innerText });
+  }
+
+  disconnect() {
+    this.instance.dismissAll();
+  }
+}

assets/index.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 
 /* Materialize imports */
 import '@materializecss/materialize/dist/css/materialize.css';
-import M from '@materializecss/materialize/dist/js/materialize';
+import '@materializecss/materialize/dist/js/materialize';
 
 /* Annotations */
 import annotator from 'annotator';
@@ -348,10 +348,4 @@ $(document).ready(() => {
 
     qrcode.setAttribute('src', src);
   });
-
-  document.querySelectorAll('.material-toast').forEach((toast) => {
-    M.toast({
-      text: toast.innerText,
-    });
-  });
 });

templates/Import/check_queue.html.twig

@@ -1,9 +1,9 @@
 {% if nbRedisMessages is defined and nbRedisMessages > 0 %}
-    <p class="material-toast hidden">Messages in queue: {{ nbRedisMessages }}</p>
+    <p class="hidden" data-controller="materialize--toast">Messages in queue: {{ nbRedisMessages }}</p>
 {% endif %}
 
 {% if nbRabbitMessages is defined and nbRabbitMessages > 0 %}
-    <p class="material-toast hidden">Messages in queue: {{ nbRabbitMessages }}</p>
+    <p class="hidden" data-controller="materialize--toast">Messages in queue: {{ nbRabbitMessages }}</p>
 {% endif %}
 
 {% if redisNotInstalled is defined and redisNotInstalled  %}

templates/bundles/FOSUserBundle/Security/login.html.twig

@@ -5,11 +5,11 @@
     <div class="card-content">
 
         {% if error %}
-            <p class="material-toast hidden">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
+            <p class="hidden" data-controller="materialize--toast">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
         {% endif %}
 
         {% for flash_message in app.session.flashbag.get('notice') %}
-            <p class="material-toast hidden">{{ flash_message }}</p>
+            <p class="hidden" data-controller="materialize--toast">{{ flash_message }}</p>
         {% endfor %}
 
         <div class="row">

templates/layout.html.twig

@@ -35,7 +35,7 @@
 
 {% block messages %}
     {% for flash_message in app.session.flashbag.get('notice') %}
-        <p class="material-toast hidden">{{ flash_message|trans }}</p>
+        <p class="hidden" data-controller="materialize--toast">{{ flash_message|trans }}</p>
     {% endfor %}
 {% endblock %}