website: redesign part 8

website_next/utils/event.js

@@ -0,0 +1,16 @@
+/**
+ * @param {Event} event
+ * @param {string} selector
+ */
+export function getEventTarget(event, selector) {
+  return /** @type {HTMLElement | null} */ (
+    /** @type {HTMLElement} */ (event.target).closest(selector)
+  );
+}
+
+/** @param {Event} event */
+export function getEventAnchor(event) {
+  return /** @type {HTMLAnchorElement | null} */ (
+    getEventTarget(event, "a[href]")
+  );
+}

website_next/utils/id.js

@@ -0,0 +1,4 @@
+/** @param {string} value */
+export function createId(value) {
+  return value.toLowerCase().replaceAll(" ", "-");
+}

website_next/utils/timing.js

@@ -1,15 +0,0 @@
-/** @param {number} ms */
-export function wait(ms) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-}
-
-/** @param {string} name */
-export function readCssDuration(name) {
-  const value = getComputedStyle(document.documentElement)
-    .getPropertyValue(name)
-    .trim();
-
-  return Number.parseFloat(value) * (value.endsWith("ms") ? 1 : 1000);
-}

website_next/utils/transition.js

@@ -0,0 +1,47 @@
+let transitionId = 0;
+
+/** @param {number} ms */
+function wait(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+/** @param {string} name */
+function readCssDuration(name) {
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+
+  return Number.parseFloat(value) * (value.endsWith("ms") ? 1 : 1000);
+}
+
+function waitForTransition() {
+  return wait(readCssDuration("--transition-duration"));
+}
+
+function waitForReveal() {
+  return wait(readCssDuration("--reveal-duration"));
+}
+
+/** @param {() => void} render */
+export async function transitionPage(render) {
+  const id = ++transitionId;
+  document.documentElement.dataset.transition = "";
+  await waitForTransition();
+  if (id !== transitionId) return;
+
+  render();
+
+  requestAnimationFrame(() => {
+    if (id === transitionId) delete document.documentElement.dataset.transition;
+  });
+}
+
+export async function revealPage() {
+  await waitForTransition();
+  delete document.documentElement.dataset.loading;
+  document.documentElement.dataset.revealing = "";
+  await waitForReveal();
+  delete document.documentElement.dataset.revealing;
+}