veryroundbird.house
forked from
haetae.tngl.sh/fanfic-atproto
personal fork for experimenting
1---
2import Dialog from "./Dialog.astro";
3---
4<Dialog id="settings" title="User preferences">
5 <form id="user-settings">
6 <fieldset class="fieldset">
7 <label for="font-family">font family</label>
8 <select class="select" name="fontFamily" id="font-family">
9 <option value="default">choose...</option>
10 <option value="--font-serif">serif</option>
11 <option value="--font-mono">monospaced</option>
12 <option value="--font-sans">sans serif</option>
13 <option value="--font-dyslexic">dyslexic</option>
14 </select>
15 </fieldset>
16
17 <fieldset class="fieldset">
18 <label for="font-size">text size</label>
19 <input class="range" type="range" name="fontSize" id="font-size" min="-1" max="2" step="1" />
20 </fieldset>
21
22 <fieldset class="fieldset">
23 <label for="line-height">line height</label>
24 <input class="range" type="range" name="lineHeight" id="line-height" min="1" max="2" step="0.05" />
25 </fieldset>
26
27 <fieldset class="fieldset">
28 <label for="letter-spacing">letter spacing</label>
29 <input class="range" type="range" name="letterSpacing" id="letter-spacing" min="0" max="0.1" step="0.01" />
30 </fieldset>
31
32 <fieldset class="fieldset">
33 <label for="word-spacing">word spacing</label>
34 <input class="range" type="range" name="wordSpacing" id="word-spacing" min="0" max="0.5" step="0.01" />
35 </fieldset>
36
37 <div id="test-area" class="mt-4 text-(length:--size) leading-(--line-height) tracking-(--letter-spacing) line-clamp-4">
38 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores quae dolorum debitis vero nostrum nobis aspernatur ipsam sunt dolorem, eum ut corrupti unde commodi soluta natus repellendus totam animi adipisci.</p>
39 </div>
40
41 <div class="modal-action">
42 <button formmethod="dialog" value="default" class="btn btn-neutral">Cancel</button>
43 <button id="confirm-settings" class="btn btn-primary">Save</button>
44 </div>
45 </form>
46</Dialog>
47
48<style>
49 #test-area {
50 --step--1: clamp(0.6953rem, 0.5707rem + 0.554vw, 1rem);
51 --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
52 --step-1: clamp(1.5625rem, 1.9257rem + -0.4686vw, 1.8203rem);
53 --step-2: clamp(1.9531rem, 3.351rem + -1.8037vw, 2.9452rem);
54
55 --font: var(--font-sans);
56 --size: var(--step-0);
57 --letter-spacing: 0em;
58 --word-spacing: 0em;
59 --line-height: 1.5;
60
61 font-family: var(--font);
62 font-size: var(--size);
63 letter-spacing: var(--letter-spacing);
64 word-spacing: var(--word-spacing);
65 line-height: var(--line-height);
66 }
67</style>
68
69<script>
70 const form = document.forms.namedItem("user-settings");
71 const inputs = document.querySelectorAll("#user-settings :not(button, label, option)");
72 const submitter = document.getElementById("confirm-settings");
73 const test = document.getElementById("test-area");
74
75 form?.addEventListener("submit", (e) => {
76 const target = e.target as HTMLFormElement;
77 if (target.nodeValue === null) {
78 return;
79 } else {
80 e.preventDefault();
81 }
82 });
83
84 inputs.forEach((input) => {
85 (input as HTMLElement).addEventListener("change", (e) => {
86 const target = e.target as HTMLInputElement || HTMLSelectElement;
87 switch (target.name) {
88 case "fontFamily":
89 (target.value !== "default")
90 ? test?.style.setProperty("--font", `var(${target.value})`)
91 : test?.style.setProperty("--font", `var(--body)`);
92 break;
93 case "fontSize":
94 test?.style.setProperty("--size", `var(--step-${target.value})`);
95 break;
96 case "lineHeight":
97 test?.style.setProperty("--line-height", target.value);
98 break;
99 case "letterSpacing":
100 test?.style.setProperty("--letter-spacing", `${target.value}em`);
101 break;
102 case "wordSpacing":
103 test?.style.setProperty("--word-spacing", `${target.value}em`);
104 break;
105 default:
106 break;
107 }
108 });
109 });
110
111 submitter?.addEventListener("click", (e) => {
112 e.preventDefault();
113 const data = new FormData(form!);
114 console.table(data);
115 });
116</script>