@janga/norna 0.7.11 → 0.7.12

package/src/components/ImageCarousel.astro

@@ -0,0 +1,184 @@
+---
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getImageAttributes } from '../lib/generatedImages';
+import {
+	getCaptionId,
+	getCarouselAspectRatio,
+	getGalleryImageSizes,
+	getImageClass,
+	getImageLoadingProps,
+	type GalleryImage,
+} from '../lib/galleryImages';
+
+interface Props {
+	title: string;
+	images: GalleryImage[];
+	maxAvailableWidthPercent: {
+		desktop: number;
+		mobile: number;
+	};
+	priorityFirstImage?: boolean;
+}
+
+const { title, images, maxAvailableWidthPercent, priorityFirstImage = false } = Astro.props;
+const galleryImageSizes = getGalleryImageSizes(maxAvailableWidthPercent);
+const carouselAspectRatio = getCarouselAspectRatio(images);
+const carouselStyle = carouselAspectRatio
+	? `--gallery-carousel-aspect-ratio: ${carouselAspectRatio}`
+	: undefined;
+---
+
+<div class="gallery" aria-label={`${projectConfig.locale.labels.gallery}: ${title}`}>
+	<section
+		class="gallery-item gallery-carousel"
+		data-carousel
+		tabindex="0"
+		role="group"
+		aria-roledescription="carousel"
+		aria-label={`${title}, bildkarusell`}
+		style={carouselStyle}
+	>
+		<div class="gallery-carousel-stage">
+			<div class="gallery-carousel-viewport" data-carousel-viewport>
+				<div class="gallery-carousel-slides">
+					{images.map((image, imageIndex) => {
+						const captionId = image.caption ? getCaptionId(image, 0, imageIndex) : undefined;
+
+						return (
+							<figure class="gallery-carousel-slide" data-carousel-slide>
+								<div class="gallery-carousel-image-frame">
+									<img
+										{...getImageAttributes(image.src ?? image.image, galleryImageSizes)}
+										class:list={['gallery-image', getImageClass(image)]}
+										alt={image.alt ?? ''}
+										aria-describedby={captionId}
+										{...getImageLoadingProps(priorityFirstImage && imageIndex === 0)}
+									/>
+								</div>
+							</figure>
+						);
+					})}
+				</div>
+			</div>
+			<button
+				class="gallery-carousel-button gallery-carousel-button-previous"
+				type="button"
+				data-carousel-previous
+				aria-label="Föregående bild"
+				title="Föregående bild"
+			>
+				<span aria-hidden="true">‹</span>
+			</button>
+			<button
+				class="gallery-carousel-button gallery-carousel-button-next"
+				type="button"
+				data-carousel-next
+				aria-label="Nästa bild"
+				title="Nästa bild"
+			>
+				<span aria-hidden="true">›</span>
+			</button>
+			<output class="gallery-carousel-position" data-carousel-position aria-live="polite">
+				1 / {images.length}
+			</output>
+		</div>
+		<div class="gallery-carousel-captions" data-carousel-captions>
+			{images.map((image, imageIndex) => (
+				image.caption && (
+					<p
+						class="gallery-meta gallery-carousel-caption"
+						id={getCaptionId(image, 0, imageIndex)}
+						data-carousel-caption
+						data-carousel-caption-index={imageIndex}
+					>
+						<span class="gallery-details">
+							<span>{image.caption}</span>
+						</span>
+					</p>
+				)
+			))}
+		</div>
+	</section>
+</div>
+
+<script>
+	import EmblaCarousel from 'embla-carousel';
+
+	const initializeCarousel = (carousel: HTMLElement) => {
+		if (carousel.dataset.carouselInitialized === 'true') return;
+
+		const viewport = carousel.querySelector<HTMLElement>('[data-carousel-viewport]');
+		const previous = carousel.querySelector<HTMLButtonElement>('[data-carousel-previous]');
+		const next = carousel.querySelector<HTMLButtonElement>('[data-carousel-next]');
+		const position = carousel.querySelector<HTMLOutputElement>('[data-carousel-position]');
+		const captions = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-caption]'));
+		const slides = Array.from(carousel.querySelectorAll<HTMLElement>('[data-carousel-slide]'));
+		if (!viewport || !previous || !next || !position || slides.length < 2) return;
+
+		let controlsTimeout: number | undefined;
+		const showControls = () => {
+			carousel.classList.add('is-interacting');
+			window.clearTimeout(controlsTimeout);
+			controlsTimeout = window.setTimeout(() => {
+				carousel.classList.remove('is-interacting');
+			}, 1600);
+		};
+
+		carousel.dataset.carouselInitialized = 'true';
+		carousel.dataset.carouselReady = 'true';
+
+		const embla = EmblaCarousel(viewport, {
+			align: 'start',
+			containScroll: false,
+			loop: true,
+		});
+
+		const update = () => {
+			const activeIndex = embla.selectedScrollSnap();
+			slides.forEach((slide, index) => {
+				const isSelected = index === activeIndex;
+				slide.classList.toggle('is-active', isSelected);
+				slide.setAttribute('aria-hidden', String(!isSelected));
+			});
+			captions.forEach((caption) => {
+				const isSelected = Number(caption.dataset.carouselCaptionIndex) === activeIndex;
+				caption.classList.toggle('is-active', isSelected);
+				caption.setAttribute('aria-hidden', String(!isSelected));
+			});
+			previous.disabled = false;
+			next.disabled = false;
+			position.textContent = `${activeIndex + 1} / ${slides.length}`;
+		};
+
+		previous.addEventListener('click', () => {
+			showControls();
+			embla.scrollPrev();
+		});
+		next.addEventListener('click', () => {
+			showControls();
+			embla.scrollNext();
+		});
+		carousel.addEventListener('focusin', showControls);
+		carousel.addEventListener('pointerdown', showControls);
+		carousel.addEventListener('keydown', (event) => {
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				showControls();
+				embla.scrollPrev();
+			}
+			if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				showControls();
+				embla.scrollNext();
+			}
+		});
+		embla.on('select', () => {
+			showControls();
+			update();
+		});
+		embla.on('reInit', update);
+		update();
+	};
+
+	document.querySelectorAll<HTMLElement>('[data-carousel]').forEach(initializeCarousel);
+</script>

package/src/components/MobileSectionNavigationScript.astro

@@ -0,0 +1,14 @@
+<script>
+	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
+	const sectionLinks = Array.from(document.querySelectorAll<HTMLAnchorElement>('.mobile-page-nav a'));
+
+	sectionLinks.forEach((link) => {
+		link.addEventListener('click', (event) => {
+			const linkUrl = new URL(link.href, window.location.href);
+			if (linkUrl.pathname !== window.location.pathname) return;
+
+			if (mobileMenu) mobileMenu.open = false;
+			if (event.detail > 0) link.blur();
+		});
+	});
+</script>

package/src/components/NornaSmoothScrollScript.astro

@@ -0,0 +1,250 @@
+<script>
+	const siteTop = document.querySelector<HTMLElement>('.site-top');
+	const sections = Array.from(document.querySelectorAll<HTMLElement>('.site-section'));
+	const links = Array.from(document.querySelectorAll<HTMLAnchorElement>('.site-nav-submenu a, .mobile-page-nav a, .page-nav a'));
+	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
+	const anchorCorrectionDelays = [120, 320, 700, 1_000, 2_000];
+	const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+	const minimumScrollDuration = 700;
+	const maximumScrollDuration = 1_800;
+	const scrollDurationPerPixel = 0.18;
+	const scrollInterruptEvents = ['wheel', 'touchstart'];
+	const scrollInterruptKeys = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', ' ']);
+	let activeScrollAnimation: { cancel: () => void } | null = null;
+	let anchorCorrectionToken = 0;
+
+	if ('scrollRestoration' in history) {
+		history.scrollRestoration = 'manual';
+	}
+
+	const setAnchorOffset = () => {
+		if (!siteTop) return;
+
+		const offset = Math.ceil(siteTop.getBoundingClientRect().height);
+		document.documentElement.style.setProperty('--site-top-anchor-offset', `${offset}px`);
+		return offset;
+	};
+
+	const getSectionFromHash = (hash: string) => {
+		const id = hash.replace(/^#/, '');
+		return sections.find((section) => section.id === id);
+	};
+
+	const getSectionHeading = (section?: HTMLElement) => section?.querySelector<HTMLElement>('h1, h2');
+
+	const cancelActiveScroll = () => {
+		activeScrollAnimation?.cancel();
+		activeScrollAnimation = null;
+	};
+
+	const getHashSection = () => getSectionFromHash(window.location.hash);
+
+	const setHash = (targetHash: string) => {
+		if (window.location.hash !== targetHash) {
+			history.pushState(null, '', targetHash);
+		}
+	};
+
+	const closeMobileMenu = () => {
+		if (mobileMenu) mobileMenu.open = false;
+	};
+
+	const getSectionScrollTop = (section?: HTMLElement) => {
+		const heading = getSectionHeading(section);
+		if (!heading) return;
+
+		const offset = setAnchorOffset();
+		if (offset === undefined) return;
+
+		return Math.max(0, heading.getBoundingClientRect().top + window.scrollY - offset);
+	};
+
+	const jumpTo = (top: number) => {
+		cancelActiveScroll();
+
+		const root = document.documentElement;
+		const previousScrollBehavior = root.style.scrollBehavior;
+		root.style.scrollBehavior = 'auto';
+		window.scrollTo(0, top);
+		root.style.scrollBehavior = previousScrollBehavior;
+	};
+
+	const getScrollDuration = (distance: number) => {
+		if (reduceMotionQuery.matches) return 0;
+
+		return Math.min(
+			maximumScrollDuration,
+			Math.max(minimumScrollDuration, Math.abs(distance) * scrollDurationPerPixel),
+		);
+	};
+
+	const easeInOutCubic = (progress: number) => (
+		progress < 0.5
+			? 4 * progress * progress * progress
+			: 1 - Math.pow(-2 * progress + 2, 3) / 2
+	);
+
+	const animateScrollTo = (
+		target: number | (() => number | undefined),
+		{ duration, onComplete }: { duration?: number; onComplete?: () => void } = {},
+	) => {
+		cancelActiveScroll();
+
+		const getTop = typeof target === 'function' ? target : () => target;
+		let latestTop = getTop();
+		if (latestTop === undefined) return 0;
+
+		const startY = window.scrollY;
+		const scrollDuration = duration ?? getScrollDuration(latestTop - startY);
+
+		if (scrollDuration <= 0) {
+			const top = getTop();
+			if (top === undefined) return 0;
+
+			jumpTo(top);
+			onComplete?.();
+			return 0;
+		}
+
+		const root = document.documentElement;
+		const previousScrollBehavior = root.style.scrollBehavior;
+		const startedAt = performance.now();
+		let frameId = 0;
+		const state = { cancel: () => {} };
+
+		const cleanup = () => {
+			scrollInterruptEvents.forEach((eventName) => {
+				window.removeEventListener(eventName, interruptScroll);
+			});
+			window.removeEventListener('keydown', interruptScrollKey);
+			root.style.scrollBehavior = previousScrollBehavior;
+			delete root.dataset.nornaScrollActive;
+
+			if (activeScrollAnimation === state) {
+				activeScrollAnimation = null;
+			}
+		};
+
+		const cancel = () => {
+			if (frameId) cancelAnimationFrame(frameId);
+			cleanup();
+		};
+
+		const interruptScroll = () => cancel();
+		const interruptScrollKey = (event: KeyboardEvent) => {
+			if (scrollInterruptKeys.has(event.key)) interruptScroll();
+		};
+
+		const step = (now: number) => {
+			const progress = Math.min(1, (now - startedAt) / scrollDuration);
+			const top = getTop();
+			if (top !== undefined) latestTop = top;
+
+			window.scrollTo(0, startY + (latestTop - startY) * easeInOutCubic(progress));
+
+			if (progress >= 1) {
+				window.scrollTo(0, latestTop);
+				cleanup();
+				onComplete?.();
+				return;
+			}
+
+			frameId = requestAnimationFrame(step);
+		};
+
+		state.cancel = cancel;
+		activeScrollAnimation = state;
+		root.style.scrollBehavior = 'auto';
+		root.dataset.nornaScrollActive = 'true';
+		scrollInterruptEvents.forEach((eventName) => {
+			window.addEventListener(eventName, interruptScroll, { passive: true });
+		});
+		window.addEventListener('keydown', interruptScrollKey);
+		frameId = requestAnimationFrame(step);
+
+		return scrollDuration;
+	};
+
+	const scrollToSection = (
+		section: HTMLElement,
+		{ animate = true, duration, onComplete }: { animate?: boolean; duration?: number; onComplete?: () => void } = {},
+	) => {
+		const top = getSectionScrollTop(section);
+		if (top === undefined) return 0;
+
+		return animate
+			? animateScrollTo(() => getSectionScrollTop(section), { duration, onComplete })
+			: (jumpTo(top), onComplete?.(), 0);
+	};
+
+	const correctCurrentHashAnchor = () => {
+		if (activeScrollAnimation) return;
+
+		const section = getHashSection();
+		if (section) scrollToSection(section, { animate: false });
+	};
+
+	const scheduleHashAnchorCorrection = () => {
+		if (!window.location.hash) return;
+
+		anchorCorrectionToken += 1;
+		const token = anchorCorrectionToken;
+
+		anchorCorrectionDelays.forEach((delay) => {
+			window.setTimeout(() => {
+				if (token === anchorCorrectionToken) requestAnimationFrame(correctCurrentHashAnchor);
+			}, delay);
+		});
+	};
+
+	const syncToLocation = ({ scrollHashlessTop = false } = {}) => {
+		const section = getHashSection();
+
+		if (section) {
+			scrollToSection(section, { animate: false });
+			scheduleHashAnchorCorrection();
+			return;
+		}
+
+		if (scrollHashlessTop) jumpTo(0);
+	};
+
+	links.forEach((link) => {
+		link.addEventListener('click', (event) => {
+			const linkUrl = new URL(link.href, window.location.href);
+			if (linkUrl.pathname !== window.location.pathname) return;
+
+			const section = getSectionFromHash(linkUrl.hash);
+			if (!section) return;
+
+			const top = getSectionScrollTop(section);
+			if (top === undefined) return;
+
+			event.preventDefault();
+			const duration = getScrollDuration(top - window.scrollY);
+
+			setHash(linkUrl.hash);
+			closeMobileMenu();
+			if (event.detail > 0) link.blur();
+
+			scrollToSection(section, {
+				duration,
+				onComplete: scheduleHashAnchorCorrection,
+			});
+		});
+	});
+
+	setAnchorOffset();
+	requestAnimationFrame(() => syncToLocation());
+
+	if (siteTop && 'ResizeObserver' in window) {
+		new ResizeObserver(setAnchorOffset).observe(siteTop);
+	}
+
+	window.addEventListener('resize', setAnchorOffset);
+	window.addEventListener('load', scheduleHashAnchorCorrection);
+	window.addEventListener('hashchange', () => syncToLocation({ scrollHashlessTop: true }));
+	window.addEventListener('popstate', () => syncToLocation({ scrollHashlessTop: true }));
+
+	window.visualViewport?.addEventListener('resize', setAnchorOffset);
+</script>