diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a75bcc7bd..dd9c564ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: 5.4 +lockfileVersion: 5.3 specifiers: '@fontsource/roboto-mono': ^4.5.7 @@ -44,7 +44,7 @@ dependencies: devDependencies: '@sveltejs/adapter-auto': 1.0.0-next.90 '@sveltejs/adapter-vercel': 1.0.0-next.85 - '@sveltejs/kit': 1.0.0-next.586_svelte@3.54.0+vite@4.0.0 + '@sveltejs/kit': 1.0.0-next.589_svelte@3.54.0+vite@4.0.0 '@sveltejs/site-kit': 3.0.3 '@types/diff': 5.0.2 '@types/marked': 4.0.8 @@ -53,7 +53,7 @@ devDependencies: diff: 5.1.0 esbuild: 0.14.54 prettier: 2.8.1 - prettier-plugin-svelte: 2.9.0_sro2v6ld777payjtkjtiuogcxi + prettier-plugin-svelte: 2.9.0_prettier@2.8.1+svelte@3.54.0 svelte: 3.54.0 svelte-check: 2.10.2_svelte@3.54.0 tiny-glob: 0.2.9 @@ -356,8 +356,8 @@ packages: - supports-color dev: true - /@sveltejs/kit/1.0.0-next.586_svelte@3.54.0+vite@4.0.0: - resolution: {integrity: sha512-lTYWy4voh/r4jz8qnurIATyrH2ZgHPUswYQ9KauyASSjQGYeB1TPDgwcafM/LtgMxpcvFgWsx2KeflykSHXKxg==} + /@sveltejs/kit/1.0.0-next.589_svelte@3.54.0+vite@4.0.0: + resolution: {integrity: sha512-5ABRw46z9B+cCe/YWhcx+I/azNZg1NCDEkVJifZn8ToFoJ3a1eP0OexNIrvMEWpllMbNMPcJm2TC9tnz9oPfWQ==} engines: {node: '>=16.14'} hasBin: true requiresBuild: true @@ -1297,7 +1297,7 @@ packages: source-map-js: 1.0.2 dev: true - /prettier-plugin-svelte/2.9.0_sro2v6ld777payjtkjtiuogcxi: + /prettier-plugin-svelte/2.9.0_prettier@2.8.1+svelte@3.54.0: resolution: {integrity: sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==} peerDependencies: prettier: ^1.16.4 || ^2.0.0 @@ -1520,7 +1520,7 @@ packages: picocolors: 1.0.0 sade: 1.8.1 svelte: 3.54.0 - svelte-preprocess: 4.10.7_gk4i2giaum4t5l5a23coockzlu + svelte-preprocess: 4.10.7_svelte@3.54.0+typescript@4.6.4 typescript: 4.6.4 transitivePeerDependencies: - '@babel/core' @@ -1544,7 +1544,7 @@ packages: svelte: 3.54.0 dev: true - /svelte-preprocess/4.10.7_gk4i2giaum4t5l5a23coockzlu: + /svelte-preprocess/4.10.7_svelte@3.54.0+typescript@4.6.4: resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} requiresBuild: true diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index e34a1f7ac..d056851cc 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -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; }); @@ -122,6 +137,7 @@ loading = true; reset_complete_states(); + reset_history(); await reset_adapter($files); @@ -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(() => { @@ -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); + } + } @@ -400,6 +462,8 @@
{ @@ -407,13 +471,9 @@ 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} />
@@ -443,6 +503,7 @@ .content { display: flex; flex-direction: column; + position: relative; min-height: 0; height: 100%; max-height: 100%; @@ -485,10 +546,6 @@ flex-direction: column; } - .content { - position: relative; - } - iframe { width: 100%; height: 100%; @@ -499,6 +556,10 @@ 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 index 46150b1a8..f313ca7b4 100644 --- a/src/routes/tutorial/[slug]/Chrome.svelte +++ b/src/routes/tutorial/[slug]/Chrome.svelte @@ -1,18 +1,38 @@
- + + @@ -43,11 +63,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 +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; + } diff --git a/src/routes/tutorial/[slug]/chevron.svg b/src/routes/tutorial/[slug]/chevron.svg new file mode 100644 index 000000000..bab0e6cbb --- /dev/null +++ b/src/routes/tutorial/[slug]/chevron.svg @@ -0,0 +1,11 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/routes/tutorial/[slug]/refresh.svg b/src/routes/tutorial/[slug]/refresh.svg index 99308ad90..bcdad913b 100644 --- a/src/routes/tutorial/[slug]/refresh.svg +++ b/src/routes/tutorial/[slug]/refresh.svg @@ -1,4 +1,6 @@ - - - + + + \ No newline at end of file