From 588c608fa295b8bd706500206bc179bdf629325c Mon Sep 17 00:00:00 2001
From: Nulo <nulo@sutty.nl>
Date: Thu, 25 Nov 2021 17:53:32 +0000
Subject: [PATCH 1/2] Arreglar floating-alert

---
 _includes/floating_alert.html                 |  4 ++--
 _layouts/default.html                         |  1 +
 .../controllers/floating_alert_controller.js  | 22 ++++++++++++++-----
 assets/css/styles.scss                        |  1 +
 4 files changed, 21 insertions(+), 7 deletions(-)

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 @@
 <div
   data-controller="floating-alert"
-  class="floating-alert floating-alert-bottom floating-alert-default"
+  class="floating-alert floating-alert-bottom floating-alert-default hide"
   role="status" aria-live="polite" aria-atomic="true">
-  <div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
+  <div data-target="floating-alert.content" class="floating-alert-content white background-black-t4"></div>
 </div>
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 @@
     </main>
 
     {% include_cached footer.html %}
+    {% include_cached floating_alert.html %}
   </body>
 </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.

From 01bbbf9a29f48cece40d6e728e4b30e30a66a63a Mon Sep 17 00:00:00 2001
From: Nulo <nulo@sutty.nl>
Date: Thu, 25 Nov 2021 17:54:28 +0000
Subject: [PATCH 2/2] floating_alert: agregar ejemplo de uso

---
 _packs/controllers/floating_alert_controller.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_packs/controllers/floating_alert_controller.js b/_packs/controllers/floating_alert_controller.js
index dd6ffed..c00ee8c 100644
--- a/_packs/controllers/floating_alert_controller.js
+++ b/_packs/controllers/floating_alert_controller.js
@@ -1,5 +1,9 @@
 import { Controller } from "stimulus";
 
+// Ejemplo de uso:
+// window.dispatchEvent(
+//   new CustomEvent("toast", { detail: { content: "¡Hola, usuarix!" } })
+// );
 export default class extends Controller {
   static targets = ["content"];