https://www.unterkirnach.de/fileadmin/templates/extensions/hw_menu/js/hw_breadcrumb.js

1import * as hwMenu from './hw_menu__shared.js';
2
3export function generateBreadcrumbData(currentId) {
4	const hwMenuContainer = document.querySelector('.hw_menu');
5	let hw_menu__data__breadcrumb = hwMenu.getData(hwMenuContainer);
6	let activeElement = hwMenu.buildMenuData(hw_menu__data__breadcrumb, currentId);
7
8	if (Object.keys(activeElement).length === 0) {
9		const url = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
10		const updatedUrlArray = url.split('/');
11		const updatedUrl = '/' + updatedUrlArray.splice(3, (updatedUrlArray.length - 3)).join('/');
12
13		activeElement = hwMenu.getElementWithUrl(hw_menu__data__breadcrumb, updatedUrl);
14		activeElement.active = true;
15	}
16
17	hw_menu__data__breadcrumb[0].activeElement = activeElement;
18
19	return hw_menu__data__breadcrumb;
20}
21
22export function generateBreadcrumb(container, data, maxDepth) {
23	const activeElement = data[0].activeElement;
24	const classPrefix = 'hw_breadcrumb';
25
26	container.append(buildBreadcrumb(maxDepth, activeElement, classPrefix));
27}
28
29function buildBreadcrumb(maxDepth, activeElement, classPrefix) {
30	const parents = hwMenu.getParents(activeElement).reverse();
31
32	const breadcrumb = `
33		<ol class="${classPrefix}__list">
34		</ol>
35	`;
36	
37	const htmlFragment = document.createRange().createContextualFragment(breadcrumb);
38	
39	parents.push(activeElement);
40	
41	parents.map(parent => {
42		parent.children = [];
43		parent.visible = true;
44		htmlFragment.querySelector(`.${classPrefix}__list`).append(hwMenu.buildMenuListElement(parent, false, maxDepth, activeElement, classPrefix));
45	});
46
47	return htmlFragment;
48}
49
50if (document.querySelector('.hw_breadcrumb')) {
51
52	setTimeout(() => {
53		switch (true) {
54		case document.body.classList.contains('buerger'):
55			document.querySelector('.hw_breadcrumb__link').setAttribute('href', '/buerger/');
56			break;
57		case document.body.classList.contains('echt'):
58			document.querySelector('.hw_breadcrumb__link').setAttribute('href', '/echt-unterkirnach/');
59			break;
60		case document.body.classList.contains('ffw'):
61			document.querySelector('.hw_breadcrumb__link').setAttribute('href', '');
62			break;
63		case document.body.classList.contains('jugend'):
64			document.querySelector('.hw_breadcrumb__link').setAttribute('href', '');
65			break;
66		case document.body.classList.contains('spielscheune'):
67			document.querySelector('.hw_breadcrumb__link').setAttribute('href', '');
68			break;
69		}
70	}, '5000');
71}
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87/* 
88function buildBreadcrumbs() {
89
90	// Das Hauptmenü wird geklont um die Breadcrumbs bilden zu können
91	const mainMenu = document.querySelector('.hw_menu__primary');
92	const mainMenuClone = mainMenu.cloneNode(true);
93
94	// Das Array „breadcrumbs“ wird definiert
95	let breadcrumbs = [];
96
97	// Das aktive Element wird definiert
98	const pageUid = parseInt(document.body.id.replace('id', ''));
99	const activeElement = mainMenuClone.querySelector('a[data-uid="' + pageUid + '"]');
100
101	// Es wird ein Event erstellt, um den Tree von activeElement zurückverfolgen zu können
102	const buildBreadcrumbsEvent = new Event('createBreadcrumbs');
103
104	activeElement.addEventListener('createBreadcrumbs', event => {
105
106		// Hier wird der Tree vom aktiven Element zurück erstellt
107		const eventPath = event.composedPath();
108		const pathElements = [];
109
110		pathElements.push(eventPath[0]);
111		eventPath.filter(list => list.classList.contains('hw_menu__list') && !list.classList.contains('hw_menu__level_0')).forEach(list => {
112			pathElements.push(list);
113		});
114
115		// Im erstellten Tree werden die Listen ermittelt, die nicht auf oberster Ebene liegen
116		pathElements.forEach(element => {
117			let firstLink;
118
119			if (element.classList.contains('hw_menu__link')) {
120
121				// Das Element wird geklont
122				const firstLinkClone = element.cloneNode(true);
123
124				// Ein neuer Span wird erstellt für den Text und die passende Klasse hinzugefügt
125				const newActiveElement = document.createElement('span');
126
127				newActiveElement.appendChild(firstLinkClone.querySelector('.hw_menu__link_text'));
128
129				// Es werden neue Klassen hinzugefügt
130				newActiveElement.classList.add('hw_breadcrumb__link--active');
131				newActiveElement.setAttribute('aria-current', 'page');
132

133				// Bei dem untergeordneten Span Element werden die Klassen entfernt und eine neue hinzugefügt
134				const newActiveElementSpan = newActiveElement.querySelector('.hw_menu__link_text');
135
136				newActiveElementSpan.classList.remove(...newActiveElementSpan.classList);
137				newActiveElementSpan.classList.add('hw_breadcrumb__link_text');
138
139				firstLink = newActiveElement;
140			} else {
141
142				// Das Element wird geklont
143				const firstLinkClone = element.cloneNode(true);
144
145				// Es werden die jeweils ersten Links der aktuellen Liste ermittelt
146				firstLink = firstLinkClone.querySelectorAll('.hw_menu__link')[0];
147
148				// Es wird der Listentitel ermittelt
149				const listTitle = element.getAttribute('data-title');
150
151				// Der Text des Links wird durch den Listentitel ersetzt
152				firstLink.querySelector('.hw_menu__link_text').textContent = listTitle;
153
154				// Die Menüklassen der Links werden entfernt
155				firstLink.classList.remove(...firstLink.classList);
156                
157				// Es werden neue Klassen hinzugefügt
158				firstLink.classList.add('hw_breadcrumb__link');
159
160				// Bei dem untergeordneten Span Element werden die Klassen entfernt und eine neue hinzugefügt
161				const firstLinkSpan = firstLink.querySelector('.hw_menu__link_text');
162
163				firstLinkSpan.classList.remove(...firstLinkSpan.classList);
164				firstLinkSpan.classList.add('hw_breadcrumb__link_text');
165			}
166
167			breadcrumbs.push(firstLink);
168		});
169	});
170
171	// Das Event wird getriggert
172	activeElement.dispatchEvent(buildBreadcrumbsEvent);
173
174	// Der Startseitenlink wird erstellt, Klassen hinzugefügt, ein Span mit dem Text erstellt und hinzugefügt und zuletzt in das Array eingefügt
175	const startseite = document.createElement('a');
176
177	startseite.href = '/';
178	startseite.classList.add('hw_breadcrumb__link');
179
180	const startseiteSpan = document.createElement('span');
181
182	startseiteSpan.classList.add('hw_breadcrumb__link_text');
183	startseiteSpan.textContent = 'Startseite';
184	startseite.appendChild(startseiteSpan);
185	breadcrumbs.push(startseite);
186
187	// Die Reihenfolge des Arrays wird reversed
188	breadcrumbs.reverse();
189
190	// Das Breadcrumb Element im dom wird abgefragt
191	const breadcrumbList = document.querySelector('.hw_breadcrumb__list');
192
193	// Die Elemente aus dem breadcrumbs Array werden dem Breadcrumb Element hinzugefügt
194
195	breadcrumbs.forEach(breadcrumb => {
196		const li = document.createElement('li');
197
198		li.classList.add('hw_breadcrumb__list_element');
199		li.appendChild(breadcrumb);
200		breadcrumbList.appendChild(li);
201	});
202
203	// Der mainMenu klon wird entfernt
204	mainMenuClone.remove();
205}
206 */