starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-03-17 23:13:57 +01: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

34
app/templates/common/fragments/toasts.html
View File

@@ -1,22 +1,20 @@
{% load i18n %}
{% load toast_bg %}
{% if messages %}
<div class="toast-container position-fixed bottom-0 end-0 p-3">
{% for message in messages %}
<div class="toast align-items-center text-bg-{{ message.tags | toast_bg }} border-0"
role="alert"
aria-live="assertive"
aria-atomic="true">
<div class="toast-header">
<i class="{{ message.tags | toast_icon }} fa-fw me-1"></i>
<strong class="me-auto">{{ message.tags | toast_title }}</strong>
<button type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label={% translate 'Close' %}></button>
</div>
<div class="toast-body">{{ message }}</div>
</div>
{% endfor %}
</div>
{% for message in messages %}
<div class="toast align-items-center text-bg-{{ message.tags | toast_bg }} border-0"
role="alert"
aria-live="assertive"
aria-atomic="true">
<div class="toast-header">
<i class="{{ message.tags | toast_icon }} fa-fw me-1"></i>
<strong class="me-auto">{{ message.tags | toast_title }}</strong>
<button type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label={% translate 'Close' %}></button>
</div>
<div class="toast-body">{{ message }}</div>
</div>
{% endfor %}
{% endif %}

7
app/templates/includes/toasts.html
View File

@@ -1,3 +1,6 @@
<div id="toasts" hx-get="{% url 'toasts' %}"
hx-trigger="load, toast from:window, toasts from:window">
<div id="toasts">
<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>

11
frontend/src/application/bootstrap.js vendored
View File

@@ -7,12 +7,15 @@ function initiateToasts() {
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl)); // eslint-disable-line no-undef
for (let i = 0; i < toastList.length; i++) {
toastList[i].show();
toastList[i]._element.addEventListener('hidden.bs.toast', (event) => {
event.target.remove();
});
if (toastList[i].isShown() === false) {
toastList[i].show();
toastList[i]._element.addEventListener('hidden.bs.toast', (event) => {
event.target.remove();
});
}
}
}
document.addEventListener('DOMContentLoaded', initiateToasts, false);
document.addEventListener('htmx:afterSwap', initiateToasts, false);
initiateToasts();