Implement backward and forward navigation options to iframed window

src/routes/tutorial/[slug]/+page.svelte

@@ -95,15 +95,30 @@
 
 	/** @type {import('$lib/types').Adapter | undefined} */
 	let adapter;
+	/** @type {string[]} */
+	let history_bwd = [];
+	/** @type {string[]} */
+	let history_fwd = [];
+	let ignore_path_change = false;
+
+	function reset_history() {
+		history_bwd = [];
+		history_fwd = [];
+	}
 
 	onMount(() => {
+		function on_iframe_load() {
+			iframe.classList.add('loaded');
+		}
 		function destroy() {
+			iframe.removeEventListener('load', on_iframe_load);
 			if (adapter) {
 				adapter.destroy();
 			}
 		}
 
 		document.addEventListener('pagehide', destroy);
+		iframe.addEventListener('load', on_iframe_load);
 		return destroy;
 	});
 
@@ -122,6 +137,7 @@
 			loading = true;
 
 			reset_complete_states();
+			reset_history();
 
 			await reset_adapter($files);
 
@@ -254,7 +270,16 @@
 		if (e.origin !== adapter.base) return;
 
 		if (e.data.type === 'ping') {
-			path = e.data.data.path ?? path;
+			const new_path = e.data.data.path ?? path;
+			if (path !== new_path) {
+				// skip `nav_to` step if triggered by bwd/fwd action
+				if (ignore_path_change) {
+					ignore_path_change = false;
+				} else {
+					nav_to();
+				}
+				path = new_path;
+			}
 
 			clearTimeout(timeout);
 			timeout = setTimeout(() => {
@@ -297,10 +322,47 @@
 		// change the src without adding a history entry, which
 		// would make back/forward traversal very annoying
 		const parentNode = /** @type {HTMLElement} */ (iframe.parentNode);
+		iframe.classList.remove('loaded');
 		parentNode?.removeChild(iframe);
 		iframe.src = src;
 		parentNode?.appendChild(iframe);
 	}
+
+	/** @param {string} path */
+	function route_to(path) {
+		if (adapter) {
+			const url = new URL(path, adapter.base);
+			path = url.pathname + url.search + url.hash;
+			set_iframe_src(adapter.base + path);
+		}
+	}
+
+	/** @param {string | null} new_path */
+	function nav_to(new_path = null) {
+		if (path !== history_bwd[history_bwd.length - 1]) {
+			history_bwd = [...history_bwd, path];
+		}
+		history_fwd = [];
+		if (new_path) route_to(new_path);
+	}
+
+	function go_bwd() {
+		const new_path = history_bwd[history_bwd.length - 1];
+		if (new_path) {
+			ignore_path_change = true;
+			[history_bwd, history_fwd] = [history_bwd.slice(0, -1), [path, ...history_fwd]];
+			route_to(new_path);
+		}
+	}
+
+	function go_fwd() {
+		const new_path = history_fwd[0];
+		if (new_path) {
+			ignore_path_change = true;
+			[history_bwd, history_fwd] = [[...history_bwd, path], history_fwd.slice(1)];
+			route_to(new_path);
+		}
+	}
 </script>
 
 <svelte:window on:message={handle_message} bind:innerWidth={width} />
@@ -400,20 +462,18 @@
 
 				<section slot="b" class="preview">
 					<Chrome
+						{history_bwd}
+						{history_fwd}
 						{path}
 						{loading}
 						on:refresh={() => {
 							if (adapter) {
 								set_iframe_src(adapter.base + path);
 							}
 						}}
-						on:change={(e) => {
-							if (adapter) {
-								const url = new URL(e.detail.value, adapter.base);
-								path = url.pathname + url.search + url.hash;
-								set_iframe_src(adapter.base + path);
-							}
-						}}
+						on:change={(e) => nav_to(e.detail.value)}
+						on:back={go_bwd}
+						on:forward={go_fwd}
 					/>
 
 					<div class="content">
@@ -443,6 +503,7 @@
 	.content {
 		display: flex;
 		flex-direction: column;
+		position: relative;
 		min-height: 0;
 		height: 100%;
 		max-height: 100%;
@@ -485,10 +546,6 @@
 		flex-direction: column;
 	}
 
-	.content {
-		position: relative;
-	}
-
 	iframe {
 		width: 100%;
 		height: 100%;
@@ -499,6 +556,10 @@
 		background: var(--sk-back-2);
 	}
 
+	iframe:not(.loaded) {
+		display: none;
+	}
+
 	.editor-container {
 		position: relative;
 		background-color: var(--sk-back-3);

src/routes/tutorial/[slug]/Chrome.svelte

@@ -1,18 +1,38 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
+	import chevron from './chevron.svg';
 	import refresh from './refresh.svg';
 
 	/** @type {string} */
 	export let path;
 
+	/** @type {string[]} */
+	export let history_bwd = [];
+
+	/** @type {string[]} */
+	export let history_fwd = [];
+
 	/** @type {boolean} */
 	export let loading;
 
 	const dispatch = createEventDispatcher();
+
+	$: [disabledBwd, disabledFwd] = [loading || !history_bwd.length, loading || !history_fwd.length];
 </script>
 
 <div class="chrome">
-	<button disabled={loading} on:click={() => dispatch('refresh')} aria-label="reload">
+	<button disabled={disabledBwd} on:click={() => dispatch('back')} aria-label="go back">
+		<img src={chevron} alt="Back icon" />
+	</button>
+	<button disabled={disabledFwd} on:click={() => dispatch('forward')} aria-label="go forward">
+		<img src={chevron} style="transform: rotate(180deg)" alt="Forward icon" />
+	</button>
+	<button
+		class="refresh"
+		disabled={loading}
+		on:click={() => dispatch('refresh')}
+		aria-label="reload"
+	>
 		<img src={refresh} alt="Reload icon" />
 	</button>
 
@@ -43,11 +63,11 @@
 	.chrome button img {
 		width: 2rem;
 		height: 2rem;
-		transition: 0.2s ease-out;
+		transition: transform 0.2s ease-out, opacity 0.1s ease-out;
 		transform: none;
 	}
 
-	.chrome button:active img {
+	.chrome button.refresh:active img {
 		transform: rotate(-360deg);
 		transition: none;
 	}
@@ -71,4 +91,26 @@
 		outline: none;
 		border: 2px solid var(--sk-theme-3);
 	}
+
+	.chrome button {
+		user-select: none;
+	}
+
+	.chrome button[disabled] {
+		opacity: 1;
+	}
+
+	.chrome button[disabled] img {
+		opacity: 0.5;
+	}
+
+	.chrome button img {
+		opacity: 0.8;
+	}
+
+	.chrome button:hover img,
+	.chrome button:active img,
+	.chrome button:focus-visible img {
+		opacity: 1;
+	}
 </style>