OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 38 LINES
 
[ HISTORY ]  [ UP ]
 

---
// Fixed-corner toast region. Fire with window.ooknetToast(message,
// variant) or a "ooknet:toast" CustomEvent; frames are built
// client-side by the same tested builder.
import "./Toast.scss";
---
<div class="toast-region" aria-live="polite"></div>
<script>
  import { buildToast } from "./Toast";
  import type { StatusVariant } from "../Status/Status";

  const region = document.querySelector(".toast-region")!;

  function toast(message: string, variant: StatusVariant = "ok") {
    const el = document.createElement("div");
    el.className = "toast";

    const pre = document.createElement("pre");
    pre.className = "ascii toast-frame";
    pre.setAttribute("aria-hidden", "true");
    pre.textContent = buildToast(message, variant);

    const sr = document.createElement("span");
    sr.className = "sr-only";
    sr.textContent = message;

    el.append(pre, sr);
    region.append(el);
    setTimeout(() => el.remove(), 2600);
  }

  window.ooknetToast = toast;
  document.addEventListener("ooknet:toast", (e) => {
    const d = (e as CustomEvent).detail ?? {};
    if (d.message) toast(String(d.message), d.variant);
  });
</script>


---
// Fixed-corner toast region. Fire with wind
ow.ooknetToast(message,
// variant) or a "ooknet:toast" CustomEvent;
 frames are built
// client-side by the same tested builder.
import "./Toast.scss";
---
<div class="toast-region" aria-live="polite"
></div>
<script>
  import { buildToast } from "./Toast";
  import type { StatusVariant } from "../Sta
tus/Status";

  const region = document.querySelector(".to
ast-region")!;

  function toast(message: string, variant: S
tatusVariant = "ok") {
    const el = document.createElement("div")
;
    el.className = "toast";

    const pre = document.createElement("pre"
);
    pre.className = "ascii toast-frame";
    pre.setAttribute("aria-hidden", "true");
    pre.textContent = buildToast(message, va
riant);

    const sr = document.createElement("span"
);
    sr.className = "sr-only";
    sr.textContent = message;

    el.append(pre, sr);
    region.append(el);
    setTimeout(() => el.remove(), 2600);
  }

  window.ooknetToast = toast;
  document.addEventListener("ooknet:toast", 
(e) => {
    const d = (e as CustomEvent).detail ?? {
};
    if (d.message) toast(String(d.message), 
d.variant);
  });
</script>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET