From 5dc634469bd9d8995c27f7d0ebce58d01ed784fa Mon Sep 17 00:00:00 2001 From: Brandon McConnell Date: Tue, 10 Jan 2023 19:13:34 -0700 Subject: [PATCH 1/4] Implement backward and forward navigation options to iframed window --- pnpm-lock.yaml | 16 +++--- src/routes/tutorial/[slug]/+page.svelte | 64 +++++++++++++++++++++--- src/routes/tutorial/[slug]/Chrome.svelte | 44 ++++++++++++++-- src/routes/tutorial/[slug]/back.svg | 3 ++ src/routes/tutorial/[slug]/forward.svg | 3 ++ src/routes/tutorial/[slug]/refresh.svg | 4 +- 6 files changed, 113 insertions(+), 21 deletions(-) create mode 100644 src/routes/tutorial/[slug]/back.svg create mode 100644 src/routes/tutorial/[slug]/forward.svg 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..aaff98bde 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -95,6 +95,11 @@ /** @type {import('$lib/types').Adapter | undefined} */ let adapter; + /** @type {string[]} */ + let history_bwd = []; + /** @type {string[]} */ + let history_fwd = []; + let ignore_path_change = false; onMount(() => { function destroy() { @@ -254,7 +259,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(() => { @@ -301,6 +315,42 @@ 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 +450,8 @@
{ @@ -407,13 +459,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} />
diff --git a/src/routes/tutorial/[slug]/Chrome.svelte b/src/routes/tutorial/[slug]/Chrome.svelte index 46150b1a8..cedab5cd5 100644 --- a/src/routes/tutorial/[slug]/Chrome.svelte +++ b/src/routes/tutorial/[slug]/Chrome.svelte @@ -1,18 +1,34 @@
- + + @@ -43,11 +59,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 +87,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: .2; + } + + .chrome button img { + opacity: .6; + } + + .chrome button:hover img, + .chrome button:active img, + .chrome button:focus-visible img { + opacity: 1; + } diff --git a/src/routes/tutorial/[slug]/back.svg b/src/routes/tutorial/[slug]/back.svg new file mode 100644 index 000000000..168a11b3c --- /dev/null +++ b/src/routes/tutorial/[slug]/back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/tutorial/[slug]/forward.svg b/src/routes/tutorial/[slug]/forward.svg new file mode 100644 index 000000000..e18d023bc --- /dev/null +++ b/src/routes/tutorial/[slug]/forward.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/routes/tutorial/[slug]/refresh.svg b/src/routes/tutorial/[slug]/refresh.svg index 99308ad90..74caf32ba 100644 --- a/src/routes/tutorial/[slug]/refresh.svg +++ b/src/routes/tutorial/[slug]/refresh.svg @@ -1,4 +1,4 @@ - - + + From 1df8dd0fa9eca55aeeba18b9c083b6e459e48a0e Mon Sep 17 00:00:00 2001 From: Brandon McConnell Date: Tue, 10 Jan 2023 19:23:01 -0700 Subject: [PATCH 2/4] Reset history when switching between tutorials --- src/routes/tutorial/[slug]/+page.svelte | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index aaff98bde..026285d53 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -101,6 +101,11 @@ let history_fwd = []; let ignore_path_change = false; + function reset_history() { + history_bwd = []; + history_fwd = []; + } + onMount(() => { function destroy() { if (adapter) { @@ -127,6 +132,7 @@ loading = true; reset_complete_states(); + reset_history(); await reset_adapter($files); From 644f5e3934fe4c9b34139c9cf74e8ad3f21f0360 Mon Sep 17 00:00:00 2001 From: Brandon McConnell Date: Wed, 11 Jan 2023 13:04:44 -0700 Subject: [PATCH 3/4] Hide iframe until loaded to prevent flash of white when clicking bwd/fwd --- src/routes/tutorial/[slug]/+page.svelte | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index 026285d53..d056851cc 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -107,13 +107,18 @@ } 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; }); @@ -317,6 +322,7 @@ // 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); @@ -497,6 +503,7 @@ .content { display: flex; flex-direction: column; + position: relative; min-height: 0; height: 100%; max-height: 100%; @@ -539,10 +546,6 @@ flex-direction: column; } - .content { - position: relative; - } - iframe { width: 100%; height: 100%; @@ -553,6 +556,10 @@ background: var(--sk-back-2); } + iframe:not(.loaded) { + display: none; + } + .editor-container { position: relative; background-color: var(--sk-back-3); From 8b0e8ee2cbb6711da73dcb61e264cdad4d1a964d Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Mon, 23 Jan 2023 11:28:00 +0100 Subject: [PATCH 4/4] icons, color, opacity --- src/routes/tutorial/[slug]/Chrome.svelte | 18 +++++++++++------- src/routes/tutorial/[slug]/back.svg | 3 --- src/routes/tutorial/[slug]/chevron.svg | 11 +++++++++++ src/routes/tutorial/[slug]/forward.svg | 3 --- src/routes/tutorial/[slug]/refresh.svg | 8 +++++--- 5 files changed, 27 insertions(+), 16 deletions(-) delete mode 100644 src/routes/tutorial/[slug]/back.svg create mode 100644 src/routes/tutorial/[slug]/chevron.svg delete mode 100644 src/routes/tutorial/[slug]/forward.svg diff --git a/src/routes/tutorial/[slug]/Chrome.svelte b/src/routes/tutorial/[slug]/Chrome.svelte index cedab5cd5..f313ca7b4 100644 --- a/src/routes/tutorial/[slug]/Chrome.svelte +++ b/src/routes/tutorial/[slug]/Chrome.svelte @@ -1,7 +1,6 @@