@helptheweb/helper
Version:
The official accessibility helper widget from helptheweb.org, adding features like font size adjustment, contrast modes, and more.
82 lines • 8.56 kB
JavaScript
"use strict";var AccessibilityHelper=(()=>{var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var x=(l,e)=>{for(var o in e)u(l,o,{get:e[o],enumerable:!0})},v=(l,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of m(e))!y.call(l,i)&&i!==o&&u(l,i,{get:()=>e[i],enumerable:!(a=b(e,i))||a.enumerable});return l};var S=l=>v(u({},"__esModule",{value:!0}),l);var C={};x(C,{Helper:()=>g});var g=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 o=`
.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=o,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 i=document.createElement("button");i.classList.add("helper-ui"),i.setAttribute("aria-label","Toggle accessibility options"),i.setAttribute("aria-expanded","false"),i.setAttribute("aria-haspopup","true"),i.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>
`,i.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 r=(d,f)=>{let s=document.createElement("div");return s.classList.add("helper-ui"),s.setAttribute("role","menuitem"),s.setAttribute("tabindex","0"),s.textContent=d,s.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;
`,s.addEventListener("click",f),s.addEventListener("keydown",h=>{(h.key==="Enter"||h.key===" ")&&(f(),h.preventDefault())}),s.addEventListener("mouseover",()=>{s.style.backgroundColor="#e9ecef"}),s.addEventListener("mouseout",()=>{s.style.backgroundColor="#f8f9fa"}),s.addEventListener("focus",()=>{s.style.backgroundColor="#e9ecef"}),s.addEventListener("blur",()=>{s.style.backgroundColor="#f8f9fa"}),s};t.appendChild(r("Increase Text Size",this.increaseFontSize)),t.appendChild(r("Decrease Text Size",this.decreaseFontSize)),t.appendChild(r("Reset Text Size",this.resetFontSize)),t.appendChild(r("Greyscale",()=>this.toggleSetting("greyscale"))),t.appendChild(r("High Contrast",()=>this.toggleSetting("highContrast"))),t.appendChild(r("Negative Contrast",()=>this.toggleSetting("negativeContrast"))),t.appendChild(r("Underline Links",()=>this.toggleSetting("underlineLinks"))),t.appendChild(r("Readable Font",()=>this.toggleSetting("readableFont")));let c=document.createElement("hr");c.classList.add("helper-ui"),c.style.cssText=`
width: 100%;
border: none;
border-top: 1px solid #dee2e6;
margin: 4px 0;
`,t.appendChild(c),t.appendChild(r("Reset All Settings",()=>this.resetAll()));let n=document.createElement("div");n.classList.add("helper-ui"),n.setAttribute("role","menuitem"),n.setAttribute("tabindex","0"),n.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;
`,n.textContent="Powered by helptheweb.org",n.addEventListener("click",()=>{window.open("https://helptheweb.org","_blank")}),n.addEventListener("keydown",d=>{(d.key==="Enter"||d.key===" ")&&(window.open("https://helptheweb.org","_blank"),d.preventDefault())}),n.addEventListener("mouseover",()=>{n.style.textDecoration="underline"}),n.addEventListener("mouseout",()=>{n.style.textDecoration="none"}),n.addEventListener("focus",()=>{n.style.textDecoration="underline"}),n.addEventListener("blur",()=>{n.style.textDecoration="none"}),t.appendChild(n);let p=!1;i.addEventListener("click",()=>{p=!p,e.style.transform=p?"translateX(0px)":"translateX(200px)",i.setAttribute("aria-expanded",p.toString())}),e.appendChild(t),e.appendChild(i),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(o=>{if(this.helperContainer&&this.helperContainer.contains(o))return;let a=window.getComputedStyle(o),i=parseFloat(a.fontSize);o.hasAttribute("data-original-size")||o.setAttribute("data-original-size",i.toString());let t=parseFloat(o.getAttribute("data-original-size"))*this.fontSizeMultiplier;o.style.fontSize=`${t}px`})}};return S(C);})();
//# sourceMappingURL=index.min.js.map