Toast Notification Library

Hvad det er

Biblioteket er en ToastManager-klasse plus tynde globale funktioner: showToast, dismissToast, clearAllToasts og genveje som showToast.success(text, options). README bevidst uden npm - du linker toast.css og toast.js, og så kører det. Det matcher den live demo på statisk hosting.

Hver notifikation er et div.toast-item med indhold: en .toast-content-blok (ikon-span + tekstafsnit), en valgfri ×-lukknap og en valgfri .toast-timer-bjælke når duration er over nul og showTimerBar er true. Beholdere oprettes pr. hjørne (eller midten): .toast-container.top-right m.fl. monteres på document.body første gang den position bruges.

Der findes seks forudindstillinger - success, error, warning, info, reminder og custom - hver med gradient og emoji-ikon i typeConfig. Du kan tilsidesætte udseende pr. toast med customStyles (inline styles + valgfri ekstra klasse) eller ved at redigere toast.css for hele sitet.

• Nul nye runtime-afhængigheder ud over browserens DOM-APIer.
• Escape rydder alt; luk-knap kalder dismiss med stopPropagation så den ikke trigger “klik for link”.
• Højst fem toasts pr. position; den ældste fjernes før der kommer en ny.
• duration: 0 lader toasten stå til manuel luk (respekterer stadig close).
• role="alert", aria-live="polite" og tabindex="0" for hjælpeteknologi.

Sådan kalder du API'et

show fletter dit objekt med defaults: type info, position top-right, duration 3000 ms, close true, stopOnFocus true, newWindow true, showTimerBar true og et tomt customStyles-objekt. Det eneste krav er text; uden den logger biblioteket en fejl og returnerer null.

destination gør hele toasten klikbar: et klik åbner window.open med noopener/noreferrer når newWindow er true, ellers sættes window.location.href. Ikoner kommer fra customStyles.icon hvis sat, ellers fra typeConfig for typen, med en taleboble-fallback.

showToast({
  text: "Saved successfully",
  type: "success",
  position: "bottom-right",
  duration: 4000,
  close: true,
  stopOnFocus: true,
  showTimerBar: true,
  destination: "https://example.com/log",
  newWindow: false,
  customStyles: {
    borderRadius: "10px",
    customClass: "site-toast"
  }
});

// Shorthand helpers mirror the same options object
showToast.error("Network failed", { duration: 0, close: true });

Convenience-metoder er sukker: de spreader options og sætter type. Timer-logikken binder timeout i startTimer sammen med CSS-bredde-transition på .toast-timer, så bjælken krymper lineært over remainingTime; pauseTimer rydder timeout, fryser bredde, og resumeTimer genstarter både animation og timeout med den resterende tid.

Sådan er koden bygget

Ved konstruktion initialiserer ToastManager to Maps: toasts (numerisk id → { element, config, timer, … }) og containers (positionsnøgle → DOM-knode). init indsætter et link til toast.css hvis #toast-styles mangler, og lytter på keydown på document, så Escape kalder clearAll.

createToastElement bygger træet, sætter pause ved hover/fokus når stopOnFocus er true og duration er positiv, og monterer timerbjælken når den er ønsket. getContainer opretter lazy absolutely positioned flex-stakke med klassen toast-container og positionsnavnet. enforceMaxToasts fjerner den tidligste .toast-item i den stak før maxToasts overskrides.

// Merged config + lifecycle (conceptual excerpt)
const config = { ...this.defaults, ...options };
this.enforceMaxToasts(config.position);
const container = this.getContainer(config.position);
const toastElement = this.createToastElement(toastId, config);
container.appendChild(toastElement);
requestAnimationFrame(() => this.animateIn(toastElement, config.position));
if (config.duration > 0) this.startTimer(toastId);

// Published on window after load
const toastManager = new ToastManager();
window.showToast = (options) => toastManager.show(options);

Animationer er klasse-drevet: toast-enter / toast-enter-active (og from-left / from-center hvor det passer) styrer indgang; toast-exit / toast-exit-active plus retning to-* styrer 300 ms ud før knuden fjernes. applyCustomStyles mapper kendte nøgler fra customStyles til inline styles og kan tilføje customClass.

• dismiss rydder timeouts, afspiller animateOut, fjerner knuden og sletter tomme beholdere fra containers-mappet.
• Tastaturfokus inde i toasten deltager i pause/genoptag sammen med musehover.
• Timerens indre gradient er et separat lag for en diskret highlight over den krympende bjælke.

CSS og temaer

toast.css ejer layout, stacking, z-index og de transition-forudsætninger som JS skifter. Fordi typer udtrykkes som klasser på .toast-item (fx .toast-item.success), kan du omfarve presets uden at ændre JavaScript - sørg for samme specificitet som stylesheetet.

Til kampagner: brug customStyles til engangsændringer og globale overrides til design tokens (afstand, skygge, typografi). Hold positionsklasser synkron med showToast-strengene: top-left, top-right, bottom-left, bottom-right, center.

/* Stronger success colour sitewide */
.toast-item.success {
  background: linear-gradient(135deg, #059669, #047857);
}

/* Clickable toasts: pointer cursor comes from .clickable */
.toast-item.clickable {
  cursor: pointer;
}

/* Pause state during hover/focus (class added in JS) */
.toast-timer.paused {
  transition: none !important;
}

Prøv det og brug det

Den interaktive demo tester positioner, lange varigheder, stress-test og custom styling på én side - brug den som regressions-tjek når du forker eller ændrer styling.

Kilde og licens ligger på GitHub under GPL-3.0. Til produktion kan du overveje at fjerne omfattende console.log-kald, hvis din fork stadig har debug i createToastElement/startTimer.