Horizontal table of contents implementation

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ramp-storylines_demo-scenarios-pcar",
     "description": "A user-configurable story product featuring interactive maps, charts and dynamic multimedia content alongside text.",
-    "version": "3.1.0",
+    "version": "3.1.3",
     "private": false,
     "license": "MIT",
     "repository": "https://github.com/ramp4-pcar4/story-ramp",

src/components/story/horizontal-menu.vue

@@ -0,0 +1,168 @@
+<template>
+    <div id="h-navbar" class="navbar sticky">
+        <ul>
+            <li v-if="introExists">
+                <a
+                    class="items-center px-2 py-1 mx-1 cursor-pointer"
+                    @click="scrollToChapter('intro')"
+                    v-tippy="{
+                        delay: '200',
+                        placement: 'right',
+                        content: $t('chapters.return'),
+                        animateFill: true,
+                        animation: 'chapter-menu'
+                    }"
+                    v-if="plugin"
+                >
+                    <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                        $t('chapters.return')
+                    }}</span>
+                </a>
+
+                <router-link
+                    :to="{ hash: '#intro' }"
+                    class="flex items-center px-2 py-1 mx-1"
+                    target
+                    v-tippy="{
+                        delay: '200',
+                        placement: 'right',
+                        content: $t('chapters.return'),
+                        animateFill: true,
+                        animation: 'chapter-menu'
+                    }"
+                    v-else
+                >
+                    <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                        $t('chapters.return')
+                    }}</span>
+                </router-link>
+            </li>
+            <li v-for="(slide, idx) in slides" :key="idx" :class="{ 'is-active': activeChapterIndex === idx }">
+                <!-- 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(' ', '-')}`)"
+                    v-tippy="{
+                        delay: '200',
+                        placement: 'right',
+                        content: slide.title,
+                        animateFill: true,
+                        animation: 'chapter-menu'
+                    }"
+                    v-if="plugin"
+                >
+                    <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                        slide.title
+                    }}</span>
+                </a>
+
+                <router-link
+                    :to="{ hash: `#${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}` }"
+                    class="flex items-center px-2 py-1 mx-1"
+                    target
+                    v-tippy="{
+                        delay: '200',
+                        placement: 'right',
+                        content: slide.title,
+                        animateFill: true,
+                        animation: 'chapter-menu'
+                    }"
+                    v-else
+                >
+                    <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                        slide.title
+                    }}</span>
+                </router-link>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { ref, onMounted } from 'vue';
+import { Slide } from '@storylines/definitions';
+
+defineProps({
+    slides: {
+        type: Array as PropType<Array<Slide>>,
+        required: true
+    },
+    activeChapterIndex: {
+        type: Number,
+        required: true
+    },
+    lang: {
+        type: String,
+        required: true
+    },
+    plugin: {
+        type: Boolean
+    }
+});
+
+const introExists = ref(false);
+
+onMounted(() => {
+    const introSection = document.getElementById('intro');
+    introExists.value = !!introSection;
+});
+
+const scrollToChapter = (id: string): void => {
+    const el = document.getElementById(id);
+    if (el) {
+        el.scrollIntoView({ behavior: 'smooth' });
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+    background-color: rgb(241, 242, 244);
+    border-bottom: 2px;
+    border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+    position: sticky;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+}
+.navbar ul {
+    display: flex;
+    list-style-type: none;
+    text-align: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    overflow: hidden;
+    width: 100%;
+    padding: 5px;
+    margin: auto;
+}
+.navbar ul li {
+    float: left;
+    width: 12%;
+    border-radius: 20px;
+    a {
+        text-overflow: ellipsis;
+    }
+
+    a:hover {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    a:focus {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    a:visited {
+        color: inherit;
+    }
+    &.is-active {
+        background-color: var(--sr-accent-colour);
+        font-weight: bold;
+    }
+}
+</style>

src/components/story/introduction.vue

@@ -96,7 +96,6 @@ onMounted(() => {
     // obtain logo from ZIP file if it exists
     if (props.configFileStructure) {
         const logo = props.config.logo?.src;
-
         if (logo) {
             const logoSrc = `${logo.substring(logo.indexOf('/') + 1)}`;
             const logoFile = props.configFileStructure.zip.file(logoSrc);

src/components/story/story-content.vue

@@ -1,11 +1,24 @@
 <template>
-    <div class="flex items-stretch">
+    <div
+        class="items-stretch"
+        :class="{ flex: !$props.config?.tocOrientation || $props.config?.tocOrientation === 'vertical' }"
+    >
+        <horizontal-menu
+            class="top-menu"
+            :active-chapter-index="activeChapterIndex"
+            :slides="config.slides"
+            :plugin="!!configFileStructure || !!plugin"
+            :lang="lang"
+            :style="{ top: headerHeight + 'px' }"
+            v-if="$props.config?.tocOrientation === 'horizontal'"
+        />
         <chapter-menu
             class="side-menu"
             :active-chapter-index="activeChapterIndex"
             :slides="config.slides"
             :plugin="!!configFileStructure || !!plugin"
             :lang="lang"
+            v-else
         />
 
         <VueScrollama class="relative story-scrollama w-full flex-grow min-w-0" @step-enter="stepEnter">
@@ -17,7 +30,13 @@
                 :id="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
                 :name="`${idx}-${slide.title.toLowerCase().replaceAll(' ', '-')}`"
             >
-                <slide :config="slide" :configFileStructure="configFileStructure" :slideIdx="idx" :lang="lang"></slide>
+                <slide
+                    :config="slide"
+                    :configFileStructure="configFileStructure"
+                    :slideIdx="idx"
+                    :lang="lang"
+                    :style="{ 'margin-top': horizontalNavHeight + 'px' }"
+                ></slide>
             </div>
         </VueScrollama>
     </div>
@@ -32,6 +51,7 @@ import VueScrollama from 'vue3-scrollama';
 import { ConfigFileStructure, StoryRampConfig } from '@storylines/definitions';
 
 import ChapterMenu from './chapter-menu.vue';
+import HorizontalMenu from './horizontal-menu.vue';
 import Slide from './slide.vue';
 
 const route = useRoute();
@@ -51,10 +71,14 @@ defineProps({
     },
     plugin: {
         type: Boolean
+    },
+    headerHeight: {
+        type: Number
     }
 });
 
 const activeChapterIndex = ref(-1);
+const horizontalNavHeight = ref(0);
 
 onMounted(() => {
     const hash = route?.hash.substring(1);
@@ -71,6 +95,10 @@ onMounted(() => {
 const stepEnter = ({ element }: { element: HTMLElement }): void => {
     activeChapterIndex.value = parseInt(element.dataset.chapterIndex || '-1');
     emit('step', activeChapterIndex.value);
+    const horizontalNav = document.getElementById('h-navbar');
+    if (horizontalNav) {
+        horizontalNavHeight.value = horizontalNav.clientHeight * 0.75;
+    }
 };
 </script>
 
@@ -118,10 +146,16 @@ const stepEnter = ({ element }: { element: HTMLElement }): void => {
         box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.06);
     }
 }
-
+.top-menu {
+    z-index: 50;
+    width: 100%;
+}
 @media screen and (max-width: 640px) {
     .side-menu {
         display: none;
     }
+    .top-menu {
+        display: none;
+    }
 }
 </style>

src/components/story/story.vue

@@ -17,7 +17,10 @@
 
     <div v-else-if="loadStatus === 'loaded'">
         <div class="storyramp-app bg-white" v-if="config !== undefined">
-            <header class="story-header sticky top-0 w-full h-16 leading-9 bg-white border-b border-gray-200">
+            <header
+                id="story-header"
+                class="story-header sticky top-0 w-full h-16 leading-9 bg-white border-b border-gray-200"
+            >
                 <div class="flex w-full sm:px-6 py-3 mx-auto">
                     <mobile-menu
                         class="mobile-menu"
@@ -37,7 +40,7 @@
             <intro :config="config.introSlide"></intro>
 
             <div class="w-full mx-auto pb-10" id="story">
-                <story-content :config="config" :lang="lang" @step="updateActiveIndex" />
+                <story-content :config="config" :lang="lang" :headerHeight="headerHeight" @step="updateActiveIndex" />
             </div>
 
             <footer class="p-8 pt-2 text-right text-sm">
@@ -75,6 +78,7 @@ const route = useRoute();
 const config = ref<StoryRampConfig | undefined>(undefined);
 const loadStatus = ref('loading');
 const activeChapterIndex = ref(-1);
+const headerHeight = ref(0);
 const lang = ref('en');
 
 onMounted(() => {
@@ -146,6 +150,11 @@ const fetchConfig = (uid: string, lang: string): void => {
 
 const updateActiveIndex = (idx: number): void => {
     activeChapterIndex.value = idx;
+    // determine header height
+    const headerH = document.getElementById('story-header');
+    if (headerH) {
+        headerHeight.value = headerH.clientHeight;
+    }
 };
 </script>
 

src/definitions.ts

@@ -7,6 +7,7 @@ export interface StoryRampConfig {
     slides: Slide[];
     contextLink: string;
     contextLabel: string;
+    tocOrientation: string;
     dateModified: string;
 }