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

---
// Native <dialog> in a double-line frame. Renders once at the mobile
// width so it fits any viewport. Open with any element carrying
// data-dialog-open="<id>"; [ CLOSE ] and Esc dismiss it.
import Pre from "../Pre/Pre.astro";
import Button from "../Button/Button.astro";
import { MOBILE_FRAME_W } from "../../lib/config";
import { buildDialogTop, buildDialogBottom, type Props } from "./Dialog";
import "./Dialog.scss";

const { id, title, width = MOBILE_FRAME_W } = Astro.props as Props;
---
<dialog class="dialog" id={id} aria-label={title}>
  <Pre>{buildDialogTop(title, width)}</Pre>
  <div class="dialog-body">
    <slot />
  </div>
  <div class="dialog-footer"><span data-dialog-close><Button label="CLOSE" /></spa
n></div>
  <Pre>{buildDialogBottom(width)}</Pre>
</dialog>

<script>
  document.addEventListener("click", (e) => {
    const target = e.target as HTMLElement;

    const opener = target.closest<HTMLElement>("[data-dialog-open]");
    if (opener) {
      document.querySelector<HTMLDialogElement>(`#${opener.dataset.dialogOpen}`)?.
showModal();
      return;
    }

    const closer = target.closest<HTMLElement>("[data-dialog-close]");
    if (closer) closer.closest("dialog")?.close();
  });
</script>


---
// Native <dialog> in a double-line frame. R
enders once at the mobile
// width so it fits any viewport. Open with 
any element carrying
// data-dialog-open="<id>"; [ CLOSE ] and Es
c dismiss it.
import Pre from "../Pre/Pre.astro";
import Button from "../Button/Button.astro";
import { MOBILE_FRAME_W } from "../../lib/co
nfig";
import { buildDialogTop, buildDialogBottom, 
type Props } from "./Dialog";
import "./Dialog.scss";

const { id, title, width = MOBILE_FRAME_W } 
= Astro.props as Props;
---
<dialog class="dialog" id={id} aria-label={t
itle}>
  <Pre>{buildDialogTop(title, width)}</Pre>
  <div class="dialog-body">
    <slot />
  </div>
  <div class="dialog-footer"><span data-dial
og-close><Button label="CLOSE" /></span></di
v>
  <Pre>{buildDialogBottom(width)}</Pre>
</dialog>

<script>
  document.addEventListener("click", (e) => 
{
    const target = e.target as HTMLElement;

    const opener = target.closest<HTMLElemen
t>("[data-dialog-open]");
    if (opener) {
      document.querySelector<HTMLDialogEleme
nt>(`#${opener.dataset.dialogOpen}`)?.showMo
dal();
      return;
    }

    const closer = target.closest<HTMLElemen
t>("[data-dialog-close]");
    if (closer) closer.closest("dialog")?.cl
ose();
  });
</script>

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