Merge pull request #491 from RyanCoulsonCA/fix-486

add config property to adjust WET breadcrumbs
ramp4-pcar4 · Oct 29, 2024 · 5d4444d · 5d4444d
2 parents 6d8945d + 14e7ce4
commit 5d4444d
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 19 deletions.
diff --git a/index-ca-en.html b/index-ca-en.html
@@ -8,13 +8,13 @@
         <title>RAMP Storylines</title>
 
         <!-- Load stylesheet -->
-        <link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v5_0_2/cdts/cdts-styles.css">
+        <link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v5_0_2/cdts/cdts-styles.css" />
 
         <!-- Load/activate closure template scripts -->
         <script
             src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v5_0_2/cdts/compiled/wet-en.js"
-            data-cdts-setup='{"cdnEnv": "prod"}'>
-        </script>
+            data-cdts-setup='{"cdnEnv": "prod"}'
+        ></script>
     </head>
     <body>
         <!-- template top and no-script fallback -->
@@ -63,14 +63,21 @@
                         href: 'index-ca-fr.html#/fr/' + newURLRoute,
                         text: 'Français'
                     }
-                ],
-                breadcrumbs: [
-                    {
-                        title: 'Environment and natural resources',
-                        href: 'https://www.canada.ca/en/services/environment.html'
-                    }
                 ]
             });
+
+            document.addEventListener('Storylines-Loaded', (payload) => {
+                const breadcrumbs = payload.detail.config.breadcrumbs ?? []; // default to an empty array if this property isn't defined.
+                const breadcrumbList = document.querySelectorAll('#wb-bc > .container > .breadcrumb')[0];
+
+                // Create an HTML li element for each of the breadcrumbs to add and then append them to the breadcrumb list.
+                breadcrumbs.forEach((b) => {
+                    const node = document.createElement('li');
+                    node.innerHTML = `<a href="${b.href}">${b.title}</a>`;
+                    breadcrumbList.appendChild(node);
+                });
+            });
+
             document.querySelectorAll('.wb-sl').forEach(function (skipLink) {
                 skipLink.setAttribute('href', url.href.split(/#[^\/]/)[0] + '#' + skipLink.href.split('#')[1]);
             });

diff --git a/index-ca-fr.html b/index-ca-fr.html
@@ -8,13 +8,13 @@
         <title>Scénarios de PCAR</title>
 
         <!-- Load stylesheet -->
-        <link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v5_0_2/cdts/cdts-styles.css">
+        <link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v5_0_2/cdts/cdts-styles.css" />
 
         <!-- Load/activate closure template scripts -->
         <script
             src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v5_0_2/cdts/compiled/wet-fr.js"
-            data-cdts-setup='{"cdnEnv": "prod"}'>
-        </script>
+            data-cdts-setup='{"cdnEnv": "prod"}'
+        ></script>
     </head>
     <body>
         <!-- template top and no-script fallback -->
@@ -63,14 +63,21 @@
                         href: 'index-ca-en.html#/en/' + newURLRoute,
                         text: 'English'
                     }
-                ],
-                breadcrumbs: [
-                    {
-                        title: 'Environnement et ressources naturelles',
-                        href: 'https://www.canada.ca/fr/services/environnement/meteo.html'
-                    }
                 ]
             });
+
+            document.addEventListener('Storylines-Loaded', (payload) => {
+                const breadcrumbs = payload.detail.config.breadcrumbs;
+                const breadcrumbList = document.querySelectorAll('#wb-bc > .container > .breadcrumb')[0];
+
+                // Create an HTML li element for each of the breadcrumbs to add and then append them to the breadcrumb list.
+                breadcrumbs.forEach((b) => {
+                    const node = document.createElement('li');
+                    node.innerHTML = `<a href="${b.href}">${b.title}</a>`;
+                    breadcrumbList.appendChild(node);
+                });
+            });
+
             document.querySelectorAll('.wb-sl').forEach(function (skipLink) {
                 skipLink.setAttribute('href', url.href.split(/#[^\/]/)[0] + '#' + skipLink.href.split('#')[1]);
             });

diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -540,5 +540,15 @@
     "contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html",
     "contextLabel": "Explore National Pollutant Release Inventory data",
     "lang": "en",
+    "breadcrumbs": [
+        {
+            "title": "Environment and natural resources",
+            "href": "https://www.canada.ca/en/services/environment.html"
+        },
+        {
+            "title": "Cumulative effects",
+            "href": "https://www.canada.ca/en/services/environment/cumulative-effect.html"
+        }
+    ],
     "dateModified": "2024-09-09"
 }
diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
@@ -332,5 +332,11 @@
     "contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html",
     "contextLabel": "Explore National Pollutant Release Inventory data",
     "lang": "en",
+    "breadcrumbs": [
+        {
+            "title": "[FR] Test Breadcrumb",
+            "href": "https://google.ca"
+        }
+    ],
     "dateModified": "2022-02-14"
 }
diff --git a/src/components/story/story.vue b/src/components/story/story.vue
@@ -149,6 +149,15 @@ const fetchConfig = (uid: string, lang: string): void => {
                     if (config.value.stylesheets) {
                         addStylesheets(config.value.stylesheets);
                     }
+
+                    // We fire this event when the config has loaded to let the host page know it has access to the config.
+                    const loadEvent = new CustomEvent('Storylines-Loaded', {
+                        detail: {
+                            config: config.value
+                        }
+                    });
+
+                    document.dispatchEvent(loadEvent);
                 })
                 .catch(() => {
                     // An error occurred while trying to convert the reponse to JSON. Most likely case for this to occur is
@@ -179,7 +188,7 @@ const addStylesheets = (paths: string[]): void => {
         styleLink.setAttribute('href', path);
         document.head.appendChild(styleLink);
     });
-}
+};
 
 const updateActiveIndex = (idx: number): void => {
     activeChapterIndex.value = idx;

diff --git a/src/definitions.ts b/src/definitions.ts
@@ -8,6 +8,7 @@ export interface StoryRampConfig {
     contextLink: string;
     contextLabel: string;
     tocOrientation: string;
+    breadcrumbs?: BreadcrumbConfig[];
     returnTop?: boolean;
     stylesheets?: string[];
     dateModified: string;
@@ -267,3 +268,8 @@ export interface ChartConfig {
     name?: string;
     options?: DQVOptions;
 }
+
+export interface BreadcrumbConfig {
+    title: string;
+    href: string;
+}