Skip to content

Commit

Permalink
Merge pull request #532 from yileifeng/custom-toc-highlight
Browse files Browse the repository at this point in the history 
Fix highlighting for items not included in custom ToC (#532)
  • Loading branch information
@spencerwahl
spencerwahl authored Jan 10, 2025
2 parents 21c1c3a + 4ac8094 commit d1d3510
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 65 deletions.
55 changes: 16 additions & 39 deletions public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -652,101 +652,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",
Expand Down
12 changes: 1 addition & 11 deletions public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 32 additions & 4 deletions src/components/story/chapter-menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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,
() => {
Expand Down Expand Up @@ -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>

Expand Down
40 changes: 33 additions & 7 deletions src/components/story/horizontal-menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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,
() => {
Expand Down Expand Up @@ -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) => {
Expand Down
36 changes: 32 additions & 4 deletions src/components/story/mobile-menu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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,
() => {
Expand Down Expand Up @@ -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>

Expand Down

0 comments on commit d1d3510

Please sign in to comment.