starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-09 22:32:50 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: improve multiple toasts on the same page from different sources

Browse Source
This commit is contained in:
Herculino Trotta
2024-11-30 00:32:23 -03:00
parent 1f4a66560a
commit 73678aacab
3 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/common/fragments/toasts.html
+16 -18
View File
@@ -1,22 +1,20 @@
{% load i18n %} {% load i18n %}
{% load toast_bg %} {% load toast_bg %}
{% if messages %} {% if messages %}
<div class="toast-container position-fixed bottom-0 end-0 p-3"> {% for message in messages %}
{% for message in messages %} <div class="toast align-items-center text-bg-{{ message.tags | toast_bg }} border-0"
<div class="toast align-items-center text-bg-{{ message.tags | toast_bg }} border-0" role="alert"
role="alert" aria-live="assertive"
aria-live="assertive" aria-atomic="true">
aria-atomic="true"> <div class="toast-header">
<div class="toast-header"> <i class="{{ message.tags | toast_icon }} fa-fw me-1"></i>
<i class="{{ message.tags | toast_icon }} fa-fw me-1"></i> <strong class="me-auto">{{ message.tags | toast_title }}</strong>
<strong class="me-auto">{{ message.tags | toast_title }}</strong> <button type="button"
<button type="button" class="btn-close"
class="btn-close" data-bs-dismiss="toast"
data-bs-dismiss="toast" aria-label={% translate 'Close' %}></button>
aria-label={% translate 'Close' %}></button> </div>
</div> <div class="toast-body">{{ message }}</div>
<div class="toast-body">{{ message }}</div> </div>
</div> {% endfor %}
{% endfor %}
</div>
{% endif %} {% endif %}
app/templates/includes/toasts.html
+5 -2
View File
@@ -1,3 +1,6 @@
<div id="toasts" hx-get="{% url 'toasts' %}" <div id="toasts">
hx-trigger="load, toast from:window, toasts from:window"> <div class="toast-container position-fixed bottom-0 end-0 p-3" hx-trigger="load, updated from:window" hx-get="{% url 'toasts' %}" hx-swap="beforeend">
</div>
</div> </div>
frontend/src/application/bootstrap.js
Vendored
+7 -4
View File
@@ -7,12 +7,15 @@ function initiateToasts() {
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl)); // eslint-disable-line no-undef const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl)); // eslint-disable-line no-undef
for (let i = 0; i < toastList.length; i++) { for (let i = 0; i < toastList.length; i++) {
toastList[i].show(); if (toastList[i].isShown() === false) {
toastList[i]._element.addEventListener('hidden.bs.toast', (event) => { toastList[i].show();
event.target.remove(); toastList[i]._element.addEventListener('hidden.bs.toast', (event) => {
}); event.target.remove();
});
}
} }
} }
document.addEventListener('DOMContentLoaded', initiateToasts, false);
document.addEventListener('htmx:afterSwap', initiateToasts, false); document.addEventListener('htmx:afterSwap', initiateToasts, false);
initiateToasts(); initiateToasts();