https://www.emmendingen.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 = hwMenu.findMatchingBaseUrl(window.location.href, hw_menu__data__breadcrumb);
10
11		activeElement = hwMenu.getElementWithUrl(hw_menu__data__breadcrumb, url);
12		activeElement.parentOfActive = true;
13
14	}
15
16	hw_menu__data__breadcrumb[0].activeElement = activeElement;
17
18	return hw_menu__data__breadcrumb;
19}
20
21export function generateBreadcrumb(container, data, maxDepth) {
22	const activeElement = data[0].activeElement;
23	const classPrefix = 'hw_breadcrumb';
24
25	container.append(buildBreadcrumb(maxDepth, activeElement, classPrefix));
26}
27
28function buildBreadcrumb(maxDepth, activeElement, classPrefix) {
29	const parents = hwMenu.getParents(activeElement).reverse();
30
31	const breadcrumb = `
32		<ol class="${classPrefix}__list">
33		</ol>
34	`;
35	
36	const htmlFragment = document.createRange().createContextualFragment(breadcrumb);
37	
38	if (!activeElement.active) {
39		const lastItem = {
40			title: document.title.split(':')[0],
41			active: true,
42		};
43
44		activeElement.active = false;
45		parents.push(activeElement);
46		parents.push(lastItem);
47
48	} else {
49		parents.push(activeElement);
50	}
51	
52	parents.map(parent => {
53		parent.children = [];
54		parent.visible = true;
55		htmlFragment.querySelector(`.${classPrefix}__list`).append(hwMenu.buildMenuListElement(parent, false, maxDepth, activeElement, classPrefix));
56	});
57
58	const htmlFragmentsLength = htmlFragment.querySelectorAll('.hw_breadcrumb__link').length;
59
60	htmlFragment.querySelectorAll('.hw_breadcrumb__link').forEach((link, index) => {
61		if (index < htmlFragmentsLength - 1) {
62			const breadcrumbIcon = '<i class="fasl fa-chevron-right" aria-hidden="true"></i>';
63			const htmlFragment = document.createRange().createContextualFragment(breadcrumbIcon);
64
65			link.append(htmlFragment);
66		}
67	});
68
69	return htmlFragment;
70}