Merge pull request #1168 from helsingborg-stad/refactor/move-select

refactor: move select and nav

Author: NiclasNorin

source/components/nav/index.ts

@@ -0,0 +1,103 @@
+export class Nav {
+	private targetItemSelector: string;
+
+	constructor(menu: HTMLElement) {
+		this.targetItemSelector = '.c-nav__item.has-children.has-toggle';
+		const selectorArray: string[] = [this.targetItemSelector, '> .c-nav__item-wrapper'];
+
+		// Allow to click main item if vertical or extended dropdown
+		if (menu.classList.contains('c-nav--vertical')) {
+			selectorArray.push('.c-nav__toggle');
+		}
+
+		// Extended dropdown open by clicking main items or subitems on the arrow.
+		if (menu.classList.contains('c-nav--extended-dropdown')) {
+			selectorArray.unshift(':scope ul');
+			selectorArray.push('.c-nav__toggle, :scope > li.has-toggle > .c-nav__item-wrapper');
+		}
+
+		const items = [...menu.querySelectorAll(selectorArray.join(' '))] as HTMLElement[];
+
+		if (items.length > 0) {
+			this.setListeners(items, menu);
+		}
+	}
+
+	private setListeners(items: HTMLElement[], menu: HTMLElement) {
+		items.forEach((item) => {
+			item.addEventListener('click', (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				if (menu.classList.contains('c-nav--horizontal')) {
+					this.closeSiblings(item.closest(this.targetItemSelector) as HTMLElement);
+				}
+
+				this.toggleChildren(item.closest(this.targetItemSelector) as HTMLElement);
+			});
+		});
+	}
+
+	private closeSiblings(clickItem: HTMLElement) {
+		const items = this.getSiblings(clickItem);
+		items.forEach((item) => {
+			item.classList.remove('is-open');
+		});
+		return true;
+	}
+
+	private toggleChildren(toggle: HTMLElement) {
+		if (!toggle.classList.contains('is-open')) {
+			this.openChildren(toggle);
+			return true;
+		}
+		this.closeChildren(toggle);
+		return false;
+	}
+
+	private openChildren(toggle: HTMLElement) {
+		toggle.classList.add('is-open');
+		toggle.querySelector('.c-nav__toggle')?.setAttribute('aria-pressed', 'true');
+	}
+
+	private closeChildren(toggle: HTMLElement) {
+		toggle.classList.remove('is-open');
+		toggle.querySelector('.c-nav__toggle')?.setAttribute('aria-pressed', 'false');
+	}
+
+	private getSiblings(elem: HTMLElement) {
+		const siblings: HTMLElement[] = [];
+		let sibling = elem.parentNode?.firstChild;
+		while (sibling) {
+			if (sibling.nodeType === Node.ELEMENT_NODE && sibling !== elem) {
+				siblings.push(sibling as HTMLElement);
+			}
+			sibling = sibling.nextSibling;
+		}
+		return siblings;
+	}
+}
+
+// Initialize Nav components on DOMContentLoaded
+document.addEventListener('DOMContentLoaded', () => {
+	const menus = [...document.querySelectorAll('.c-nav.c-nav--depth-1')] as HTMLElement[];
+
+	menus.forEach((menu) => {
+		new Nav(menu);
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'childList' && mutation.addedNodes.length > 0 && ((mutation.target as HTMLElement)?.classList?.contains('c-nav__item') || (mutation.target as HTMLElement)?.classList?.contains('c-nav__extended-content'))) {
+					[...mutation.addedNodes].forEach((node) => {
+						if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList?.contains('c-nav__child-container') && !(node as HTMLElement).querySelector('.c-nav.preloader')) {
+							const element = (node as HTMLElement).classList.contains('c-nav') ? node : (node as HTMLElement).querySelector('.c-nav');
+
+							if (element) {
+								new Nav(element as HTMLElement);
+							}
+						}
+					});
+				}
+			});
+		});
+		observer.observe(menu, { childList: true, subtree: true });
+	});
+});

source/components/nav/nav.ts

@@ -1,7 +1,6 @@
-import { Select } from "./Select";
+import { Select } from './script/select';
 
 export class SelectComponentObserver {
-
 	private readonly selectComponentElementAttribute = 'data-js-select-component'; //Add to main div of component
 
 	constructor() {
@@ -14,15 +13,15 @@ export class SelectComponentObserver {
 		const container = document.documentElement || document.body;
 		const observerOptions = {
 			childList: true,
-			subtree: true
+			subtree: true,
 		};
 
 		const observer = new MutationObserver((mutations) => {
 			mutations.forEach((mutation) => {
-				if (mutation.type === "childList") {
+				if (mutation.type === 'childList') {
 					mutation.addedNodes.forEach((node) => {
 						if (node instanceof HTMLElement) {
-							let selects = [...node.querySelectorAll(`[${this.selectComponentElementAttribute}]`)];
+							const selects = [...node.querySelectorAll(`[${this.selectComponentElementAttribute}]`)];
 
 							if (node.hasAttribute(this.selectComponentElementAttribute)) {
 								selects.push(node);
@@ -43,4 +42,10 @@ export class SelectComponentObserver {
 			new Select(select);
 		});
 	}
-}
+}
+
+// Initialize the SelectComponentObserver when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+	const selectComponentObserverInstance = new SelectComponentObserver();
+	selectComponentObserverInstance.observe();
+});

…rce/js/select/SelectComponentObserver.ts source/components/select/index.tssource/js/select/SelectComponentObserver.ts renamed to source/components/select/index.ts source/js/select/SelectComponentObserver.ts renamed to source/components/select/index.ts

@@ -0,0 +1,55 @@
+export class IsCheckedToggler {
+	constructor() {
+		this.init();
+		this.observe();
+	}
+
+	private init() {
+		const initElements = document.querySelectorAll('select[multiple] option');
+		if (initElements.length) {
+			initElements.forEach((element) => {
+				this.applyOnClickEvent(element as HTMLOptionElement);
+			});
+		}
+	}
+
+	private applyOnClickEvent(element: HTMLOptionElement): void {
+		element.addEventListener('mouseup', () => {
+			this.toggleIsChecked(element);
+		});
+	}
+
+	private toggleIsChecked(element: HTMLOptionElement) {
+		const newState = element.defaultSelected === false ? true : false;
+
+		if (newState === true) {
+			element.setAttribute('selected', 'true');
+		} else {
+			element.removeAttribute('selected');
+		}
+
+		element.selected = newState;
+	}
+
+	private observe(): void {
+		const container = document.documentElement || document.body;
+		const observerOptions = {
+			childList: true,
+			subtree: true,
+		};
+
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'childList') {
+					mutation.addedNodes.forEach((node) => {
+						if (node instanceof HTMLOptionElement) {
+							this.applyOnClickEvent(node);
+						}
+					});
+				}
+			});
+		});
+
+		observer.observe(container, observerOptions);
+	}
+}