✨ Add button to reverse episode order

Open-Webtoon-Reader · Jun 19, 2024 · 12a9e05 · 12a9e05
1 parent 638c96d
commit 12a9e05
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/components/webtoons/episodes/EpisodeList.vue b/components/webtoons/episodes/EpisodeList.vue
@@ -9,6 +9,7 @@ import VisibilityObserver from "~/components/utils/VisibilityObserver.vue";
 const title = ref("");
 const episodes = ref<any[]>([]);
 const maxIndex = ref<number>(30);
+const newFirst = ref<boolean>(true);
 
 const id = useRoute().params.id as any as number;
 
@@ -34,6 +35,14 @@ function increaseMaxIndex(){
     maxIndex.value += 30;
 }
 
+function toggleOrder(){
+    newFirst.value = !newFirst.value;
+}
+
+const orderedEpisodes = computed(() => {
+    return newFirst.value ? episodes.value : [...episodes.value].reverse();
+});
+
 onMounted(() => {
     loadTitle();
     loadEpisodes();
@@ -42,7 +51,11 @@ onMounted(() => {
 
 <template>
     <div class="h-full w-full md:w-3/4 lg:w-1/2 2xl:w-1/3 border-x-[1px]">
-        <div id="header" class="flex gap-4 py-4 px-10 justify-center">
+        <div id="header" class="relative flex gap-4 py-4 px-10 justify-center items-center">
+            <Button variant="outline" class="absolute left-0 ml-4" @click="toggleOrder">
+                <Icon v-if="newFirst" name="iconoir:arrow-up"/>
+                <Icon v-else name="iconoir:arrow-down"/>
+            </Button>
             <h4 v-if="title">{{ title }}</h4>
             <Skeleton v-else class="w-1/2 h-8"/>
         </div>
@@ -54,8 +67,8 @@ onMounted(() => {
                     <Separator/>
                 </div>
             </div>
-            <div v-for="episode in episodes.slice(0, maxIndex)" :key="episode.id">
-                <EpisodeItem v-if="episodes.indexOf(episode) < maxIndex - 1" :episode="episode"/>
+            <div v-for="episode in orderedEpisodes.slice(0, maxIndex)" :key="episode.id">
+                <EpisodeItem v-if="orderedEpisodes.indexOf(episode) < maxIndex - 1" :episode="episode"/>
                 <VisibilityObserver v-else @on-display="increaseMaxIndex">
                     <EpisodeItem :episode="episode"/>
                 </VisibilityObserver>