Dialog

Example of a sheet dialog that slides in from the right side of the screen.

Demo

open

close

JavaScript

import {
  Simulator,
  GateConditionalVector,
  Kinetics,
  OffsetPosition,
  SpringEngine,
} from "@yyyoichi/chrono-kinesis";
import {
  DialogGateClock,
  DialogSilentClosePhysics,
  ElementPhysics,
  ElementRect,
} from "@yyyoichi/chrono-kinesis/dom";
const simulation = new Simulator({ fixedStepSec: 1 / 20 });

const dialogEl = document.getElementById(
  "sheet-dialog",
)! as HTMLDialogElement;
const dialogGateClock = new DialogGateClock(dialogEl, {
  type: "modal",
  closedby: "any",
});
const dialogRect = new ElementRect(dialogEl);

simulation.add({
  clock: dialogGateClock,
  target: new GateConditionalVector(
    dialogGateClock,
    new OffsetPosition(dialogRect, -300),
    dialogRect,
  ),
  kinetics: new Kinetics(dialogRect.position(), {
    engine: new SpringEngine({ settleMs: 400, zeta: 0.7 }),
  }),
  physics: [
    new ElementPhysics(dialogEl),
    new DialogSilentClosePhysics(dialogGateClock, {
      stopThreshold: 80,
    }),
  ],
});

// add Event

const openEvent = () => dialogGateClock.open();
// 直接close()しない点に注意。requestClose()は状態のみCloseする。
const closeEvent = () => dialogGateClock.requestClose();
const openButton = document.getElementById("sheet-dialog-open-button")!;
const closeButton = document.getElementById("sheet-dialog-close-button")!;
openButton.addEventListener("click", openEvent);
closeButton.addEventListener("click", closeEvent);
simulation.run();

window.addEventListener("beforeunload", () => {
  openButton.removeEventListener("click", openEvent);
  closeButton.removeEventListener("click", closeEvent);
  simulation.destroy();
});

HTML

<div >
  <button type="button" id="sheet-dialog-open-button">open</button>
  <dialog id="sheet-dialog">
    <button type="button" id="sheet-dialog-close-button">close</button>
  </dialog>
</div>

<style>
  #sheet-dialog {
    top: 0;
    left: 100vw;
    width: 300px;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    background-color: cadetblue;
  }
  #sheet-dialog::backdrop {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
</style>

Astro File

---
type Props = Omit<astroHTML.JSX.HtmlHTMLAttributes, "id">;
---

<div {...Astro.props}>
  <button type="button" id="sheet-dialog-open-button">open</button>
  <dialog id="sheet-dialog">
    <button type="button" id="sheet-dialog-close-button">close</button>
  </dialog>
</div>

<style>
  #sheet-dialog {
    top: 0;
    left: 100vw;
    width: 300px;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    background-color: cadetblue;
  }
  #sheet-dialog::backdrop {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
</style>

<script>
  import {
    Simulator,
    GateConditionalVector,
    Kinetics,
    OffsetPosition,
    SpringEngine,
  } from "@yyyoichi/chrono-kinesis";
  import {
    DialogGateClock,
    DialogSilentClosePhysics,
    ElementPhysics,
    ElementRect,
  } from "@yyyoichi/chrono-kinesis/dom";
  const simulation = new Simulator({ fixedStepSec: 1 / 20 });

  const dialogEl = document.getElementById(
    "sheet-dialog",
  )! as HTMLDialogElement;
  const dialogGateClock = new DialogGateClock(dialogEl, {
    type: "modal",
    closedby: "any",
  });
  const dialogRect = new ElementRect(dialogEl);

  simulation.add({
    clock: dialogGateClock,
    target: new GateConditionalVector(
      dialogGateClock,
      new OffsetPosition(dialogRect, -300),
      dialogRect,
    ),
    kinetics: new Kinetics(dialogRect.position(), {
      engine: new SpringEngine({ settleMs: 400, zeta: 0.7 }),
    }),
    physics: [
      new ElementPhysics(dialogEl),
      new DialogSilentClosePhysics(dialogGateClock, {
        stopThreshold: 80,
      }),
    ],
  });

  // add Event

  const openEvent = () => dialogGateClock.open();
  // 直接close()しない点に注意。requestClose()は状態のみCloseする。
  const closeEvent = () => dialogGateClock.requestClose();
  const openButton = document.getElementById("sheet-dialog-open-button")!;
  const closeButton = document.getElementById("sheet-dialog-close-button")!;
  openButton.addEventListener("click", openEvent);
  closeButton.addEventListener("click", closeEvent);
  simulation.run();

  window.addEventListener("beforeunload", () => {
    openButton.removeEventListener("click", openEvent);
    closeButton.removeEventListener("click", closeEvent);
    simulation.destroy();
  });
</script>