sutty-base-jekyll-theme/_packs/controllers/floating_alert_controller.js

import { Controller } from "stimulus";

// Ejemplo de uso:
// window.dispatchEvent(
//   new CustomEvent("toast", { detail: { content: "¡Hola, usuarix!" } })
// );
export default class extends Controller {
  static targets = ["content"];

  connect() {
    window.addEventListener("toast", (event) => {
      this.contentTarget.innerText = event.detail.content;
      this.set(true);

      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");
    }
  }
}