UNPKG

my-accessibility-widget

Version:

Accessibility widget untuk web (font resize, reading mask, dsb).

217 lines (214 loc) • 18.5 kB

JavaScript

(function(i,I){typeof exports=="object"&&typeof module<"u"?I(exports):typeof define=="function"&&define.amd?define(["exports"],I):(i=typeof globalThis<"u"?globalThis:i||self,I(i.AccessibilityWidget={}))})(this,function(i){"use strict";const I=`<!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 \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 \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 \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 \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 \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 \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 \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 \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 \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 x(o){document.body.style.fontSize=o+"%",localStorage.setItem(E,String(o))}function B(){let t=parseInt(localStorage.getItem(E)||"100",10)+10;x(t)}function R(){let o=parseInt(localStorage.getItem(E)||"100",10),t=Math.max(50,o-10);x(t)}function W(){const o=localStorage.getItem(E);x(o?parseInt(o,10):100)}function j(){x(100)}function S(){const o=document.getElementById("reading_mask");if(!o)return;o.style.display="block";const t=n=>{const w=n.clientY-50,m=n.clientY+100/2;o.style.clipPath=`polygon( 0 0, 100% 0, 100% ${w}px, 0 ${w}px, 0 ${m}px, 100% ${m}px, 100% 100%, 0 100% )`};document.addEventListener("mousemove",t),o._onMouseMove=t}function y(){const o=document.getElementById("reading_mask");o&&(o.style.display="none",document.removeEventListener("mousemove",()=>{}))}function M(o,t){let n=document.getElementById(o);n||(n=document.createElement("style"),n.id=o,document.head.appendChild(n)),n.innerHTML=t}function p(o){const t=document.getElementById(o);t&&t.remove()}let H=!1;function u(){H||(M("stop-animations-style",` * { animation: none !important; transition: none !important; } `),H=!0,localStorage.setItem("stop-animation","true"))}function h(){p("stop-animations-style"),H=!1,localStorage.setItem("stop-animation","false")}function ce(){localStorage.getItem("stop-animation")==="true"?u():h()}function P(){p("stop-animations-style"),H=!1,localStorage.removeItem("stop-animation")}let v=!1;function f(){v||(M("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); } `),v=!0,localStorage.setItem("high-saturation","true"))}function b(){p("high-saturation-style"),v=!1,localStorage.setItem("high-saturation","false")}function z(){localStorage.getItem("high-saturation")==="true"?(v=!0,f()):(v=!1,b())}function ge(){p("high-saturation-style"),v=!1,localStorage.removeItem("high-saturation")}let k=!1;function L(){k||(M("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); } `),k=!0,localStorage.setItem("high-saturation","true"))}function A(){p("high-saturation-style"),k=!1,localStorage.setItem("high-saturation","false")}function _(){localStorage.getItem("high-saturation")==="true"?(k=!0,L()):(k=!1,A())}function ue(){p("high-saturation-style"),k=!1,localStorage.removeItem("high-saturation")}function de(o=document.body){var J,K,V,U,Z,G,Q,ee,te,ne,ae,ie,oe,re,le,se;const t=document.createElement("div");t.innerHTML=I,o.appendChild(t);const n=t.querySelector("#accessibility-toggle"),r=t.querySelector("#accessibility-panel"),w=r.querySelector("#drag");function m(){const a=localStorage.getItem("reading-mask")==="true",l=localStorage.getItem("stop-animation")==="true",s=localStorage.getItem("high-saturation")==="true";a&&l&&s?(localStorage.setItem("adhd-mode","true"),e("toggle-adhd",!0)):(localStorage.setItem("adhd-mode","false"),e("toggle-adhd",!1))}function D(){const a=localStorage.getItem("stop-animation")==="true",l=localStorage.getItem("low-saturation")==="true";a&&l?(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 F(){return window.innerWidth<=767?"mobile":window.innerWidth<=1023?"tablet":"desktop"}function e(a,l){const s=t.querySelector(`#${a}-checkbox`);s&&(s.checked=l)}localStorage.getItem("epilepsi")==="true"&&(u(),e("stop-animation",!0),L(),e("toggle-low-saturation",!0)),W(),z(),localStorage.getItem("high-saturation")==="true"&&e("toggle-high-saturation",!0),_(),localStorage.getItem("low-saturation")==="true"&&e("toggle-low-saturation",!0),localStorage.getItem("stop-animation")==="true"&&(u(),e("stop-animation",!0)),localStorage.getItem("reading-mask")==="true"?(S(),e("toggle-reading-mask",!0)):y(),localStorage.getItem("adhd-mode")==="true"?(S(),u(),f(),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"?(S(),e("toggle-reading-mask",!0)):y(),localStorage.getItem("stop-animation")==="true"?(u(),e("stop-animation",!0)):h(),localStorage.getItem("high-saturation")==="true"?(f(),e("toggle-high-saturation",!0)):b(),localStorage.getItem("Low-saturation")==="true"?(f(),e("toggle-Low-saturation",!0)):b());function me(){let a=!1;if(F()!=="mobile"){const l=JSON.parse(localStorage.getItem("accessibility-btn")||"null"),s=JSON.parse(localStorage.getItem("accessibility-panel")||"null");l&&(n.style.top=l.top,n.style.right=l.right||"10px",n.style.left="auto",n.style.position="fixed",a=!0),s&&(r.style.left=s.left||"20px",r.style.top=s.top||"20px",r.style.right="auto",r.style.position="fixed",a=!0)}a||(n.style.top="50%",n.style.right="10px",n.style.left="auto",n.style.position="fixed",r.style.left="20px",r.style.top="20px",r.style.right="auto",r.style.position="fixed",O())}function O(){const a=F();a==="mobile"?Object.assign(r.style,{width:"100%",height:"60vh",left:"0px",right:"0px",bottom:"0px",top:"auto"}):a==="tablet"?Object.assign(r.style,{width:"70vh",height:"400px",left:"20px",right:"auto",top:"20px"}):Object.assign(r.style,{width:"450px",height:"500px",left:"20px",right:"auto",top:"20px"}),r.style.position="fixed"}n.addEventListener("click",()=>{r.classList.toggle("hidden")});function Y(){const a=localStorage.getItem("adhd-mode")==="true",l=localStorage.getItem("epilepsi")==="true";a?(y(),b(),l||h(),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)):(l&&T(),S(),u(),f(),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 T(){const a=localStorage.getItem("epilepsi")==="true",l=localStorage.getItem("adhd-mode")==="true";a?(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),l||h()):(l&&Y(),localStorage.setItem("epilepsi","true"),localStorage.setItem("stop-animation","true"),localStorage.setItem("low-saturation","true"),u(),L(),e("toggle-epilepsi",!0),e("toggle-epilepsi-checkbox",!0),e("stop-animation",!0),e("toggle-low-saturation",!0)),m(),D()}(J=t.querySelector("#toggle-adhd"))==null||J.addEventListener("click",Y),(K=t.querySelector("#toggle-adhd-checkbox"))==null||K.addEventListener("change",Y),(V=t.querySelector("#increase-font"))==null||V.addEventListener("click",B),(U=t.querySelector("#decrease-font"))==null||U.addEventListener("click",R);function $(){localStorage.getItem("reading-mask")==="true"?(y(),localStorage.removeItem("reading-mask"),e("toggle-reading-mask",!1)):(S(),localStorage.setItem("reading-mask","true"),e("toggle-reading-mask",!0)),m()}(Z=t.querySelector("#toggle-reading-mask"))==null||Z.addEventListener("click",$),(G=t.querySelector("#toggle-reading-mask-checkbox"))==null||G.addEventListener("change",$);function N(){localStorage.getItem("stop-animation")==="true"?(h(),localStorage.removeItem("stop-animation"),e("stop-animation",!1)):(u(),localStorage.setItem("stop-animation","true"),e("stop-animation",!0)),m(),D()}(Q=t.querySelector("#stop-animation"))==null||Q.addEventListener("click",N),(ee=t.querySelector("#stop-animation-checkbox"))==null||ee.addEventListener("change",N);function C(){localStorage.getItem("high-saturation")==="true"?(b(),localStorage.removeItem("high-saturation"),e("toggle-high-saturation",!1)):(f(),localStorage.setItem("high-saturation","true"),e("toggle-high-saturation",!0)),m()}function X(){localStorage.getItem("low-saturation")==="true"?(A(),localStorage.removeItem("low-saturation"),e("toggle-low-saturation",!1)):(L(),localStorage.setItem("low-saturation","true"),e("toggle-low-saturation",!0)),m(),D()}(te=t.querySelector("#toggle-epilepsi"))==null||te.addEventListener("click",T),(ne=t.querySelector("#toggle-epilepsi-checkbox"))==null||ne.addEventListener("change",T),(ae=t.querySelector("#toggle-low-saturation"))==null||ae.addEventListener("click",X),(ie=t.querySelector("#toggle-low-saturation-checkbox"))==null||ie.addEventListener("change",X),(oe=t.querySelector("#toggle-high-saturation"))==null||oe.addEventListener("click",C),(re=t.querySelector("#toggle-high-saturation-checkbox"))==null||re.addEventListener("change",C),(le=t.querySelector("#toggle-Low-saturation-checkbox"))==null||le.addEventListener("change",C),(se=t.querySelector("#reset-accessibility"))==null||se.addEventListener("click",()=>{j(),y(),h(),P(),b(),A(),n.style.top="50%",n.style.right="10px",n.style.left="auto",n.style.position="fixed",O(),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",O);function pe(){let a=!1,l=0,s=0,c;n.addEventListener("mousedown",g=>{c=window.setTimeout(()=>{a=!0,s=n.getBoundingClientRect().top,l=g.clientY-s,n.style.transition="none"},0)}),document.addEventListener("mousemove",g=>{if(!a)return;s=g.clientY-l;const d=window.innerHeight-n.offsetHeight;s=Math.max(0,Math.min(s,d)),n.style.top=s+"px",n.style.right="10px",n.style.left="auto",n.style.position="fixed"}),document.addEventListener("mouseup",()=>{clearTimeout(c),a&&localStorage.setItem("accessibility-btn",JSON.stringify({top:n.style.top,right:n.style.right})),a=!1,n.style.transition="all 0.2s ease"})}function he(){let a=!1,l=0,s=0,c=0,g=0;w==null||w.addEventListener("mousedown",d=>{a=!0;const q=r.getBoundingClientRect();c=q.left,g=q.top,l=d.clientX-c,s=d.clientY-g,r.style.transition="none",d.preventDefault()}),document.addEventListener("mousemove",d=>{if(!a)return;c=d.clientX-l,g=d.clientY-s;const q=200,fe=window.innerWidth-r.offsetWidth,be=window.innerHeight-Math.max(r.offsetHeight,q);c=Math.max(0,Math.min(c,fe)),g=Math.max(0,Math.min(g,be)),r.style.left=c+"px",r.style.top=g+"px",r.style.position="fixed"}),document.addEventListener("mouseup",()=>{a&&localStorage.setItem("accessibility-panel",JSON.stringify({left:r.style.left,top:r.style.top,width:r.style.width})),a=!1,r.style.transition="all 0.2s ease"})}F()!=="mobile"&&(pe(),he()),me()}i.applyStyle=M,i.decreaseFont=R,i.disableHighSaturation=b,i.disableLowSaturation=A,i.disableReadingMask=y,i.enableHighSaturation=f,i.enableLowSaturation=L,i.enableReadingMask=S,i.increaseFont=B,i.initAccessibilityWidget=de,i.removeStyle=p,i.resetAnimationState=P,i.resetFont=j,i.resetHighSaturation=ge,i.resetLowSaturation=ue,i.restoreAnimation=h,i.restoreAnimationState=ce,i.restoreFont=W,i.restoreHighSaturation=z,i.restoreLowSaturation=_,i.stopAnimation=u,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});