update toc schema option + add option to toggle nav top

package.json

@@ -27,7 +27,7 @@
         "nouislider": "^15.5.0",
         "ramp-config-editor_editeur-config-pcar": "^3.5.2",
         "ramp-pcar": "^4.8.0",
-        "ramp-storylines_demo-scenarios-pcar": "^3.2.2",
+        "ramp-storylines_demo-scenarios-pcar": "^3.2.3",
         "throttle-debounce": "^5.0.0",
         "url": "^0.11.3",
         "uuid": "^9.0.0",

public/StorylinesSlideSchema.json

@@ -499,6 +499,11 @@
         "backgroundImage": {
             "type": "string",
             "description": "An image to display in the background of the slide."
+        },
+        "includeInToc": {
+            "type": "boolean",
+            "description": "Optional attribute that indicates whether or not to include slide in table of contents. Defaults to true.",
+            "default": true
         }
     },
 

src/components/helpers/metadata-content.vue

@@ -115,6 +115,13 @@
             <option value="vertical">{{ $t('editor.tocOrientation.vertical') }}</option>
             <option value="horizontal">{{ $t('editor.tocOrientation.horizontal') }}</option>
         </select>
+        <label class="editor-label ml-25">{{ $t('editor.returnTop') }}</label>
+        <input
+            type="checkbox"
+            class="editor-input rounded-none cursor-pointer w-4 h-4"
+            v-model="metadata.returnTop"
+            @change="metadataChanged"
+        />
         <br />
         <label class="editor-label mb-5"></label>
         <p class="inline-block">
@@ -134,21 +141,11 @@
 </template>
 
 <script lang="ts">
+import { MetadataContent } from '@/definitions';
 import { Prop, Vue } from 'vue-property-decorator';
 
 export default class MetadataEditorV extends Vue {
-    @Prop() metadata!: {
-        title: string;
-        introTitle: string;
-        introSubtitle: string;
-        logoName: string;
-        logoPreview: string;
-        logoAltText: string;
-        contextLink: string;
-        contextLabel: string;
-        tocOrientation: string;
-        dateModified: string;
-    };
+    @Prop() metadata!: MetadataContent;
 
     openFileSelector(): void {
         document.getElementById('logoUpload')?.click();

src/components/metadata-editor.vue

@@ -413,6 +413,7 @@ export default class MetadataEditorV extends Vue {
         contextLink: '',
         contextLabel: '',
         tocOrientation: '',
+        returnTop: true,
         dateModified: ''
     };
     // add more required metadata fields to here as needed
@@ -443,6 +444,7 @@ export default class MetadataEditorV extends Vue {
             this.metadata.dateModified = `${year}-${month}-${day}`;
             // set vertical as the default table of contents orientation
             this.metadata.tocOrientation = 'vertical';
+            this.metadata.returnTop = true;
         }
 
         // Find which view to render based on route
@@ -553,6 +555,7 @@ export default class MetadataEditorV extends Vue {
             contextLabel: this.metadata.contextLabel,
             contextLink: this.metadata.contextLink,
             tocOrientation: this.metadata.tocOrientation,
+            returnTop: this.metadata.returnTop,
             dateModified: this.metadata.dateModified
         };
     }
@@ -909,6 +912,7 @@ export default class MetadataEditorV extends Vue {
         this.metadata.contextLink = config.contextLink;
         this.metadata.contextLabel = config.contextLabel;
         this.metadata.tocOrientation = config.tocOrientation;
+        this.metadata.returnTop = config.returnTop ?? true;
         this.metadata.dateModified = config.dateModified;
 
         this.slides = config.slides;
@@ -1052,17 +1056,7 @@ export default class MetadataEditorV extends Vue {
         return this.configFileStructure as ConfigFileStructure;
     }
 
-    updateMetadata(
-        key:
-            | 'title'
-            | 'introTitle'
-            | 'introSubtitle'
-            | 'contextLink'
-            | 'contextLabel'
-            | 'tocOrientation'
-            | 'dateModified',
-        value: string
-    ): void {
+    updateMetadata<K extends keyof MetadataContent>(key: K, value: MetadataContent[K]): void {
         this.metadata[key] = value;
         this.unsavedChanges = true;
     }
@@ -1081,6 +1075,7 @@ export default class MetadataEditorV extends Vue {
             config.contextLink = this.metadata.contextLink;
             config.contextLabel = this.metadata.contextLabel;
             config.tocOrientation = this.metadata.tocOrientation;
+            config.returnTop = this.metadata.returnTop;
             config.dateModified = this.metadata.dateModified;
 
             // If the logo section is missing, create it here before overwriting values.
@@ -1128,7 +1123,8 @@ export default class MetadataEditorV extends Vue {
             logoPreview: '',
             logoName: '',
             logoAltText: '',
-            tocOrientation: ''
+            tocOrientation: '',
+            returnTop: true
         };
         this.configs = { en: undefined, fr: undefined };
         this.slides = [];

src/definitions.ts

@@ -8,6 +8,7 @@ export interface StoryRampConfig {
     contextLink: string;
     contextLabel: string;
     tocOrientation: string;
+    returnTop: boolean;
     dateModified: string;
 }
 
@@ -38,6 +39,7 @@ export interface MetadataContent {
     contextLink: string;
     contextLabel: string;
     tocOrientation: string;
+    returnTop: boolean;
     dateModified: string;
 }
 
@@ -138,6 +140,7 @@ export interface Slide {
     // tuple definition to restrict array size
     // panel: [BasePanel, BasePanel | undefined];
     panel: BasePanel[];
+    includeInToc?: boolean;
 }
 
 export enum PanelType {

src/lang/lang.csv

@@ -149,12 +149,14 @@ 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.includeInToc,Include in table of contents,1,Inclure dans la table des matières,0
 editor.slide.untitled,Untitled slide,1,Diapositive sans titre,0
 editor.slide.copy.success,Slide copied successfully!,1,Diapositive copiée avec succès !,0
 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
+editor.returnTop,Include return to top navigation,1,Inclure le retour en haut de la navigation,0
 editor.landing.greeting,Hello,1,Bonjour,1
 help.title,Help,1,Aide,1
 help.search,Search Help,1,Aide à la recherche,1