diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2 index 6a8e50d9..7a544dfc 100644 --- a/app/templates/base.html.j2 +++ b/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": '{{ message }}'}); + toast = M.toast({"html": `{{ message }}`}); + 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) { diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2 index 0f656aec..c1f20bc2 100644 --- a/app/templates/corpora/analyse_corpus.html.j2 +++ b/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": `Query has been sent!`}); + 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": `No results for this query!`}); + let toastActionElement = toast.el.querySelector(".toast-action[data-action='close']"); + if (toastActionElement) { + toastActionElement.addEventListener("click", function() { + toast.dismiss(); + }); + } return; }