https://uinkhas.ac.id/assets/frontendv2/js/accessibility.js?v=1790242278

1/**
2 * Accessibility Toolbar JavaScript controller
3 * Persists user options across page loads using localStorage
4 */
5
6document.addEventListener('DOMContentLoaded', function() {
7    const accBtn = document.getElementById('acc-toggle-btn');
8    const accPanel = document.getElementById('acc-panel');
9    const accClose = document.getElementById('acc-close');
10    const resetBtn = document.getElementById('acc-reset');
11    
12    // Toggles
13    const grayscaleToggle = document.getElementById('acc-grayscale-toggle');
14    const contrastToggle = document.getElementById('acc-contrast-toggle');
15    
16    // Font size buttons
17    const fontButtons = {
18        'sm': document.getElementById('acc-font-sm'),
19        'md': document.getElementById('acc-font-md'),
20        'lg': document.getElementById('acc-font-lg'),
21        'xl': document.getElementById('acc-font-xl')
22    };
23
24    // Open/Close Panel
25    if (accBtn && accPanel) {
26        accBtn.addEventListener('click', function(e) {
27            e.stopPropagation();
28            accPanel.classList.toggle('active');
29        });
30    }
31
32    if (accClose && accPanel) {
33        accClose.addEventListener('click', function() {
34            accPanel.classList.remove('active');
35        });
36    }
37
38    // Close panel when clicking outside
39    document.addEventListener('click', function(e) {
40        if (accPanel && accPanel.classList.contains('active')) {
41            const isClickInside = accPanel.contains(e.target) || (accBtn && accBtn.contains(e.target));
42            if (!isClickInside) {
43                accPanel.classList.remove('active');
44            }
45        }
46    });
47
48    // Font Sizing Function
49    Object.keys(fontButtons).forEach(size => {
50        const btn = fontButtons[size];
51        if (btn) {
52            btn.addEventListener('click', function() {
53                setFontSize(size);
54            });
55        }
56    });
57
58    function setFontSize(size) {
59        // Remove existing font size classes
60        const classes = ['acc-font-sm', 'acc-font-md', 'acc-font-lg', 'acc-font-xl'];
61        classes.forEach(c => document.documentElement.classList.remove(c));
62        
63        // Add new class
64        document.documentElement.classList.add(`acc-font-${size}`);
65        localStorage.setItem('acc-font-size', size);
66        
67        // Update active class on buttons
68        Object.keys(fontButtons).forEach(s => {
69            const btn = fontButtons[s];
70            if (btn) {
71                if (s === size) {
72                    btn.classList.add('active');
73                } else {
74                    btn.classList.remove('active');
75                }
76            }
77        });
78    }
79
80    // Grayscale Toggle
81    if (grayscaleToggle) {
82        grayscaleToggle.addEventListener('change', function() {
83            if (this.checked) {
84                document.documentElement.classList.add('acc-grayscale');
85                localStorage.setItem('acc-grayscale', 'true');
86            } else {
87                document.documentElement.classList.remove('acc-grayscale');
88                localStorage.setItem('acc-grayscale', 'false');
89            }
90        });
91    }
92
93    // Contrast Toggle
94    if (contrastToggle) {
95        contrastToggle.addEventListener('change', function() {
96            if (this.checked) {
97                document.documentElement.classList.add('acc-contrast');
98                localStorage.setItem('acc-contrast', 'true');
99            } else {
100                document.documentElement.classList.remove('acc-contrast');
101                localStorage.setItem('acc-contrast', 'false');
102            }
103        });
104    }
105
106    // Reset Functionality
107    if (resetBtn) {
108        resetBtn.addEventListener('click', function() {
109            // Font size back to Normal
110            setFontSize('md');
111            
112            // Grayscale off
113            if (grayscaleToggle) {
114                grayscaleToggle.checked = false;
115                document.documentElement.classList.remove('acc-grayscale');
116                localStorage.setItem('acc-grayscale', 'false');
117            }
118            
119            // Contrast off
120            if (contrastToggle) {
121                contrastToggle.checked = false;

122                document.documentElement.classList.remove('acc-contrast');
123                localStorage.setItem('acc-contrast', 'false');
124            }
125        });
126    }
127
128    // Initialize UI active states from localStorage
129    function initActiveStates() {
130        const savedFontSize = localStorage.getItem('acc-font-size') || 'md';
131        Object.keys(fontButtons).forEach(s => {
132            const btn = fontButtons[s];
133            if (btn) {
134                if (s === savedFontSize) {
135                    btn.classList.add('active');
136                } else {
137                    btn.classList.remove('active');
138                }
139            }
140        });
141
142        const savedGrayscale = localStorage.getItem('acc-grayscale') === 'true';
143        if (grayscaleToggle) {
144            grayscaleToggle.checked = savedGrayscale;
145        }
146
147        const savedContrast = localStorage.getItem('acc-contrast') === 'true';
148        if (contrastToggle) {
149            contrastToggle.checked = savedContrast;
150        }
151    }
152
153    initActiveStates();
154});