From a846a2e15c4d09b70fe9ff82ab4cc586af31d23d Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 9 Sep 2022 15:32:05 -0700
Subject: [PATCH] Add swiper to channels

---
 packages/client/src/pages/channels.vue | 74 +++++++++++++++++++-------
 1 file changed, 56 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 56ea98d15..3989f5e77 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,39 +1,62 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div v-if="tab === 'featured'" class="_content grwlizim featured">
-			<MkPagination v-slot="{items}" :pagination="featuredPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'following'" class="_content grwlizim following">
-			<MkPagination v-slot="{items}" :pagination="followingPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-			<MkPagination v-slot="{items}" :pagination="ownedPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-			</MkPagination>
-		</div>
-	</MkSpacer>
+	<swiper
+		:modules="[Virtual]"
+		:space-between="20"
+		:virtual="true"
+		@swiper="setSwiperRef"
+		@slide-change="onSlideChange"
+	>
+		<swiper-slide>
+			<MkSpacer :content-max="700">
+				<div class="_content grwlizim featured">
+					<MkPagination v-slot="{items}" :pagination="featuredPagination">
+						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
+					</MkPagination>
+				</div>
+			</MkSpacer>
+		</swiper-slide>
+		<swiper-slide>
+			<MkSpacer :content-max="700">
+				<div class="_content grwlizim following">
+					<MkPagination v-slot="{items}" :pagination="followingPagination">
+						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
+					</MkPagination>
+				</div>
+			</MkSpacer>
+		</swiper-slide>
+		<swiper-slide>
+			<MkSpacer :content-max="700">
+				<div class="_content grwlizim owned">
+					<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+					<MkPagination v-slot="{items}" :pagination="ownedPagination">
+						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
+					</MkPagination>
+				</div>
+			</MkSpacer>
+		</swiper-slide>
+	</swiper>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, defineComponent, inject } from 'vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkChannelPreview from '@/components/MkChannelPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const router = useRouter();
 
 let tab = $ref('featured');
+const tabs = ['featured', 'following', 'owned'];
 
 const featuredPagination = {
 	endpoint: 'channels/featured' as const,
@@ -76,4 +99,19 @@ definePageMetadata(computed(() => ({
 	title: i18n.ts.channel,
 	icon: 'fas fa-satellite-dish',
 })));
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
 </script>