Jan 23, 2023 · Jan 11, 2023 · Jan 11, 2023 · Jan 11, 2023 · Jan 23, 2023
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte

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

 loading = true;

 reset_complete_states();
 reset_history();

 await reset_adapter($files);

 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(() => {
 // 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} />

 <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">
 .content {
 display: flex;
 flex-direction: column;
 position: relative;
 min-height: 0;
 height: 100%;
 max-height: 100%;
 flex-direction: column;
 }

 .content {
 position: relative;
 }

 iframe {
 width: 100%;
 height: 100%;
 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 './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>

 .chrome button img {
 width: 2rem;
 height: 2rem;
 transition: 0.2s ease-out;
 transition:transform0.2s ease-out, opacity 0.1s ease-out;
 transform: none;
 }

 .chrome button:active img {
 .chrome button.refresh: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]/chevron.svg b/src/routes/tutorial/[slug]/chevron.svg
diff --git a/src/routes/tutorial/[slug]/refresh.svg b/src/routes/tutorial/[slug]/refresh.svg
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
		});

Expand All		@@ -122,6 +137,7 @@
		loading = true;

		reset_complete_states();
		reset_history();

		await reset_adapter($files);

Expand DownExpand Up		@@ -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(() => {
Expand DownExpand Up		@@ -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} />
Expand DownExpand Up		@@ -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">
Expand DownExpand Up		@@ -443,6 +503,7 @@
		.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 0;
		height: 100%;
		max-height: 100%;
Expand DownExpand Up		@@ -485,10 +546,6 @@
		flex-direction: column;
		}

		.content {
		position: relative;
		}

		iframe {
		width: 100%;
		height: 100%;
Expand All		@@ -499,6 +556,10 @@
		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,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>

Expand DownExpand Up		@@ -43,11 +63,11 @@
		.chrome button img {
		width: 2rem;
		height: 2rem;
		transition: 0.2s ease-out;
		transition:transform0.2s ease-out, opacity 0.1s ease-out;
		transform: none;
		}

		.chrome button:active img {
		.chrome button.refresh:active img {
		transform: rotate(-360deg);
		transition: none;
		}
Expand All		@@ -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>