https://www.lasten-zauber.de/wp-content/plugins/barrierefrei-helper/js/barrierefreiheit.js?ver=1.0.0

1document.addEventListener('DOMContentLoaded', function () {
2    const lastCacheClear = parseInt(localStorage.getItem('lastBFCacheClear') || '0');
3    const lastKnownClear = parseInt(BarrierefreiheitSettings.lastCacheClear);
4    var closable = false, closing = false;
5    
6
7    console.log(BarrierefreiheitSettings);
8
9    if (lastKnownClear > lastCacheClear) {
10        const keysToClear = ['barrierefreieSettings'];
11        keysToClear.forEach(key => {
12            localStorage.removeItem(key);
13        });
14
15        localStorage.setItem('lastBFCacheClear', lastKnownClear);
16        console.log('Ausgewählte LocalStorage Einstellungen wurden geleert.');
17    }
18
19    function setLocal(settings) {
20        localStorage.setItem('barrierefreieSettings', JSON.stringify(settings));
21    }
22
23    function getLocal() {
24        const settings = localStorage.getItem('barrierefreieSettings');
25        return settings ? JSON.parse(settings) : {
26            originalElements: {},
27            contrastElements: {},
28            isContrastMode: false
29        };
30    }
31
32    var root = document.documentElement;
33    var settings = getLocal();
34    var currentFontSize = parseFloat(window.getComputedStyle(root).fontSize);
35    let contrastIndex = 0;
36    const contrastDataAttr = "data-contrast-index";
37
38    if (!settings.defaultFontSize) {
39        settings.defaultFontSize = currentFontSize;
40        setLocal(settings);
41    }
42
43    window.resetColor = function (variableName) {
44        document.body.style.removeProperty('--e-global-color-' + variableName);
45        var defaultColor = settings[variableName + 'DefaultColor'];
46        document.getElementById(variableName + '-color').value = defaultColor;
47        settings[variableName + 'Color'] = defaultColor;
48        setLocal(settings);
49    };
50
51    window.resetFontSize = function () {
52        currentFontSize = settings.defaultFontSize;
53        changeFontSize(1);
54    }
55
56    window.toggleContrastMode = function () {
57        let isContrastMode = settings['isContrastMode'];
58        document.querySelectorAll(`[${contrastDataAttr}]`).forEach(el => {
59            let index = el.getAttribute(contrastDataAttr);
60            let colors = isContrastMode ? settings.originalElements[index] : settings.contrastElements[index];
61            if (colors) {
62                el.style.color = colors.text;
63                el.style.backgroundColor = colors.background;
64            }
65        });
66
67        settings['isContrastMode'] = !isContrastMode;
68        setLocal(settings);
69    }
70
71    function changeFontSize(factor) {
72        currentFontSize *= factor;
73        root.style.fontSize = currentFontSize + 'px';
74        settings.currentFontSize = currentFontSize;
75        setLocal(settings);
76    }
77
78    function setColor(toChange) {
79        if (settings[toChange + 'Color']) return;
80        var color = getComputedStyle(document.getElementById('get_colors')).getPropertyValue('--e-global-color-' + toChange).trim();
81        document.getElementById(toChange + '-color').value = color;
82        settings[toChange + 'DefaultColor'] = color;
83        setLocal(settings);
84    }
85
86    function isElementVisible(element) {
87        if (!element) return false;
88
89        while (element) {
90            const style = window.getComputedStyle(element);
91            if (style.display === 'none' || style.visibility === 'hidden') return false;
92            element = element.parentElement;
93        }
94        return true;
95    }
96
97    window.resetAll = function () {
98        Object.keys(settings).forEach(function (key) {
99            if (key.includes('DefaultColor')) {
100                var variableName = key.replace('DefaultColor', '');
101                resetColor(variableName);
102            }
103        });
104        resetFontSize();
105    }
106
107    if (BarrierefreiheitSettings.fontSizeEnabled === "1") {
108        if (settings.currentFontSize) {
109            currentFontSize = parseFloat(settings.currentFontSize);
110            root.style.fontSize = settings.currentFontSize + 'px';
111        }
112
113        document.getElementById('increase-font-size').addEventListener('click', function () {
114            changeFontSize(1.1);
115        });
116        document.getElementById('decrease-font-size').addEventListener('click', function () {
117            changeFontSize(0.9);
118        });
119    }
120
121    if (BarrierefreiheitSettings.colorChoiceEnabled === "1") {
122        ['primary', 'secondary', 'accent', 'text'].forEach(function (colorName) {
123            if (settings[colorName + 'Color']) {
124                var storedColor = settings[colorName + 'Color'];
125                document.body.style.setProperty('--e-global-color-' + colorName, storedColor, 'important');
126                document.getElementById(colorName + '-color').value = storedColor;
127            }
128        });
129
130        setTimeout(() => {
131            setColor('primary');
132            setColor('secondary');
133            setColor('accent');
134            setColor('text');
135        }, 250);
136
137        document.getElementById('primary-color').addEventListener('input', function (e) {
138            settings.primaryColor = this.value;
139            document.body.style.setProperty('--e-global-color-primary', this.value, 'important');
140            setLocal(settings);
141        });
142        document.getElementById('secondary-color').addEventListener('input', function () {
143            settings.secondaryColor = this.value;
144            document.body.style.setProperty('--e-global-color-secondary', this.value, 'important');
145            setLocal(settings);
146        });
147        document.getElementById('accent-color').addEventListener('input', function () {
148            settings.accentColor = this.value;
149            document.body.style.setProperty('--e-global-color-accent', this.value, 'important');
150            setLocal(settings);
151        });
152        document.getElementById('text-color').addEventListener('input', function () {
153            settings.textColor = this.value;
154            document.body.style.setProperty('--e-global-color-text', this.value, 'important');
155            setLocal(settings);
156        });
157    }
158
159    if (BarrierefreiheitSettings.tocEnabled === "1") {
160
161        var headers = document.querySelectorAll(BarrierefreiheitSettings.tocTag);
162        var tocList = document.getElementById('tocList');
163

164        headers.forEach(function (header, index) {
165            if (isElementVisible(header)) {
166                var listItem = document.createElement('li');
167                var link = document.createElement('a');
168                link.textContent = header.textContent;
169                link.href = "#header" + index;
170                header.id = "header" + index;
171                listItem.appendChild(link);
172
173                link.addEventListener('click', function (e) {
174                    e.preventDefault();
175                    document.getElementById(header.id).scrollIntoView({ behavior: 'smooth' });
176                });
177
178                tocList.appendChild(listItem);
179            }
180        });
181    }
182
183    document.addEventListener('click', function (event) {
184        var popup = document.getElementById('barrierefreiheit-popup');
185        var closeButton = document.getElementById('close-popup');
186
187        if (!popup.contains(event.target) && popup.classList.contains('active')) {
188            closeButton.click();
189        }
190    });
191
192    document.getElementById('barrierefreiheit-icon').addEventListener('click', function () {
193        if (closing) return;
194
195        popup = document.getElementById('barrierefreiheit-popup');
196        popup.classList.add('active');
197        setTimeout(() => {
198            popup.style.transform = 'translateY(0)';
199            document.getElementById('barrierefreiheit-icon').style.display = 'none';
200            closable = true;
201        }, 10)
202    });
203    document.getElementById('close-popup').addEventListener('click', function () {
204        if (!closable) return;
205
206        popup = document.getElementById('barrierefreiheit-popup');
207        popup.style.transform = 'translateY(-100%)';
208        closable = false;
209        closing = true;
210        setTimeout(() => {
211            popup.classList.remove('active');
212            closing = false;
213            document.getElementById('barrierefreiheit-icon').style.removeProperty('display');
214        }, 300)
215    });
216
217    if (BarrierefreiheitSettings.contrastEnabled === "1") {
218        function getLuminance(rgb) {
219            let a = rgb.map(function (v) {
220                v /= 255;
221                return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
222            });
223            return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
224        }
225
226        function getContrastRatio(rgb1, rgb2) {
227            let lum1 = getLuminance(rgb1);
228            let lum2 = getLuminance(rgb2);
229            let brightest = Math.max(lum1, lum2);
230            let darkest = Math.min(lum1, lum2);
231            return (brightest + 0.05) / (darkest + 0.05);
232        }
233
234        function parseColor(input) {
235            var m;
236            if ((m = input.match(/^#([0-9a-f]{6})$/i)) !== null) {
237                return [
238                    parseInt(m[1].substr(0, 2), 16),
239                    parseInt(m[1].substr(2, 2), 16),
240                    parseInt(m[1].substr(4, 2), 16)
241                ];
242            } else if ((m = input.match(/^rgb\s*\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/)) !== null) {
243                return [parseInt(m[1]), parseInt(m[2]), parseInt(m[3])];
244            } else if ((m = input.match(/^rgba\s*\(\s*(\d+),\s*(\d+),\s*(\d+),\s*([0-9\.]+)\s*\)$/)) !== null) {
245                return [parseInt(m[1]), parseInt(m[2]), parseInt(m[3])];
246            }
247            return null;
248        }
249
250
251        function getEffectiveBackgroundColor(element) {
252            let backgroundColor = window.getComputedStyle(element).backgroundColor;
253            while (element.parentElement && backgroundColor === 'rgba(0, 0, 0, 0)') {
254                element = element.parentElement;
255                backgroundColor = window.getComputedStyle(element).backgroundColor;
256            }
257            return backgroundColor;
258        }
259
260        function adjustColorForContrast(textRgb, backgroundRgb) {
261            let contrastRatio = getContrastRatio(textRgb, backgroundRgb);
262            if (contrastRatio >= 4.5) return null;
263
264            let adjustedTextRgb = [...textRgb];

265            let adjustedBackgroundRgb = [...backgroundRgb];
266            const step = 10;
267
268            while (contrastRatio < 4.5) {
269                if (getLuminance(adjustedTextRgb) > getLuminance(adjustedBackgroundRgb)) {
270                    adjustedTextRgb = adjustedTextRgb.map(c => Math.min(c + step, 255));
271                    adjustedBackgroundRgb = adjustedBackgroundRgb.map(c => Math.max(c - step, 0));
272                } else {
273                    adjustedTextRgb = adjustedTextRgb.map(c => Math.max(c - step, 0));
274                    adjustedBackgroundRgb = adjustedBackgroundRgb.map(c => Math.min(c + step, 255));
275                }
276                contrastRatio = getContrastRatio(adjustedTextRgb, adjustedBackgroundRgb);
277            }
278
279            return {
280                text: `rgb(${adjustedTextRgb.join(", ")})`,
281                background: `rgb(${adjustedBackgroundRgb.join(", ")})`
282            };
283        }
284
285        function applyContrastImprovements(el, textColor, backgroundColor) {
286            let originalColor = { text: '', background: '' };
287            let textRgb = parseColor(textColor);
288            let backgroundRgb = parseColor(backgroundColor);
289            let newColors = adjustColorForContrast(textRgb, backgroundRgb);
290
291            if (newColors) {
292                if (!el.hasAttribute(contrastDataAttr)) {
293                    el.setAttribute(contrastDataAttr, contrastIndex++);
294                }
295                let index = el.getAttribute(contrastDataAttr);
296                settings['originalElements'][index] = originalColor;
297                settings['contrastElements'][index] = newColors;
298
299                setLocal(settings);
300            }
301        }
302
303        function checkPageContrast() {
304            let elements = document.querySelectorAll('body *');
305            elements.forEach(el => {
306                if (!isElementVisible(el)) return;
307
308                let textColor = window.getComputedStyle(el).color;
309                let backgroundColor = getEffectiveBackgroundColor(el);
310                applyContrastImprovements(el, textColor, backgroundColor);
311            });
312        }
313
314        checkPageContrast();
315        if (settings['isContrastMode']) {
316            settings['isContrastMode'] = !settings['isContrastMode'];
317            setTimeout(() => {
318                toggleContrastMode();
319                document.getElementById('contrast-toggle').checked = true;
320            }, 250);
321        }
322    }
323});