web_lib

commit 54dca5c662c8990a35ef9d8cee3d9d29b9469f1c
parent d88629cd709591c7b6c51a3d66efdc259236708f
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Sun,  6 Oct 2024 10:20:42 +0000

apps-lib: add carousel stores and utils

Diffstat:
M
apps-lib/src/lib/index.ts
 | 
1
+
M
apps-lib/src/lib/stores/client.ts
 | 
4
++++
A
apps-lib/src/lib/utils/carousel.ts
 | 
57
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
apps-lib/src/lib/utils/routes.ts
 | 
2
--

4 files changed, 62 insertions(+), 2 deletions(-)
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -22,6 +22,7 @@ export * from "./stores/client";
 export * from "./utils/routes";
 export * from "./utils/dom";
 export * from "./utils/styles";
+export * from "./utils/carousel";
 export * from "./utils/client";
 export * from "./utils/time";
 export * from "./utils/geo";
diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts
@@ -33,6 +33,10 @@ export const tabs_visible = writable<boolean>(false);
 export const tabs_blur = writable<boolean>(false);
 export const app_tab_active = writable<number>(0);
 
+export const carousel_active = writable<boolean>(false);
+export const carousel_index = writable<number>(0);
+export const carousel_index_max = writable<number>(0);
+
 export const nostr_ndk_configured = writable<boolean>(false);
 export const nostr_relays_poll_documents = writable<boolean>(false);
 export const nostr_relays_poll_documents_count = writable<number>(0);
diff --git a/apps-lib/src/lib/utils/carousel.ts b/apps-lib/src/lib/utils/carousel.ts
@@ -0,0 +1,57 @@
+import {
+    carousel_active,
+    carousel_index,
+    carousel_index_max,
+    sleep
+} from "$lib";
+import { get as get_store } from 'svelte/store';
+
+const SLIDE_DURATION_MS = 400;
+
+const get_slide_container = <T extends string>(
+    view: T,
+): Element | undefined => {
+    const el = document.querySelector(
+        `[data-carousel-container="${view}"]`,
+    );
+    return el ? el : undefined;
+};
+
+const get_slide_item = <T extends string>(view: T): Element | undefined => {
+    const el = document.querySelector(`[data-carousel-item="${view}"]`);
+    return el ? el : undefined;
+};
+
+export const carousel_prev = async <T extends string>(
+    view: T,
+): Promise<void> => {
+    if (get_store(carousel_active)) return;
+    carousel_active.set(true);
+    const slide_item = get_slide_item<T>(view);
+    const slide_container = get_slide_container<T>(view);
+    if (slide_container && slide_item) {
+        const slide_w = slide_item?.clientWidth || 0;
+        slide_container.scrollLeft -= slide_w;
+        carousel_index.set(Math.max(get_store(carousel_index) - 1, 0));
+    }
+    await sleep(SLIDE_DURATION_MS);
+    carousel_active.set(false);
+};
+
+export const carousel_next = async <T extends string>(
+    view: T,
+): Promise<void> => {
+    if (get_store(carousel_active)) return;
+    carousel_active.set(true);
+    const slide_item = get_slide_item<T>(view);
+    const slide_container = get_slide_container<T>(view);
+    if (slide_container && slide_item) {
+        const slide_w = slide_item?.clientWidth || 0;
+        slide_container.scrollLeft += slide_w;
+        carousel_index.set(
+            Math.min(get_store(carousel_index) + 1, get_store(carousel_index_max)),
+        );
+    }
+    await sleep(SLIDE_DURATION_MS);
+    carousel_active.set(false);
+};
diff --git a/apps-lib/src/lib/utils/routes.ts b/apps-lib/src/lib/utils/routes.ts
@@ -13,7 +13,6 @@ export type NavigationRoute =
 	| "/models/trade-product/add"
 	| "/nostr"
 	| "/nostr/keys"
-	| "/nostr/nip-99/view"
 	| "/nostr/notes"
 	| "/nostr/notes/post"
 	| "/nostr/profile"
@@ -37,7 +36,6 @@ export function parse_route(route: string): NavigationRoute {
 		case "/models/trade-product/add":
 		case "/nostr":
 		case "/nostr/keys":
-		case "/nostr/nip-99/view":
 		case "/nostr/notes":
 		case "/nostr/notes/post":
 		case "/nostr/profile":