diff --git a/_includes/floating_alert.html b/_includes/floating_alert.html index 87a5ed9..5a5043c 100644 --- a/_includes/floating_alert.html +++ b/_includes/floating_alert.html @@ -1,6 +1,6 @@
-
+
diff --git a/_layouts/default.html b/_layouts/default.html index 8f7dff2..8994f1f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -57,5 +57,6 @@ {% include_cached footer.html %} + {% include_cached floating_alert.html %} diff --git a/_packs/controllers/floating_alert_controller.js b/_packs/controllers/floating_alert_controller.js index 7509d26..dd6ffed 100644 --- a/_packs/controllers/floating_alert_controller.js +++ b/_packs/controllers/floating_alert_controller.js @@ -6,13 +6,25 @@ export default class extends Controller { connect() { window.addEventListener("toast", (event) => { this.contentTarget.innerText = event.detail.content; - this.element.classList.toggle("hide"); - this.element.classList.toggle("show"); + this.set(true); - setTimeout(() => { - this.element.classList.toggle("hide"); - this.element.classList.toggle("show"); + if (this.interval) { + clearTimeout(this.interval); + } + this.interval = setTimeout(() => { + this.set(false); + this.interval = null; }, 3000); }); } + + set(show) { + if (show) { + this.element.classList.remove("hide"); + this.element.classList.add("show"); + } else { + this.element.classList.add("hide"); + this.element.classList.remove("show"); + } + } } diff --git a/assets/css/styles.scss b/assets/css/styles.scss index a755a31..6868ad7 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -137,6 +137,7 @@ $enable-responsive-font-sizes: true; @import "menu"; @import "content"; @import "fonts"; +@import "floating_alert"; /// La barra de progreso de Turbo tiene el color primario /// de la paleta, definido por Bootstrap o por nosotres.