astro/examples/view-transitions/src/scripts/spa-navigation.js

import {
	getNavigationType,
	getPathId,
	isBackNavigation,
	shouldNotIntercept,
	updateTheDOMSomehow,
	useTvFragment,
} from './utils';

// View Transitions support cross-document navigations.
// Should compare performace.
// https://github.com/WICG/view-transitions/blob/main/explainer.md#cross-document-same-origin-transitions
// https://github.com/WICG/view-transitions/blob/main/explainer.md#script-events
function shouldDisableSpa() {
	return false;
}

navigation.addEventListener('navigate', (navigateEvent) => {
	if (shouldDisableSpa()) return;
	if (shouldNotIntercept(navigateEvent)) return;

	const toUrl = new URL(navigateEvent.destination.url);
	const toPath = toUrl.pathname;
	const fromPath = location.pathname;
	const navigationType = getNavigationType(fromPath, toPath);

	if (location.origin !== toUrl.origin) return;

	switch (navigationType) {
		case 'home-to-movie':
		case 'tv-to-show':
			handleHomeToMovieTransition(navigateEvent, getPathId(toPath));
			break;
		case 'movie-to-home':
		case 'show-to-tv':
			handleMovieToHomeTransition(navigateEvent, getPathId(fromPath));
			break;
		case 'movie-to-person':
			handleMovieToPersonTransition(navigateEvent, getPathId(fromPath), getPathId(toPath));
			break;
		case 'person-to-movie':
		case 'person-to-show':
			handlePersonToMovieTransition(navigateEvent, getPathId(fromPath), getPathId(toPath));
			break;
		default:
			return;
	}
});

// TODO: https://developer.chrome.com/docs/web-platform/view-transitions/#transitions-as-an-enhancement
function handleHomeToMovieTransition(navigateEvent, movieId) {
	navigateEvent.intercept({
		async handler() {
			const fragmentUrl = useTvFragment(navigateEvent)
				? '/fragments/TvDetails'
				: '/fragments/MovieDetails';
			const response = await fetch(`${fragmentUrl}/${movieId}`);
			const data = await response.text();

			if (!document.startViewTransition) {
				updateTheDOMSomehow(data);
				return;
			}

			const thumbnail = document.getElementById(`movie-poster-${movieId}`);
			if (thumbnail) {
				thumbnail.style.viewTransitionName = 'movie-poster';
			}

			const transition = document.startViewTransition(() => {
				if (thumbnail) {
					thumbnail.style.viewTransitionName = '';
				}
				document.getElementById('container').scrollTop = 0;
				updateTheDOMSomehow(data);
			});

			await transition.finished;
		},
	});
}

function handleMovieToHomeTransition(navigateEvent, movieId) {
	navigateEvent.intercept({
		scroll: 'manual',
		async handler() {
			const fragmentUrl = useTvFragment(navigateEvent)
				? '/fragments/TvList'
				: '/fragments/MovieList';
			const response = await fetch(fragmentUrl);
			const data = await response.text();

			if (!document.startViewTransition) {
				updateTheDOMSomehow(data);
				return;
			}

			const tempHomePage = document.createElement('div');
			const moviePoster = document.getElementById(`movie-poster`);
			let thumbnail;

			// If the movie poster is not in the home page, removes the transition style so that
			// the poster doesn't stay on the page while transitioning
			tempHomePage.innerHTML = data;
			if (!tempHomePage.querySelector(`#movie-poster-${movieId}`)) {
				moviePoster?.classList.remove('movie-poster');
			}

			const transition = document.startViewTransition(() => {
				updateTheDOMSomehow(data);

				thumbnail = document.getElementById(`movie-poster-${movieId}`);
				if (thumbnail) {
					thumbnail.scrollIntoViewIfNeeded();
					thumbnail.style.viewTransitionName = 'movie-poster';
				}
			});

			await transition.finished;

			if (thumbnail) {
				thumbnail.style.viewTransitionName = '';
			}
		},
	});
}

function handleMovieToPersonTransition(navigateEvent, movieId, personId) {
	// TODO: https://developer.chrome.com/docs/web-platform/view-transitions/#not-a-polyfill
	// ...has example of `back-transition` class applied to document
	const isBack = isBackNavigation(navigateEvent);

	navigateEvent.intercept({
		async handler() {
			const response = await fetch('/fragments/PersonDetails/' + personId);
			const data = await response.text();

			if (!document.startViewTransition) {
				updateTheDOMSomehow(data);
				return;
			}

			let personThumbnail;
			let moviePoster;
			let movieThumbnail;

			if (!isBack) {
				// We're transitioning the person photo; we need to remove the transition of the poster
				// so that it doesn't stay on the page while transitioning
				moviePoster = document.getElementById(`movie-poster`);
				if (moviePoster) {
					moviePoster.classList.remove('movie-poster');
				}

				personThumbnail = document.getElementById(`person-photo-${personId}`);
				if (personThumbnail) {
					personThumbnail.style.viewTransitionName = 'person-photo';
				}
			}

			const transition = document.startViewTransition(() => {
				updateTheDOMSomehow(data);

				if (personThumbnail) {
					personThumbnail.style.viewTransitionName = '';
				}

				if (isBack) {
					// If we're coming back to the person page, we're transitioning
					// into the movie poster thumbnail, so we need to add the tag to it
					movieThumbnail = document.getElementById(`movie-poster-${movieId}`);
					if (movieThumbnail) {
						movieThumbnail.scrollIntoViewIfNeeded();
						movieThumbnail.style.viewTransitionName = 'movie-poster';
					}
				}

				document.getElementById('container').scrollTop = 0;
			});

			await transition.finished;

			if (movieThumbnail) {
				movieThumbnail.style.viewTransitionName = '';
			}
		},
	});
}

function handlePersonToMovieTransition(navigateEvent, personId, movieId) {
	const isBack = isBackNavigation(navigateEvent);

	navigateEvent.intercept({
		scroll: 'manual',
		async handler() {
			const fragmentUrl = useTvFragment(navigateEvent)
				? '/fragments/TvDetails'
				: '/fragments/MovieDetails';
			const response = await fetch(`${fragmentUrl}/${movieId}`);
			const data = await response.text();

			if (!document.startViewTransition) {
				updateTheDOMSomehow(data);
				return;
			}

			let thumbnail;
			let moviePoster;
			let movieThumbnail;

			if (!isBack) {
				movieThumbnail = document.getElementById(`movie-poster-${movieId}`);
				if (movieThumbnail) {
					movieThumbnail.style.viewTransitionName = 'movie-poster';
				}
			}

			const transition = document.startViewTransition(() => {
				updateTheDOMSomehow(data);

				if (isBack) {
					moviePoster = document.getElementById(`movie-poster`);
					if (moviePoster) {
						moviePoster.classList.remove('movie-poster');
					}

					if (personId) {
						thumbnail = document.getElementById(`person-photo-${personId}`);
						if (thumbnail) {
							thumbnail.scrollIntoViewIfNeeded();
							thumbnail.style.viewTransitionName = 'person-photo';
						}
					}
				} else {
					document.getElementById('container').scrollTop = 0;

					if (movieThumbnail) {
						movieThumbnail.style.viewTransitionName = '';
					}
				}
			});

			await transition.finished;

			if (thumbnail) {
				thumbnail.style.viewTransitionName = '';
			}

			if (moviePoster) {
				moviePoster.classList.add('movie-poster');
			}
		},
	});
}