hyperbook 0.33.2 → 0.34.0

package/dist/assets/side-drawer.js

@@ -0,0 +1,206 @@
+// @ts-check
+
+const style = `
+:host {
+  background-color: #ffffff;
+  width: 350px;
+  max-width: 75vw;
+  z-index: 10;
+}
+
+::slotted(*) {
+  box-sizing: border-box;
+}
+
+dialog {
+  all: unset;
+
+  width: inherit;
+  max-width: inherit;
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+
+  transform: translateX(-100%);
+  transition: var(
+    --side-drawer-transition,
+    transform 0.25s ease-out
+  );
+  visibility: hidden;
+}
+
+:host([right]) dialog {
+  left: unset;
+  right: 0;
+  transform: translateX(100%);
+}
+
+/* putting this here in case this is ever fixed:
+ https://github.com/whatwg/html/issues/7732 */
+dialog,
+dialog::backdrop {
+  overscroll-behavior: contain;
+}
+
+dialog:modal {
+  background-color: inherit;
+  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+dialog::backdrop {
+  background-color: #000;
+  backdrop-filter: var(--side-drawer-backdrop-filter, none);
+
+  opacity: 0;
+  transition: var(
+    --side-drawer-overlay-transition,
+    opacity linear 0.25s
+  );
+}
+
+dialog[open] {
+  visibility: visible;
+}
+
+:host([open]) dialog[open],
+:host([open]) dialog[open]::backdrop {
+    transition-delay: 0s;
+    transform: none;
+}
+
+:host([open]) dialog[open]::backdrop {
+    transition-delay: 0s;
+    opacity: var(--side-drawer-overlay-opacity, .7);
+}
+`;
+// NOTE: for some reason "transitionend" is never called if my CSS selector is
+// just "dialog[open]", which is why the selector has ":host([open])" at the beginning
+
+const template = `<dialog part="dialog"><slot></slot></dialog>`;
+
+// using a template so it only needs to be parsed once, whereas setting
+// innerHTML directly in the custom element ctor means the HTML would get parsed
+// for every custom element on the page
+const tmpl = document.createElement("template");
+tmpl.innerHTML = `<style>${style}</style>${template}`;
+
+/**
+ * A simple side drawer custom element
+ *
+ * @element side-drawer
+ *
+ * @fires open - Raised when the drawer is opened.
+ * @fires close - Raised when the drawer is closed.
+ *
+ * @attr {boolean} open - Add this attribute to open the drawer.
+ *
+ * @slot - The content to go inside the drawer (the default slot)
+ *
+ * @csspart dialog - The underlying <dialog> element.
+ */
+export class SideDrawer extends HTMLElement {
+  constructor() {
+    super();
+
+    const shadowRoot = this.attachShadow({ mode: "open" });
+    shadowRoot.appendChild(tmpl.content.cloneNode(true));
+
+    /**
+     * @internal
+     * @type {HTMLDialogElement}
+     */
+    this._dialog = shadowRoot.querySelector("dialog");
+  }
+
+  connectedCallback() {
+    this._dialog.addEventListener("click", (event) => {
+      if (event.target === this._dialog) {
+        this.open = false;
+      }
+    });
+
+    this._dialog.addEventListener("close", () => {
+      this.open = false;
+    });
+
+    this.upgradeProperty("open");
+  }
+
+  // from https://web.dev/custom-elements-best-practices/#make-properties-lazy
+  /**
+   * @param {string} prop
+   *
+   * @internal
+   */
+  upgradeProperty(prop) {
+    if (this.hasOwnProperty(prop)) {
+      let value = this[prop];
+      delete this[prop];
+      this[prop] = value;
+    }
+  }
+
+  get open() {
+    return this.hasAttribute("open");
+  }
+
+  set open(isOpen) {
+    if (isOpen) {
+      if (!this.hasAttribute("open")) {
+        this.setAttribute("open", "");
+      }
+    } else {
+      if (this.hasAttribute("open")) {
+        this.removeAttribute("open");
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["open"];
+  }
+
+  /**
+   * @param {string} name
+   * @param {unknown} _oldValue
+   * @param {unknown} _newValue
+   * @memberof WcMenuButton
+   */
+  attributeChangedCallback(name, _oldValue, _newValue) {
+    if (name === "open") {
+      // When the drawer is closed, update keyboard/screen reader behavior.
+      if (!this.open) {
+        this._dialog.addEventListener(
+          "transitionend",
+          () => {
+            this._dialog.close();
+          },
+          { once: true },
+        );
+
+        this.dispatchEvent(
+          new CustomEvent("close", {
+            bubbles: true,
+          }),
+        );
+      } else {
+        this._dialog.showModal();
+
+        this.dispatchEvent(
+          new CustomEvent("open", {
+            bubbles: true,
+          }),
+        );
+      }
+    }
+  }
+}
+
+customElements.define("side-drawer", SideDrawer);