@helptheweb/helper
Version:
The official accessibility helper widget from helptheweb.org, adding features like font size adjustment, contrast modes, and more.
82 lines • 8.07 kB
JavaScript
var u=class{constructor(e={}){this.settings={greyscale:!1,highContrast:!1,negativeContrast:!1,underlineLinks:!1,readableFont:!1};this.fontSizeMultiplier=1;this.helperContainer=null;this.increaseFontSize=()=>{this.fontSizeMultiplier+=.1,this.updateAllTextElements()};this.decreaseFontSize=()=>{this.fontSizeMultiplier=Math.max(.5,this.fontSizeMultiplier-.1),this.updateAllTextElements()};this.resetFontSize=()=>{this.fontSizeMultiplier=1,this.updateAllTextElements()};this.resetAll=()=>{this.resetFontSize(),Object.keys(this.settings).forEach(e=>{this.settings[e]=!1}),this.applySettings()};this.toggleSetting=e=>{this.settings.hasOwnProperty(e)&&(this.settings[e]=!this.settings[e],this.applySettings())};this.applySettings=()=>{let e="";this.settings.greyscale&&(e+="html:not(.helper-ui) { filter: grayscale(100%); }"),this.settings.highContrast&&(e+="html:not(.helper-ui) { filter: contrast(150%); }"),this.settings.negativeContrast&&(e+="html:not(.helper-ui) { filter: invert(100%); }"),this.settings.underlineLinks&&(e+="a:not(.helper-ui-link) { text-decoration: underline !important; }"),this.settings.readableFont&&(e+="body:not(.helper-ui) { font-family: Arial, sans-serif !important; }"),this.styleElement.textContent=e};this.createUI=()=>{let e=document.createElement("aside");e.setAttribute("aria-label","Accessibility options"),e.classList.add("helper-ui"),this.helperContainer=e;let r=`
.helper-ui {
all: initial;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #000000;
* {
box-sizing: border-box;
}
}
`,a=document.createElement("style");a.textContent=r,document.head.appendChild(a),e.style.cssText=`
position: fixed;
top: 100px;
right: 0;
z-index: 9999;
display: flex;
align-items: flex-start;
transition: transform 0.3s ease-in-out;
transform: translateX(200px);
font-size: 16px !important;
`;let s=document.createElement("button");s.classList.add("helper-ui"),s.setAttribute("aria-label","Toggle accessibility options"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-haspopup","true"),s.innerHTML=`
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512" style="color: white">
<path fill="white" d="M256 112a56 56 0 1 1 56-56a56.06 56.06 0 0 1-56 56"/>
<path fill="white" d="m432 112.8l-.45.12l-.42.13c-1 .28-2 .58-3 .89c-18.61 5.46-108.93 30.92-172.56 30.92c-59.13 0-141.28-22-167.56-29.47a74 74 0 0 0-8-2.58c-19-5-32 14.3-32 31.94c0 17.47 15.7 25.79 31.55 31.76v.28l95.22 29.74c9.73 3.73 12.33 7.54 13.6 10.84c4.13 10.59.83 31.56-.34 38.88l-5.8 45l-32.19 176.19q-.15.72-.27 1.47l-.23 1.27c-2.32 16.15 9.54 31.82 32 31.82c19.6 0 28.25-13.53 32-31.94s28-157.57 42-157.57s42.84 157.57 42.84 157.57c3.75 18.41 12.4 31.94 32 31.94c22.52 0 34.38-15.74 32-31.94a57 57 0 0 0-.76-4.06L329 301.27l-5.79-45c-4.19-26.21-.82-34.87.32-36.9a1 1 0 0 0 .08-.15c1.08-2 6-6.48 17.48-10.79l89.28-31.21a17 17 0 0 0 1.62-.52c16-6 32-14.3 32-31.93S451 107.81 432 112.8"/>
</svg>
`,s.style.cssText=`
background-color: ${this.buttonColor};
border: none;
color: white;
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
position: absolute;
right: 200px;
top: 0;
transition: transform 0.3s ease-in-out;
font-size: 16px !important;
`;let t=document.createElement("div");t.classList.add("helper-ui"),t.setAttribute("role","menu"),t.setAttribute("aria-label","Accessibility adjustment options"),t.style.cssText=`
background-color: #ffffff !important;
border: 2px solid ${this.buttonColor};
border-right: none;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 200px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
font-size: 16px !important;
`;let o=(l,h)=>{let n=document.createElement("div");return n.classList.add("helper-ui"),n.setAttribute("role","menuitem"),n.setAttribute("tabindex","0"),n.textContent=l,n.style.cssText=`
padding: 8px 12px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
font-size: 14px !important;
color: #000000;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
text-align: center;
`,n.addEventListener("click",h),n.addEventListener("keydown",c=>{(c.key==="Enter"||c.key===" ")&&(h(),c.preventDefault())}),n.addEventListener("mouseover",()=>{n.style.backgroundColor="#e9ecef"}),n.addEventListener("mouseout",()=>{n.style.backgroundColor="#f8f9fa"}),n.addEventListener("focus",()=>{n.style.backgroundColor="#e9ecef"}),n.addEventListener("blur",()=>{n.style.backgroundColor="#f8f9fa"}),n};t.appendChild(o("Increase Text Size",this.increaseFontSize)),t.appendChild(o("Decrease Text Size",this.decreaseFontSize)),t.appendChild(o("Reset Text Size",this.resetFontSize)),t.appendChild(o("Greyscale",()=>this.toggleSetting("greyscale"))),t.appendChild(o("High Contrast",()=>this.toggleSetting("highContrast"))),t.appendChild(o("Negative Contrast",()=>this.toggleSetting("negativeContrast"))),t.appendChild(o("Underline Links",()=>this.toggleSetting("underlineLinks"))),t.appendChild(o("Readable Font",()=>this.toggleSetting("readableFont")));let p=document.createElement("hr");p.classList.add("helper-ui"),p.style.cssText=`
width: 100%;
border: none;
border-top: 1px solid #dee2e6;
margin: 4px 0;
`,t.appendChild(p),t.appendChild(o("Reset All Settings",()=>this.resetAll()));let i=document.createElement("div");i.classList.add("helper-ui"),i.setAttribute("role","menuitem"),i.setAttribute("tabindex","0"),i.style.cssText=`
text-align: center;
color: ${this.buttonColor};
text-decoration: none;
font-size: 12px !important;
margin-top: 8px;
padding: 4px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
cursor: pointer;
`,i.textContent="Powered by helptheweb.org",i.addEventListener("click",()=>{window.open("https://helptheweb.org","_blank")}),i.addEventListener("keydown",l=>{(l.key==="Enter"||l.key===" ")&&(window.open("https://helptheweb.org","_blank"),l.preventDefault())}),i.addEventListener("mouseover",()=>{i.style.textDecoration="underline"}),i.addEventListener("mouseout",()=>{i.style.textDecoration="none"}),i.addEventListener("focus",()=>{i.style.textDecoration="underline"}),i.addEventListener("blur",()=>{i.style.textDecoration="none"}),t.appendChild(i);let d=!1;s.addEventListener("click",()=>{d=!d,e.style.transform=d?"translateX(0px)":"translateX(200px)",s.setAttribute("aria-expanded",d.toString())}),e.appendChild(t),e.appendChild(s),document.body.appendChild(e)};this.fontSizeDefault=e.defaultFontSize||16,this.fontSizeCurrent=this.fontSizeDefault,this.buttonColor=e.buttonColor||"#1e232f",this.styleElement=document.createElement("style"),document.head.appendChild(this.styleElement),this.createUI(),this.initializeFontSizeObserver()}initializeFontSizeObserver(){new MutationObserver(()=>{this.updateAllTextElements()}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style","class"]})}updateAllTextElements(){document.querySelectorAll("h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, div, button, input, textarea, label").forEach(r=>{if(this.helperContainer&&this.helperContainer.contains(r))return;let a=window.getComputedStyle(r),s=parseFloat(a.fontSize);r.hasAttribute("data-original-size")||r.setAttribute("data-original-size",s.toString());let t=parseFloat(r.getAttribute("data-original-size"))*this.fontSizeMultiplier;r.style.fontSize=`${t}px`})}};export{u as Helper};
//# sourceMappingURL=index.esm.js.map