Merge pull request #2 from flo-bit/main

github link
flo-bit · Feb 14, 2024 · 3c6ecc2 · 3c6ecc2
2 parents bde4f7d + 1b48cdf
commit 3c6ecc2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,11 @@
 Tinder-like swipeable cards for svelte.
 
 > [!NOTE]  
-> In active development. Not ready for production.
+> Still in active development. Expect breaking changes.
+
+[Try the demo here!](https://flo-bit.github.io/svelte-swiper-cards/)
+
+https://github.com/flo-bit/svelte-swiper-cards/assets/45694132/61077605-b6f8-4114-aaa3-5527d8887f99
 
 ## Features
 
@@ -29,18 +33,18 @@ npm i @use-gesture/vanilla
 
 ```svelte
 <script>
-	import { CardSwiper } from '$lib/CardSwiper';
+  import { CardSwiper } from '$lib/CardSwiper'
+
+  let data = (index) => {
+    return {
+      title: 'Card ' + index,
+      description: 'Description ' + index
+    }
+  }
 </script>
 
 <div class="h-screen w-screen">
-	<CardSwiper
-		cardData={(index) => {
-			return {
-				title: 'Card ' + index,
-				description: 'Description ' + index
-			};
-		}}
-	/>
+  <CardSwiper cardData={data} />
 </div>
 ```
 
@@ -54,96 +58,65 @@ You can control the cards programmatically by calling the swipe function.
 
 ```svelte
 <script>
-	import { CardSwiper } from '$lib/CardSwiper';
+  import { CardSwiper } from '$lib/CardSwiper'
 
-	let swipe: (direction?: 'left' | 'right') => void;
+  let swipe: (direction?: 'left' | 'right') => void
 </script>
 
 <div class="h-screen w-screen">
-	<CardSwiper
-		cardData={(index) => {
-			return {
-				title: 'Card ' + index,
-				description: 'Description ' + index
-			};
-		}}
-		bind:swipe
-	/>
-	<button on:click={() => swipe('left')}>Swipe left</button>
-	<button on:click={() => swipe('right')}>Swipe right</button>
+  <CardSwiper bind:swipe />
+  <button on:click={() => swipe('left')}>Swipe left</button>
+  <button on:click={() => swipe('right')}>Swipe right</button>
 </div>
 ```
 
-## Events
+### Events
 
 ```svelte
 <script>
-	import { CardSwiper } from '$lib/CardSwiper';
-
-	function onSwipe(event) {
-		// details: { direction: 'left' | 'right', index: number, element: HTMLElement, data: CardData }
-		console.log(event.details);
-	}
+  import { CardSwiper } from '$lib/CardSwiper'
+
+  function onSwipe(event) {
+    // details: 
+    // direction: 'left' | 'right'
+    // index: number
+    // element: HTMLElement
+    // data: CardData
+    console.log(event.details)
+  }
 </script>
 
 <div class="h-screen w-screen">
-	<CardSwiper
-		cardData={(index) => {
-			return {
-				title: 'Card ' + index,
-				description: 'Description ' + index
-			};
-		}}
-		on:swipe={onSwipe}
-	/>
+  <CardSwiper on:swipe={onSwipe} />
 </div>
 ```
 
-## Other props
+### Other props
 
-### Threshold
-
-Show a threshold overlay when swiping like so:
+Show a threshold overlay when swiping like so (set to 0 if no threshold reached, 1 if right threshold, -1 if left threshold is reached):
 
 ```svelte
 <script>
-	import { CardSwiper } from '$lib/CardSwiper';
+  import { CardSwiper } from '$lib/CardSwiper'
 
-	let thresholdPassed = 0;
+  let thresholdPassed = 0
 </script>
 
-<CardSwiper
-	cardData={(index) => {
-		return {
-			title: 'Card ' + index,
-			description: 'Description ' + index
-		};
-	}}
-	bind:thresholdPassed
-/>
+<CardSwiper bind:thresholdPassed />
 
 {#if thresholdPassed !== 0}
-	<div
-		class="absolute w-full h-full inset-0 flex items-center justify-center text-9xl"
-	>
-		{thresholdPassed > 0 ? '👍' : '👎'}
-	</div>
+  <div class="absolute w-full h-full inset-0 flex items-center justify-center text-9xl">
+    {thresholdPassed > 0 ? '👍' : '👎'}
+  </div>
 {/if}
 ```
 
 You can also set the minimum threshold as a percentage of the card width (default is 0.5) and the minimum speed (default is 0.5).
 
 ```svelte
 <CardSwiper
-	cardData={(index) => {
-		return {
-			title: 'Card ' + index,
-			description: 'Description ' + index
-		};
-	}}
-	minSwipeDistance={0.3}
-	minSwipeVelocity={0.3}
-	bind:thresholdPassed
+  minSwipeDistance={0.3}
+  minSwipeVelocity={0.3}
 />
 ```
 

diff --git a/card-swiper-svelte.mp4 b/card-swiper-svelte.mp4
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -83,13 +83,13 @@
 			class="absolute bottom-1 left-1 p-3 px-4 bg-white/50 backdrop-blur-sm rounded-full z-10 text-3xl"
 			on:click={() => swipe('left')}
 		>
-		👎
+			👎
 		</button>
 		<button
 			class="absolute bottom-1 right-1 p-3 px-4 bg-white/50 backdrop-blur-sm rounded-full z-10 text-3xl"
 			on:click={() => swipe('right')}
 		>
-		👍
+			👍
 		</button>
 	</div>
 
@@ -102,3 +102,13 @@
 		</div>
 	{/if}
 </div>
+
+<a href="https://github.com/flo-bit/svelte-swiper-cards/" target="_blank" class="absolute top-0 right-0 bg-white/40 backdrop-blur-sm rounded-bl-xl p-2">
+	<svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="w-6 h-6">
+		<path
+			fill-rule="evenodd"
+			d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+			clip-rule="evenodd"
+		/>
+	</svg>
+</a>