From 14e7ce4bda44dcb0e6b0e6ea3f67b711d2527389 Mon Sep 17 00:00:00 2001 From: Ryan Coulson Date: Fri, 18 Oct 2024 14:31:16 -0400 Subject: [PATCH] add config property to adjust WET breadcrumbs --- index-ca-en.html | 25 ++++++++++++------- index-ca-fr.html | 25 ++++++++++++------- ...000000-0000-0000-0000-000000000000_en.json | 10 ++++++++ ...000000-0000-0000-0000-000000000000_fr.json | 6 +++++ src/components/story/story.vue | 11 +++++++- src/definitions.ts | 6 +++++ 6 files changed, 64 insertions(+), 19 deletions(-) diff --git a/index-ca-en.html b/index-ca-en.html index 5cdedb10..1fd8c262 100644 --- a/index-ca-en.html +++ b/index-ca-en.html @@ -8,13 +8,13 @@ RAMP Storylines - + + data-cdts-setup='{"cdnEnv": "prod"}' + > @@ -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 = `${b.title}`; + 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 index d008ce52..11becfd1 100644 --- a/index-ca-fr.html +++ b/index-ca-fr.html @@ -8,13 +8,13 @@ Scénarios de PCAR - + + data-cdts-setup='{"cdnEnv": "prod"}' + > @@ -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 = `${b.title}`; + 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 index a4dd8a2b..e55c4092 100644 --- 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 index 38180923..aca38e3d 100644 --- 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 index 02cc3abd..cac14686 100644 --- 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 index 4829cda6..bdc1aff7 100644 --- 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; +}