ViewTransitions.astro

---
type Fallback = 'none' | 'animate' | 'swap';

export interface Props {
	fallback?: Fallback;
}

const { fallback = 'animate' } = Astro.props;
---

<style is:global>
	/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}
</style>
<meta name="astro-view-transitions-enabled" content="true" />
<meta name="astro-view-transitions-fallback" content={fallback} />
<script>
	import {
		supportsViewTransitions,
		transitionEnabledOnThisPage,
		navigate,
	} from 'astro:transitions/client';
	export type Fallback = 'none' | 'animate' | 'swap';

	function getFallback(): Fallback {
		const el = document.querySelector('[name="astro-view-transitions-fallback"]');
		if (el) {
			return el.getAttribute('content') as Fallback;
		}
		return 'animate';
	}

	// Prefetching
	function maybePrefetch(pathname: string) {
		if (document.querySelector(`link[rel=prefetch][href="${pathname}"]`)) return;
		// @ts-expect-error: connection might exist
		if (navigator.connection) {
			// @ts-expect-error: connection does exist
			let conn = navigator.connection;
			if (conn.saveData || /(2|3)g/.test(conn.effectiveType || '')) return;
		}
		let link = document.createElement('link');
		link.setAttribute('rel', 'prefetch');
		link.setAttribute('href', pathname);
		document.head.append(link);
	}

	if (supportsViewTransitions || getFallback() !== 'none') {
		document.addEventListener('click', (ev) => {
			let link = ev.target;
			if (link instanceof Element && link.tagName !== 'A') {
				link = link.closest('a');
			}
			// This check verifies that the click is happening on an anchor
			// that is going to another page within the same origin. Basically it determines
			// same-origin navigation, but omits special key combos for new tabs, etc.
			if (
				!link ||
				!(link instanceof HTMLAnchorElement) ||
				link.dataset.astroReload !== undefined ||
				link.hasAttribute('download') ||
				!link.href ||
				(link.target && link.target !== '_self') ||
				link.origin !== location.origin ||
				ev.button !== 0 || // left clicks only
				ev.metaKey || // new tab (mac)
				ev.ctrlKey || // new tab (windows)
				ev.altKey || // download
				ev.shiftKey || // new window
				ev.defaultPrevented
			) {
				// No page transitions in these cases,
				// Let the browser standard action handle this
				return;
			}
			ev.preventDefault();
			navigate(link.href, {
				history: link.dataset.astroHistory === 'replace' ? 'replace' : 'auto',
			});
		});

		['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
			document.addEventListener(
				evName,
				(ev) => {
					if (ev.target instanceof HTMLAnchorElement) {
						let el = ev.target;
						if (
							el.origin === location.origin &&
							el.pathname !== location.pathname &&
							transitionEnabledOnThisPage()
						) {
							maybePrefetch(el.pathname);
						}
					}
				},
				{ passive: true, capture: true }
			);
		});
	}
</script>