Implement backward and forward navigation options to iframed window

Author: brandonmcconnell

pnpm-lock.yaml

@@ -95,6 +95,11 @@
 
 	/** @type {import('$lib/types').Adapter | undefined} */
 	let adapter;
+	/** @type {string[]} */
+	let history_bwd = [];
+	/** @type {string[]} */
+	let history_fwd = [];
+	let ignore_path_change = false;
 
 	onMount(() => {
 		function destroy() {
@@ -254,7 +259,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(() => {
@@ -301,6 +315,42 @@
 		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 +450,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">

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

@@ -1,18 +1,34 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
+	import back from './back.svg';
+	import forward from './forward.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={back} alt="Back icon" />
+	</button>
+	<button disabled={disabledFwd} on:click={() => dispatch('forward')} aria-label="go forward">
+		<img src={forward} 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 +59,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 +87,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: .2;
+	}
+
+	.chrome button img {
+		opacity: .6;
+	}
+
+	.chrome button:hover img,
+	.chrome button:active img,
+	.chrome button:focus-visible img {
+		opacity: 1;
+	}
 </style>