Revert "feat: implement backward/forward navigation options to iframed window (#181)"

This reverts commit 8ff785c.

Author: Rich-Harris

pnpm-lock.yaml

@@ -95,30 +95,15 @@
 
 	/** @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;
 	});
 
@@ -137,7 +122,6 @@
 			loading = true;
 
 			reset_complete_states();
-			reset_history();
 
 			await reset_adapter($files);
 
@@ -270,16 +254,7 @@
 		if (e.origin !== adapter.base) return;
 
 		if (e.data.type === 'ping') {
-			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;
-			}
+			path = e.data.data.path ?? path;
 
 			clearTimeout(timeout);
 			timeout = setTimeout(() => {
@@ -322,47 +297,10 @@
 		// 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} />
@@ -462,18 +400,20 @@
 
 				<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) => nav_to(e.detail.value)}
-						on:back={go_bwd}
-						on:forward={go_fwd}
+						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);
+							}
+						}}
 					/>
 
 					<div class="content">
@@ -503,7 +443,6 @@
 	.content {
 		display: flex;
 		flex-direction: column;
-		position: relative;
 		min-height: 0;
 		height: 100%;
 		max-height: 100%;
@@ -546,6 +485,10 @@
 		flex-direction: column;
 	}
 
+	.content {
+		position: relative;
+	}
+
 	iframe {
 		width: 100%;
 		height: 100%;
@@ -556,10 +499,6 @@
 		background: var(--sk-back-2);
 	}
 
-	iframe:not(.loaded) {
-		display: none;
-	}
-
 	.editor-container {
 		position: relative;
 		background-color: var(--sk-back-3);

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

@@ -1,38 +1,18 @@
 <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={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"
-	>
+	<button disabled={loading} on:click={() => dispatch('refresh')} aria-label="reload">
 		<img src={refresh} alt="Reload icon" />
 	</button>
 
@@ -63,11 +43,11 @@
 	.chrome button img {
 		width: 2rem;
 		height: 2rem;
-		transition: transform 0.2s ease-out, opacity 0.1s ease-out;
+		transition: 0.2s ease-out;
 		transform: none;
 	}
 
-	.chrome button.refresh:active img {
+	.chrome button:active img {
 		transform: rotate(-360deg);
 		transition: none;
 	}
@@ -91,26 +71,4 @@
 		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>