From 4ac80942b1a7322379a878ac22ac39daa263c663 Mon Sep 17 00:00:00 2001
From: Yi Lei Feng <fengyilei1@gmail.com>
Date: Thu, 9 Jan 2025 10:41:51 -0500
Subject: [PATCH] fix highlighting for items not included in custom ToC

---
 ...000000-0000-0000-0000-000000000000_en.json | 55 ++++++-------------
 ...000000-0000-0000-0000-000000000000_fr.json | 12 +---
 src/components/story/chapter-menu.vue         | 36 ++++++++++--
 src/components/story/horizontal-menu.vue      | 40 +++++++++++---
 src/components/story/mobile-menu.vue          | 36 ++++++++++--
 5 files changed, 114 insertions(+), 65 deletions(-)

diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
index e96e34b7..2fb3ac26 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -648,101 +648,78 @@
             "slideIndex": 0,
             "sublist": [
                 {
-                    "title": "Community Directory",
+                    "title": "Interactive Content + Maps",
                     "slideIndex": 1
                 },
-                {
-                    "title": "Interactive Map",
-                    "slideIndex": 2
-                },
-                {
-                    "title": "RAMP Carousel",
-                    "slideIndex": 3
-                },
                 {
                     "title": "Dynamic Panel",
-                    "slideIndex": 4
-                },
-                {
-                    "title": "YouTube Video",
                     "slideIndex": 5
                 },
                 {
-                    "title": "Cumulative Effects Video",
+                    "title": "YouTube Video",
                     "slideIndex": 6
                 }
             ]
         },
         {
             "title": "Oil Sands Deposits",
-            "slideIndex": 7
-        },
-        {
-            "title": "Oil Sands Extraction",
-            "slideIndex": 8,
-            "sublist": []
+            "slideIndex": 8
         },
         {
             "title": "In-situ Extraction",
-            "slideIndex": 9
+            "slideIndex": 10
         },
         {
             "title": "Where are Facilities Located?",
-            "slideIndex": 10,
+            "slideIndex": 11,
             "sublist": [
                 {
                     "title": "NPRI Substances Reported for Oil Sands Mining Faciltiies",
-                    "slideIndex": 11
+                    "slideIndex": 12
                 },
                 {
                     "title": "NPRI Substances Reported for Oil Sands Mining Facilities (2)",
-                    "slideIndex": 12
+                    "slideIndex": 13
                 },
                 {
                     "title": "Criteria Air Contaminant Releases From Oil Sands Mines",
-                    "slideIndex": 13
+                    "slideIndex": 14
                 },
                 {
                     "title": "Reported Mine Tailings From Oil Sands Surface Mining Facilities",
-                    "slideIndex": 14
+                    "slideIndex": 15
                 },
                 {
                     "title": "Reported Mine Tailings From Oil Sands Surface Mining Facilities (2)",
-                    "slideIndex": 15
+                    "slideIndex": 16
                 },
                 {
                     "title": "Trends in Mine Tailings Reported From Surface Mining Facilities",
-                    "slideIndex": 16
+                    "slideIndex": 17
                 },
                 {
                     "title": "Thermal in Situ Facilities",
-                    "slideIndex": 17
+                    "slideIndex": 18
                 },
                 {
                     "title": "NPRI Releases From Thermal in-situ Faciltiies",
-                    "slideIndex": 18
+                    "slideIndex": 19
                 }
             ]
         },
         {
             "title": "Highcharts Demo (╯°□°)╯︵ ┻━┻",
-            "slideIndex": 19,
+            "slideIndex": 20,
             "sublist": [
                 {
                     "title": "Dynamic Slideshow with Hybrid Chart",
-                    "slideIndex": 20
+                    "slideIndex": 21
                 }
             ]
         },
         {
             "title": "Managing Environmental Impacts",
-            "slideIndex": 21,
-            "sublist": [
-                {
-                    "title": "Last Slide",
-                    "slideIndex": 22
-                }
-            ]
+            "slideIndex": 22
         }
     ],
     "tocOrientation": "horizontal",
diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
index 4226782c..53187d2d 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
@@ -342,17 +342,7 @@
         },
         {
             "title": "Extraction de sables bitumineux",
-            "slideIndex": 2,
-            "sublist": [
-                {
-                    "title": "Extraction des sables bitumineux (2)",
-                    "slideIndex": 3
-                },
-                {
-                    "title": "Où sont situées les installations?",
-                    "slideIndex": 4
-                }
-            ]
+            "slideIndex": 2
         },
         {
             "title": "Substances de l'INRP déclarées par les installations d’exploitation minière de sables bitumineux",
diff --git a/src/components/story/chapter-menu.vue b/src/components/story/chapter-menu.vue
index dae4220e..147f7ea3 100644
--- a/src/components/story/chapter-menu.vue
+++ b/src/components/story/chapter-menu.vue
@@ -149,7 +149,7 @@
                     v-for="(item, idx) in customToc"
                     :key="idx"
                     :class="{
-                        'is-active': lastActiveIdx === item.slideIndex
+                        'is-active': lastActiveIdx === item.slideIndex || isSublistActive(item.sublist)
                     }"
                 >
                     <toc-item :tocItem="item" :slides="slides" :plugin="plugin">
@@ -221,7 +221,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue';
 import { computed, ref, watch, onMounted } from 'vue';
-import { MenuItem, Slide } from '@storylines/definitions';
+import type { MenuItem, Slide } from '@storylines/definitions';
 import TocItem from '@storylines/components/panels/helpers/toc-item.vue';
 
 const props = defineProps({
@@ -266,6 +266,22 @@ const tocSlides = computed(() => {
     return slides;
 });
 
+const customTocSlides = computed(() => {
+    if (props.customToc) {
+        // for custom ToC extract slides including nested sublist items
+        let slides: MenuItem[] = [];
+        props.customToc.forEach((item) => {
+            slides.push(item);
+            if (item.sublist && item.sublist.length) {
+                item.sublist.forEach((subItem) => {
+                    slides.push(subItem);
+                });
+            }
+        });
+        return slides;
+    }
+});
+
 watch(
     () => props.activeChapterIndex,
     () => {
@@ -298,9 +314,21 @@ const isSublistToggled = (index: number): boolean => {
     return sublistToggled.value[index];
 };
 
+const isSublistActive = (sublist: MenuItem[] | undefined): boolean => {
+    if (sublist) {
+        return sublist.some(subItem => lastActiveIdx.value === subItem.slideIndex);
+    }
+    return false;
+};
+
 const updateActiveIdx = () => {
-    const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
-    lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
+    if (props.customToc) {
+        const prevCustomSlides: MenuItem[] = customTocSlides.value!.filter((slide) => slide.slideIndex <= props.activeChapterIndex);
+        lastActiveIdx.value = prevCustomSlides.length ? prevCustomSlides[prevCustomSlides.length - 1].slideIndex : -1;
+    } else {
+        const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
+        lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
+    }
 };
 </script>
 
diff --git a/src/components/story/horizontal-menu.vue b/src/components/story/horizontal-menu.vue
index 325439ef..aa44545f 100644
--- a/src/components/story/horizontal-menu.vue
+++ b/src/components/story/horizontal-menu.vue
@@ -44,7 +44,7 @@
                     v-for="(item, idx) in customToc"
                     :key="idx"
                     :class="{
-                        'is-active': lastActiveIdx === item.slideIndex,
+                        'is-active': lastActiveIdx === item.slideIndex || isSublistActive(item.sublist),
                         separator: (!returnToTop && idx !== 0) || returnToTop
                     }"
                     ref="itemContainer"
@@ -120,7 +120,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue';
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import { MenuItem, Slide } from '@storylines/definitions';
+import type { MenuItem, Slide } from '@storylines/definitions';
 import TocItem from '@storylines/components/panels/helpers/toc-item.vue';
 
 const props = defineProps({
@@ -159,12 +159,26 @@ const itemContainer = ref(null);
 // filter out which slides are visible in the table of contents while preserving original slide index
 const tocSlides = computed(() => {
     const slides = props.slides.map((slide, idx) => ({ ...slide, index: idx }));
-    if (!props.customToc) {
-        slides.filter((slide) => slide.includeInToc !== false);
-    }
+    slides.filter((slide) => slide.includeInToc !== false);
     return slides;
 });
 
+const customTocSlides = computed(() => {
+    if (props.customToc) {
+        // for custom ToC extract slides including nested sublist items
+        let slides: MenuItem[] = [];
+        props.customToc.forEach((item) => {
+            slides.push(item);
+            if (item.sublist && item.sublist.length) {
+                item.sublist.forEach((subItem) => {
+                    slides.push(subItem);
+                });
+            }
+        });
+        return slides;
+    }
+});
+
 watch(
     () => props.activeChapterIndex,
     () => {
@@ -211,9 +225,21 @@ const toggleSublist = (index: number): void => {
     sublistToggled.value = sublistToggled.value !== index ? index : -1;
 };
 
+const isSublistActive = (sublist: MenuItem[] | undefined): boolean => {
+    if (sublist) {
+        return sublist.some(subItem => lastActiveIdx.value === subItem.slideIndex);
+    }
+    return false;
+};
+
 const updateActiveIdx = () => {
-    const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
-    lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
+    if (props.customToc) {
+        const prevCustomSlides: MenuItem[] = customTocSlides.value!.filter((slide) => slide.slideIndex <= props.activeChapterIndex);
+        lastActiveIdx.value = prevCustomSlides.length ? prevCustomSlides[prevCustomSlides.length - 1].slideIndex : -1;
+    } else {
+        const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
+        lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
+    }
 };
 
 const handleFocus = (idx: number) => {
diff --git a/src/components/story/mobile-menu.vue b/src/components/story/mobile-menu.vue
index 3179cc72..5846b74e 100644
--- a/src/components/story/mobile-menu.vue
+++ b/src/components/story/mobile-menu.vue
@@ -126,7 +126,7 @@
                     v-for="(item, idx) in customToc"
                     :key="idx"
                     :class="{
-                        'is-active': lastActiveIdx === item.slideIndex
+                        'is-active': lastActiveIdx === item.slideIndex || isSublistActive(item.sublist)
                     }"
                 >
                     <toc-item :tocItem="item" :slides="slides" :plugin="plugin">
@@ -196,7 +196,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue';
 import { computed, ref, watch, onMounted } from 'vue';
-import { MenuItem, Slide } from '@storylines/definitions';
+import type { MenuItem, Slide } from '@storylines/definitions';
 import TocItem from '@storylines/components/panels/helpers/toc-item.vue';
 
 const props = defineProps({
@@ -240,6 +240,22 @@ const tocSlides = computed(() => {
     return slides;
 });
 
+const customTocSlides = computed(() => {
+    if (props.customToc) {
+        // for custom ToC extract slides including nested sublist items
+        let slides: MenuItem[] = [];
+        props.customToc.forEach((item) => {
+            slides.push(item);
+            if (item.sublist && item.sublist.length) {
+                item.sublist.forEach((subItem) => {
+                    slides.push(subItem);
+                });
+            }
+        });
+        return slides;
+    }
+});
+
 watch(
     () => props.activeChapterIndex,
     () => {
@@ -273,9 +289,21 @@ const isSublistToggled = (index: number): boolean => {
     return sublistToggled.value[index];
 };
 
+const isSublistActive = (sublist: MenuItem[] | undefined): boolean => {
+    if (sublist) {
+        return sublist.some(subItem => lastActiveIdx.value === subItem.slideIndex);
+    }
+    return false;
+};
+
 const updateActiveIdx = () => {
-    const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
-    lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
+    if (props.customToc) {
+        const prevCustomSlides: MenuItem[] = customTocSlides.value!.filter((slide) => slide.slideIndex <= props.activeChapterIndex);
+        lastActiveIdx.value = prevCustomSlides.length ? prevCustomSlides[prevCustomSlides.length - 1].slideIndex : -1;
+    } else {
+        const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
+        lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
+    }
 };
 </script>