fixes

ramp4-pcar4 · Mar 22, 2024 · 71f2d9b · 71f2d9b
1 parent 013439d
commit 71f2d9b
Showing 1 changed file with 24 additions and 7 deletions.
diff --git a/src/components/story/horizontal-menu.vue b/src/components/story/horizontal-menu.vue
@@ -4,7 +4,7 @@
             <li v-if="introExists">
                 <a
                     class="items-center px-2 py-1 mx-1 cursor-pointer"
-                    @click="scrollToChapter('intro')"
+                    @click="scrollToChapter('intro', 0, activeChapterIndex, false)"
                     v-tippy="{
                         delay: '200',
                         placement: 'right',
@@ -41,7 +41,14 @@
                 <!-- using router-link causes a page refresh which breaks plugin -->
                 <a
                     class="flex items-center px-2 py-1 mx-1 cursor-pointer"
-                    @click="scrollToChapter(`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`)"
+                    @click="
+                        scrollToChapter(
+                            `${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`,
+                            idx,
+                            activeChapterIndex,
+                            false
+                        )
+                    "
                     v-tippy="{
                         delay: '200',
                         placement: 'right',
@@ -58,7 +65,14 @@
 
                 <router-link
                     :to="{ hash: `#${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}` }"
-                    @click="scrollToChapter(`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`)"
+                    @click="
+                        scrollToChapter(
+                            `${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`,
+                            idx,
+                            activeChapterIndex,
+                            true
+                        )
+                    "
                     class="flex items-center px-2 py-1 mx-1"
                     target
                     v-tippy="{
@@ -109,15 +123,18 @@ onMounted(() => {
     introExists.value = !!introSection;
 });
 
-const scrollToChapter = (id: string): void => {
+const scrollToChapter = (id: string, idx: number, last_idx: number, router_link: boolean): void => {
     const el = document.getElementById(id);
     const toc = document.querySelector('.navbar');
     if (el && toc) {
         const topOffset = toc.clientHeight;
-        el.scrollIntoView({ behavior: 'smooth' });
+        if (!router_link) {
+            el.scrollIntoView({ behavior: 'smooth' });
+        }
+        const timeout = Math.ceil(Math.abs(idx - last_idx) / 5) * 600;
         setTimeout(() => {
-            window.scrollBy(0, -topOffset);
-        }, 600);
+            window.scrollBy({ left: 0, top: -topOffset, behavior: 'smooth' });
+        }, timeout);
     }
 };
 </script>