Added option for horizontal table of contents

package.json

@@ -21,7 +21,7 @@
         "jszip": "^3.10.1",
         "markdown-it": "^12.0.6",
         "nouislider": "^15.5.0",
-        "ramp-storylines": "^3.0.4",
+        "ramp-storylines_demo-scenarios-pcar": "^3.1.3",
         "uuid": "^9.0.0",
         "vue": "^3.3.4",
         "vue-class-component": "^8.0.0-rc.1",

src/components/editor/helpers/metadata-content.vue

@@ -71,6 +71,23 @@
             <i> {{ $t('editor.contextLabel.info') }}</i>
         </p>
         <br />
+        <label class="mr-15">{{ $t('editor.tocOrientation') }}:</label>
+        <select
+            class="border-solid border border-black p-1"
+            name="tocOrientation"
+            id="toc"
+            @change="metadataChanged"
+            v-model="metadata.tocOrientation"
+        >
+            <option value="vertical">{{ $t('editor.tocOrientation.vertical') }}</option>
+            <option value="horizontal">{{ $t('editor.tocOrientation.horizontal') }}</option>
+        </select>
+        <br />
+        <label class="mb-5"></label>
+        <p class="inline-block">
+            <i>{{ $t('editor.tocOrientation.info') }}</i>
+        </p>
+        <br />
         <label class="mb-5">{{ $t('editor.dateModified') }}:</label>
         <input type="date" name="dateModified" :value="metadata.dateModified" @change="metadataChanged" />
         <br /><br />
@@ -90,6 +107,7 @@ export default class MetadataEditorV extends Vue {
         logoAltText: string;
         contextLink: string;
         contextLabel: string;
+        tocOrientation: string;
         dateModified: string;
     };
 

src/components/editor/metadata-editor.vue

@@ -244,6 +244,7 @@ export default class MetadataEditorV extends Vue {
         logoAltText: '',
         contextLink: '',
         contextLabel: '',
+        tocOrientation: '',
         dateModified: ''
     };
     // add more required metadata fields to here as needed
@@ -272,6 +273,8 @@ export default class MetadataEditorV extends Vue {
             const month = (curDate.getMonth() + 1).toString().padStart(2, '0');
             const day = curDate.getDate().toString().padStart(2, '0');
             this.metadata.dateModified = `${year}-${month}-${day}`;
+            // set vertical as the default table of contents orientation
+            this.metadata.tocOrientation = 'vertical';
         }
 
         // Find which view to render based on route
@@ -379,6 +382,7 @@ export default class MetadataEditorV extends Vue {
             slides: [],
             contextLabel: this.metadata.contextLabel,
             contextLink: this.metadata.contextLink,
+            tocOrientation: this.metadata.tocOrientation,
             dateModified: this.metadata.dateModified
         };
     }
@@ -555,6 +559,7 @@ export default class MetadataEditorV extends Vue {
         this.metadata.introSubtitle = config.introSlide.subtitle;
         this.metadata.contextLink = config.contextLink;
         this.metadata.contextLabel = config.contextLabel;
+        this.metadata.tocOrientation = config.tocOrientation;
         this.metadata.dateModified = config.dateModified;
 
         // Conversion for individual image panels to slideshow for gallery display
@@ -647,7 +652,14 @@ export default class MetadataEditorV extends Vue {
     }
 
     updateMetadata(
-        key: 'title' | 'introTitle' | 'introSubtitle' | 'contextLink' | 'contextLabel' | 'dateModified',
+        key:
+            | 'title'
+            | 'introTitle'
+            | 'introSubtitle'
+            | 'contextLink'
+            | 'contextLabel'
+            | 'tocOrientation'
+            | 'dateModified',
         value: string
     ): void {
         this.metadata[key] = value;
@@ -667,6 +679,7 @@ export default class MetadataEditorV extends Vue {
             config.introSlide.subtitle = this.metadata.introSubtitle;
             config.contextLink = this.metadata.contextLink;
             config.contextLabel = this.metadata.contextLabel;
+            config.tocOrientation = this.metadata.tocOrientation;
             config.dateModified = this.metadata.dateModified;
 
             // If the logo section is missing, create it here before overwriting values.
@@ -710,7 +723,8 @@ export default class MetadataEditorV extends Vue {
             dateModified: '',
             logoPreview: '',
             logoName: '',
-            logoAltText: ''
+            logoAltText: '',
+            tocOrientation: ''
         };
         this.configs = { en: undefined, fr: undefined };
         this.slides = [];

src/components/editor/preview.vue

@@ -8,7 +8,10 @@
 
     <div v-else-if="loadStatus === 'loaded'">
         <div class="storyramp-app bg-white" v-if="config !== undefined">
-            <header class="sticky top-0 z-50 flex border-b border-black bg-gray-200 py-2 px-2 justify-between">
+            <header
+                id="story-header"
+                class="story-header sticky top-0 flex border-b border-black bg-gray-200 py-2 px-2 justify-between"
+            >
                 <div class="w-mobile-full truncate">
                     <span class="font-semibold text-lg m-1">{{ config.title }}</span>
                 </div>
@@ -22,6 +25,7 @@
                     :configFileStructure="configFileStructure"
                     :lang="lang"
                     :plugin="true"
+                    :headerHeight="headerHeight"
                     @step="updateActiveIndex"
                 />
             </div>
@@ -65,6 +69,7 @@ export default class StoryPreviewV extends Vue {
     loadStatus = 'loading';
     activeChapterIndex = -1;
     lang = 'en';
+    headerHeight = 0;
     uid = '';
 
     created(): void {
@@ -100,6 +105,11 @@ export default class StoryPreviewV extends Vue {
 
     updateActiveIndex(idx: number): void {
         this.activeChapterIndex = idx;
+        //determine header height
+        const headerH = document.getElementById('story-header');
+        if (headerH) {
+            this.headerHeight = headerH.clientHeight;
+        }
     }
 }
 </script>
@@ -125,6 +135,10 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         border-bottom: 0px;
     }
 
+    .story-header {
+        z-index: 60;
+    }
+
     .storyramp-modified {
         max-width: 1536px;
         margin: 0 auto;

src/definitions.ts

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

src/lang/lang.csv

@@ -111,4 +111,8 @@ editor.slides.select,Please select a slide to edit,1,Veuillez sélectionner une
 editor.slides.panel.body,Panel body,1,Corps du panneau,1
 editor.slides.panel.title,Panel title,1,Titre du panneau,1
 editor.slides.intro,Intro subtitle,1,Sous-titre de l’introduction,1
-editor.slides.title,Intro title,1,Titre de l’introduction,1
+editor.slides.title,Intro title,1,Titre de l’introduction,1
+editor.tocOrientation,Table of Contents Orientation,1,Orientation de la table des matières,0
+editor.tocOrientation.info,The table of contents orientation will be set to vertical in mobile view.,1,L'orientation de la table des matières sera définie sur verticale en vue mobile.,0
+editor.tocOrientation.vertical,Vertical,1,Vertical,0
+editor.tocOrientation.horizontal,Horizontal,1,Horizontal,0

src/main.ts

@@ -30,8 +30,8 @@ import HighchartsVue from 'highcharts-vue';
 import Message from 'vue-m-message';
 import 'vue-m-message/dist/style.css';
 
-import StorylinesViewer from 'ramp-storylines';
-import 'ramp-storylines/dist/storylines-viewer.css';
+import StorylinesViewer from 'ramp-storylines_demo-scenarios-pcar';
+import 'ramp-storylines_demo-scenarios-pcar/dist/storylines-viewer.css';
 
 const app = createApp(App);
 

src/shims-vue.d.ts

@@ -6,7 +6,7 @@ declare module '*.vue' {
 declare module '@kangc/v-md-editor';
 declare module '@kangc/v-md-editor/lib/lang/en-US';
 declare module '@kangc/v-md-editor/lib/theme/github.js';
-declare module 'ramp-storylines';
+declare module 'ramp-storylines_demo-scenarios-pcar';
 declare module 'vue-m-message';
 declare module 'highcharts-vue';
 declare module 'vue-tippy';

tailwind.config.js

@@ -9,7 +9,7 @@ module.exports = {
     purge: [
         './index.html',
         './src/**/*.{vue,js,ts,jsx,tsx}',
-        './node_modules/ramp-storylines/**/*.{vue,js,ts,jsx,tsx}'
+        './node_modules/ramp-storylines_demo-scenarios-pcar/**/*.{vue,js,ts,jsx,tsx}'
     ],
     darkMode: false, // or 'media' or 'class'
     theme: {