39b95c2ede
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
// Applies a stored reduced-motion override as a `data-motion="reduce"|
|
|
// "allow"` attribute on `<html>`, cleared when the override is "system"
|
|
// (letting `prefers-reduced-motion` alone decide). Ported from swarm-ui
|
|
// verbatim, only the storage key is now caller-supplied instead of a
|
|
// module constant — see `theme-apply.ts`'s file comment for why.
|
|
//
|
|
// A consumer's CSS gates an animation with the three-rule shape this
|
|
// was built for:
|
|
// @media (prefers-reduced-motion: reduce) { ... }
|
|
// :root[data-motion='reduce'] { ... same rule ... }
|
|
// :root[data-motion='allow'] { /* opt back in despite OS-level reduce */ }
|
|
// (see swarm-ui's `shell/Shell.css` file-top comment for a worked
|
|
// example). A page with no motion-gated animation yet can still mount
|
|
// this — the attribute is simply inert until something reads it.
|
|
import { useEffect } from "preact/hooks";
|
|
import { useLocalSetting } from "./settings-storage.js";
|
|
|
|
export type MotionOverride = "system" | "reduce" | "allow";
|
|
|
|
export function useMotionOverride(
|
|
key: string,
|
|
fallback: MotionOverride = "system",
|
|
) {
|
|
return useLocalSetting<MotionOverride>(key, fallback);
|
|
}
|
|
|
|
// Mounted once alongside `useApplyThemeOverride` — same single-mount-
|
|
// point rationale.
|
|
export function useApplyMotionOverride(
|
|
key: string,
|
|
fallback: MotionOverride = "system",
|
|
): void {
|
|
const [override] = useMotionOverride(key, fallback);
|
|
useEffect(() => {
|
|
const root = document.documentElement;
|
|
if (override === "system") {
|
|
delete root.dataset.motion;
|
|
} else {
|
|
root.dataset.motion = override;
|
|
}
|
|
}, [override]);
|
|
}
|