https://iitk.ac.in/main/themes/iitk/assets/vendors/cd-accessibility%40v1/cd-accessibility.js?v=2.7.x

1//  Version 1 
2//  Author: CD 
3//  Start date: Aug 8, 23 
4
5let fontScaingStorage = false, zoomScalingStorage = false, clrAdjustmentStorage = false;
6let isZoomScalingActive = false;
7let isFontScalingActive = false;
8let isClrThemeActive = false;
9
10
11window.addEventListener('DOMContentLoaded', function () {
12
13    //ACCESSIBILITY TOGGLE
14    let a11yBtns = document.querySelectorAll('.cta__a11y-tgl');
15    let a11yModal = document.querySelector('.cd-a11y');
16
17
18    [...a11yBtns].forEach(a11yBtn => {
19        a11yBtn.addEventListener('click', function () {
20            a11yModal.classList.toggle('cd-a11y--actv');
21        });
22    });
23
24
25    // --------------------------------------------------------------
26
27
28    // GET ROOT
29    let htmlElem = document.documentElement;
30    const baseFont = parseInt(getComputedStyle(htmlElem).getPropertyValue("--fs-root").match(/\d+/)[0]);
31
32
33
34    // GET RESET ALL BTN
35    // let resetAllBtn = document.querySelector('[data-action-grp="cd-a11y--reset-all"]');
36
37
38    // --------------------------------------------------------------
39
40
41    // FONT ADJUSTMENT
42    let fontTxt = document.querySelector('.cd-a11y--grp-opt-font span');
43    let fontDecraseBtns = document.querySelectorAll('[data-action="cd-a11y--font-decrase"]');
44    let fontIncreaseBtns = document.querySelectorAll('[data-action="cd-a11y--font-incrase"]');
45    let fontResetBtn = document.querySelector('[data-action="cd-a11y--font-reset"]');
46    let fontDefaultBtn = document.querySelector('[data-action="cd-a11y--font-default"]');
47    let fontActionGrpBtns = document.querySelectorAll('[data-action-grp="cd-a11y--font"]');
48    if (fontTxt && fontDecraseBtns && fontIncreaseBtns && fontResetBtn && fontDefaultBtn && fontActionGrpBtns) {
49        let newFontScale = 0;
50        let fontScale = 6;
51        let maxFontScale = 6;
52        let newFont = baseFont;
53
54
55        // GET FONT SCALING FROM LOCAL STORAGE
56        fontScaingStorage = this.localStorage.getItem('fontScaingStorage');
57        if (fontScaingStorage) {
58            newFontScale = parseInt(fontScaingStorage);
59            fontScaling();
60        }
61
62        [...fontDecraseBtns].forEach(fontDecraseBtn => {
63            fontDecraseBtn.addEventListener('click', function () {
64                if (newFontScale >= -maxFontScale) {
65                    newFontScale = newFontScale - fontScale;
66                    fontScaling();
67                }
68            });
69        });
70
71        [...fontIncreaseBtns].forEach(fontIncreaseBtn => {
72            fontIncreaseBtn.addEventListener('click', function () {
73                if (newFontScale <= maxFontScale) {
74                    newFontScale = newFontScale + fontScale;
75                    fontScaling();
76                }
77            });
78        });
79
80        fontResetBtn.addEventListener('click', function () {
81            fontReset();
82            fontBtnClassSet();
83        });
84        fontDefaultBtn.addEventListener('click', function () {
85            fontReset();
86            fontBtnClassSet();
87        });
88
89
90        function fontScaling() {
91            isZoomScalingActive && zoomReset();
92            fontBtnClassSet();
93

94            newFont = baseFont + ((baseFont * newFontScale) / 100);
95
96            if ((100 + newFontScale) == 100) {
97                fontReset();
98            }
99            else {
100                isFontScalingActive = true;
101                fontTxt.textContent = `${100 + newFontScale}%`;
102                htmlElem.style.setProperty("--main-width", 'var(--main-width-fixed-size)');
103                htmlElem.style.setProperty("--fs-root", newFont + 'px');
104                a11yBtnsActv();
105            }
106
107            // SET FONT SCALING INTO LOCAL STORAGE
108            if (newFontScale != 0) {
109                localStorage.setItem('fontScaingStorage', newFontScale);
110            }
111            else {
112                localStorage.removeItem('fontScaingStorage');
113            }
114        }
115
116        function fontReset() {
117            isFontScalingActive = false;
118            newFontScale = 0;
119            newFont = baseFont;
120            fontTxt.textContent = fontTxt.getAttribute('data-text');
121            htmlElem.style.removeProperty("--main-width", 'var(--main-width-fixed-size)');
122            htmlElem.style.removeProperty("--fs-root", newFont + 'px');
123            localStorage.removeItem('fontScaingStorage');
124            a11yBtnsActv();
125        }
126
127        function fontBtnClassSet() {
128            [...fontActionGrpBtns].forEach(fontActionGrpBtn => {
129                fontActionGrpBtn.classList.remove('actv');
130            });
131
132            if (newFontScale == 0) {
133                fontDefaultBtn.classList.add('actv');
134                fontResetBtn.classList.remove('actv');
135            }
136            else {
137                fontResetBtn.classList.add('actv');
138
139                if (newFontScale > 0) {
140                    [...fontIncreaseBtns].forEach(fontIncreaseBtn => {
141                        fontIncreaseBtn.classList.add('actv');
142                    });
143                }
144                else if (newFontScale < 0) {
145                    [...fontDecraseBtns].forEach(fontDecraseBtn => {
146                        fontDecraseBtn.classList.add('actv');
147                    });
148                }
149            }
150        }
151
152        // --------------------------------------------------------------
153
154
155        // ZOOM ADJUSTMENT
156        let zoomResetBtn = document.querySelector('[data-action-grp="cd-a11y--zoom"].cd-a11y--btn-reset');
157        let newFontScaleZ = 0;
158        let fontScaleZ = 7;
159        let maxFontScaleZ = 7;
160        let newFontZ = baseFont;
161        let zoomTxt = document.querySelector('.cd-a11y--grp-opt-zoom span');
162        let zoomBtns = document.querySelectorAll('[data-action-grp="cd-a11y--zoom"]');
163
164        // GET ZOOM SCALING FROM LOCAL STORAGE
165        zoomScalingStorage = this.localStorage.getItem('zoomScalingStorage');
166
167        if (zoomScalingStorage) {
168            newFontScaleZ = parseInt(zoomScalingStorage);
169            zoomScaling();
170        }
171
172        [...zoomBtns].forEach(zoomBtn => {
173            zoomBtn.addEventListener('click', function () {
174                if (isFontScalingActive) {
175                    fontReset();
176                    fontBtnClassSet();
177                }
178
179                if (this.getAttribute('data-action') == 'cd-a11y--zoom-decrase') {
180                    if (newFontScaleZ >= -maxFontScaleZ) {
181                        newFontScaleZ = newFontScaleZ - fontScaleZ;
182                        zoomScaling();
183                    }
184                }
185                else if (this.getAttribute('data-action') == 'cd-a11y--zoom-incrase') {
186                    if (newFontScaleZ <= maxFontScaleZ) {
187
188                        newFontScaleZ = newFontScaleZ + fontScaleZ;
189                        zoomScaling();
190                    }
191                }
192
193            });
194        });
195
196
197        function zoomScaling() {
198            newFontZ = baseFont + ((baseFont * newFontScaleZ) / 100);
199            htmlElem.style.setProperty("--fs-root", newFontZ + 'px');
200            if ((100 + newFontScaleZ) == 100) {
201                zoomReset();
202            }
203            else {
204                zoomTxt.textContent = `${100 + newFontScaleZ}%`;
205                zoomResetBtn.classList.add('actv');
206                isZoomScalingActive = true;
207                a11yBtnsActv();
208            }
209
210            // SET ZOOM SCALING INTO LOCAL STORAGE
211            if (newFontScaleZ != 0) {
212                localStorage.setItem('zoomScalingStorage', newFontScaleZ);
213            }
214            else {
215                localStorage.removeItem('zoomScalingStorage');
216            }
217        }
218
219        function zoomReset() {
220            isZoomScalingActive = false;

221            newFontScaleZ = 0;
222            newFontZ = baseFont;
223            htmlElem.style.removeProperty("--fs-root");
224            zoomTxt.textContent = fontTxt.getAttribute('data-text');
225            zoomResetBtn.classList.remove('actv');
226            a11yBtnsActv();
227
228            // SET ZOOM SCALING INTO LOCAL STORAGE
229            if (newFontScaleZ > 0) {
230                localStorage.setItem('zoomScalingStorage', newFontScaleZ);
231            }
232            else {
233                localStorage.removeItem('zoomScalingStorage');
234            }
235        }
236
237
238        zoomResetBtn.addEventListener('click', function () {
239            zoomReset()
240        });
241
242
243
244
245        // --------------------------------------------------------------
246
247
248
249        // COLOR ADJUSTMENT
250        let clrResetBtn = document.querySelector('[data-action-grp="cd-a11y--color"].cd-a11y--btn-reset');
251        let clrBtns = document.querySelectorAll('[data-action-grp="cd-a11y--color"]:not(.cd-a11y--btn-reset)');
252
253        // GET COLOR THEME FROM LOCAL STORAGE
254        clrAdjustmentStorage = this.localStorage.getItem('clrAdjustmentStorage');
255        if (clrAdjustmentStorage) {
256            clrResetClass();
257            htmlElem.classList.add(clrAdjustmentStorage);
258            clrResetBtn.classList.add('actv');
259            document.querySelector(`[data-action="${clrAdjustmentStorage}"]`).classList.add('actv');
260            isClrThemeActive = true;
261            a11yBtnsActv();
262        }
263
264
265        [...clrBtns].forEach(clrBtn => {
266            clrBtn.addEventListener('click', function () {
267
268                clrResetClass();
269                clrResetBtn.classList.add('actv');
270                clrBtn.classList.add('actv');
271                htmlElem.classList.add(clrBtn.getAttribute('data-action'));
272                isClrThemeActive = true;
273                a11yBtnsActv();
274
275                // SET COLOR THEME INTO LOCAL STORAGE
276                localStorage.setItem('clrAdjustmentStorage', clrBtn.getAttribute('data-action').toString());
277            });
278        });
279
280        function clrResetClass() {
281            let clrActvClass = document.querySelector('[data-action-grp="cd-a11y--color"]:not(.cd-a11y--btn-reset).actv');
282            if (clrActvClass) {
283                htmlElem.classList.remove(clrActvClass.getAttribute('data-action'))
284                clrActvClass.classList.remove('actv');
285            }
286
287        }
288
289        function clrReset() {
290            isClrThemeActive = false;
291            clrResetClass();
292            clrResetBtn.classList.remove('actv');
293            localStorage.removeItem('clrAdjustmentStorage');
294            a11yBtnsActv();
295        }
296
297        clrResetBtn.addEventListener('click', function () {
298            clrReset();
299        });
300    }
301
302});
303
304
305// --------------------------------------------------------------
306
307
308function a11yBtnsActv() {
309    let a11yBtn = document.querySelector('.cta--accessibilities .cta__a11y-tgl');
310    if (isFontScalingActive || isZoomScalingActive || isClrThemeActive) {
311        a11yBtn.classList.add('actv');
312    }
313    else {
314        a11yBtn.classList.remove('actv');
315    }
316}
317