-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpreferences.js
More file actions
73 lines (65 loc) · 2.33 KB
/
Copy pathpreferences.js
File metadata and controls
73 lines (65 loc) · 2.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
document.addEventListener("DOMContentLoaded", function () {
// Apply saved preferences immediately
var font = localStorage.getItem("pref-font") || "lexend";
var size = localStorage.getItem("pref-size") || "medium";
applyFont(font);
applySize(size);
// Build UI
var btn = document.createElement("button");
btn.id = "prefs-btn";
btn.textContent = "⚙️ Reading";
var panel = document.createElement("div");
panel.id = "prefs-panel";
panel.innerHTML =
'<label for="font-select">Font</label>' +
'<select id="font-select">' +
'<option value="lexend">Lexend Deca</option>' +
'<option value="opendyslexic">OpenDyslexic</option>' +
'<option value="atkinson">Atkinson Hyperlegible</option>' +
"</select>" +
"<label>Size</label>" +
'<div class="size-btns">' +
'<button data-size="small">A-</button>' +
'<button data-size="medium">A</button>' +
'<button data-size="large">A+</button>' +
"</div>" +
'<button id="prefs-close">Close</button>';
document.body.appendChild(btn);
document.body.appendChild(panel);
// Set initial control states
document.getElementById("font-select").value = font;
updateSizeBtns(size);
// Events
btn.addEventListener("click", function () {
panel.classList.toggle("open");
});
document.getElementById("prefs-close").addEventListener("click", function () {
panel.classList.remove("open");
});
document.getElementById("font-select").addEventListener("change", function (e) {
applyFont(e.target.value);
localStorage.setItem("pref-font", e.target.value);
});
panel.querySelectorAll(".size-btns button").forEach(function (b) {
b.addEventListener("click", function () {
var s = this.getAttribute("data-size");
applySize(s);
localStorage.setItem("pref-size", s);
updateSizeBtns(s);
});
});
function applyFont(f) {
document.body.classList.remove("font-lexend", "font-opendyslexic", "font-atkinson");
document.body.classList.add("font-" + f);
}
function applySize(s) {
document.body.classList.remove("font-small", "font-medium", "font-large");
document.body.classList.add("font-" + s);
}
function updateSizeBtns(s) {
var btns = panel.querySelectorAll(".size-btns button");
btns.forEach(function (b) {
b.classList.toggle("active", b.getAttribute("data-size") === s);
});
}
});