Revert "Implement backward and forward navigation options to iframed window" (#187)

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

This reverts commit 8ff785c.

* finish merge

* fix

* tidy up

* tidy up

* oops

Author: Rich-Harris

pnpm-lock.yaml

@@ -1,38 +1,18 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import chevron from '$lib/icons/chevron.svg';
 	import refresh from '$lib/icons/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>

src/lib/icons/chevron.svg

@@ -23,16 +23,6 @@
 
 	/** @type {import('$lib/types').Adapter} Will be defined after first afterNavigate */
 	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(() => {
 		const unsub = state.subscribe(async (state) => {
@@ -57,25 +47,19 @@
 			}
 		});
 
-		function on_iframe_load() {
-			iframe.classList.add('loaded');
-		}
 		function destroy() {
-			iframe.removeEventListener('load', on_iframe_load);
 			unsub();
 			if (adapter) {
 				adapter.destroy();
 			}
 		}
 
 		document.addEventListener('pagehide', destroy);
-		iframe.addEventListener('load', on_iframe_load);
 		return destroy;
 	});
 
 	afterNavigate(() => {
 		clearTimeout(timeout);
-		reset_history();
 	});
 
 	/**
@@ -155,16 +139,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(() => {
@@ -186,59 +161,26 @@
 		// 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) {
-		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} />
 <Chrome
-	{history_bwd}
-	{history_fwd}
 	{path}
 	{loading}
 	on:refresh={() => {
 		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">
@@ -272,8 +214,4 @@
 		border: none;
 		background: var(--sk-back-2);
 	}
-
-	iframe:not(.loaded) {
-		display: none;
-	}
 </style>