diff --git a/package-lock.json b/package-lock.json index ca14dfa2..261f8cb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,6 @@ "nostr-editor": "^0.0.2", "nostr-tools": "^2.7.2", "prettier-plugin-tailwindcss": "^0.6.5", - "svelte-bricks": "^0.2.1", "svelte-tiptap": "^1.1.3", "throttle-debounce": "^5.0.2" }, @@ -4862,14 +4861,6 @@ "node": ">=16" } }, - "node_modules/svelte-bricks": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/svelte-bricks/-/svelte-bricks-0.2.1.tgz", - "integrity": "sha512-cc3XK3j5ViPyZ3K183+Sr53B2e8mJaiV3POyoJtjmm1dYc/TBMy7jOUMt8MW/snJzodpACfqwFzokBQbrZ297w==", - "dependencies": { - "svelte": "^4.2.1" - } - }, "node_modules/svelte-check": { "version": "3.8.5", "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.8.5.tgz", diff --git a/package.json b/package.json index c700ee9a..93da6acc 100644 --- a/package.json +++ b/package.json @@ -48,15 +48,15 @@ "@tiptap/extension-text": "^2.6.6", "@tiptap/suggestion": "^2.6.4", "@types/throttle-debounce": "^5.0.2", - "@welshman/content": "~0.0.12", - "@welshman/lib": "~0.0.22", - "@welshman/util": "~0.0.39", - "@welshman/feeds": "~0.0.20", - "@welshman/store": "~0.0.10", - "@welshman/net": "~0.0.28", - "@welshman/dvm": "~0.0.10", - "@welshman/signer": "~0.0.9", "@welshman/app": "~0.0.17", + "@welshman/content": "~0.0.12", + "@welshman/dvm": "~0.0.10", + "@welshman/feeds": "~0.0.20", + "@welshman/lib": "~0.0.22", + "@welshman/net": "~0.0.28", + "@welshman/signer": "~0.0.9", + "@welshman/store": "~0.0.10", + "@welshman/util": "~0.0.39", "daisyui": "^4.12.10", "date-picker-svelte": "^2.13.0", "emoji-picker-element": "^1.22.8", @@ -65,7 +65,6 @@ "nostr-editor": "^0.0.2", "nostr-tools": "^2.7.2", "prettier-plugin-tailwindcss": "^0.6.5", - "svelte-bricks": "^0.2.1", "svelte-tiptap": "^1.1.3", "throttle-debounce": "^5.0.2" } diff --git a/src/app/components/ProfileDetail.svelte b/src/app/components/ProfileDetail.svelte index 11e313a6..5df4a86d 100644 --- a/src/app/components/ProfileDetail.svelte +++ b/src/app/components/ProfileDetail.svelte @@ -29,7 +29,7 @@ onMount(() => { const scroller = createScroller({ - element: element.closest(".menu")!, + element, onScroll: async () => { const $loader = await loader diff --git a/src/app/components/RelayAdd.svelte b/src/app/components/RelayAdd.svelte index b28c4f63..f0257777 100644 --- a/src/app/components/RelayAdd.svelte +++ b/src/app/components/RelayAdd.svelte @@ -16,8 +16,8 @@ onMount(() => { const scroller = createScroller({ + element, delay: 300, - element: element.closest(".modal-box")!, onScroll: () => { limit += 20 }, diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte index 222420f2..12ed1c72 100644 --- a/src/lib/components/Dialog.svelte +++ b/src/lib/components/Dialog.svelte @@ -11,7 +11,8 @@ transition:fade on:click={onClose} />
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte index c77974d5..9bf2dfc1 100644 --- a/src/lib/components/Drawer.svelte +++ b/src/lib/components/Drawer.svelte @@ -1,5 +1,5 @@ @@ -10,8 +10,8 @@ transition:fade on:click={onClose} />
+ class="scroll-container absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96" + transition:translate={{axis: "x", duration: 300}}>
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte index 63086f43..7ff46fa9 100644 --- a/src/lib/components/Page.svelte +++ b/src/lib/components/Page.svelte @@ -1,3 +1,3 @@ -
+
diff --git a/src/lib/html.ts b/src/lib/html.ts index 5dbcfea6..f76cdce5 100644 --- a/src/lib/html.ts +++ b/src/lib/html.ts @@ -34,15 +34,19 @@ export const createScroller = ({ let done = false const check = async () => { - // While we have empty space, fill it - const {scrollY, innerHeight} = window - const {scrollHeight, scrollTop} = element - const offset = Math.abs(scrollTop || scrollY) - const shouldLoad = offset + innerHeight + threshold > scrollHeight + const container = element.closest('.scroll-container') - // Only trigger loading the first time we reach the threshold - if (shouldLoad) { - await onScroll() + if (container) { + // While we have empty space, fill it + const {scrollY, innerHeight} = window + const {scrollHeight, scrollTop} = container + const offset = Math.abs(scrollTop || scrollY) + const shouldLoad = offset + innerHeight + threshold > scrollHeight + + // Only trigger loading the first time we reach the threshold + if (shouldLoad) { + await onScroll() + } } // No need to check all that often diff --git a/src/lib/transition.ts b/src/lib/transition.ts index afe0c76a..3af220e0 100644 --- a/src/lib/transition.ts +++ b/src/lib/transition.ts @@ -8,6 +8,34 @@ export {fade, slide} from "svelte/transition" export const fly = (node: Element, params?: FlyParams | undefined) => baseFly(node, {y: 20, ...params}) +export type TranslateParams = { + delay?: number, + duration?: number, + easing?: (t: number) => number + axis?: "x" | "y" + reverse?: boolean +} + +export const translate = ( + node: Element, + {delay = 0, duration = 400, easing = cubicOut, axis = "y", reverse = false}: TranslateParams = {} +) => { + return { + delay, + duration, + easing, + css: (t: number) => { + const p = reverse ? `${t * 100}%` : `${100 - t * 100}%` + + if (axis === "x") { + return `transform: translateX(${p})` + } else { + return `transform: translateY(${p})` + } + } + } +} + // Copy-pasted and tweaked from slide source code export function slideAndFade( node: any, diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte index 8a80a319..0e876358 100644 --- a/src/routes/discover/+page.svelte +++ b/src/routes/discover/+page.svelte @@ -1,10 +1,9 @@