From afed4e778985f3030083a3868603d2dde0710d0d Mon Sep 17 00:00:00 2001 From: kiosion Date: Tue, 5 Mar 2024 14:14:01 -0500 Subject: [PATCH] fix: Cleanup mag-cursor exp --- .../src/components/experiments/gol.svelte | 34 +-- .../components/experiments/mag-cursor.svelte | 64 ++++-- .../experiments/mag-cursor/button.svelte | 25 --- .../experiments/mag-cursor/cursor.svelte | 208 ++++++++++++------ .../experiments/mag-cursor/target.svelte | 49 +++++ .../experiments/mag-cursor/utils.ts | 40 ++++ .../src/components/experiments/toru.svelte | 33 ++- svelte-app/src/components/footer.svelte | 3 +- svelte-app/src/components/icon.svelte | 2 + svelte-app/src/components/link.svelte | 4 +- svelte-app/src/lib/consts.ts | 2 + svelte-app/src/lib/icons/external-link.svelte | 4 + svelte-app/src/lib/icons/index.ts | 1 + 13 files changed, 321 insertions(+), 148 deletions(-) delete mode 100644 svelte-app/src/components/experiments/mag-cursor/button.svelte create mode 100644 svelte-app/src/components/experiments/mag-cursor/target.svelte create mode 100644 svelte-app/src/components/experiments/mag-cursor/utils.ts create mode 100644 svelte-app/src/lib/icons/external-link.svelte diff --git a/svelte-app/src/components/experiments/gol.svelte b/svelte-app/src/components/experiments/gol.svelte index bb608fdb..ca7b660b 100644 --- a/svelte-app/src/components/experiments/gol.svelte +++ b/svelte-app/src/components/experiments/gol.svelte @@ -120,25 +120,9 @@ -
-
- {#each grid as row, rowIndex} - {#each row as cell, colIndex} - -
!running && toggleCell(rowIndex, colIndex)} - /> - {/each} - {/each} -
-
- + +
+
+ {#each grid as row, rowIndex} + {#each row as cell, colIndex} + +
!running && toggleCell(rowIndex, colIndex)} + /> + {/each} + {/each} +
+
diff --git a/svelte-app/src/components/experiments/mag-cursor.svelte b/svelte-app/src/components/experiments/mag-cursor.svelte index b3a7b4fb..35ca731f 100644 --- a/svelte-app/src/components/experiments/mag-cursor.svelte +++ b/svelte-app/src/components/experiments/mag-cursor.svelte @@ -1,22 +1,25 @@ (containerRect = container?.getBoundingClientRect())} /> - -
+
(containerRect = container?.getBoundingClientRect())} bind:this={container} @@ -26,13 +29,44 @@

A simple magnetic cursor effect. Hover over the buttons to try it out.

+ + + + + + +
-
- {#each buttons as label, i} - +
+ {#each buttons as label} + {/each}
- +
-
+ diff --git a/svelte-app/src/components/experiments/mag-cursor/button.svelte b/svelte-app/src/components/experiments/mag-cursor/button.svelte deleted file mode 100644 index e8bf37ed..00000000 --- a/svelte-app/src/components/experiments/mag-cursor/button.svelte +++ /dev/null @@ -1,25 +0,0 @@ - - -
- {label} -
diff --git a/svelte-app/src/components/experiments/mag-cursor/cursor.svelte b/svelte-app/src/components/experiments/mag-cursor/cursor.svelte index 62cabc52..718832be 100644 --- a/svelte-app/src/components/experiments/mag-cursor/cursor.svelte +++ b/svelte-app/src/components/experiments/mag-cursor/cursor.svelte @@ -1,14 +1,17 @@ {#if !hide}
+ import { onDestroy, onMount } from 'svelte'; + import { cubicOut } from 'svelte/easing'; + import { tweened } from 'svelte/motion'; + + import { + activeTarget, + cursorTargets, + DEFAULT_NO_SNAP_DIST, + DEFAULT_SNAP_DIST, + getFirstPositionedChild + } from '$components/experiments/mag-cursor/utils'; + + export const id = Math.random().toString(36).slice(4); + + export let snap = true, + size = 0, + distance = snap ? DEFAULT_SNAP_DIST : DEFAULT_NO_SNAP_DIST; + + let element: HTMLDivElement; + + onMount(() => { + cursorTargets.update((targets) => [ + ...targets, + { + id, + element: getFirstPositionedChild(element), + snap, + snapDist: distance, + size, + offset: tweened([0, 0], { + duration: 275, + easing: cubicOut + }) + } + ]); + }); + + onDestroy(() => { + cursorTargets.update((targets) => targets.filter((t) => t.id !== id)); + }); + + $: active = !!($activeTarget?.id && $activeTarget.id === id); + $: tweenedOffset = $cursorTargets.find((t) => t.id === id)?.offset; + + +
+ +
diff --git a/svelte-app/src/components/experiments/mag-cursor/utils.ts b/svelte-app/src/components/experiments/mag-cursor/utils.ts new file mode 100644 index 00000000..fe211662 --- /dev/null +++ b/svelte-app/src/components/experiments/mag-cursor/utils.ts @@ -0,0 +1,40 @@ +import { writable } from 'svelte/store'; + +import { browser } from '$app/environment'; + +import type { Tweened } from 'svelte/motion'; + +export type CursorTarget = { + element: HTMLElement | undefined; + id: string; + snapDist: number; + snap: boolean; + offset: Tweened<[number, number]>; + size: number; +}; + +export const DEFAULT_SNAP_DIST = 52; +export const DEFAULT_NO_SNAP_DIST = 20; + +export const activeTarget = writable(undefined); +export const cursorTargets = writable([]); + +export const getFirstPositionedChild = (el: HTMLElement): HTMLElement | undefined => { + if (!browser) { + return undefined; + } + + const firstChild = el.firstElementChild as HTMLElement | null; + + if (!firstChild) { + return undefined; + } + + const style = window.getComputedStyle(firstChild); + + if (style.display === 'none' || style.display === 'contents') { + return getFirstPositionedChild(firstChild); + } + + return firstChild; +}; diff --git a/svelte-app/src/components/experiments/toru.svelte b/svelte-app/src/components/experiments/toru.svelte index e2d3492c..ea90945d 100644 --- a/svelte-app/src/components/experiments/toru.svelte +++ b/svelte-app/src/components/experiments/toru.svelte @@ -6,6 +6,7 @@ import Divider from '$components/divider.svelte'; import { initSync, stopSync } from '$components/experiments/toru'; import Hoverable from '$components/hoverable.svelte'; + import Icon from '$components/icon.svelte'; import Link from '$components/link.svelte'; import Spinner from '$components/loading/spinner.svelte'; @@ -59,6 +60,19 @@ + + + +
@@ -135,25 +149,6 @@ /> {/if}
- - - - - -
+ import { BASE_GIT_URL } from '$lib/consts'; import { APP_VERSION } from '$lib/env'; import { t } from '$lib/i18n'; @@ -62,7 +63,7 @@ {APP_VERSION.slice(0, 6)} diff --git a/svelte-app/src/components/icon.svelte b/svelte-app/src/components/icon.svelte index 0294aae7..3ee9ddfe 100644 --- a/svelte-app/src/components/icon.svelte +++ b/svelte-app/src/components/icon.svelte @@ -12,6 +12,7 @@ Check, Copy, Downasaur, + ExternalLink, ForwardBurger, GitBranch, GitCommit, @@ -34,6 +35,7 @@ check: Check, copy: Copy, downasaur: Downasaur, + 'external-link': ExternalLink, 'forward-burger': ForwardBurger, 'git-branch': GitBranch, 'git-commit': GitCommit, diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte index 03946119..66e2e667 100644 --- a/svelte-app/src/components/link.svelte +++ b/svelte-app/src/components/link.svelte @@ -10,6 +10,7 @@ type = $$props.href ? 'a' : 'button'; export let tooltipDelay = 300, + tooltipText: string | undefined = undefined, newtab = false; $: link = $$props.href @@ -21,7 +22,8 @@ 50 ? `${link.slice(0, 50 - 3)}...` : link ?? $t('Visit')} + text={tooltipText ?? + (link && link.length > 50 ? `${link.slice(0, 50 - 3)}...` : link ?? $t('Visit'))} delay={tooltipDelay} > diff --git a/svelte-app/src/lib/icons/index.ts b/svelte-app/src/lib/icons/index.ts index 28a31d02..8a9bcf65 100644 --- a/svelte-app/src/lib/icons/index.ts +++ b/svelte-app/src/lib/icons/index.ts @@ -8,6 +8,7 @@ export { default as BackBurger } from '$lib/icons/backburger.svelte'; export { default as Check } from '$lib/icons/check.svelte'; export { default as Copy } from '$lib/icons/copy.svelte'; export { default as Downasaur } from '$lib/icons/downasaur.svelte'; +export { default as ExternalLink } from '$lib/icons/external-link.svelte'; export { default as ForwardBurger } from '$lib/icons/forwardburger.svelte'; export { default as GitBranch } from '$lib/icons/git-branch.svelte'; export { default as GitCommit } from '$lib/icons/git-commit.svelte';