Merge pull request #40 from appwrite/carousel

Author: TorstenDittmann

src/lib/components/Carousel.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	let carousel: HTMLElement;
+
+	export let gap = 32;
+	let scroll = 0;
+	let touchStart = 0;
+	let touchEnd = 0;
+
+	function calculateScrollAmount(prev = false) {
+		const direction = prev ? -1 : 1;
+		const carouselSize = carousel?.clientWidth;
+		const childSize = (carousel.childNodes[0] as HTMLUListElement)?.clientWidth + gap;
+
+		scroll = scroll || carouselSize;
+
+		const numberOfItems = Math.floor(carouselSize / childSize);
+		const overflow = scroll % childSize;
+		const amount = numberOfItems * childSize - overflow * direction;
+		scroll += amount * direction;
+		return amount * direction;
+	}
+
+	function next() {
+		carousel.scrollBy({
+			left: calculateScrollAmount(),
+			behavior: 'smooth'
+		});
+	}
+	function prev() {
+		carousel.scrollBy({
+			left: calculateScrollAmount(true),
+			behavior: 'smooth'
+		});
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStart = e.touches[0].clientX;
+	}
+	function handleTouchMove(e: TouchEvent) {
+		touchEnd = e.touches[0].clientX;
+	}
+
+	function handleTouchEnd() {
+		if (touchEnd > touchStart) {
+			prev();
+		} else {
+			next();
+		}
+	}
+</script>
+
+<div class="u-flex u-main-space-between u-flex-wrap">
+	<slot name="header" />
+	<div class="u-flex u-gap-12 u-cross-end u-margin-block-start-8">
+		<button class="aw-icon-button" aria-label="Move carousel backward" on:click={() => prev()}>
+			<span class="icon-arrow-left" aria-hidden="true" />
+		</button>
+		<button class="aw-icon-button" aria-label="Move carousel forward" on:click={() => next()}>
+			<span class="icon-arrow-right" aria-hidden="true" />
+		</button>
+	</div>
+</div>
+<ul
+	class="aw-grid-articles aw-u-gap-32 u-margin-block-start-32 carousel"
+	bind:this={carousel}
+	on:touchstart={handleTouchStart}
+	on:touchmove={handleTouchMove}
+	on:touchend={handleTouchEnd}
+>
+	<slot />
+</ul>
+
+<style lang="scss">
+	.carousel {
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(17.5rem, 1fr);
+		overflow-x: hidden;
+	}
+</style>

src/lib/components/index.ts

@@ -8,3 +8,4 @@ export { default as Newsletter } from './Newsletter.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Spline } from './Spline.svelte';
 export { default as Article } from './Article.svelte';
+export { default as Carousel } from './Carousel.svelte';