my-accessibility-widget
Version:
Accessibility widget untuk web (font resize, reading mask, dsb).
465 lines (462 loc) • 20.4 kB
JavaScript
const oe = `<!DOCTYPE html>\r
<html lang="en">\r
<head>\r
<meta charset="UTF-8" />\r
<meta name="viewport" content="width=device-width, initial-scale=1.0" />\r
<title>Accessibility Widget</title>\r
<link rel="stylesheet" href="./widget.css" />\r
</head>\r
<body>\r
<!-- Floating Button -->\r
<button\r
id="accessibility-toggle"\r
class="accessibility-fab bg-black-aceesibility"\r
>\r
<svg\r
width="24"\r
height="24"\r
viewBox="0 0 24 24"\r
fill="none"\r
xmlns="http://www.w3.org/2000/svg"\r
>\r
<path\r
d="M12.4575 14.0572V9.02866M12.4575 14.0572H11.0861M12.4575 14.0572L15.2004 20.0001M12.4575 9.02866H11.0861M12.4575 9.02866L13.7381 8.81523C14.7101 8.65322 15.6618 8.38692 16.5768 8.02094L17.4861 7.65723M11.0861 14.0572V9.02866M11.0861 14.0572L7.88608 20.0001M11.0861 9.02866L9.97052 8.84273C8.89172 8.66293 7.84586 8.32283 6.86764 7.83372L6.51465 7.65723"\r
stroke="white"\r
stroke-width="2.3"\r
stroke-linecap="round"\r
stroke-linejoin="round"\r
/>\r
<path\r
d="M12.7309 4.91429C12.7309 5.41923 12.3216 5.82857 11.8166 5.82857C11.3117 5.82857 10.9023 5.41923 10.9023 4.91429C10.9023 4.40934 11.3117 4 11.8166 4C12.3216 4 12.7309 4.40934 12.7309 4.91429Z"\r
fill="white"\r
stroke="white"\r
stroke-width="2.3"\r
stroke-linecap="round"\r
stroke-linejoin="round"\r
/>\r
</svg>\r
</button>\r
\r
<!-- Panel -->\r
<div id="accessibility-panel" class="accessibility-panel hidden">\r
<div class="container-button-drag">\r
<h3>accesibility</h3>\r
<button id="drag" class="button bg-black-aceesibility button-drag-text">\r
klik drag\r
</button>\r
</div>\r
\r
<div class="container-main-panel">\r
<!-- Font Size -->\r
<div class="containerbutton">\r
<div class="font-size-control">\r
<p class="feature-info-title">Font Size</p>\r
<div class="font-buttons">\r
<button class="button bg-black-aceesibility" id="decrease-font">\r
-\r
</button>\r
<button class="button bg-black-aceesibility" id="increase-font">\r
+\r
</button>\r
</div>\r
</div>\r
</div>\r
\r
<!-- ADHD -->\r
<div class="containerbutton">\r
<label class="feature-toggle">\r
<div class="feature-info">\r
<p class="feature-info-title">ADHD</p>\r
<p class="feature-info-desc">\r
Membantu fokus dengan tampilan lebih teratur\r
</p>\r
</div>\r
<div class="switch-wrapper">\r
<input\r
type="checkbox"\r
id="toggle-adhd-checkbox"\r
class="switch-input"\r
/>\r
<span class="switch-slider"></span>\r
</div>\r
</label>\r
</div>\r
\r
<!-- Epilepsi -->\r
<div class="containerbutton">\r
<label class="feature-toggle">\r
<div class="feature-info">\r
<p class="feature-info-title">Epilepsi</p>\r
<p class="feature-info-desc">Kurangi efek visual berlebihan</p>\r
</div>\r
<div class="switch-wrapper">\r
<input\r
type="checkbox"\r
id="toggle-epilepsi-checkbox"\r
class="switch-input"\r
/>\r
<span class="switch-slider"></span>\r
</div>\r
</label>\r
</div>\r
\r
<!-- Reading Mask -->\r
<div class="containerbutton">\r
<label class="feature-toggle">\r
<div class="feature-info">\r
<p class="feature-info-title">Reading Mask</p>\r
<p class="feature-info-desc">\r
Fokus hanya pada teks yang sedang dibaca\r
</p>\r
</div>\r
<div class="switch-wrapper">\r
<input\r
type="checkbox"\r
id="toggle-reading-mask-checkbox"\r
class="switch-input"\r
/>\r
<span class="switch-slider"></span>\r
</div>\r
</label>\r
</div>\r
\r
<!-- Stop Animation -->\r
<div class="containerbutton">\r
<label class="feature-toggle">\r
<div class="feature-info">\r
<p class="feature-info-title">Stop Animation</p>\r
<p class="feature-info-desc">\r
Hentikan animasi agar lebih nyaman\r
</p>\r
</div>\r
<div class="switch-wrapper">\r
<input\r
type="checkbox"\r
id="stop-animation-checkbox"\r
class="switch-input"\r
/>\r
<span class="switch-slider"></span>\r
</div>\r
</label>\r
</div>\r
\r
<!-- High Saturation -->\r
<div class="containerbutton">\r
<label class="feature-toggle">\r
<div class="feature-info">\r
<p class="feature-info-title">High Saturation</p>\r
<p class="feature-info-desc">Warna lebih tajam & kontras</p>\r
</div>\r
<div class="switch-wrapper">\r
<input\r
type="checkbox"\r
id="toggle-high-saturation-checkbox"\r
class="switch-input"\r
/>\r
<span class="switch-slider"></span>\r
</div>\r
</label>\r
</div>\r
\r
<!-- Low Saturation -->\r
<div class="containerbutton">\r
<label class="feature-toggle">\r
<div class="feature-info">\r
<p class="feature-info-title">Low Saturation</p>\r
<p class="feature-info-desc">Warna lebih lembut & redup</p>\r
</div>\r
<div class="switch-wrapper">\r
<input\r
type="checkbox"\r
id="toggle-low-saturation-checkbox"\r
class="switch-input"\r
/>\r
<span class="switch-slider"></span>\r
</div>\r
</label>\r
</div>\r
</div>\r
\r
<button class="reset-btn bg-black-aceesibility" id="reset-accessibility">\r
Reset\r
</button>\r
</div>\r
\r
<div id="reading_mask" class="reading_mask"></div>\r
</body>\r
</html>\r
`, E = "accessibility-font-scale";
function w(i) {
document.body.style.fontSize = i + "%", localStorage.setItem(E, String(i));
}
function re() {
let t = parseInt(localStorage.getItem(E) || "100", 10) + 10;
w(t);
}
function le() {
let i = parseInt(localStorage.getItem(E) || "100", 10), t = Math.max(50, i - 10);
w(t);
}
function se() {
const i = localStorage.getItem(E);
w(i ? parseInt(i, 10) : 100);
}
function ce() {
w(100);
}
function v() {
const i = document.getElementById("reading_mask");
if (!i) return;
i.style.display = "block";
const t = (a) => {
const p = a.clientY - 50, u = a.clientY + 100 / 2;
i.style.clipPath = `polygon(
0 0,
100% 0,
100% ${p}px,
0 ${p}px,
0 ${u}px,
100% ${u}px,
100% 100%,
0 100%
)`;
};
document.addEventListener("mousemove", t), i._onMouseMove = t;
}
function k() {
const i = document.getElementById("reading_mask");
i && (i.style.display = "none", document.removeEventListener("mousemove", () => {
}));
}
function C(i, t) {
let a = document.getElementById(i);
a || (a = document.createElement("style"), a.id = i, document.head.appendChild(a)), a.innerHTML = t;
}
function y(i) {
const t = document.getElementById(i);
t && t.remove();
}
let L = !1;
function d() {
L || (C(
"stop-animations-style",
`
* {
animation: none !important;
transition: none !important;
}
`
), L = !0, localStorage.setItem("stop-animation", "true"));
}
function m() {
y("stop-animations-style"), L = !1, localStorage.setItem("stop-animation", "false");
}
function pe() {
localStorage.getItem("stop-animation") === "true" ? d() : m();
}
function ge() {
y("stop-animations-style"), L = !1, localStorage.removeItem("stop-animation");
}
let b = !1;
function h() {
b || (C(
"high-saturation-style",
`
html,p,button, a, img, video, h1, h2, h3, li {
filter: saturate(200%) !important;
-webkit-backdrop-filter: saturate(5);
backdrop-filter: saturate(5);
}
`
), b = !0, localStorage.setItem("high-saturation", "true"));
}
function f() {
y("high-saturation-style"), b = !1, localStorage.setItem("high-saturation", "false");
}
function ue() {
localStorage.getItem("high-saturation") === "true" ? (b = !0, h()) : (b = !1, f());
}
function me() {
y("high-saturation-style"), b = !1, localStorage.removeItem("high-saturation");
}
let S = !1;
function x() {
S || (C(
"high-saturation-style",
`
html,p,button, a, img, video, h1, h2, h3, li {
filter: saturate(50%) !important;
-webkit-backdrop-filter: saturate(.75);
backdrop-filter: saturate(.75);
}
`
), S = !0, localStorage.setItem("high-saturation", "true"));
}
function O() {
y("high-saturation-style"), S = !1, localStorage.setItem("high-saturation", "false");
}
function de() {
localStorage.getItem("high-saturation") === "true" ? (S = !0, x()) : (S = !1, O());
}
function he() {
y("high-saturation-style"), S = !1, localStorage.removeItem("high-saturation");
}
function fe(i = document.body) {
var R, W, P, j, z, _, $, N, X, J, K, V, U, Z, G, Q;
const t = document.createElement("div");
t.innerHTML = oe, i.appendChild(t);
const a = t.querySelector(
"#accessibility-toggle"
), o = t.querySelector("#accessibility-panel"), p = o.querySelector("#drag");
function u() {
const n = localStorage.getItem("reading-mask") === "true", r = localStorage.getItem("stop-animation") === "true", l = localStorage.getItem("high-saturation") === "true";
n && r && l ? (localStorage.setItem("adhd-mode", "true"), e("toggle-adhd", !0)) : (localStorage.setItem("adhd-mode", "false"), e("toggle-adhd", !1));
}
function M() {
const n = localStorage.getItem("stop-animation") === "true", r = localStorage.getItem("low-saturation") === "true";
n && r ? (localStorage.setItem("epilepsi", "true"), e("toggle-epilepsi", !0), e("toggle-epilepsi-checkbox", !0)) : (localStorage.setItem("epilepsi", "false"), e("toggle-epilepsi", !1), e("toggle-epilepsi-checkbox", !1));
}
function H() {
return window.innerWidth <= 767 ? "mobile" : window.innerWidth <= 1023 ? "tablet" : "desktop";
}
function e(n, r) {
const l = t.querySelector(
`
);
l && (l.checked = r);
}
localStorage.getItem("epilepsi") === "true" && (d(), e("stop-animation", !0), x(), e("toggle-low-saturation", !0)), se(), ue(), localStorage.getItem("high-saturation") === "true" && e("toggle-high-saturation", !0), de(), localStorage.getItem("low-saturation") === "true" && e("toggle-low-saturation", !0), localStorage.getItem("stop-animation") === "true" && (d(), e("stop-animation", !0)), localStorage.getItem("reading-mask") === "true" ? (v(), e("toggle-reading-mask", !0)) : k(), localStorage.getItem("adhd-mode") === "true" ? (v(), d(), h(), e("toggle-adhd", !0), e("toggle-reading-mask", !0), e("stop-animation", !0), e("toggle-high-saturation", !0), e("toggle-Low-saturation", !0)) : (localStorage.getItem("reading-mask") === "true" ? (v(), e("toggle-reading-mask", !0)) : k(), localStorage.getItem("stop-animation") === "true" ? (d(), e("stop-animation", !0)) : m(), localStorage.getItem("high-saturation") === "true" ? (h(), e("toggle-high-saturation", !0)) : f(), localStorage.getItem("Low-saturation") === "true" ? (h(), e("toggle-Low-saturation", !0)) : f());
function ee() {
let n = !1;
if (H() !== "mobile") {
const r = JSON.parse(
localStorage.getItem("accessibility-btn") || "null"
), l = JSON.parse(
localStorage.getItem("accessibility-panel") || "null"
);
r && (a.style.top = r.top, a.style.right = r.right || "10px", a.style.left = "auto", a.style.position = "fixed", n = !0), l && (o.style.left = l.left || "20px", o.style.top = l.top || "20px", o.style.right = "auto", o.style.position = "fixed", n = !0);
}
n || (a.style.top = "50%", a.style.right = "10px", a.style.left = "auto", a.style.position = "fixed", o.style.left = "20px", o.style.top = "20px", o.style.right = "auto", o.style.position = "fixed", q());
}
function q() {
const n = H();
n === "mobile" ? Object.assign(o.style, {
width: "100%",
height: "60vh",
left: "0px",
right: "0px",
bottom: "0px",
top: "auto"
}) : n === "tablet" ? Object.assign(o.style, {
width: "70vh",
height: "400px",
left: "20px",
// panel kiri
right: "auto",
top: "20px"
}) : Object.assign(o.style, {
width: "450px",
height: "500px",
left: "20px",
// panel kiri
right: "auto",
top: "20px"
}), o.style.position = "fixed";
}
a.addEventListener("click", () => {
o.classList.toggle("hidden");
});
function A() {
const n = localStorage.getItem("adhd-mode") === "true", r = localStorage.getItem("epilepsi") === "true";
n ? (k(), f(), r || m(), localStorage.removeItem("adhd-mode"), localStorage.removeItem("reading-mask"), localStorage.removeItem("high-saturation"), e("toggle-adhd", !1), e("toggle-reading-mask", !1), e("toggle-high-saturation", !1)) : (r && D(), v(), d(), h(), localStorage.setItem("adhd-mode", "true"), localStorage.setItem("reading-mask", "true"), localStorage.setItem("stop-animation", "true"), localStorage.setItem("high-saturation", "true"), e("toggle-adhd", !0), e("toggle-reading-mask", !0), e("stop-animation", !0), e("toggle-high-saturation", !0));
}
function D() {
const n = localStorage.getItem("epilepsi") === "true", r = localStorage.getItem("adhd-mode") === "true";
n ? (localStorage.removeItem("epilepsi"), localStorage.removeItem("low-saturation"), e("toggle-epilepsi", !1), e("toggle-epilepsi-checkbox", !1), e("stop-animation", !1), e("toggle-low-saturation", !1), r || m()) : (r && A(), localStorage.setItem("epilepsi", "true"), localStorage.setItem("stop-animation", "true"), localStorage.setItem("low-saturation", "true"), d(), x(), e("toggle-epilepsi", !0), e("toggle-epilepsi-checkbox", !0), e("stop-animation", !0), e("toggle-low-saturation", !0)), u(), M();
}
(R = t.querySelector("#toggle-adhd")) == null || R.addEventListener("click", A), (W = t.querySelector("#toggle-adhd-checkbox")) == null || W.addEventListener("change", A), (P = t.querySelector("#increase-font")) == null || P.addEventListener("click", re), (j = t.querySelector("#decrease-font")) == null || j.addEventListener("click", le);
function B() {
localStorage.getItem("reading-mask") === "true" ? (k(), localStorage.removeItem("reading-mask"), e("toggle-reading-mask", !1)) : (v(), localStorage.setItem("reading-mask", "true"), e("toggle-reading-mask", !0)), u();
}
(z = t.querySelector("#toggle-reading-mask")) == null || z.addEventListener("click", B), (_ = t.querySelector("#toggle-reading-mask-checkbox")) == null || _.addEventListener("change", B);
function F() {
localStorage.getItem("stop-animation") === "true" ? (m(), localStorage.removeItem("stop-animation"), e("stop-animation", !1)) : (d(), localStorage.setItem("stop-animation", "true"), e("stop-animation", !0)), u(), M();
}
($ = t.querySelector("#stop-animation")) == null || $.addEventListener("click", F), (N = t.querySelector("#stop-animation-checkbox")) == null || N.addEventListener("change", F);
function Y() {
localStorage.getItem("high-saturation") === "true" ? (f(), localStorage.removeItem("high-saturation"), e("toggle-high-saturation", !1)) : (h(), localStorage.setItem("high-saturation", "true"), e("toggle-high-saturation", !0)), u();
}
function T() {
localStorage.getItem("low-saturation") === "true" ? (O(), localStorage.removeItem("low-saturation"), e("toggle-low-saturation", !1)) : (x(), localStorage.setItem("low-saturation", "true"), e("toggle-low-saturation", !0)), u(), M();
}
(X = t.querySelector("#toggle-epilepsi")) == null || X.addEventListener("click", D), (J = t.querySelector("#toggle-epilepsi-checkbox")) == null || J.addEventListener("change", D), (K = t.querySelector("#toggle-low-saturation")) == null || K.addEventListener("click", T), (V = t.querySelector("#toggle-low-saturation-checkbox")) == null || V.addEventListener("change", T), (U = t.querySelector("#toggle-high-saturation")) == null || U.addEventListener("click", Y), (Z = t.querySelector("#toggle-high-saturation-checkbox")) == null || Z.addEventListener("change", Y), (G = t.querySelector("#toggle-Low-saturation-checkbox")) == null || G.addEventListener("change", Y), (Q = t.querySelector("#reset-accessibility")) == null || Q.addEventListener("click", () => {
ce(), k(), m(), ge(), f(), O(), a.style.top = "50%", a.style.right = "10px", a.style.left = "auto", a.style.position = "fixed", q(), e("toggle-adhd", !1), e("toggle-reading-mask", !1), e("stop-animation", !1), e("toggle-high-saturation", !1), e("toggle-low-saturation", !1), e("toggle-epilepsi", !1), localStorage.removeItem("accessibility-btn"), localStorage.removeItem("accessibility-panel"), localStorage.removeItem("accessibility-font-scale"), localStorage.removeItem("reading-mask"), localStorage.removeItem("stop-animation"), localStorage.removeItem("adhd-mode"), localStorage.removeItem("high-saturation"), localStorage.removeItem("low-saturation"), localStorage.removeItem("epilepsi"), localStorage.removeItem("high-saturation");
}), window.addEventListener("resize", q);
function te() {
let n = !1, r = 0, l = 0, s;
a.addEventListener("mousedown", (c) => {
s = window.setTimeout(() => {
n = !0, l = a.getBoundingClientRect().top, r = c.clientY - l, a.style.transition = "none";
}, 0);
}), document.addEventListener("mousemove", (c) => {
if (!n) return;
l = c.clientY - r;
const g = window.innerHeight - a.offsetHeight;
l = Math.max(0, Math.min(l, g)), a.style.top = l + "px", a.style.right = "10px", a.style.left = "auto", a.style.position = "fixed";
}), document.addEventListener("mouseup", () => {
clearTimeout(s), n && localStorage.setItem(
"accessibility-btn",
JSON.stringify({
top: a.style.top,
right: a.style.right
})
), n = !1, a.style.transition = "all 0.2s ease";
});
}
function ae() {
let n = !1, r = 0, l = 0, s = 0, c = 0;
p == null || p.addEventListener("mousedown", (g) => {
n = !0;
const I = o.getBoundingClientRect();
s = I.left, c = I.top, r = g.clientX - s, l = g.clientY - c, o.style.transition = "none", g.preventDefault();
}), document.addEventListener("mousemove", (g) => {
if (!n) return;
s = g.clientX - r, c = g.clientY - l;
const I = 200, ne = window.innerWidth - o.offsetWidth, ie = window.innerHeight - Math.max(o.offsetHeight, I);
s = Math.max(0, Math.min(s, ne)), c = Math.max(0, Math.min(c, ie)), o.style.left = s + "px", o.style.top = c + "px", o.style.position = "fixed";
}), document.addEventListener("mouseup", () => {
n && localStorage.setItem(
"accessibility-panel",
JSON.stringify({
left: o.style.left,
top: o.style.top,
width: o.style.width
})
), n = !1, o.style.transition = "all 0.2s ease";
});
}
H() !== "mobile" && (te(), ae()), ee();
}
export {
C as applyStyle,
le as decreaseFont,
f as disableHighSaturation,
O as disableLowSaturation,
k as disableReadingMask,
h as enableHighSaturation,
x as enableLowSaturation,
v as enableReadingMask,
re as increaseFont,
fe as initAccessibilityWidget,
y as removeStyle,
ge as resetAnimationState,
ce as resetFont,
me as resetHighSaturation,
he as resetLowSaturation,
m as restoreAnimation,
pe as restoreAnimationState,
se as restoreFont,
ue as restoreHighSaturation,
de as restoreLowSaturation,
d as stopAnimation
};