https://uml.lodz.pl/typo3conf/ext/uml_portal/Resources/Public/Vend…/accessibility.toolbox.js?1787830435

1/*
2 Page accessibility tools
3 */
4
5var theme = (function () {
6    var themeIsSet = false;
7    var currentTheme = localStorage.getItem('currentTheme');
8
9    /*
10     Set theme at start if was activated
11     */
12
13    var setTheme = function () {
14        if (currentTheme) {
15            var themeCssLink = document.querySelector('link[title="' + currentTheme + '"]');
16
17            document.querySelector('html').classList.add(currentTheme);
18            themeCssLink.disabled = true;
19            themeCssLink.disabled = false;
20            themeIsSet = true;
21        }
22    };
23
24    /*
25     HIGH CONTRAST TOGGLE BUTTON
26     */
27
28    var themeSwitcher = function () {
29        var themeSwitchBtns = document.querySelectorAll('[data-theme-switcher]');
30
31        [].forEach.call(themeSwitchBtns, function(themeSwitchBtn) {
32
33            // Set classes to the related elements if theme is active
34            if (themeIsSet) {
35                themeSwitchBtn.classList.add('active');
36                document.querySelector('html').classList.add(currentTheme);
37            }
38
39            // BTN SWITCH
40            if (themeSwitchBtn) {
41                themeSwitchBtn.addEventListener('click', function (evt) {
42                    var themeName = this.getAttribute('data-theme-switcher');
43                    var themeCssLink = document.querySelector('link[title="' + themeName + '"]');
44
45                    if (!themeCssLink) {
46                        console.info('theme stylesheet file not set');
47                        evt.preventDefault();
48                    }
49
50                    this.classList.toggle('active');
51                    document.querySelector('html').classList.toggle(themeName);
52
53                    if (localStorage.getItem('currentTheme')) {
54                        themeCssLink.disabled = true;
55                        localStorage.removeItem('currentTheme');
56                    } else {
57                        themeCssLink.disabled = true;
58                        themeCssLink.disabled = false;
59                        localStorage.setItem('currentTheme', themeName);
60                    }
61
62                    evt.preventDefault();
63                });
64            }
65
66        });
67
68    };
69
70    return {
71        setTheme: setTheme,
72        themeSwitcher: themeSwitcher
73    };
74})();
75
76
77var accessibility = {
78
79    /*
80     HIDDEN TABULATOR MENU
81     */
82
83    tabMenu: function () {
84        var accessibilityTabMenu = document.getElementById('accessibility-tab-menu');
85
86        if (accessibilityTabMenu) {
87            accessibilityTabMenu.addEventListener('click', function (event) {
88                if (event.target.matches('a')) {
89                    var targetId = event.target.getAttribute('href').substring(1);
90                    var targetElement = document.getElementById(targetId);
91
92                    targetElement.setAttribute('tabindex', -1);
93                    targetElement.focus();
94
95                    if (targetElement === document.activeElement){
96                        console.info('Focused element: id="' + targetId + '"');
97                    }
98
99                    event.stopPropagation();
100                }
101            });
102        }
103    },
104
105    /*
106     CODE EXAMPLES
107     */
108
109    /*
110     SHOW HIDDEN SECOND LEVEL MENU ON TAB SWITCH
111     */
112
113    hoveredNav: function () {
114        var mainNav = document.querySelector('.main-nav');
115
116        if (mainNav) {
117            function focusAndBlurHandler(event) {
118                if (event.target.matches('a')) {
119                    var focusedElement = event.target;
120                    var focusedElementParent = focusedElement.parentElement;
121                    var secondLevel = focusedElement.closest('ul');
122                    var secondLevelParent = secondLevel.parentElement;
123
124                    focusedElement.classList.add('focused');
125
126                    if (focusedElementParent.tagName == 'LI'){
127                        focusedElementParent.classList.add('hover');
128                    }
129
130                    if (secondLevelParent.tagName == 'LI'){
131                        focusedElementParent.classList.add('hover');
132                    }
133
134                    focusedElement.addEventListener('blur', function () {
135                        focusedElement.classList.remove('focused');
136
137                        if (!focusedElementParent.nextElementSibling){
138                            secondLevelParent.classList.remove('hover');
139                        }
140
141                        if (secondLevelParent.tagName == 'LI'){
142                            focusedElementParent.classList.remove('hover');
143                        }
144                    }, true);
145
146                    event.stopPropagation();
147                }
148            }
149
150            mainNav.addEventListener('focus', focusAndBlurHandler, true);
151        }
152    },
153
154    init: function () {
155        this.tabMenu();
156        this.hoveredNav();
157    }
158};
159
160/*
161 SET THEME IMMEDIATELY
162 */
163
164theme.setTheme();
165
166/*
167 WHEN DOCUMENT READY
168 */
169
170document.addEventListener('DOMContentLoaded', function () {
171    accessibility.init();
172    theme.themeSwitcher();
173}, false);