website-astro-stefanimhoff.de/src/components/Scripts.astro

---

---

<script>
	function setActiveLink() {
		const links = document.querySelectorAll('.navigation a');
		const currentPath = window.location.pathname;

		links.forEach((link) => {
			if (link.getAttribute('href') === currentPath) {
				link.classList.add('is-active');
				link.setAttribute('aria-current', 'page');
			} else {
				link.classList.remove('is-active');
				link.removeAttribute('aria-current');
			}
		});
	}

	function setUpLink() {
		const button = document.getElementById('up-link');
		button?.addEventListener('click', (event) => {
			event.preventDefault();
			window.scrollTo({
				top: 0,
				left: 0,
				behavior: 'smooth',
			});
		});
	}

	function setSearchLink() {
		const body = document.body;
		const dialog = document.querySelector<HTMLDialogElement>('#search-dialog');
		const openDialogLink = document.getElementById('search-link');
		const closeDialogLink = document.getElementById('close-search');

		dialog?.addEventListener('close', () => {
			body.style.overflow = 'auto';
		});

		openDialogLink?.addEventListener('click', (event) => {
			const searchInput = dialog?.querySelector('input');
			event.preventDefault();
			dialog?.showModal();
			searchInput?.focus();
			body.style.overflow = 'hidden';
		});

		closeDialogLink?.addEventListener('click', (event) => {
			event.preventDefault();
			if (!dialog?.classList.contains('hide')) {
				dialog?.classList.add('hide');
				dialog?.addEventListener(
					'animationend',
					(animationEvent) => {
						if (animationEvent.animationName === 'hide-modal') {
							dialog?.close();
							dialog?.classList.remove('hide');
						}
					},
					{ once: true }
				);
			}
		});

		document.addEventListener('keydown', (event) => {
			if (event.key === '/') {
				const searchInput = dialog?.querySelector('input');
				event.preventDefault();
				dialog?.showModal();
				searchInput?.focus();
				body.style.overflow = 'hidden';
			}
		});
	}

	function setMenuLink() {
		const body = document.body;
		const dialog = document.querySelector<HTMLDialogElement>('#menu-dialog');
		const openDialogLink = document.getElementById('menu-link');
		const closeDialogLink = document.getElementById('close-menu');

		dialog?.addEventListener('close', () => {
			body.style.overflow = 'auto';
		});

		openDialogLink?.addEventListener('click', (event) => {
			event.preventDefault();
			dialog?.showModal();
			body.style.overflow = 'hidden';
		});

		closeDialogLink?.addEventListener('click', (event) => {
			event.preventDefault();
			if (!dialog?.classList.contains('hide')) {
				dialog?.classList.add('hide');
				dialog?.addEventListener(
					'animationend',
					(animationEvent) => {
						if (animationEvent.animationName === 'hide-modal') {
							dialog?.close();
							dialog?.classList.remove('hide');
						}
					},
					{ once: true }
				);
			}
		});
	}

	function handleEmailClick(event: Event) {
		event.preventDefault();
		const currentTarget = event.currentTarget;
		if (currentTarget instanceof HTMLElement) {
			const { name, domain, tld } = currentTarget.dataset;
			if (name && domain && tld) {
				const mailto = `mailto:${name}@${domain}.${tld}`;
				window.open(mailto, '_blank');
			}
		}
	}

	function setEmailLink() {
		const links = document.querySelectorAll('[data-email-link]');

		links.forEach((link) => {
			link.addEventListener('click', handleEmailClick);
		});
	}

	function initializeScripts() {
		setActiveLink();
		setEmailLink();
		setSearchLink();
		setMenuLink();
		setUpLink();
	}

	// Initialize on first load
	initializeScripts();

	document.addEventListener('astro:after-swap', initializeScripts);
</script>