diff --git "a/_data/m\303\251li-m\303\251lo.json" "b/_data/m\303\251li-m\303\251lo.json" index 5f67cc1b1..365103819 100644 --- "a/_data/m\303\251li-m\303\251lo.json" +++ "b/_data/m\303\251li-m\303\251lo.json" @@ -1,17 +1,6 @@ { "title": "Liste des produits méli-mélo fusionnés", "packages": [ - { - "nom": "2023-10-mount-revelstoke", - "libs": [ - "2022-09-svgimagemap", - "2021-05-conjunction", - "2021-05-steps", - "2023-09-menu", - "2023-09-distance-calculator", - "2023-09-collection-sort" - ] - }, { "nom": "2024-09-kejimkujik", "libs": [ @@ -25,6 +14,13 @@ "deprecated" ] }, + { + "nom": "2025-04-nahanni", + "libs": [ + "2024-02-charts", + "deprecated" + ] + }, { "nom": "gc-thématique", "libs": [ @@ -95,7 +91,6 @@ } ], "future-packages-names": [ - "nahanni", "mille-iles", "ivvavik", "vuntut", diff --git a/index-en.md b/index-en.md index 6ca3a1367..c909e9cb1 100644 --- a/index-en.md +++ b/index-en.md @@ -1,7 +1,7 @@ --- title: GCWeb, the WET-BOEW Canada.ca theme altLangPage: index-fr.html -dateModified: 2024-02-14 +dateModified: 2024-03-05 description: "Home page describing all the components of the Canada.ca theme, named GCWeb." layout: no-container language: en @@ -20,7 +20,7 @@ css:

The page templates and design patterns below comprise a reference implementation of the Canada.ca design system, including the mandatory requirement of the Content and Information Architecture (C&IA) Specification. Government of Canada departments and agencies can contribute additional patterns and templates via GCWeb github repository.

-

Download GCWeb theme v14.5.0
+

Download GCWeb theme v14.6.0
( - Release notes)

diff --git a/index-fr.md b/index-fr.md index 25bff5f96..cd938eda3 100644 --- a/index-fr.md +++ b/index-fr.md @@ -1,7 +1,7 @@ --- title: GCWeb, le thème WET-BOEW de Canada.ca altLangPage: index-en.html -dateModified: 2024-02-14 +dateModified: 2024-03-05 description: "Page d'accueil décrivant l'ensemble des composants du thème de Canada.ca, nommé GCWeb." layout: no-container language: fr @@ -20,7 +20,7 @@ css:

Les gabarits et les conceptions communes si dessous sont une référence d'implémentation du Système de conception de Canada.ca, incluant les exigences obligatoire de la spécifications du contenu et de l’architecture de l'information (C&AI) pour Canada.ca. Les ministères et organisme du gouvernement du Canada peuvent y contribuer en publiant leur modèle et leur conception commune via le dépôt github de GCWeb.

-

Télécharger le thème GCWeb v14.5.0
+

Télécharger le thème GCWeb v14.6.0
( - Note de version)

diff --git "a/m\303\251li-m\303\251lo/compilation-gel\303\251/2023-10-mount-revelstoke.css" "b/m\303\251li-m\303\251lo/compilation-gel\303\251/2023-10-mount-revelstoke.css" new file mode 100644 index 000000000..7a006c5cc --- /dev/null +++ "b/m\303\251li-m\303\251lo/compilation-gel\303\251/2023-10-mount-revelstoke.css" @@ -0,0 +1,602 @@ +@charset "utf-8"; +/*! + * @title Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * v14.5.0 - 2024-02-14 + * + */ +ul[class*=cnjnctn-type-] { + list-style-type: ""; + padding-left: 0; +} +[class*=cnjnctn-type-] { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + margin-bottom: 15px; + margin-right: 0px; + margin-top: 15px; + min-height: 3em; + position: relative; +} +[class*=cnjnctn-type-]>[class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f, #6f6f6f); + background-size: 3px; + content: ' '; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 3px; +} +[class*=cnjnctn-type-]>[class*=cnjnctn-col] { + width: 100%; +} +[class*=cnjnctn-type-]:not(.brdr-0)>[class*=cnjnctn-col] { + padding-left: 15px; + padding-right: 15px; +} +[class*=cnjnctn-type-]>[class*=cnjnctn-col]> :first-child:not([class*=mrgn-tp-]) { + margin-top: 0px; +} +[class*=cnjnctn-type-]>[class*=cnjnctn-col]> :last-child:not([class*=mrgn-bttm-]) { + margin-bottom: 0px; +} +[class*=cnjnctn-type-]>[class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 1.8em; + margin-right: 1.5em; +} +[class*=cnjnctn-type-]>[class*=cnjnctn-col]:not(:first-child) { + margin-top: 1.8em; +} +[class*=cnjnctn-type-]>[class*=cnjnctn-col]:not(:first-child):before { + border-color: #6f6f6f; + border-style: solid; + box-sizing: content-box; + font-size: 16px; + font-weight: 600; + height: 1.8em; + left: auto; + line-height: 1.7em; + margin-top: -3.8em; + padding: 0.3em; + position: absolute; + text-align: center; + width: 1.8em; +} +.cnjnctn-type-or>[class*=cnjnctn-col]:not(:first-child):before { + border-radius: 50%; + border-width: 3px; +} +.cnjnctn-type-and>[class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +html:lang(en) .cnjnctn-type-and>[class*=cnjnctn-col]:not(:first-child):before { + content: "and"; +} +html:lang(fr) .cnjnctn-type-and>[class*=cnjnctn-col]:not(:first-child):before { + content: "et"; +} +html:lang(en) .cnjnctn-type-or>[class*=cnjnctn-col]:not(:first-child):before { + content: "or"; +} +html:lang(fr) .cnjnctn-type-or>[class*=cnjnctn-col]:not(:first-child):before { + content: "ou"; +} +[class*=cnjnctn-type-]>.cnjnctn-col-90 { + flex-basis: 90% +} +[class*=cnjnctn-type-]>.cnjnctn-col-80 { + flex-basis: 80% +} +[class*=cnjnctn-type-]>.cnjnctn-col-75 { + flex-basis: 75% +} +[class*=cnjnctn-type-]>.cnjnctn-col-70 { + flex-basis: 70% +} +[class*=cnjnctn-type-]>.cnjnctn-col-60 { + flex-basis: 60% +} +[class*=cnjnctn-type-]>.cnjnctn-col-50 { + flex-basis: 50% +} +[class*=cnjnctn-type-]>.cnjnctn-col-40 { + flex-basis: 40% +} +[class*=cnjnctn-type-]>.cnjnctn-col-30 { + flex-basis: 30% +} +[class*=cnjnctn-type-]>.cnjnctn-col-25 { + flex-basis: 25% +} +[class*=cnjnctn-type-]>.cnjnctn-col-20 { + flex-basis: 20% +} +[class*=cnjnctn-type-].cnjnctn-xs { + flex-direction: row; +} +[class*=cnjnctn-type-].cnjnctn-xs:not(.brdr-0)>[class*=cnjnctn-col] { + padding-left: 0; + padding-right: 0; +} +[class*=cnjnctn-type-].cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 0.3em, rgba(0,0,0,0) 0.3em, rgba(0,0,0,0) 2.35em, #6f6f6f 2.35em); +} +[class*=cnjnctn-type-].cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child) { + margin-left: 1.4em; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child):after { + margin-left: -1.6em; +} +.cnjnctn-type-or.cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.25em; +} +.cnjnctn-type-and.cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.15em; +} +[class*=cnjnctn-type-].cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child):before { + margin-top: 0.3em; +} +[class*=cnjnctn-type-].cnjnctn-xs>[class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0; +} +[class*=cnjnctn-type-].cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child) { + margin-top: 0; +} +.cnjnctn-type-and.cnjnctn-xs>[class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +[class*=cnjnctn-type-].brdr-0>[class*=cnjnctn-col]:after { + background-image: none; +} + +@media all and (min-width: 768px) { +[class*=cnjnctn-type-].cnjnctn-sm { + border-left: 0px solid transparent; + flex-direction: row; +} +[class*=cnjnctn-type-].cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child) { + margin-left: 1.4em; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child):after { + margin-left: -1.6em; +} +.cnjnctn-type-or.cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.25em; +} +.cnjnctn-type-and.cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.15em; +} +[class*=cnjnctn-type-].cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child):before { + margin-top: 0.3em; +} +[class*=cnjnctn-type-].cnjnctn-sm>[class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0; +} +[class*=cnjnctn-type-].cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child) { + margin-top: 0; +} +[class*=cnjnctn-type-].cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 0.3em, rgba(0,0,0,0) 0.3em, rgba(0,0,0,0) 2.35em, #6f6f6f 2.35em); +} +.cnjnctn-type-and.cnjnctn-sm>[class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +[class*=cnjnctn-type-].cnjnctn-sm:not(.brdr-0)>[class*=cnjnctn-col] { + padding-left: 0; + padding-right: 0; +} +} + +@media all and (min-width: 992px) { +[class*=cnjnctn-type-].cnjnctn-md { + border-left: 0px solid transparent; + flex-direction: row; +} +[class*=cnjnctn-type-].cnjnctn-md>[class*=cnjnctn-col]:not(:first-child) { + margin-left: 1.4em; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-md>[class*=cnjnctn-col]:not(:first-child):after { + margin-left: -1.6em; +} +.cnjnctn-type-or.cnjnctn-md>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.25em; +} +.cnjnctn-type-and.cnjnctn-md>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.15em; +} +[class*=cnjnctn-type-].cnjnctn-md>[class*=cnjnctn-col]:not(:first-child):before { + margin-top: 0.3em; +} +[class*=cnjnctn-type-].cnjnctn-md>[class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0; +} +[class*=cnjnctn-type-].cnjnctn-md>[class*=cnjnctn-col]:not(:first-child) { + margin-top: 0; +} +[class*=cnjnctn-type-].cnjnctn-md>[class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 0.3em, rgba(0,0,0,0) 0.3em, rgba(0,0,0,0) 2.35em, #6f6f6f 2.35em); +} +.cnjnctn-type-and.cnjnctn-md>[class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +[class*=cnjnctn-type-].cnjnctn-md:not(.brdr-0)>[class*=cnjnctn-col] { + padding-left: 0; + padding-right: 0; +} +} + +@media all and (min-width: 1200px) { +[class*=cnjnctn-type-].cnjnctn-lg { + border-left: 0px solid transparent; + flex-direction: row; +} +[class*=cnjnctn-type-].cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child) { + margin-left: 1.4em; + position: relative; +} +[class*=cnjnctn-type-].cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child):after { + margin-left: -1.6em; +} +.cnjnctn-type-or.cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.25em; +} +.cnjnctn-type-and.cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child):before { + margin-left: -3.15em; +} +[class*=cnjnctn-type-].cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child):before { + margin-top: 0.3em; +} +[class*=cnjnctn-type-].cnjnctn-lg>[class*=cnjnctn-col]:not(:last-child) { + margin-bottom: 0; +} +[class*=cnjnctn-type-].cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child) { + margin-top: 0; +} +[class*=cnjnctn-type-].cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child):after { + background-image: linear-gradient(to bottom, #6f6f6f 0.3em, rgba(0,0,0,0) 0.3em, rgba(0,0,0,0) 2.35em, #6f6f6f 2.35em); +} +.cnjnctn-type-and.cnjnctn-lg>[class*=cnjnctn-col]:not(:first-child):before { + border-width: 3px 0px 3px 0px; +} +[class*=cnjnctn-type-].cnjnctn-lg:not(.brdr-0)>[class*=cnjnctn-col] { + padding-left: 0; + padding-right: 0; +} +} + +ol.lst-stps { + counter-reset: item; + padding-left: 0; +} +ol.lst-stps, ol.lst-stps-sub { + list-style-type: none; +} +ol.lst-stps>li { + content: counter(item); + counter-increment: item; +} +ol.lst-stps>li:before { + content: counter(item); +} +ol.lst-stps.ld-zr>li:before { + content: counter(item, decimal-leading-zero); + font-size: 1.4em; + padding-left: 0.5em; +} +ol.lst-stps>li ol.lst-stps-sub { + clear: both; + counter-reset: subitem; + padding-left: 0px; +} +ol.lst-stps>li ol.lst-stps-sub>li:before { + counter-increment: subitem; + content: counter(item) "" counter(subitem, lower-alpha) ""; + margin-left: -3em; + margin-top: -6px; +} +ol.lst-stps:not(.stps-strpd)>li, ol.lst-stps-sub:not(.stps-strpd)>li { + margin-top: 20px; + min-height: 4em; + padding-left: 3.2em; + padding-right: 15px; +} +ol.lst-stps-sub:not(.stps-strpd)>li { + min-height: 3em; + padding-left: 2.6em; +} +ol.lst-stps>li:before, ol.lst-stps>li ol.lst-stps-sub>li:before { + border-style: solid; + border-width: 3px; + box-sizing: content-box; + float: left; + font-family: Lato, sans-serif; + font-weight: 600; + line-height: 2; + margin-left: -3.2em; + margin-right: 10px; + margin-top: -8px; + position: relative; + text-align: center; + width: 2em; +} +ol.lst-stps:not(.ld-zr)>li:before, ol.lst-stps:not(.ld-zr)>li ol.lst-stps-sub>li:before { + background-color: #fff; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} +ol.lst-stps:not(.ld-zr) ol.lst-stps-sub>li:before { + font-size: 0.8em; +} +ol.lst-stps.ld-zr>li:before, ol.lst-stps.ld-zr>li ol.lst-stps-sub>li:before { + border-width: 0 3px 0 0; + line-height: 1.4; + margin-top: 0px; + padding-bottom: 0.8em; +} +/*striped design */ +ol.lst-stps.stps-strpd>li :first-child:is(h2, h3, h4, h5, h6, p), ol.lst-stps-sub.stps-strpd>li :first-child:is(h2, h3, h4, h5, h6, p) { +margin-top: auto; + } +ol.lst-stps.stps-strpd>li, ol.lst-stps-sub.stps-strpd>li { + min-height: 4em; + padding-left: 3.6em; + padding-right: 15px; +} +ol.lst-stps.ld-zr.stps-strpd>li, ol.lst-stps.ld-zr>li ol.lst-stps-sub.stps-strpd>li { + min-height: 5em; +} +ol.lst-stps>li ol.lst-stps-sub.stps-strpd>li { + padding-left: 3em; +} +ol.lst-stps.stps-strpd>li:nth-child(odd), ol.lst-stps.stps-strpd>li:nth-child(even) ol.lst-stps-sub.stps-strpd>li:nth-child(odd), ol.lst-stps.stps-strpd>li:nth-child(odd) ol.lst-stps-sub.stps-strpd>li:nth-child(even) { + background-color: #f5f5f5; +} +ol.lst-stps.stps-strpd>li:nth-child(odd) ol.lst-stps-sub.stps-strpd>li:nth-child(odd) { + background-color: #fff!important; +} +ol.lst-stps.stps-strpd>li, ol.lst-stps.stps-strpd>li ol.lst-stps-sub.stps-strpd>li { + padding-bottom: 20px; + padding-top: 20px; +} +@media all and (max-width: 767px) { +ol.lst-stps:not(.stps-strpd)>li, ol.lst-stps-sub:not(.stps-strpd)>li { + padding-left: 2.6em; +} +ol.lst-stps.ld-zr:not(.stps-strpd)>li, ol.lst-stps.ld-zr>li ol.lst-stps-sub:not(.stps-strpd)>li { + padding-left: 2.8em; +} +ol.lst-stps>li:before { + font-size: 0.8em; +} +ol.lst-stps.ld-zr>li:before { + font-size: 1.2em; +} +ol.lst-stps.stps-strpd>li, ol.lst-stps-sub.stps-strpd>li { + padding-left: 3em; +} +} + +.xsmallview .svgimagemap, .xxsmallview .svgimagemap { + width: 100%; +} + +.svgimagemap { + width: 50%; + margin: auto; +} + +.svgimagemap path { + stroke: #FFFFFF; + stroke-width: 5px; +} + +.svgimagemap polygon { + stroke: #FFFFFF; + stroke-width: 5px; +} + +.svgimagemap .border-emphasis { + stroke-width: 14px; +} +.st0 { + fill: #122E33; + stroke:#FFFFFF; + text-align:center; +} + +.st1 { + fill: #99BDC0; + stroke:#FFFFFF; +} + +.st2 { + fill: #337C81; + stroke:#FFFFFF; +} + +.st3 { + fill: #075C62; + stroke:#FFFFFF; +} + +.st4 { + fill: #F1F2F2; + stroke:#FFFFFF; + font-family: 'Noto Sans',sans-serif; + font-size: 66.613px; +} + +.st5 { + font-family: 'Noto Sans',sans-serif; + font-size: 66.613px; +} + +.st6 { + font-family: 'Noto Sans',sans-serif; + font-size: 66.613px; +} + +.st7 { + fill: #414042; + font-family: 'Noto Sans',sans-serif; + font-size: 66.613px; +} + +.svgimagemap a { text-decoration: none; } +.svgimagemap a:hover .st0,.svgimagemap a:active .st0,.svgimagemap a:focus .st0,.svgimagemap a:hover .st1,.svgimagemap a:active .st1, .svgimagemap a:focus .st1, .svgimagemap a:hover .st2, .svgimagemap a:active .st2, .svgimagemap a:focus .st2, .svgimagemap a:hover .st3, .svgimagemap a:active .st3 , .svgimagemap a:focus .st3 { + fill: #FA4F56; + +} + +/*** Mega Menu ***/ +/* add background and text color for menu */ +#wb-sm.campaign-menu { + background: #003c77; + color: #fff; +} +/* remove table cell and text shadow */ +#wb-sm.campaign-menu .menu { + border-right: 0px !important; + display: block; + text-shadow: none; +} + + /* focus within menu item background */ +#wb-sm.campaign-menu .menu .active, +#wb-sm.campaign-menu .menu .wb-navcurr, +#wb-sm.campaign-menu .menu > li a:focus { + background: #ccc !important; + color: #333 !important; +} + +#wb-sm.campaign-menu .menu > li { + border-left: 1px solid #003c77; +} + +#wb-sm.campaign-menu .menu > li:last-child { + border-right: 1px solid #003c77; +} + +/* adjust menu padding to align height with GCMenu button */ +#wb-sm.campaign-menu .menu > li a { + padding: 0.5em 1em; +} + +/* change menu item on-hover background */ +#wb-sm.campaign-menu .menu > li a:hover{ + background: #ccc !important; + color: #333 !important; +} + +/* change menuitem text color when mouse move to submenu item */ +#wb-sm.campaign-menu .menu > li.active > a{ + background: #ccc!important; + color: #333!important; +} + +/* submenu default color */ +#wb-sm.campaign-menu .sm.open li a { + background: #ccc !important; + color: #333 !important; +} + +/* hover on submenu item */ +#wb-sm.campaign-menu .sm.open li a:active, +#wb-sm.campaign-menu .sm.open li a:focus, +#wb-sm.campaign-menu .sm.open li a:hover { + background: #003c77 !important; + color: #fff !important; +} + +/* submenu bottom bar color */ +#wb-sm.campaign-menu .sm.open { + border-bottom: 5px solid #003c77 !important; +} + +/*** GCWEB Menu ***/ +/* default color */ +.gcweb-menu.campaign-menu button[aria-haspopup=true] { + background-color: #003c77 !important; + border: 1px solid #003c77; + color: #fff; +} + +/* Button opened with white background */ +.gcweb-menu.campaign-menu button[aria-haspopup=true][aria-expanded=true] { + background-color: #fff !important; + color: #000; +} + +/* button closed */ +.gcweb-menu.campaign-menu button[aria-haspopup=true]:focus { + background-color: #003c77 !important; + border: 1px dotted #fff; + color: #fff; +} + +/* add border for menu item area to align the width */ +.gcweb-menu.campaign-menu button[aria-haspopup=true][aria-expanded=true] + [role=menu] { + border-right: #003c77 solid 1px !important; +} + +/* menu item background and color */ +.gcweb-menu.campaign-menu [role=menu] { + background-color: #003c77 !important; + color: #fff; +} + +/* remove border lines */ +.gcweb-menu.campaign-menu [role=menuitem], +.gcweb-menu.campaign-menu [role=menuitem]:visited, +.gcweb-menu.campaign-menu [role=menu] > li, +.gcweb-menu.campaign-menu [role=menu] > li:first-child, +.gcweb-menu.campaign-menu [role=menu] > li:last-child, +.gcweb-menu.campaign-menu [role=menu] [role=menu] [role=menuitem], +.gcweb-menu.campaign-menu [role=menu] [role=menu] li:first-child [role=menuitem] { + border: none; +} + +/* submenu background and text color */ +.gcweb-menu.campaign-menu [role=menu] [role=menu] li [role=menuitem] { + background-color: #e1e1e1 !important; + color: #333; + padding-left: 65px; +} + +/* submenu item paddings and margins */ +.gcweb-menu.campaign-menu [aria-expanded=true]:not(button) + [role=menu] li { + margin-left: 0px; +} +.gcweb-menu.campaign-menu [aria-expanded=true]:not(button) + [role=menu] li:first-child [role=menuitem], +.gcweb-menu.campaign-menu [aria-expanded=true]:not(button) + [role=menu] li:last-child [role=menuitem] { + padding-left: 65px; +} + +/* submenu item on focus */ +.gcweb-menu.campaign-menu [role=menu] [role=menu] [role=menuitem]:focus, +.gcweb-menu.campaign-menu [role=menu] [role=menu] li:first-child [role=menuitem]:focus, +.gcweb-menu.campaign-menu [role=menu] [role=menu] li:last-child [role=menuitem]:focus { + background-color: #e1e1e1 !important; + color: #333 !important; +} + +/* submenu item on hover */ +.gcweb-menu.campaign-menu [role=menu] [role=menu] [role=menuitem]:hover, +.gcweb-menu.campaign-menu [role=menu] [role=menu] li:first-child [role=menuitem]:hover, +.gcweb-menu.campaign-menu [role=menu] [role=menu] li:last-child [role=menuitem]:hover { + background: #003c77 !important; + color: #fff !important; + text-decoration: none; +} + +/* remove the underline of sub menu item */ +.gcweb-menu.campaign-menu [role=menu] [role=menu] li [role=menuitem], +.gcweb-menu.campaign-menu [role=menu] [role=menu] li:first-child [role=menuitem] { + text-decoration: none; +} diff --git "a/m\303\251li-m\303\251lo/compilation-gel\303\251/2023-10-mount-revelstoke.js" "b/m\303\251li-m\303\251lo/compilation-gel\303\251/2023-10-mount-revelstoke.js" new file mode 100644 index 000000000..ef50c93d0 --- /dev/null +++ "b/m\303\251li-m\303\251lo/compilation-gel\303\251/2023-10-mount-revelstoke.js" @@ -0,0 +1,500 @@ +/** + * @title Campaign menu + * @author PCH + */ +(function ($, window, document, wb) { + "use strict"; + + var componentName = "campaign-menu", + selector = "." + componentName + ".gcweb-menu", + initEvent = "wb-init" + selector, + $document = wb.doc, + savedAnchorFocus, + /** + * @method init + * @param {jQuery Event} event Event that triggered the function call + */ + init = function (event) { + // Start initialization + // returns DOM object = proceed with init + // returns undefined = do not proceed with init (e.g., already initialized) + var elm = wb.init(event, componentName, selector), + $elm; + + if (elm) { + $elm = $(elm); + + // Check if there is already a gcweb menu. + // If there are 2 present, the global GCWeb menu is present, hide this custom menu + var gcWebMenus = document.querySelectorAll(".gcweb-menu"); + if (gcWebMenus.length > 1) { + console.warn(componentName + " - gcweb menu already exsits on the page, hiding gcweb campaign menu and aborting"); + $elm.addClass('hidden'); + wb.ready($elm, componentName); + return; + } + + // If a megamenu is already present, abort to avoid duplicate wb-sm IDs + var megamenuExists = document.querySelector("#wb-sm"); + if (megamenuExists != undefined || megamenuExists != null) { + console.warn(componentName + " - megamenu already exsits on the page, aborting"); + $elm.addClass('hidden'); + wb.ready($elm, componentName); + return; + } + + // Build megamenu once WET is fully initialized, to ensure the GCWeb menu ajax append is complete + $(document).on("wb-ready.wb", buildMegaMenu($elm)); + + wb.ready($elm, componentName); + } + }, + + buildMegaMenu = function ($elm) { + return function (e) { + // Retrieve the top level list items from GCWeb men + var gcwebMenuListItems = $elm.find("> ul > li"); + + // Start building mega menu + var megamenuHTML = ""; + $.each(gcwebMenuListItems, function (key, element) { + // Get top level list item's anchor + var anchor = element.querySelector("a"); + // Build list item without a submenu + let href = anchor.getAttribute('href'); + let linkText = anchor.textContent; + megamenuHTML += `
  • ${linkText}
    • `; + }); + + // Get GCWeb h2 + var gcwebMenuH2 = document.querySelector(selector + " > h2"); + + var megamenuAjaxReplace = $elm[0].getAttribute('data-megamenu-ajax'); + + // Wrap menu HTML with the megamenu wrapper + // NOTE: Removed role="navigation" (redundant) and typeof="SiteNavigationElement" (not required) + megamenuHTML = ` + `; + + // Apply appropriate visible CSS classes to the GCWeb menu + $elm.addClass("visible-sm visible-xs"); + + // Workaround - Add the div required to build the hamburger menu, but hide it, since all we're trying to do is fully initialize the megamenu + $(".gcweb-menu").after(''); + $(".gcweb-menu").after(''); + + // Add the megamenu + $elm.after(megamenuHTML); + + // Initialize it + $(".wb-menu").trigger("wb-init.wb-menu"); + + $(document).on("wb-ready.wb-menu", cleanUp); + } + }, + + cleanUp = function () { + $("#mb-pnl").remove(); + $("#wb-glb-mn").remove(); + }, + + switchMenu = function () { + // Show/hide the appropriate menu when the viewport changes between xs/sm and md/lg + // and transfer the active element/active link (if it's within the menu) to the visible menu + if (savedAnchorFocus != undefined) { + let nav = findNavElement(savedAnchorFocus); + + if (nav) { + let savedFocusHref = savedAnchorFocus.getAttribute("href"); + if (nav.classList.contains('wb-menu') && $(".wb-menu").is(":hidden")) { + + // Close any previously opened GCWeb submenus + let itemOpened = $('.gcweb-menu a[aria-expanded=true]'); + for (var i = 0; i < itemOpened.length; i++) { + $(itemOpened).eq(i).attr("aria-expanded", "false"); + } + + // Open GCWeb menu button + $(selector).find('button').attr("aria-expanded", "true"); + + // Determine if the focus is on a link or an anchor to open a submenu + if (savedFocusHref.match("^#")) { + let submenuId = savedFocusHref.substring(14); + let equivalentElement = $(".gcweb-menu a[aria-controls='gc-sub-menu-" + submenuId + "']"); + if (equivalentElement != undefined) { + equivalentElement.focus(); + if (equivalentElement[0].hasAttribute('aria-haspopup') && equivalentElement[0].getAttribute('aria-haspopup') == "true") { + equivalentElement.attr("aria-expanded", "true"); + } + } else { + console.warn("Unable to find equivalent link in GCWeb menu top level items"); + } + } else { + let gcMenuFocusAnchor = $('.gcweb-menu a[href="' + savedFocusHref + '"]'); + let ulParents = $(gcMenuFocusAnchor).parents("ul"); + if (ulParents.length > 1) { + let submenu = ulParents.eq(0); + submenu.parent() + .children('a') + .attr("aria-expanded", "true"); + } + if (gcMenuFocusAnchor != undefined) { + gcMenuFocusAnchor.focus(); + } else { + console.warn("Unable to find equivalent link in GCWeb menu submenu items"); + } + } + } else if (nav.classList.contains('gcweb-menu') && $(".gcweb-menu").is(":hidden")) { + // Close submenus + $(".wb-menu li").removeClass('active sm-open'); + $(".wb-menu ul.open").attr("aria-expanded", "false"); + $(".wb-menu ul.open").attr("aria-hidden", "true"); + $(".wb-menu ul").removeClass('open'); + + // Set focus on submenu + if (savedFocusHref.match("^#")) { + let gcSubmenuFocus = $(savedAnchorFocus).attr("aria-controls"); + let submenuId = gcSubmenuFocus.substring(12); + let equivalentElement = $(".wb-menu a[href='#wet-sub-menu-" + submenuId + "']"); + if (equivalentElement != undefined) { + equivalentElement.focus(); + } else { + console.warn("Unable to find equivalent link in WET megamenu top level items"); + } + } else { + // Find if it is focused a submenu item + let megaMenuFocusAnchor = $('.wb-menu a[href="' + savedFocusHref + '"]'); + let ulParents = $(megaMenuFocusAnchor).parents("ul"); + + // Open submenu + if (ulParents.length > 1) { + let submenu = ulParents.eq(0); + submenu.attr("aria-expanded", "true"); + submenu.attr("aria-hidden", "false"); + submenu.addClass('open'); + submenu.parent().addClass('active sm-open'); + } + if (megaMenuFocusAnchor != undefined) { + megaMenuFocusAnchor.focus(); + } else { + console.warn("Unable to find equivalent link in WET megamenu submenu items"); + } + } + } + } + } + }, + + findNavElement = function (activeElement) { + let parentElement = activeElement.parentElement; + while (parentElement.nodeName != "NAV" && parentElement.nodeName != "BODY") { + parentElement = parentElement.parentElement; + } + if (parentElement.nodeName == "NAV") { + return parentElement; + } else { + return false; + } + }; + + $(window).on("resize", function () { + if (document.activeElement.nodeName == 'A') { + savedAnchorFocus = document.activeElement; + } + }); + + $document.on(wb.resizeEvents, switchMenu); + + // Bind the init event of the plugin + $document.on("timerpoke.wb " + initEvent, selector, init); + + // Add the timer poke to initialize the plugin + wb.add(selector); + +})(jQuery, window, document, wb); + +/** + * @title WET-BOEW Collection sort plugin + * @overview Plugin contained to show an example of how to create your custom WET plugin + * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * @author donmcdill + */ +( function( $, window, wb ) { +"use strict"; +/* + * Variable and function definitions. + * These are global to the plugin - meaning that they will be initialized once per page, + * not once per instance of plugin on the page. So, this is a good place to define + * variables that are common to all instances of the plugin on a page. + */ +let wait; +var componentName = "collection-sort", + selector = "." + componentName, + initEvent = "wb-init" + selector, + $document = wb.doc, + defaults = {}, + /** + * @method init + * @param {jQuery Event} event Event that triggered the function call + */ + init = function( event ) { + // Start initialization + // returns DOM object = proceed with init + // returns undefined = do not proceed with init (e.g., already initialized) + var elm = wb.init( event, componentName, selector ), + $elm, + settings; + if ( elm ) { + $elm = $( elm ); + // ... Do the plugin initialisation + + + // Get the plugin JSON configuration set on attribute data-collection-sort + settings = $.extend( + true, + {}, + defaults, + window[ componentName ], + wb.getData( $elm, componentName ) + ); + // Call my custom event + $elm.trigger( "collection-sort", settings ); + // Identify that initialization has completed + wb.ready( $elm, componentName ); + } + }; +// Add your plugin event handler +$document.on( "collection-sort", selector, function( event, data ) { + var elm = event.currentTarget; + + function SortCollection(){ + + var sortContainers = elm.querySelectorAll(data.section); + + sortContainers.forEach(function(container){ + + var sortItems = container.querySelectorAll(data.selector); + + let sortArray = []; + let sortDestinationArray = []; + + sortItems.forEach( function (element) { + sortDestinationArray.push(element.parentElement); + + let sortObj = { + "elm" : element, + "sortVal" : "" + }; + + sortArray.push(sortObj); + }); + + data.sort.forEach( function(sort) { + + sortArray.forEach( function (sortObj) { + sortObj.sortVal = sortObj.elm.querySelector(sort.selector).innerHTML; + }); + + if(sort.type === "numeric"){ + if(sort.order === "desc") + sortArray.sort((a,b) => b.sortVal - a.sortVal); + else + sortArray.sort((a,b) => a.sortVal - b.sortVal); + }else{ + if(sort.order === "desc") + sortArray.sort((a,b) => b.sortVal.localeCompare(a.sortVal)); + else + sortArray.sort((a,b) => a.sortVal.localeCompare(b.sortVal)); + } + }); + + sortArray.forEach(function(element, index) { + sortDestinationArray[index].append(element.elm); + }); + + }); + } + if(data.section && data.selector && data.sort){ + SortCollection(); + + $document.on( "wb-contentupdated", selector, function( event, data ) { + SortCollection(); + }); + } +}); + + +// Bind the init event of the plugin +$document.on( "timerpoke.wb " + initEvent, selector, init ); +// Add the timer poke to initialize the plugin +wb.add( selector ); +} )( jQuery, window, wb ); + + /** + * @title WET-BOEW Distance plugin + * @overview Plugin contained to show an example of how to create your custom WET plugin + * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * @author donmcdill + */ + ( function( $, window, wb ) { + "use strict"; + /* + * Variable and function definitions. + * These are global to the plugin - meaning that they will be initialized once per page, + * not once per instance of plugin on the page. So, this is a good place to define + * variables that are common to all instances of the plugin on a page. + */ + var componentName = "distance-calculator", + selector = "." + componentName, + initEvent = "wb-init" + selector, + $document = wb.doc, + defaults = {}, + /** + * @method init + * @param {jQuery Event} event Event that triggered the function call + */ + init = function( event ) { + // Start initialization + // returns DOM object = proceed with init + // returns undefined = do not proceed with init (e.g., already initialized) + var elm = wb.init( event, componentName, selector ), + $elm, + settings; + if ( elm ) { + $elm = $( elm ); + // ... Do the plugin initialisation + + + + + // Get the plugin JSON configuration set on attribute data-distance-calculator + settings = $.extend( + true, + {}, + defaults, + window[ componentName ], + wb.getData( $elm, componentName ) + ); + // Call my custom event + $elm.trigger( "distance-calculator", settings ); + // Identify that initialization has completed + wb.ready( $elm, componentName ); + } + }; + // Add your plugin event handler + $document.on( "distance-calculator", selector, function( event, data ) { + var elm = event.currentTarget, + $elm = $( elm ); + + // Function to get the distance in KM between each office begin + function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) { + var R = 6371; // Radius of the earth in km + var dLat = deg2rad(lat2-lat1); // deg2rad below + var dLon = deg2rad(lon2-lon1); + var a = + Math.sin(dLat/2) * Math.sin(dLat/2) + + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * + Math.sin(dLon/2) * Math.sin(dLon/2) + ; + var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); + var d = R * c; // Distance in km + + return d; + } + function deg2rad(deg) { + return deg * (Math.PI/180) + } + function addCommas(nStr, number_seperator) + { + nStr += ''; + var x = nStr.split('.'); + var x1 = x[0]; + var x2 = x.length > 1 ? '.' + x[1] : ''; + var rgx = /(\d+)(\d{3})/; + + while (rgx.test(x1)) { + x1 = x1.replace(rgx, '$1' + number_seperator + '$2'); + } + + return x1 + x2; + } + + //Set filter event distance handler + $elm.find(data.form).on( "submit", function(distEvent) { + + var distForm = distEvent.currentTarget; + + var address = distForm.querySelector(data.location).value; + var addressEnc = encodeURIComponent(address); + + var distCollection = elm.querySelector(data.section); + var distCollectionItems = distCollection.querySelectorAll(data.selector); + + var distAPI = (wb.lang==="fr")?"https://geogratis.gc.ca/services/geolocation/fr/locate?q=":"https://geogratis.gc.ca/services/geolocation/en/locate?q="; + + // Start of geogratis location service call to the API + $.getJSON(distAPI + addressEnc, function(json) { + if ( json.length == 0 ) { + console.log("Empty response from geogratis"); + } + else { + + var longitude = json[0].geometry.coordinates[0]; + var latitude = json[0].geometry.coordinates[1]; + var global_nice_address = json[0].title; + + + // Inserts the distance between the VAC offices and the location entered in each PO's variable array + distCollectionItems.forEach( function(element) { + + let dist = element.querySelector(data.target); + let distSort = element.querySelector(data.sort); + + if(typeof dist !== "undefined" && dist !== null && typeof distSort !== "undefined" && distSort !== null && typeof dist.dataset.distanceCoordinates !== "undefined" && dist.dataset.distanceCoordinates !== null){ + + let coordinates = JSON.parse(dist.dataset.distanceCoordinates); + let itemLongtitude = coordinates.longtitude; + let itemLatitude = coordinates.latitude; + let thousandSeparator = (wb.lang==="fr")?" ":","; + let addressDist = getDistanceFromLatLonInKm(latitude,longitude,itemLatitude,itemLongtitude); + + distSort.innerHTML = Math.round(addressDist); + dist.innerHTML = addCommas(Math.round(addressDist),thousandSeparator); + } + + }); + + if(typeof data.name !== "undefined" && data.name !== null){ + let titleArray = elm.querySelectorAll(data.name); + titleArray.forEach(function(title){ + title.innerHTML = global_nice_address; + }); + } + if(typeof data.display === "object" && typeof data.display.selector !== "undefined" && typeof data.display.removeClass !== "undefined" && data.display.selector !== null && data.display.removeClass !== null){ + let visibleArray = elm.querySelectorAll(data.display.selector); + visibleArray.forEach(function(elem){ + elem.classList.remove(data.display.removeClass); + }); + } + + $elm.trigger( "wb-contentupdated", [{"source":componentName}] ); + + } + }); + + return false; + }); + + } ); + // Bind the init event of the plugin + $document.on( "timerpoke.wb " + initEvent, selector, init ); + // Add the timer poke to initialize the plugin + wb.add( selector ); + } )( jQuery, window, wb ); diff --git a/package-lock.json b/package-lock.json index 493a885e9..32ca6f35e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "GCWeb", - "version": "14.5.0", + "version": "14.6.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -11590,8 +11590,8 @@ } }, "wet-boew": { - "version": "github:wet-boew/wet-boew#cdc82ddefa05000142f8c29c5102c4441730520a", - "from": "github:wet-boew/wet-boew#v4.0.73", + "version": "github:wet-boew/wet-boew#c3be26ebf28fb68ac8cabcb55ea9705f7006a4d7", + "from": "github:wet-boew/wet-boew#v4.0.75", "requires": { "bootstrap-sass": "3.4.1", "code-prettify": "^0.1.0", diff --git a/package.json b/package.json index 22e6d0c62..55249ae6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "GCWeb", - "version": "14.5.0", + "version": "14.6.0", "description": "Web Experience Toolkit (WET): Canada.ca Theme Reorg", "main": "index.html", "scripts": { @@ -13,7 +13,7 @@ "license": "MIT", "dependencies": { "bootstrap-sass": "3.4.1", - "wet-boew": "github:wet-boew/wet-boew#v4.0.74" + "wet-boew": "github:wet-boew/wet-boew#v4.0.75" }, "browserslist": [ "last 2 versions",