https://www.schultz-bauzentrum.de/wp-content/plugins/sun-accessibi…/js/accessibility-toolbox.js?ver=5.0.36

1// Based on "acc_toolbar" by mickidum: https://github.com/mickidum/acc_toolbar/tree/master
2
3let toolBox;
4let toolBoxCloseButton;
5const fontSizeSelector = 'body,h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,li,td,th,strong,span,blockquote,div';
6
7function init() {
8	const toolBoxEl = document.getElementById('sun-accessibility-toolbox');
9	toolBox = UIkit.getComponent(toolBoxEl, 'offcanvas');
10
11	// CONTRAST CHANGE BUTTONS
12	const micContrastMonochrome = document.getElementById('sun-acc-toolbox-contrast-monochrome');
13	const micContrastSoft = document.getElementById('sun-acc-toolbox-contrast-soft');
14	const micContrastHard = document.getElementById('sun-acc-toolbox-contrast-hard');
15	
16	micContrastMonochrome.addEventListener('click', contrastChange);
17	micContrastSoft.addEventListener('click', contrastChange);
18	micContrastHard.addEventListener('click', contrastChange);
19
20	// DISABLE BUTONS
21	const micDisableButtonsAnimations = document.getElementById('sun-acc-toolbox-disable-buttons-animations');
22	const micDisableButtonsKeyboard = document.getElementById('sun-acc-toolbox-disable-buttons-keyboard');
23
24	micDisableButtonsAnimations.addEventListener('click', onceButtonChange);
25	micDisableButtonsKeyboard.addEventListener('click', onceButtonChange);
26
27	// FONT CHANGE BUTTONS
28	const micToolboxFontsUp = document.getElementById('sun-acc-toolbox-fonts-up');
29	const micToolboxFontsDown = document.getElementById('sun-acc-toolbox-fonts-down');
30	const micToolboxFontsSimple = document.getElementById('sun-acc-toolbox-fonts-simple');
31
32	micToolboxFontsUp.addEventListener('click', fontsChange);
33	micToolboxFontsDown.addEventListener('click', fontsChange);
34	micToolboxFontsSimple.addEventListener('click', onceButtonChange);
35
36	// CONTENT MARK BUTTONS
37	const micToolboxContentLinks = document.getElementById('sun-acc-toolbox-content-links');
38	const micToolboxContentHeaders = document.getElementById('sun-acc-toolbox-content-headers');
39	const micToolboxContentImages = document.getElementById('sun-acc-toolbox-content-images');
40
41	micToolboxContentLinks.addEventListener('click', onceButtonChange);
42	micToolboxContentHeaders.addEventListener('click', onceButtonChange);
43	micToolboxContentImages.addEventListener('click', onceButtonChange);
44	
45	// CURSORS CHANGE BUTTONS
46	const micToolboxCursorWhite = document.getElementById('sun-acc-toolbox-cursor-big-white');
47	const micToolboxCursorBlack = document.getElementById('sun-acc-toolbox-cursor-big-black');
48	const micToolboxZoomUp = document.getElementById('sun-acc-toolbox-zoom-up');
49
50	micToolboxCursorWhite.addEventListener('click', cursorChange);
51	micToolboxCursorBlack.addEventListener('click', cursorChange);
52	micToolboxZoomUp.addEventListener('click', onceButtonChange);
53
54	// RESET APP BUTTON
55	const micToolboxDisableButtonsAll = document.getElementById('sun-acc-toolbox-disable-buttons-reset-all');
56	micToolboxDisableButtonsAll.addEventListener('click', resetApp);
57	
58	initialApp();
59}
60
61// CONTRAST FUNCTION
62function contrastChange(event) {
63	event.preventDefault();
64
65	if (document.body.classList.contains(this.id)) {
66		this.classList.remove('uk-active');
67		document.body.classList.remove(this.id);
68		delete window.sunAccessibilityToolboxState.bodyClassList[this.id];
69	}
70	else {
71		const buttons = document.querySelectorAll('#sun-acc-toolbox-contrast-block button');
72		for (let i = 0; i < buttons.length; i++) {
73			buttons[i].classList.remove('uk-active');
74			document.body.classList.remove(buttons[i].id);
75
76			delete window.sunAccessibilityToolboxState.bodyClassList[buttons[i].id];
77		}
78		this.classList.add('uk-active');
79		document.body.classList.add(this.id);
80
81		window.sunAccessibilityToolboxState.bodyClassList[this.id] = this.id;
82	}
83	updateState();
84}
85
86// CURSOR CHANGE
87function cursorChange(event) {
88	event.preventDefault();
89
90	if (document.body.classList.contains(this.id)) {
91		this.classList.remove('uk-active');
92		document.body.classList.remove(this.id);
93		delete window.sunAccessibilityToolboxState.bodyClassList[this.id];
94	}
95	else {
96		const buttons = document.querySelectorAll('#sun-acc-toolbox-cursor-big-black,#sun-acc-toolbox-cursor-big-white');
97		for (let i = 0; i < buttons.length; i++) {
98			buttons[i].classList.remove('uk-active');
99			document.body.classList.remove(buttons[i].id);
100
101			delete window.sunAccessibilityToolboxState.bodyClassList[buttons[i].id];
102		}
103		this.classList.add('uk-active');
104		document.body.classList.add(this.id);
105
106		window.sunAccessibilityToolboxState.bodyClassList[this.id] = this.id;
107	}
108	updateState();
109}
110
111function onceButtonChange(event) {
112	event.preventDefault();
113
114	if (this.id === 'sun-acc-toolbox-disable-buttons-keyboard') {
115		window.sunAccessibilityToolboxState.keyboardRoot = !window.sunAccessibilityToolboxState.keyboardRoot;
116		keyboardRootEnable();
117	}
118
119	if (this.id === 'sun-acc-toolbox-content-images') {
120		imagesChange();
121	}
122
123	if (document.body.classList.contains(this.id)) {
124		this.classList.remove('uk-active');

125		document.body.classList.remove(this.id);
126
127		delete window.sunAccessibilityToolboxState.bodyClassList[this.id];
128	}
129	else {
130		this.classList.add('uk-active');
131		document.body.classList.add(this.id);
132
133		window.sunAccessibilityToolboxState.bodyClassList[this.id] = this.id;
134	}
135	updateState();
136}
137
138function keyboardRootEnable() {
139	if (window.sunAccessibilityToolboxState.keyboardRoot) {
140		const headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea');
141		for (let i = 0; i < headers.length; i++) {
142			const item = headers[i];
143			item.tabIndex = i + 1
144		}
145	}
146	else {
147		window.location.reload();
148	}
149}
150
151// FONTS CHANGE
152function fontsChange(event) {
153	event.preventDefault();
154	
155	let counter = window.sunAccessibilityToolboxState.fontSize;
156
157	if (this.id === 'sun-acc-toolbox-fonts-up') {
158			if (counter >= 1.6) {return}
159			const items = document.querySelectorAll(fontSizeSelector);
160			for (let i = 0; i < items.length; i++) {
161			const item = items[i];
162			const font = window.getComputedStyle(item).getPropertyValue('font-size').split('px');
163			const fontSize = Number(font[0]);
164			item.style.fontSize = (fontSize * 1.1).toFixed() + 'px';
165		}
166		counter = (counter * 1.1).toFixed(2);
167	}
168	if (this.id === 'sun-acc-toolbox-fonts-down') {
169			if (counter <= 1) {
170				window.sunAccessibilityToolboxState.fontSize = 1;
171				updateState();
172				return;
173			}
174			const items = document.querySelectorAll(fontSizeSelector);
175			for (let i = 0; i < items.length; i++) {
176			const item = items[i];
177			const font = window.getComputedStyle(item).getPropertyValue('font-size').split('px');
178			const fontSize = Number(font[0]);
179			item.style.fontSize = (fontSize / 1.1).toFixed() + 'px';
180		}
181		counter = (counter / 1.1).toFixed(2);
182	}
183
184	window.sunAccessibilityToolboxState.fontSize = counter;
185	getFontsChanges(counter);
186	updateState();
187}
188
189// INITIAL FONT SIZE
190function initFontsChange() {
191	const items = document.querySelectorAll(fontSizeSelector);
192	const initFontSize = window.sunAccessibilityToolboxState.fontSize;
193	for (let i = 0; i < items.length; i++) {
194		const item = items[i];
195		const font = window.getComputedStyle(item).getPropertyValue('font-size');
196		item.style.fontSize = font;
197		const fs = item.style.fontSize.split('px');
198	}
199	for (let i = 0; i < items.length; i++) {
200		const item = items[i];
201		const font = window.getComputedStyle(item).getPropertyValue('font-size').split('px');
202		const fs = Number(font[0]);
203		item.style.fontSize = (fs * initFontSize).toFixed() + 'px';
204	}
205	if (initFontSize) {
206		getFontsChanges(initFontSize);
207	}
208}
209
210function initFontsChangeFirst() {
211	const items = document.querySelectorAll(fontSizeSelector);
212	for (let i = 0; i < items.length; i++) {
213		const item = items[i];
214		const font = window.getComputedStyle(item).getPropertyValue('font-size');
215		item.style.fontSize = font;
216		const fs = item.style.fontSize.split('px');
217	}
218}
219
220function getFontsChanges(initFontSize) {
221	if (initFontSize > 1) {
222		document.getElementById('sun-acc-toolbox-fonts-up').classList.add('uk-active');
223		const initPerc = (Number(initFontSize) * 100 - 100).toFixed();
224		const perc = '+' + initPerc + ' %';
225		document.getElementById('sun-acc-toolbox-fonts-up-enabled').textContent = perc;
226	}
227	else {
228		document.getElementById('sun-acc-toolbox-fonts-up').classList.remove('uk-active');
229		document.getElementById('sun-acc-toolbox-fonts-up-enabled').textContent = '';
230	}
231}
232
233// IMAGES CHANGE
234function imagesChange() {
235	if (document.body.classList.contains('sun-acc-toolbox-content-images')) {
236		const titles = document.querySelectorAll('.sun-acc-toolbox-images-titles');
237		for (let i = 0; i < titles.length; i++) {
238			const parent = titles[i].parentElement;
239			parent.removeChild(titles[i]);
240		}
241		window.sunAccessibilityToolboxState.imagesTitle = false;
242	}
243	else {
244		imagesAddTitles();
245		window.sunAccessibilityToolboxState.imagesTitle = true;
246	}
247}
248
249function imagesAddTitles() {
250	const images = document.images;
251	for (let i = 0; i < images.length; i++) {
252		const img = images[i];
253		if (img.alt) {
254			const title = document.createElement('span');
255			title.className = 'sun-acc-toolbox-images-titles';
256			title.textContent = img.alt;
257			img.parentNode.insertBefore(title, img);
258		}
259		else {

260			const title = document.createElement('span');
261			title.className = 'sun-acc-toolbox-images-titles';
262			title.textContent = 'image without text';
263			img.parentNode.insertBefore(title, img);
264		}
265	}
266}
267
268function updateState() {
269	const jsonSting = JSON.stringify(window.sunAccessibilityToolboxState);
270	if (typeof(Storage) !== "undefined") {
271	    localStorage.setItem('sun-accessibility-toolbox-state', jsonSting);
272	} else {
273	    console.log('No Storage Found');
274	}
275}
276
277function openBox() {
278	toolBox.show();
279	
280	if (!window.sunAccessibilityToolboxState.initFontSize || window.sunAccessibilityToolboxState.fontSize <= 1) {
281		initFontsChangeFirst();
282		window.sunAccessibilityToolboxState.initFontSize = true;
283	}
284}
285
286function closeBox() {
287	toolBox.hide();
288}
289
290function resetApp(event) {
291	localStorage.removeItem('sun-accessibility-toolbox-state');
292	window.location.reload();
293}
294
295function initialApp() {
296	window.sunAccessibilityToolboxState = JSON.parse(localStorage.getItem('sun-accessibility-toolbox-state')) || {
297		bodyClassList: {},
298		fontSize: 1,
299		imagesTitle: false,
300		keyboardRoot: false,
301		initFontSize: false
302	};
303
304	// INIT ADDING CLASSES TO BODY
305	if (window.sunAccessibilityToolboxState.bodyClassList) {
306		for (let bodyClass in window.sunAccessibilityToolboxState.bodyClassList) {
307			const initBodyClassList = window.sunAccessibilityToolboxState.bodyClassList[bodyClass];
308			const enabledButton = document.getElementById(initBodyClassList);
309			if (enabledButton) {
310				enabledButton.classList.add('uk-active');
311			}
312			document.body.classList.add(initBodyClassList);
313		}
314	}
315
316	// FONT SIZE INIT
317	if (window.sunAccessibilityToolboxState.fontSize > 1) {
318		initFontsChange();
319	}
320
321	// SET IMAGES TITLES
322	if (window.sunAccessibilityToolboxState.imagesTitle) {
323		imagesAddTitles();
324	}
325
326	// SET KEBOARD ROOTING
327	if (window.sunAccessibilityToolboxState.keyboardRoot) {
328		keyboardRootEnable();
329	}
330}
331
332window.onload = () => {
333	init();
334
335	window.sunAccessibilityToolbox = {
336		openBox,
337		closeBox
338	};
339
340	document.addEventListener('keydown', (event) => {
341		if (event.key == 'Escape') {
342			closeBox();
343		}
344		if (event.key == 'F2') {
345			openBox();
346		}
347	});
348
349	for (let el of document.querySelectorAll('a[href="#accessibility-settings"')) {
350		el.addEventListener('click', openBox);
351	}
352};