41 lines
1.5 KiB
JavaScript
41 lines
1.5 KiB
JavaScript
import { Controller } from "@hotwired/stimulus";
|
|
|
|
export default class extends Controller {
|
|
static targets = ["notification"];
|
|
|
|
connect() {
|
|
// Startet den Timer: Ruft nach 5000 Millisekunden (5 Sekunden) die dismiss-Methode auf
|
|
this.timeout = setTimeout(() => {
|
|
this.dismiss();
|
|
}, 5000);
|
|
}
|
|
|
|
disconnect() {
|
|
// Wichtig: Löscht den Timer, falls der Nutzer die Nachricht vor Ablauf der 5 Sekunden manuell schließt
|
|
clearTimeout(this.timeout);
|
|
}
|
|
|
|
dismiss() {
|
|
// 1. Tailwind-Klassen für das Ausblenden hinzufügen
|
|
// this.notificationTarget.classList.add("opacity-0","translate-y-2","scale-95");
|
|
|
|
// Verschiebt das Element auf der X-Achse weit nach rechts (translate-x-full)
|
|
// und blendet es leicht aus, damit es weicher wirkt
|
|
// 1. Alten Startpunkt entfernen (wichtig für Tailwind v4/v3)
|
|
this.notificationTarget.classList.remove("translate-x-0", "opacity-100");
|
|
// 2. Neuen Endpunkt hinzufügen (löst die Animation aus)
|
|
this.notificationTarget.classList.add("translate-x-full", "opacity-20");
|
|
|
|
// Fügt Klassen für Deckkraft (0) und minimale Skalierung hinzu
|
|
// 1. Den Startwert (voll sichtbar) entfernen
|
|
//this.notificationTarget.classList.remove("opacity-100");
|
|
// 2. Den Endwert (vollständig transparent) hinzufügen -> startet das Verblassen
|
|
//this.notificationTarget.classList.add("opacity-0", "scale-95");
|
|
|
|
// 2. Nach dem Ende der CSS-Animation (300ms) das Element komplett aus dem DOM löschen
|
|
setTimeout(() => {
|
|
this.element.remove();
|
|
}, 300);
|
|
}
|
|
}
|