veryroundbird.house
forked from
haetae.tngl.sh/fanfic-atproto
personal fork for experimenting
1<div id="settings">
2 <form id="user-settings">
3 <label for="font-family">font family</label>
4 <select name="fontFamily" id="font-family">
5 <option value="default">choose...</option>
6 <option value="--serif">serif</option>
7 <option value="--mono">monospaced</option>
8 <option value="--sans-serif">sans serif</option>
9 <option value="--dyslexia">dyslexic</option>
10 </select>
11
12 <label for="font-size">text size</label>
13 <input type="range" name="fontSize" id="font-size" min="-1" max="2" step="1" />
14
15 <label for="line-height">line height</label>
16 <input type="range" name="lineHeight" id="line-height" min="1" max="2" step="0.05" />
17
18 <label for="letter-spacing">letter spacing</label>
19 <input type="range" name="letterSpacing" id="letter-spacing" min="0" max="0.1" step="0.01" />
20
21 <label for="word-spacing">word spacing</label>
22 <input type="range" name="wordSpacing" id="word-spacing" min="0" max="0.5" step="0.01" />
23
24 <div id="test-area">
25 <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>
26 </div>
27
28 <button id="confirm-settings">save</button>
29 </form>
30</div>
31
32<style>
33 #test-area {
34 --font: var(--body);
35 --size: var(--step-0);
36 --letter-spacing: 0em;
37 --word-spacing: 0em;
38 --line-height: 1.5;
39
40 font-family: var(--font);
41 font-size: var(--size);
42 letter-spacing: var(--letter-spacing);
43 word-spacing: var(--word-spacing);
44 line-height: var(--line-height);
45 }
46</style>
47
48<script>
49 const form = document.forms.namedItem("user-settings");
50 const inputs = document.querySelectorAll("#user-settings :not(button, label, option)");
51 const submitter = document.getElementById("confirm-settings");
52 const test = document.getElementById("test-area");
53
54 form?.addEventListener("submit", (e) => {
55 e.preventDefault();
56 });
57
58 inputs.forEach((input) => {
59 (input as HTMLElement).addEventListener("change", (e) => {
60 const target = e.target as HTMLInputElement || HTMLSelectElement;
61 switch (target.name) {
62 case "fontFamily":
63 (target.value !== "default")
64 ? test?.style.setProperty("--font", `var(${target.value})`)
65 : test?.style.setProperty("--font", `var(--body)`);
66 break;
67 case "fontSize":
68 test?.style.setProperty("--size", `var(--step-${target.value})`);
69 break;
70 case "lineHeight":
71 test?.style.setProperty("--line-height", target.value);
72 break;
73 case "letterSpacing":
74 test?.style.setProperty("--letter-spacing", `${target.value}em`);
75 break;
76 case "wordSpacing":
77 test?.style.setProperty("--word-spacing", `${target.value}em`);
78 break;
79 default:
80 break;
81 }
82 });
83 });
84
85 submitter?.addEventListener("click", (e) => {
86 e.preventDefault();
87 const data = new FormData(form!);
88 console.table(data);
89 });
90</script>