Jan 24, 2023 · Jan 23, 2023 · Jan 24, 2023 · Jan 24, 2023 · Jan 24, 2023 · Jan 24, 2023
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/icons/chevron.svg b/src/lib/icons/chevron.svg
diff --git a/src/lib/icons/refresh.svg b/src/lib/icons/refresh.svg
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
 flex-direction: column;
 }

 iframe {
 width: 100%;
 height: 100%;
 flex: 1;
 resize: none;
 box-sizing: border-box;
 border: none;
 background: var(--sk-back-2);
 }

 iframe:not(.loaded) {
 display: none;
 }

 .editor-container {
 position: relative;
 background-color: var(--sk-back-3);
diff --git a/src/routes/tutorial/[slug]/Chrome.svelte b/src/routes/tutorial/[slug]/Chrome.svelte
 <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>

 .chrome button img {
 width: 2rem;
 height: 2rem;
 transition:transform0.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;
 }
 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>
diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte

 /** @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) => {
 }
 });

 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();
 });

 /**
 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(() => {
 // 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">
 border: none;
 background: var(--sk-back-2);
 }

 iframe:not(.loaded) {
 display: none;
 }
 </style>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -160,20 +160,6 @@
		flex-direction: column;
		}

		iframe {
		width: 100%;
		height: 100%;
		flex: 1;
		resize: none;
		box-sizing: border-box;
		border: none;
		background: var(--sk-back-2);
		}

		iframe:not(.loaded) {
		display: none;
		}

		.editor-container {
		position: relative;
		background-color: var(--sk-back-3);
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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>

Expand DownExpand Up		@@ -63,11 +43,11 @@
		.chrome button img {
		width: 2rem;
		height: 2rem;
		transition:transform0.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;
		}
Expand All		@@ -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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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) => {
Expand All		@@ -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();
		});

		/**
Expand DownExpand Up		@@ -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(() => {
Expand All		@@ -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">
Expand DownExpand Up		@@ -272,8 +214,4 @@
		border: none;
		background: var(--sk-back-2);
		}

		iframe:not(.loaded) {
		display: none;
		}
		</style>