Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development

app/templates/base.html.j2

@@ -192,8 +192,16 @@
           entry.parentNode.classList.add("active");
         }
       }
+      var toast;
+      var toastActionElement;
       {% for message in get_flashed_messages() %}
-      M.toast({"html": '<span>{{ message }}</span><button class="btn-flat toast-action red-text" data-action="close"><i class="material-icons">close</i></button>'});
+      toast = M.toast({"html": `<span>{{ message }}</span><button class="btn-flat toast-action red-text" data-action="close"><i class="material-icons">close</i></button>`});
+      toastActionElement = toast.el.querySelector(".toast-action[data-action='close']");
+      if (toastActionElement) {
+        toastActionElement.addEventListener("click", function() {
+          toast.dismiss();
+        });
+      }
       {% endfor %}
       for (toastActionElement of document.querySelectorAll(".toast-action[data-action='close']")) {
         toastActionElement.addEventListener("click", function(event) {

app/templates/corpora/analyse_corpus.html.j2

@@ -217,7 +217,13 @@
     socket.emit("corpus_analysis", queryData);
     queryLoadingElement.classList.remove("hide");
     queryResultsTableElement.classList.add("hide");
-    M.toast({html: "Query has been sent!"});
+    let toast = M.toast({"html": `<span>Query has been sent!</span><button class="btn-flat toast-action red-text" data-action="close"><i class="material-icons">close</i></button>`});
+    let toastActionElement = toast.el.querySelector(".toast-action[data-action='close']");
+    if (toastActionElement) {
+      toastActionElement.addEventListener("click", function() {
+        toast.dismiss();
+      });
+    }
   });
 
   socket.on("corpus_analysis", function(message) {
@@ -234,7 +240,13 @@
 
     if (message === null) {
       queryResultsTableElement.classList.add("hide");
-      M.toast({"html": "No results for this query!", "classes": "red"});
+      let toast = M.toast({"classes": "red", "html": `<span>No results for this query!</span><button class="btn-flat toast-action white-text" data-action="close"><i class="material-icons">close</i></button>`});
+      let toastActionElement = toast.el.querySelector(".toast-action[data-action='close']");
+      if (toastActionElement) {
+        toastActionElement.addEventListener("click", function() {
+          toast.dismiss();
+        });
+      }
       return;
     }