Change the way how the dismiss feature is added to toasts.

This commit is contained in:
Patrick Jentsch 2020-01-08 10:47:59 +01:00
parent 8416bda04b
commit 4446260c10
2 changed files with 23 additions and 3 deletions

View File

@ -192,8 +192,16 @@
entry.parentNode.classList.add("active"); entry.parentNode.classList.add("active");
} }
} }
var toast;
var toastActionElement
{% for message in get_flashed_messages() %} {% 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 %} {% endfor %}
for (toastActionElement of document.querySelectorAll(".toast-action[data-action='close']")) { for (toastActionElement of document.querySelectorAll(".toast-action[data-action='close']")) {
toastActionElement.addEventListener("click", function(event) { toastActionElement.addEventListener("click", function(event) {

View File

@ -217,7 +217,13 @@
socket.emit("corpus_analysis", queryData); socket.emit("corpus_analysis", queryData);
queryLoadingElement.classList.remove("hide"); queryLoadingElement.classList.remove("hide");
queryResultsTableElement.classList.add("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) { socket.on("corpus_analysis", function(message) {
@ -234,7 +240,13 @@
if (message === null) { if (message === null) {
queryResultsTableElement.classList.add("hide"); 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; return;
} }