feat: implement inline swipe action during scrolling (#18)

Co-authored-by: Angelica Willianto <[email protected]>
nostrocket · May 28, 2024 · 0147ce0 · 0147ce0
1 parent a4a6f6f
commit 0147ce0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 29 deletions.
diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
@@ -22,7 +22,9 @@
 	<!-- Icon Sidebar -->
 	<div class="w-12 flex-shrink-0 block bg-orange-500 dark:bg-cyan-950">
 		<div class="flex flex-col bg-layer-2 relative h-full">
-			<div class="flex flex-1 flex-col overflow-x-hidden overflow-y-scroll no-scrollbar sm:overflow-hidden place-items-center">
+			<div
+				class="flex flex-1 flex-col overflow-x-hidden overflow-y-scroll no-scrollbar sm:overflow-hidden place-items-center"
+			>
 				<slot name="buttons" />
 				{#if !hideFaucet}
 					<Button
@@ -75,10 +77,11 @@
 		<div class="flex flex-col h-full">
 			<!-- CONTENT-->
 			<div
+				id="content"
 				class="h-full relative z-10 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"
 			>
-
-				<slot /> <!-- NOTE VIEWER-->
+				<slot />
+				<!-- NOTE VIEWER-->
 			</div>
 			<!-- INPUT BOX-->
 			<div class="relative w-full h-fit">

diff --git a/src/lib/views/messages/RenderKind1.svelte b/src/lib/views/messages/RenderKind1.svelte
@@ -22,36 +22,40 @@
 
 	let top: HTMLDivElement;
 	let messageViewController: HTMLDivElement;
-	let hiddenMessageNotice: HTMLSpanElement;
+
+	function updateDistance() {
+		const rect = messageViewController.getBoundingClientRect();
+		if (isTop && rect.top < 120 && $threadParentID === 'root') {
+			const marginLeft = Math.max(-240, (rect.top - 120) * 2);
+			top.style.marginLeft = `${marginLeft}px`;
+		} else {
+			top.style.marginLeft = '0px';
+		}
+	}
 
 	onMount(() => {
 		if (isTop) {
 			(async () => {
 				top.scrollIntoView({ behavior: 'smooth' });
 			})();
 		}
-	});
 
-	function handleMessageInviewLeave(event) {
-		if (event.detail.scrollDirection.vertical == 'up' && $threadParentID == 'root') {
-			top.style.transition = 'transform 400ms';
-			top.style.transform = 'translateX(-1200px)';
-			hiddenMessageNotice.style.display = 'block';
-
-			setTimeout(() => {
-				messageViewController.scrollIntoView({ behavior: 'smooth' });
-			}, 1500);
+		const contentDiv = document.getElementById('content');
+		if (contentDiv) {
+			contentDiv.addEventListener('scroll', updateDistance);
+			updateDistance();
 		}
-	}
+
+		return () => {
+			if (contentDiv) {
+				contentDiv.removeEventListener('scroll', updateDistance);
+			}
+		};
+	});
 
 	$: childrenCount = $store?.replies.get(note.id) ? $store.replies.get(note.id)!.size : 0;
 </script>
 
-<span
-	bind:this={hiddenMessageNotice}
-	class="hidden text-white/50 text-xs mx-auto text-center h-0 absolute top-4 left-0 right-0"
-	>Previous messages are hidden from view. Refresh the page to view it again.</span
->
 <div bind:this={top} class="w-full pt-2 pl-2 pr-2">
 	<div class="grid">
 		<div class="flex gap-2">
@@ -73,14 +77,6 @@
 							<RenderNoteContent inputString={note.content} />
 						</h5>
 						<div id="buttons" class="relative flex justify-between">
-							<div
-								id="message-view-controller"
-								class="absolute h-0 top-3"
-								use:inview={{}}
-								on:inview_leave={(event) => {
-									handleMessageInviewLeave(event);
-								}}
-							/>
 							<div>
 								<Marcus
 									onclick={() => {
@@ -128,4 +124,4 @@
 			});
 		}
 	}}
-/>
+></div>