https://charlotteclerk.com/js/a11y.js

1$(document).ready(function () {
2  // local storage object
3  if (JSON.parse(localStorage.getItem("a11yObjStore")) === null) {
4    localStorage.setItem("a11yObjStore", "{}");
5  }
6
7    let a11yObj = {
8        snow: true,
9        modalPosition:
10            JSON.parse(localStorage.getItem("a11yObjStore")).modalPosition || "right",
11
12        noAnimations:
13            JSON.parse(localStorage.getItem("a11yObjStore")).noAnimations || false,
14        highlightLinks:
15            JSON.parse(localStorage.getItem("a11yObjStore")).highlightLinks || false,
16    textSize: JSON.parse(localStorage.getItem("a11yObjStore")).textSize || "1",
17    bigCursor:
18      JSON.parse(localStorage.getItem("a11yObjStore")).bigCursor || false,
19    dyslexiaFont:
20      JSON.parse(localStorage.getItem("a11yObjStore")).dyslexiaFont || false,
21    letterSpacing:
22      JSON.parse(localStorage.getItem("a11yObjStore")).letterSpacing ||
23      "normal",
24    wordSpacing:
25      JSON.parse(localStorage.getItem("a11yObjStore")).wordSpacing || "normal",
26    lineHeight:
27      JSON.parse(localStorage.getItem("a11yObjStore")).lineHeight || "normal",
28    contrast:
29      JSON.parse(localStorage.getItem("a11yObjStore")).contrast || false,
30    invertColors:
31      JSON.parse(localStorage.getItem("a11yObjStore")).invertColors || false,
32    saturation:
33      JSON.parse(localStorage.getItem("a11yObjStore")).saturation ||
34      "saturate(100%)",
35    clearerText:
36          JSON.parse(localStorage.getItem("a11yObjStore")).clearerText || "400",
37  };
38
39    
40
41  // modal adjustments
42  let a11ymodal = $("#A11YModal .modal-dialog");
43  let scrollTopAdjust = () => (window.scrollY > 69 ? 69 : window.scrollY);
44
45  // All text elements
46  let textElements = $(
47    "h1,h2,h3:not(h3.site-title),h4,h5,h6,p,label,pre,ul,li,a,em,b,i,.cursive,button,.cinzel,input,.tooltip.bs-tooltip-top"
48  );
49
50  $(document).on("change", "input[name=a11y-zoom]", (e) => {
51    if ($(e.target).val() == "1.2") {
52      navOffsetTop = 120;
53      a11yObj.textSize = "1.2";
54    } else if ($(e.target).val() == "1.4") {
55      navOffsetTop = 140;
56      a11yObj.textSize = "1.4";
57    } else {
58      navOffsetTop = 102;
59      a11yObj.textSize = "1";
60    }
61    $("div.page").css("zoom", $(e.target).val());
62    localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
63  });
64
65  let bigCursorFunction = (checked) => {
66    a11yObj.bigCursor = checked;
67    localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
68    $(
69      "*, a, [role=button], button i, a .material-symbols-outlined, a i"
70    ).css("cursor", checked ? "url(../../img/cursors/big-cursor.png), auto" : "");
71
72    $(
73      "div.switch-button, .switch-button-label, div.form-switch-container, #modalPosition, a, [role=button], button i, a .material-symbols-outlined, span .material-symbols-outlined, a i, .services .icon-container, .services .icon-container .material-symbols-outlined, .services .icon-container .icon-text, .services .icon-container:hover .icon-text, .yt-videos-section .img-container p, .yt-videos-section img, .watch-more-videos a, input[name^=a11y], .form-check-label, [type=button]:not

73(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled),.form-check-input, .message a img"
74    ).css("cursor", checked ? "url(../../img/cursors/big-pointer.png), auto" : "");
75
76      $("input[type=text],input[type=email],p:not(.icon-container p),strong").css(
77      "cursor",
78        checked ? "url(../../img/cursors/text-cursor.png) 0 30, auto" : ""
79    );
80  };
81
82  $(document).on("change", "input[name=a11y-letterspacing]", (e) => {
83    a11yObj.letterSpacing = $(e.target).val();
84    localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
85    textElements.css("letter-spacing", $(e.target).val());
86  });
87
88  $(document).on("change", "input[name=a11y-wordspacing]", (e) => {
89    a11yObj.wordSpacing = $(e.target).val();
90    localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
91    textElements.css("word-spacing", $(e.target).val());
92  });
93
94  $(document).on("change", "input[name=a11y-cleartext]", (e) => {
95    a11yObj.clearerText = $(e.target).val();
96    localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
97    textElements.css("font-weight", $(e.target).val());
98  });
99
100  $(document).on("change", "input[name=a11y-lineheight]", (e) => {
101    a11yObj.lineHeight = $(e.target).val();
102    localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
103    textElements.css("line-height", $(e.target).val());
104  });
105
106  $(document).on("click", "#a11yReset", (e) => {
107    $(
108        "#bigCursorSwitch, #dyslexiaFontSwitch, #highContrastSwitch, #invertColorsSwitch, #linksSwitch, #positionSwitch, #animationsSwitch"
109    ).each((i, e) => {
110      if ($(e).is(":checked")) {
111        $(e).trigger("click");
112      }
113    });
114    $(
115      "#a11yZoom0, #a11yWordSpacing0, #a11yLetterSpacing0, #a11yLineHeight0, #a11yClearText0, #a11ySaturation0"
116    ).trigger("click");
117  });
118
119    $(".off-switch-label").css("opacity", 1);
120
121    $("#modalPosition").text(a11yObj.modalPosition.toUpperCase())
122    $("#A11YModal").removeClass("right left").addClass(a11yObj.modalPosition);
123
124    let switchSwitch = (id, checked) => {
125        switch (id) {
126            case "bigCursorSwitch":
127                bigCursorFunction(checked);
128                break;
129            case "dyslexiaFontSwitch":
130                a11yObj.dyslexiaFont = checked;
131                localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
132                if (checked) {
133                    $("body").css("font-family", "Lexend");
134                } else {
135                    $("body").css("font-family", "Roboto");
136                }
137                break;
138            case "particlesSwitch":
139                a11yObj.snow = checked;
140                localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
141                if (checked) {
142                    $("#snow").css("display", "block");
143                } else {
144                    $("#snow").css("display", "none");
145                }
146                break;
147            case "highContrastSwitch":
148                a11yObj.contrast = checked;
149                localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
150                if (checked) {
151                    $("#FullBodyFilter3").css("backdrop-filter", "contrast(150%)");
152                } else {
153                    $("#FullBodyFilter3").removeAttr("style");
154                }
155                break;
156            case "invertColorsSwitch":
157                a11yObj.invertColors = checked;
158                localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
159                if (checked) {
160                    $("#FullBodyFilter2").css("backdrop-filter", "invert(100%)");
161                } else {
162                    $("#FullBodyFilter2").removeAttr("style");
163                }
164                break;
165            case "positionSwitch":
166                a11yObj.modalPosition = checked ? 'left' : 'right';
167                $("#modalPosition").text(a11yObj.modalPosition.toUpperCase())
168                localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
169                $("#A11YModal").removeClass("right left").addClass(a11yObj.modalPosition);
170                if (checked) {
171                    $('.accessibility-icon').css({ left: 15, right: 'auto' })
172                } else {
173                    $('.accessibility-icon').css({ right: 15, left: 'auto' })
174                }
175                break;
176            case "animationsSwitch":
177                a11yObj.noAnimations = checked;
178                localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
179                $("*").each(function () {
180                    if ($(this).css('animation-name') === 'fadein') {
181                        $(this).css('opacity', checked ? 1 : '');
182                    }
183                    $(this).css('transition-duration', checked ? '0s' : '');
184                    $(this).css('animation-name', checked ? 'none' : '');
185                });
186                break;
187            case "linksSwitch":
188                a11yObj.highlightLinks = checked;
189                localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
190                
191                $("a:not(.navbar-brand), button:not(.btn-close)").each(function () {
192                    if (checked) {
193                        $(this).css({ border: "solid 3px yellow", backgroundColor: 'black', color: 'white' })
194                    } else {
195                        $(this).css({ border: "", backgroundColor: '', color: '' })
196                    }
197                    })
198                
199                break;
200            default:

201                // Handle unexpected case
202                console.warn("Unknown switch ID:", id);
203        }
204    };
205
206    $(".switch-button").click((e) => {
207        var checkbox = $(e.currentTarget).find('input');
208
209        // Check if the clicked element is the checkbox itself
210        if (e.target !== checkbox[0]) {
211            // If not, toggle the checkbox
212            checkbox.prop("checked", !checkbox.prop("checked"));
213        }
214        // Use the checkbox's id and checked status
215        switchSwitch(checkbox.attr('id'), checkbox.is(":checked"));
216  });
217
218  $(document).on("click", "input[name=a11y-saturation]", (e) => {
219    a11yObj.saturation = $(e.target).val();
220    localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj));
221    $("#FullBodyFilter1").css("backdrop-filter", e.target.value);
222  });
223
224  //** ON LOAD UPDATES *// ====================================================================
225
226  let a11yLS =
227    JSON.parse(localStorage.getItem("a11yObjStore")) &&
228    JSON.parse(localStorage.getItem("a11yObjStore"));
229
230  $("div.page").css("zoom", a11yLS.textSize);
231  bigCursorFunction(a11yLS.bigCursor);
232  textElements.css("font-weight", a11yLS.clearerText);
233  textElements.css("letter-spacing", a11yLS.letterSpacing);
234  textElements.css("word-spacing", a11yLS.wordSpacing);
235  textElements.css("line-height", a11yLS.lineHeight);
236  $("#FullBodyFilter1").css("backdrop-filter", a11yLS.saturation);
237  $("#FullBodyFilter2").css("backdrop-filter", a11yLS.invertColors);

238  $("#FullBodyFilter3").css("backdrop-filter", a11yLS.contrast);
239
240  // RESTORE A11Y FEATURES
241
242  // big cursor
243  if (a11yLS.bigCursor) {
244    $("#bigCursorSwitch").trigger("click");
245  }
246
247  // modal position
248    if (a11yObj.modalPosition === 'left') {
249        $('#positionSwitch').trigger("click");
250    }
251
252    // no animations
253    if (a11yObj.noAnimations) {
254        $('#animationsSwitch').trigger("click");
255    }
256
257    // hightlight links
258    if (a11yObj.highlightLinks) {
259        $('#linksSwitch').trigger("click");
260    }
261
262  // dyslexia font
263  if (a11yLS.dyslexiaFont) {
264    $("#dyslexiaFontSwitch").trigger("click");
265  }
266
267  // text size
268  $("input[name=a11y-zoom][value='" + a11yLS.textSize + "']").prop(
269    "checked",
270    true
271  );
272
273  // clearer text
274  $("input[name=a11y-cleartext][value='" + a11yLS.clearerText + "']").prop(
275    "checked",
276    true
277  );
278
279  // letter spacing
280  $(
281    "input[name=a11y-letterspacing][value='" + a11yLS.letterSpacing + "']"
282  ).prop("checked", true);
283
284  // word spacing
285  $("input[name=a11y-wordspacing][value='" + a11yLS.wordSpacing + "']").prop(
286    "checked",
287    true
288  );
289
290  // line height
291  $("input[name=a11y-lineheight][value='" + a11yLS.lineHeight + "']").prop(
292    "checked",
293    true
294  );
295
296  // high contrast
297  if (a11yLS.contrast) {
298    $("#highContrastSwitch").trigger("click");
299  }
300
301  // invert
302  if (a11yLS.invertColors) {
303    $("#invertColorsSwitch").trigger("click");
304  }
305
306  // saturation
307  $("input[name=a11y-saturation][value='" + a11yLS.saturation + "']").prop(
308    "checked",
309    true
310  );
311
312    function isStylesheetLoaded(stylesheetName) {
313        // Iterate through all stylesheets in the document
314        for (let i = 0; i < document.styleSheets.length; i++) {
315            // Check if the stylesheet href contains the given stylesheet name
316            if (document.styleSheets[i].href && document.styleSheets[i].href.includes(stylesheetName)) {
317                return true;
318            }
319        }
320
321        return false;
322    }
323
324    // Usage example
325    if (isStylesheetLoaded('specialStyles.css')) {
326        // snow will always appear on load if christmas template is active
327        $("#particlesSwitch").trigger("click");
328        $('.snow-button').css('display', 'block')
329    } else {
330        delete a11yObj.snow
331        localStorage.setItem("a11yObjStore", JSON.stringify(a11yObj))
332        $('.snow-button').css('display', 'none')
333    }
334
335});
336