Added option for horizontal table of contents

Author: Mistry

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/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