From e3980dafc0b3d96a99c91dec3e748122bfe88040 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Mon, 9 Sep 2024 11:30:47 -0400 Subject: [PATCH] =?UTF-8?q?Clean=20up:=20moving=20deprecated=20components?= =?UTF-8?q?=20to=20m=C3=A9li-m=C3=A9lo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _data/components.json | 10 +- "_data/m\303\251li-m\303\251lo.json" | 22 +- _data/sites.json | 20 +- _data/templates.json | 16 +- components/_provisional.scss | 2 +- components/gc-follow-us/_base.scss | 21 +- components/gc-follow-us/index.json-ld | 10 +- components/provisional-en.html | 2 +- components/provisional-fr.html | 2 +- .../social-media-icons/_screen-md-min.scss | 3 - components/wb-chtwzrd/chatwizard.js | 24 +- .../assets/how-to-get-involved-orange.png" | Bin .../assets/x-blue-line.png" | Bin .../bg-img-heading-en.html" | 29 + .../bg-img-heading-fr.html" | 29 + .../bg-img-heading.css" | 14 + .../2024-09-bg-img-heading/meta.md" | 45 + .../assets/default-avatar.png" | Bin 0 -> 1627 bytes .../2024-09-chatwizard/chatwizard-en.html" | 156 ++++ .../2024-09-chatwizard/chatwizard-fr.html" | 162 ++++ .../chatwizard-json-en.html" | 36 + .../chatwizard-json-fr.html" | 44 + .../chatwizard-test-meli-melo.html" | 161 ++++ .../2024-09-chatwizard/chatwizard.css" | 429 +++++++++ .../2024-09-chatwizard/chatwizard.js" | 830 ++++++++++++++++++ .../2024-09-chatwizard/demo/manual-form.json" | 84 ++ .../2024-09-chatwizard/docs.html" | 100 +++ .../2024-09-chatwizard/meta.md" | 51 ++ .../icon-warning-light-en.html" | 23 + .../icon-warning-light-fr.html" | 23 + .../icon-warning-light.css" | 9 + .../2024-09-icon-warning-light/meta.md" | 45 + .../2024-09-pinkday/docs-en.html" | 31 + .../2024-09-pinkday/docs-fr.html" | 31 + .../2024-09-pinkday/meta.md" | 45 + .../2024-09-pinkday/pink-day-en.html" | 34 + .../2024-09-pinkday/pink-day-fr.html" | 34 + .../2024-09-pinkday/pink-day-home-en.html" | 181 ++++ .../2024-09-pinkday/pink-day-home-fr.html" | 172 ++++ .../2024-09-pinkday/pinkday.css" | 50 ++ sites/footers/_screen-sm-max.scss | 43 +- sites/footers/_screen-xs-max.scss | 41 - sites/footers/_screen-xxs-max.scss | 10 +- sites/footers/deprecated/footers-v1-en.html | 84 -- sites/footers/deprecated/footers-v1-fr.html | 84 -- sites/footers/deprecated/footers-v2-en.html | 90 -- sites/footers/deprecated/footers-v2-fr.html | 90 -- sites/footers/deprecated/footers-v3-en.html | 117 --- sites/footers/deprecated/footers-v3-fr.html | 117 --- sites/footers/deprecated/footers-v4-en.html | 112 --- sites/footers/deprecated/footers-v4-fr.html | 114 --- sites/footers/deprecated/footers-v5-en.html | 115 --- sites/footers/deprecated/footers-v5-fr.html | 114 --- sites/footers/deprecated/footers-v6-en.html | 115 --- sites/footers/deprecated/footers-v6-fr.html | 114 --- .../deprecated/includes/footers-v2.html | 104 --- sites/footers/old-footers-en.html | 8 +- sites/footers/old-footers-fr.html | 21 +- .../page-details-v3-en.html | 0 .../page-details-v3-fr.html | 0 .../page-details-v3.1-en.html | 0 .../page-details-v3.1-fr.html | 0 sites/page-details/index.json-ld | 20 +- sites/theme.scss | 2 - .../institutional-landing/reports/a11y-1.json | 2 +- .../theme-topic-en.html | 0 .../theme-topic-fr.html | 0 .../{demoted => deprecated}/topic-en.html | 0 .../{demoted => deprecated}/topic-fr.html | 0 .../topic-testcase-1-en.html | 0 .../topic-testcase-1-fr.html | 0 templates/topic/index.json-ld | 16 +- 72 files changed, 2942 insertions(+), 1571 deletions(-) delete mode 100644 components/social-media-icons/_screen-md-min.scss rename components/img/provisional-DOCS-how-to-get-involved-orange.png => "m\303\251li-m\303\251lo/2024-09-bg-img-heading/assets/how-to-get-involved-orange.png" (100%) rename components/assets/x-blue-line.png => "m\303\251li-m\303\251lo/2024-09-bg-img-heading/assets/x-blue-line.png" (100%) create mode 100644 "m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-en.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-fr.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading.css" create mode 100644 "m\303\251li-m\303\251lo/2024-09-bg-img-heading/meta.md" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/assets/default-avatar.png" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-en.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-fr.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-en.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-fr.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-test-meli-melo.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.css" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.js" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/demo/manual-form.json" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/docs.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-chatwizard/meta.md" create mode 100644 "m\303\251li-m\303\251lo/2024-09-icon-warning-light/icon-warning-light-en.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-icon-warning-light/icon-warning-light-fr.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-icon-warning-light/icon-warning-light.css" create mode 100644 "m\303\251li-m\303\251lo/2024-09-icon-warning-light/meta.md" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/docs-en.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/docs-fr.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/meta.md" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/pink-day-en.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/pink-day-fr.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/pink-day-home-en.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/pink-day-home-fr.html" create mode 100644 "m\303\251li-m\303\251lo/2024-09-pinkday/pinkday.css" delete mode 100644 sites/footers/_screen-xs-max.scss delete mode 100644 sites/footers/deprecated/footers-v1-en.html delete mode 100644 sites/footers/deprecated/footers-v1-fr.html delete mode 100644 sites/footers/deprecated/footers-v2-en.html delete mode 100644 sites/footers/deprecated/footers-v2-fr.html delete mode 100644 sites/footers/deprecated/footers-v3-en.html delete mode 100644 sites/footers/deprecated/footers-v3-fr.html delete mode 100644 sites/footers/deprecated/footers-v4-en.html delete mode 100644 sites/footers/deprecated/footers-v4-fr.html delete mode 100644 sites/footers/deprecated/footers-v5-en.html delete mode 100644 sites/footers/deprecated/footers-v5-fr.html delete mode 100644 sites/footers/deprecated/footers-v6-en.html delete mode 100644 sites/footers/deprecated/footers-v6-fr.html delete mode 100644 sites/footers/deprecated/includes/footers-v2.html rename sites/page-details/{demoted => deprecated}/page-details-v3-en.html (100%) rename sites/page-details/{demoted => deprecated}/page-details-v3-fr.html (100%) rename sites/page-details/{demoted => deprecated}/page-details-v3.1-en.html (100%) rename sites/page-details/{demoted => deprecated}/page-details-v3.1-fr.html (100%) rename templates/topic/{demoted => deprecated}/theme-topic-en.html (100%) rename templates/topic/{demoted => deprecated}/theme-topic-fr.html (100%) rename templates/topic/{demoted => deprecated}/topic-en.html (100%) rename templates/topic/{demoted => deprecated}/topic-fr.html (100%) rename templates/topic/{demoted => deprecated}/topic-testcase-1-en.html (100%) rename templates/topic/{demoted => deprecated}/topic-testcase-1-fr.html (100%) diff --git a/_data/components.json b/_data/components.json index 92630e7b9e..7e4d4fd406 100644 --- a/_data/components.json +++ b/_data/components.json @@ -879,7 +879,7 @@ "en": "Follow us", "fr": "Suivez-nous" }, - "status": "demoted", + "status": "deprecated", "description": { "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.", "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)." @@ -899,6 +899,10 @@ "_:implement_follow" ], "history": [ + { + "en": "September 2024 - This variant is now officially deprecated.", + "fr": "Septembre 2024 - Cette variante est maintenant officiellement obsolète." + }, { "en": "April 2017 - Initial implementation of the variation.", "fr": "Avril 2017 - Implémentation initiale de la variante." @@ -1005,7 +1009,7 @@ "New SVG image for X logo (formerly known as Twitter)." ], "fixes": [ - "Demoted: SVG image for Twitter to be deprecated." + "Deprecated: SVG image for Twitter to be deprecated." ], "assets": [ { @@ -1106,7 +1110,7 @@ { "@id": "_:cs_follow", "name": "Follow us", - "status": "demoted", + "status": "deprecated", "deprecatedOn": "2024-02-02", "baseOnIteration": "_:iteration_follow_1", "detectableBy": ".followus", diff --git "a/_data/m\303\251li-m\303\251lo.json" "b/_data/m\303\251li-m\303\251lo.json" index a1eb2ecb6f..88effebb18 100644 --- "a/_data/m\303\251li-m\303\251lo.json" +++ "b/_data/m\303\251li-m\303\251lo.json" @@ -22,6 +22,10 @@ "2024-04-stepsquiz", "2021-05-conjunction", "2021-05-steps", + "2024-09-chatwizard", + "2024-09-bg-img-heading", + "2024-09-icon-warning-light", + "2024-09-pinkday", "deprecated" ] }, @@ -98,7 +102,23 @@ "nom": "2024-04-stepsquiz", "mainpage": "index.html" }, - { + { + "nom": "2024-09-chatwizard", + "mainpage": "chatwizard-en.html" + }, + { + "nom": "2024-09-bg-img-heading", + "mainpage": "bg-img-heading-en.html" + }, + { + "nom": "2024-09-icon-warning-light", + "mainpage": "icon-warning-light-en.html" + }, + { + "nom": "2024-09-pinkday", + "mainpage": "docs-en.html" + }, + { "nom": "deprecated", "mainpage": "deprecated.html" } diff --git a/_data/sites.json b/_data/sites.json index a05249f37f..f97c69fe0a 100644 --- a/_data/sites.json +++ b/_data/sites.json @@ -2639,12 +2639,12 @@ "fr": { "href": "page-details-pft-fr.html", "text": "Détails de la page avec Outil de rétroaction sur la page" } }, { - "en": { "href": "demoted/page-details-v3-en.html", "text": "Demoted - Page details version 3.0" }, - "fr": { "href": "demoted/page-details-v3-fr.html", "text": "Rétrogradé - Détails de la page version 3.0" } + "en": { "href": "deprecated/page-details-v3-en.html", "text": "Deprecated - Page details version 3.0" }, + "fr": { "href": "deprecated/page-details-v3-fr.html", "text": "Obsolète - Détails de la page version 3.0" } }, { - "en": { "href": "demoted/page-details-v3.1-en.html", "text": "Demoted - Page details version 3.1" }, - "fr": { "href": "demoted/page-details-v3.1-fr.html", "text": "Rétrogradé - Détails de la page version 3.1" } + "en": { "href": "deprecated/page-details-v3.1-en.html", "text": "Deprecated - Page details version 3.1" }, + "fr": { "href": "deprecated/page-details-v3.1-fr.html", "text": "Obsolète - Détails de la page version 3.1" } } ], "implementation": [ @@ -2698,14 +2698,6 @@ "Pour plus d'informations sur le composant de l'Outil de rétroaction sur la page, veuillez visiter la page Zone de rétroaction sur la page." ] }, - "notes": { - "en": [ - "Although the component has been updated to version 3.2, versions 2.0, 3.0 and 3.1 are still supported. However, for version 2.0, the page content and the <footer> have to be located inside an <article> tag." - ], - "fr": [ - "Bien que le composant ait été mis à jour vers la version 3.2, les versions 2.0, 3.0 et 3.1 sont toujours prises en charge. Cependant, pour la version 2.0, le contenu de la page et la balise <footer> doivent être situés à l'intérieur d'une balise <article>." - ] - }, "sample": { "en": [ { @@ -3095,7 +3087,7 @@ { "@id": "_:cs_pd_4", "name": "Page details - version 3.1", - "status": "stable", + "status": "deprecated", "baseOnIteration": "_:iteration_pd_4", "detectableBy": "section.pagedetails", "layout": [ @@ -3133,7 +3125,7 @@ { "@id": "_:cs_pd_3", "name": "Page details - Compatible with PFT + Accessiblity fix (version 3.0)", - "status": "stable", + "status": "deprecated", "baseOnIteration": "_:iteration_pd_3", "detectableBy": "section.pagedetails", "layout": [ diff --git a/_data/templates.json b/_data/templates.json index 37d2f8d0aa..d18d6c2e65 100644 --- a/_data/templates.json +++ b/_data/templates.json @@ -1312,14 +1312,14 @@ "path": "topic-stackedheader-fr.html" }, { - "title": "Theme/Topic page - Demoted", + "title": "Theme/Topic page - Deprecated", "language": "en", - "path": "demoted/theme-topic-en.html" + "path": "deprecated/theme-topic-en.html" }, { - "title": "Page de sujet/thème - Rétrogradée", + "title": "Page de sujet/thème - Obsolète", "language": "fr", - "path": "demoted/theme-topic-fr.html" + "path": "deprecated/theme-topic-fr.html" }, { "title": "Lowest topic (with secondary navigation) - Deprecated", @@ -1327,7 +1327,7 @@ "path": "../lowest-topic/index-en.html" }, { - "title": "Sujet de plus bas niveau (avec une navigation secondaire) - Dépréciée", + "title": "Sujet de plus bas niveau (avec une navigation secondaire) - Obsolète", "language": "fr", "path": "../lowest-topic/index-fr.html" } @@ -1552,13 +1552,13 @@ "example": { "en": [ { - "href": "demoted/theme-topic-en.html", + "href": "deprecated/theme-topic-en.html", "text": "Theme - Topic page version 2 (beta)" } ], "fr": [ { - "href": "demoted/theme-topic-fr.html", + "href": "deprecated/theme-topic-fr.html", "text": "Page the thème ou de sujet version 2 (bêta)" } ] @@ -1572,7 +1572,7 @@ "example": { "en": [ { - "href": "demoted/topic-en.html", + "href": "deprecated/topic-en.html", "text": "Topic page version 1" } ], diff --git a/components/_provisional.scss b/components/_provisional.scss index d395e04519..da4b3d3fdf 100644 --- a/components/_provisional.scss +++ b/components/_provisional.scss @@ -30,7 +30,7 @@ * */ .bg-img-hdng { - background-image: url("../assets/x-blue-line.png"); + background-image: url("https://www.canada.ca/content/dam/servcan/x-blue-line.png"); background-position: right bottom; background-repeat: no-repeat; min-height: 60px; diff --git a/components/gc-follow-us/_base.scss b/components/gc-follow-us/_base.scss index 5759537ba6..11843e1160 100644 --- a/components/gc-follow-us/_base.scss +++ b/components/gc-follow-us/_base.scss @@ -2,6 +2,7 @@ Social Media Icons, follow-us */ +// START: Deprecated as of version 16.0.0 %social-media-icons-followus-logo-properties { background-position: center center; background-repeat: no-repeat; @@ -44,10 +45,6 @@ background-image: url("data:image/png;base64,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"); } -%social-media-icons-logo-googleplus { //This is deprecated and will be removed from later versions - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAAAAXNSR0IArs4c6QAAA9lJREFUaAXtmX9IU1EUx882tznnr0ynGREpFvRfkWZ/FCRSRGQWmEgU/VF/FNEPqD8LwiAoIUihfyMoSyywoP6oDCEtqUj6IWRIhKVu/pq2qU+39zrnuvt82x6Mt+3pgl04vHPPu+/cz/t6d3bvBPhPm0GFWy2mMmzJQ5JyRiUk+aaAka+8p3xmqX0CJvMHjL1AioLC9KayvCrPZm00GYyFiviyu35JHHTNzp3e/uLtU4TxEZAxQEXqmhMRmvhISEeqpYkY0dhKUIJbEk1pguYtwGbBfjg4H5TAV1Vw5XpPVHZiDFKcQFkgUYkDXDIjX+MJzhuOlwQP10TfSFJxffUNz55UPFwTfSMxfekY7HbIPlgH9i1bwZyP+zKssvPOIfB+6AZ36z2Qpqd1o48aPG1zGeSePAdmR0EQnHVtEZBl7KgAZ1MDCD0fg+7HqxMVuG1TKRRcvgYGw8IX2dyIC2a+9zIm24aNYMlzgOT3g2/wd7w4w/JoBjek2SHv1HkGLfp8MNZ8ByYfPwCDKLLkktEI6bv3wUx3J4jjo2ETxiugGTz7QK28PCYeNcNU6/2gTQ69gPd5W0S+4rZ2NqZ/f0XEsWoDNJdDe2k5yyPiB8/dclct55LENCtuLljNwISfP/AQRcfAxcZVXIwseJ7ODnBev8I6oWN4X6vymhWXJH7YlneYoZzhfROdwePbNCvuc/4B07oSsBaV4AkQj4Dz8zLRcGOD7JuysiDv6AnW942PyfG+qp3MX//kNbvyvilQoeSBERzNinvedbGURpsNcuqOBaX3vnwG3ExmOmUtNKH3C3fx4GtgxgOhfR6PdNWs+GRbC2RU7AJL/irIrj4EEpbEiYf4IcW6zVvm3mpYUXOYdYWBX+Dp6uC35Gu0SvMEmsGlmRlw3boBhfUNYMS1m1N7BDIr98Bsfx+AKOESKpbLpYilceT2zaCX4hNrXRr8OX7VDE4PCl97YPDSBXCcuciUT1mZC+loyuZzT4ALoYVvn5XhuPlRgdPsBD9w9jhkVtWAvWwbWAvXBDZZw+D99B4m8ctJ+jsVN9DQRFGDs0S4bKZwfZPxIglYLvkeJnSyePZjA1eQyFVdY1lTpNDkai6HmrLrODgJrqO4qqmTiqvKomMwqbiO4qqmTiquKouOQaXioiD6XTrOFVPqANvCTwmYiYPTVsPXPjR6VfD7R2KaQYeHienV8Fg9MaKxbRHfYtALpKPlo+WgpaLxe+guayPQWbRxNCeaB03kmyy6KaC5KYhG5y7+10B3WRvxzKHRHpkYgxTHPgOlf4ASNL1QIilOS4Tg6WTO1vk/yrUG/vk8ZeYAAAAASUVORK5CYII="); -} - %social-media-icons-logo-reddit { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACAUlEQVRIS+2TTUhUURiGnxm1zJ9KQScVmxT/MlJQCFNQNyJBZLrSQPyBNokbwRKNRBdGCG1EWhg06kLd+L8RQRRJJNBKURyVURjFRJhSw4pJRw4HnWQu3rloO7/Vved8533Oed9zdI4sHPzH0l0A1NzVbpG3L3h6wc8fUjvAADod2L4psrQDntRAaBToPWDfDml5oNdDSQx833SBaAc8b4PGInA4IPAGmJbltwDYNs4B8KId3hQ6ha4HS8D21jlYZDDCg6dgeqmW7fG8ukV+AZCaA8Y7EH8fRMhfRsAyA5MDsGs7FeYKiEyE/CqwmsHrMuSUwRV/ZZFfu9DXDPbfcPM2dLwGy9cTva6AljkwxrttwYnGNTOUxqkA3s/L3RxVczlMDkJ9P0TclaMrs/DqEaQ8hLImZ+/aIpTGqgCEyLvP8p6LKoyAzVWoNEFWkRwbboXGYjDcgvYVOXawD8+SZDb/lHLIvdvgc9W52+VpyMyXmYiy/4HRTohKcp5qbwceX3OxVhlQ2w1pudpy+NgDdXluAoLC4e04iHsvHpFYmJgJ0clSYGkK5iegpkv+Cwsr0mHL6iZAtIVEQnUHxN6Dv3aYGYP1RSkQFgMJ6eB5CcyfoKEANiyKJ1Z/aAkZkF0C4XEQFi1F1pfAugBDHyT4lFIHaEtCg0VnFD5afnECVSMPAeyytmHDG1/pAAAAAElFTkSuQmCC"); } @@ -63,6 +60,7 @@ %social-media-icons-logo-email { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAWCAYAAABOm/V6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gQVECMqfCsMgwAAAshJREFUSMfF1s9P02AYwPFvyxwbHRuMrYOVVgS2BRNBDfHqxXDxz/Bq4sH/QA+e/B8MR+9e/QcUMk0IMBRho4R1g7LRbmPA6mFuqLAxfj9Jk6bv276fPHnep6+QnJ3xAq+Bl0CEm41PwBsX8AJ4y+3Ec2DYBbwCCClj7O1k6Q3KRO5OXNuqlVKRjVQSr6+PXSMDMCUCIwCylkCJTWHt5smuLV4LYL9ssZFK4g9GUMYnm8/Fvyd5fX1Exx7UIetXC6mWbTLLc/gHBpG1+D9jIuDUb51jyPgklpknu750NYBKifTSVwKhKOHhGCCcQJwIry+AEptizzQw0suXByx+oS+sEFLGEQThxByx1cseyc9w/BHFnSy5zAqO41wYEAgrDERHTwW0RQB4enpRE48pbG+S13/iOLVz1UADEIqOIoitlxLP+li314eWmKaQ09nWV3FqZ0P2Sxbp5TkC4SghZawtoCMEgNsroU1Ms5vTyW+uts1IpVQkk5rHHxxsWQMXQgC4PXVIIaeT11dPrZGKXUBPJekNRpC1eEeAcyGqlRJGOoUUCFHI6+QyKWpHh81xu7CNvvKd7h4fFbuImc10XD+uzgA2RjqFRwoQUkbZL9ts/vjG4UGVbq+PWu0Qy8zROxBBVuNU7CJGJgVAf0S9fCb+B9SLVUK7/wTXHTd2cYdq2SasxpDVeHN7y2qcPdNo/B8unoljgL8JaERXlwtZS9Cuz8hqrN5jgH5ZPX8mGjXgkfwMREcv1C09kp+wGsPaaZ8R8biRH1fywX4ZI71cBwzd67jKW2ZES7BnGpgtICJQBZpN6KBaIbu+hEfyExwaObPRdBLdPT5kLYFlGqfuGhGYB9haW+Do8ICtXwt1wKCGIAg4Tu1KLrenh7AaxzKzZNcWsXZzDUNJSM7OPPtz1nPf0hHvowv4DDwF3gEPAekGFnaADPABeP8bNrJaPIc3C6EAAAAASUVORK5CYII=") } +// END: Deprecated as of version 16.0.0 $social-media-li-margin-bottom: 15px; $social-media-icons-vertical-offset: 6px; @@ -192,6 +190,7 @@ $social-media-icons-size: 38px; } } +// START: Deprecated as of version 16.0.0 //removes the icon to the share widget .shr-pg { a { @@ -280,13 +279,6 @@ $social-media-icons-size: 38px; @extend %social-media-icons-logo-instagram; } - .googleplus { //This is deprecated and will be removed from later versions - @extend %social-media-icons-followus-logo-properties; - @extend %social-media-icons-logo-googleplus; - background-repeat: no-repeat; - background-size: 35px 35px; - } - .reddit { @extend %social-media-icons-followus-logo-properties; @extend %social-media-icons-logo-reddit; @@ -355,12 +347,6 @@ $social-media-icons-size: 38px; @extend %social-media-icons-logo-instagram; } - &.googleplus { //This is deprecated and will be removed from later versions - @extend %social-media-icons-logo-googleplus; - height: 45px; - padding-left: 48px; - } - &.reddit { @extend %social-media-icons-logo-reddit; } @@ -369,3 +355,4 @@ $social-media-icons-size: 38px; @extend %social-media-icons-logo-rss; } } +// END: Deprecated as of version 16.0.0 diff --git a/components/gc-follow-us/index.json-ld b/components/gc-follow-us/index.json-ld index 717491de2d..1d1c15d6e5 100644 --- a/components/gc-follow-us/index.json-ld +++ b/components/gc-follow-us/index.json-ld @@ -86,7 +86,7 @@ "en": "Follow us", "fr": "Suivez-nous" }, - "status": "demoted", + "status": "deprecated", "description": { "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.", "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)." @@ -106,6 +106,10 @@ "_:implement_follow" ], "history": [ + { + "en": "September 2024 - This variant is now officially deprecated.", + "fr": "Septembre 2024 - Cette variante est maintenant officiellement obsolète." + }, { "en": "April 2017 - Initial implementation of the variation.", "fr": "Avril 2017 - Implémentation initiale de la variante." @@ -212,7 +216,7 @@ "New SVG image for X logo (formerly known as Twitter)." ], "fixes": [ - "Demoted: SVG image for Twitter to be deprecated." + "Deprecated: SVG image for Twitter to be deprecated." ], "assets": [ { @@ -313,7 +317,7 @@ { "@id": "_:cs_follow", "name": "Follow us", - "status": "demoted", + "status": "deprecated", "deprecatedOn": "2024-02-02", "baseOnIteration": "_:iteration_follow_1", "detectableBy": ".followus", diff --git a/components/provisional-en.html b/components/provisional-en.html index f4e5291132..172d56ea60 100644 --- a/components/provisional-en.html +++ b/components/provisional-en.html @@ -356,7 +356,7 @@

-

How to get involved

+

How to get involved

Public

Learn how the public can participate in impact assessments.

Indigenous

diff --git a/components/provisional-fr.html b/components/provisional-fr.html index 64d9352298..32681f5ce0 100644 --- a/components/provisional-fr.html +++ b/components/provisional-fr.html @@ -360,7 +360,7 @@

-

How to get involved

+

How to get involved

Public

Learn how the public can participate in impact assessments.

Indigenous

diff --git a/components/social-media-icons/_screen-md-min.scss b/components/social-media-icons/_screen-md-min.scss deleted file mode 100644 index eda307b98e..0000000000 --- a/components/social-media-icons/_screen-md-min.scss +++ /dev/null @@ -1,3 +0,0 @@ -/* - Social Media Icons Medium View and over -*/ diff --git a/components/wb-chtwzrd/chatwizard.js b/components/wb-chtwzrd/chatwizard.js index d7db4c4ce8..47f83a16f6 100644 --- a/components/wb-chtwzrd/chatwizard.js +++ b/components/wb-chtwzrd/chatwizard.js @@ -67,20 +67,22 @@ var componentName = "wb-chtwzrd", * @param {jQuery Event} event Event that triggered the function call */ init = function( event ) { + setTimeout( function() { - // 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 ); + // 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 ); - fireChtwzrd( $elm ); + fireChtwzrd( $elm ); - // Identify that initialization has completed - wb.ready( $elm, componentName ); - } + // Identify that initialization has completed + wb.ready( $elm, componentName ); + } + }, 500 ); }, /** diff --git a/components/img/provisional-DOCS-how-to-get-involved-orange.png "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/assets/how-to-get-involved-orange.png" similarity index 100% rename from components/img/provisional-DOCS-how-to-get-involved-orange.png rename to "m\303\251li-m\303\251lo/2024-09-bg-img-heading/assets/how-to-get-involved-orange.png" diff --git a/components/assets/x-blue-line.png "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/assets/x-blue-line.png" similarity index 100% rename from components/assets/x-blue-line.png rename to "m\303\251li-m\303\251lo/2024-09-bg-img-heading/assets/x-blue-line.png" diff --git "a/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-en.html" "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-en.html" new file mode 100644 index 0000000000..62d3e2b100 --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-en.html" @@ -0,0 +1,29 @@ +--- +title: "Background image heading" +language: "en" +altLangPage: "bg-img-heading-fr.html" +category: "Plugins" +dateModified: "2024-09-11" +css: + - bg-img-heading.css +--- + +

Add a background image to a heading.

+ +

Working example

+
+
+

Impact Assessment

+

Impact assessments process

+

Learn about the purpose and steps of impact assessments under the Impact Assessment Act.

+

Canadian Impact Assessment Registry

+

Information on potential and current IAs of projects subject to the federal IA process.

+
+
+

How to get involved

+

Public

+

Learn how the public can participate in impact assessments.

+

Indigenous

+

Learn about the Indigenous consultation process in impact assessments.

+
+
diff --git "a/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-fr.html" "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-fr.html" new file mode 100644 index 0000000000..f4e2e2b7f0 --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading-fr.html" @@ -0,0 +1,29 @@ +--- +title: "En-tête avec image de fond" +language: "fr" +altLangPage: "bg-img-heading-en.html" +category: "Plugins" +dateModified: "2024-09-11" +css: + - bg-img-heading.css +--- + +

Ajoute une image de fond à un en-tête.

+ +

Exemple pratique

+
+
+

Évaluation d'impact

+

Processus d'évaluation d'impact

+

Apprenez-en davantage sur l'objectif et les étapes des évaluations d'impact en vertu de la Loi sur l'évaluation d'impact.

+

Évaluation d'impact canadienne Registre

+

Informations sur les EI potentielles et actuelles des projets soumis au processus fédéral d'EI.

+
+
+

Comment s'impliquer

+

Public

+

Découvrez comment le public peut participer aux évaluations d'impact.

+

Autochtones

+

Découvrez le processus de consultation des Autochtones dans les évaluations d'impact.

+
+
diff --git "a/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading.css" "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading.css" new file mode 100644 index 0000000000..e37c5de3ad --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/bg-img-heading.css" @@ -0,0 +1,14 @@ +/* + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * Background image heading - Provisional CSS + */ + +.bg-img-hdng { + background-image: url("https://www.canada.ca/content/dam/servcan/x-blue-line.png"); + background-position: right bottom; + background-repeat: no-repeat; + min-height: 60px; + padding-bottom: 35px; + padding-right: 80px; +} diff --git "a/m\303\251li-m\303\251lo/2024-09-bg-img-heading/meta.md" "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/meta.md" new file mode 100644 index 0000000000..a8ba3a3f03 --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-bg-img-heading/meta.md" @@ -0,0 +1,45 @@ +--- +feature: méli-mélo +"@context": + "@version": 1.0 + dct: http://purl.org/dc/terms/ + title: + "@id": dct:title + "@container": "@language" + description: + "@id": dct:description + "@container": "@language" + modified: dct:modified + +title: + en: Background image heading + fr: En-tête avec image de fond +description: + en: Ajoute une image de fond à un en-tête. + fr: Add a background image to a heading. +modified: 2024-09-04 +componentName: 2024-09-bg-img-heading +sponsor: Principal Publisher - ESDC + +pages: + examples: + - title: Background image heading + language: en + path: bg-img-heading-en.html + - title: En-tête avec image de fond + language: fr + path: bg-img-heading-fr.html + docs: + - title: Background image heading + language: en + path: bg-img-heading-en.html + - title: En-tête avec image de fond + language: fr + path: bg-img-heading-fr.html + +implementationPlan: + - due: 2024-09 + what: Deprecation of the GCWeb component and move to experimentation + +output: false +--- diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/assets/default-avatar.png" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/assets/default-avatar.png" new file mode 100644 index 0000000000000000000000000000000000000000..67922fe2b149e3af66632b3372dd7674b9b4a6b8 GIT binary patch literal 1627 zcmV-h2Bi6kP)xlX`425w`$U~jYAtpMHy8faY!yz zFZK-%UMhqTu_da4Xvif9#i=NjNCM(Q!54&}Hc~l2*X2N3>XZYeVhyNB;B5nyAe*)c zrRi?mY`imr>~*(}?Oi+Jp&a;R+2h%N{`qF+f6bB@V`3eES`Q@F5f8_jM=FXUNm6kS z%d#BD{TDnGMM>r%ilVBj)@OV76Yp&H!6-9~1@jM?425V$f z6AwjEc%Gk~ovlS<37cp%>h*f7O4f8P@p!z11j8`>{rw!r0RW61Q50oa7DcgGQdQOQ z@$qOhT6K!*`yojZ&-3QrzP>)5=gsNMA&R0P2#G|(d@?dJ5(otT77t01LZOhVs(!zp z<2d8H>f#83kYzcMNTkzg!=lH>$NT&H?FL|L+`W6(@Am@$E?l@^BW90uIt>8m>+74D znXwVH<8k!pQ2@ZHQ>WHU!oZm`X8-^L0|RT}VXVV`aP1fv7ytmI(`l;_mT_GW1cD%n zE!65s7Pl1Dn7CJ3U6aS;SuT9S^vrpdCs7yy7_7*P~g%_Egc_4f8! zJ;e~_J{ZqUo|~V#IP>x8!U5~L)sR3Sz%Y!}Q#ulflyoVIGCVxo($Zr1ZBI{+%jGJO z(PnR48-J6esOh)fCP`A2r21{#jZZ&wwrp~3*-}1DG#b5p`Ld>ISFT(E0F*1N5KkkK z$kf!7(N3jOEX$T#3C%DIsqbzk&eCo-Nz)`vOUI5=&bsZ-JYB9Z7K@o7)kx9hi!VJF zC6D5slEj7~L|NV8VVZnCoYk>@|AUdctbMaa{=ckbNz z>nEeGhguiD{~kxhQGL4TYV>9 z?;3d(VpQ-E1oIoCn=X^z6@+yNGa2s5C-$B=USC78VtCCe>UGNH+I9GFT~qUqFAq@= z5%-H15}OT7A_TMg&Lhuv963xmowcYn3hBaruqAKBN?(N23B5Q2@~-IQa+HrsgO{{8!nMqxlO7!(Ad;s8z4N_rfPjgL=$;bvKf z$3r?CzrFuKF0Ej!FD@?6&BJ^5O5|-e+ss@A9vsIF4i1ivj+Tp-=f)sG5N%V8A1D|i_7fqltT85rxC#gfEU3xdI5aV}eNkbyixq0lO5Af#n7 zNLyYNiJ_sP&d$!_o(l1!tE;Q{ul=o%q$p2!H&tin|0VXpaa;)r%X^d{2%;!Doz8;? z587PaYKI^QM#yFuCJ+deU%u_`b3D&WlH~XMi_0fPQ7U>C$Yae!?RY4P5)OwYN$TzG z4Tr-3fMhZmiA1d8K`r;#weT>gnB}V1>y>5MCMdBiyJ~lz6JZj2w z#@Q>1GBGhx{6e7w!C-K0Bv$cW%7iG2kw~PZUSU}_5D3)%7V011@h{>3_qZ#uE_e_G Z@fVTO!_h#T8ae;~002ovPDHLkV1lX){doWY literal 0 HcmV?d00001 diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-en.html" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-en.html" new file mode 100644 index 0000000000..48384fe77c --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-en.html" @@ -0,0 +1,156 @@ +--- +title: "Chat wizard" +language: "en" +category: "Plugins" +altLangPage: "chatwizard-fr.html" +dateModified: "2024-09-11" +script: + - chatwizard.js +css: + - chatwizard.css +--- + + + + +

Below is the code to achieve the demo on this page with an HTML form.

+
<section class="provisional wb-chtwzrd hidden">
+	<h2 data-wb-chtwzrd-replace="I can help you find the information you need">Help us help you</h2>
+	<form class="mrgn-bttm-xl" action="https://google.ca" method="GET">
+		<p class="wb-chtwzrd-greetings">Hi! I can help you find resources that are available to help you in your quest to find information.</p>
+		<p>If you just want to surf the internet, go to <a href="https://google.ca">Google search</a></p>
+		<fieldset id="q1">
+			<legend>It would help me out if I knew a little more about you. Are you ready?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="ask" value="yes" data-wb-chtwzrd-next="q2" />
+						<span>Yes</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="ask" value="no" data-wb-chtwzrd-next="none" />
+						<span>No</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="ask" value="skip" data-wb-chtwzrd-next="q3" />
+						<span>Go straight to the point</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<fieldset id="q2">
+			<legend>Do you have a preferred language?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="preference" value="yes" data-wb-chtwzrd-next="q3" />
+						<span>Of course</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="preference" value="" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/home.html" />
+						<span>No</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<fieldset id="q3">
+			<legend>Which one is it?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="lang" value="en" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/en.html" />
+						<span>English</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="lang" value="fr" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/fr.html" />
+						<span>Français</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<p class="wb-chtwzrd-farewell wb-inv">Thank you! Your personalized results are ready for you.</p>
+		<div class="mrgn-tp-md"></div>
+		<button type="submit" class="btn btn-sm btn-primary" data-wb-chtwzrd-replace="Show results">Search</button>
+	</form>
+</section>
+ + diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-fr.html" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-fr.html" new file mode 100644 index 0000000000..f25a1f807b --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-fr.html" @@ -0,0 +1,162 @@ +--- +title: "Chat wizard" +language: "fr" +category: "Plugiciels" +altLangPage: "chatwizard-en.html" +dateModified: "2024-09-11" +script: + - chatwizard.js +css: + - chatwizard.css +--- + +
+ + + +
+

Need translation

+ + +

Below is the code to achieve the demo on this page with an HTML form.

+
<section class="provisional wb-chtwzrd hidden">
+	<h2 data-wb-chtwzrd-replace="I can help you find the information you need">Help us help you</h2>
+	<form class="mrgn-bttm-xl" action="https://google.ca" method="GET">
+		<p class="wb-chtwzrd-greetings">Hi! I can help you find resources that are available to help you in your quest to find information.</p>
+		<p>If you just want to surf the internet, go to <a href="https://google.ca">Google search</a></p>
+		<fieldset id="q1">
+			<legend>It would help me out if I knew a little more about you. Are you ready?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="ask" value="yes" data-wb-chtwzrd-next="q2" />
+						<span>Yes</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="ask" value="no" data-wb-chtwzrd-next="none" />
+						<span>No</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="ask" value="skip" data-wb-chtwzrd-next="q3" />
+						<span>Go straight to the point</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<fieldset id="q2">
+			<legend>Do you have a preferred language?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="preference" value="yes" data-wb-chtwzrd-next="q3" />
+						<span>Of course</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="preference" value="" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/home.html" />
+						<span>No</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<fieldset id="q3">
+			<legend>Which one is it?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="lang" value="en" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/en.html" />
+						<span>English</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="lang" value="fr" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/fr.html" />
+						<span>Français</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<p class="wb-chtwzrd-farewell wb-inv">Thank you! Your personalized results are ready for you.</p>
+		<div class="mrgn-tp-md"></div>
+		<button type="submit" class="btn btn-sm btn-primary" data-wb-chtwzrd-replace="Show results">Search</button>
+	</form>
+</section>
+ + +
diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-en.html" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-en.html" new file mode 100644 index 0000000000..532b693d56 --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-en.html" @@ -0,0 +1,36 @@ +--- +title: "Chat wizard JSON - Provisional feature" +language: "en" +category: "Plugins" +description: "Working example - provisional feature" +tag: "chatwizard" +parentdir: "chatwizard" +altLangPage: "chatwizard-json-fr.html" +dateModified: "2024-09-11" +script: + - chatwizard.js +css: + - chatwizard.css +--- +{% include alert-provisional.html %} + + + + + +

Below is the code to achieve the demo on this page with a JSON file.

+
<aside class="wb-chtwzrd" data-wb-chtwzrd-src="2019-assets/chtwzrd-v1/manual-form.json"></aside>
+ +

Check out he JSON file to get a grasp of how it is done.

+ +
<aside class="provisional wb-chtwzrd" data-wb-chtwzrd-src="demo/manual-form.json"></aside>
+ +{% include web-contents/placeholdercontent-en.html %} + + diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-fr.html" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-fr.html" new file mode 100644 index 0000000000..b3cd428d1e --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-json-fr.html" @@ -0,0 +1,44 @@ +--- +title: "Chat wizard JSON- Fonctionalité provisoire" +language: "fr" +category: "Plugiciels" +description: "Example pratique d'utilisation du chat wizard" +tag: "chatwizard" +parentdir: "chatwizard" +altLangPage: "chatwizard-json-en.html" +dateModified: "2024-09-11" +script: + - chatwizard.js +css: + - chatwizard.css +--- +{% include alert-provisional.html %} + +
+ + + +
+

Need translation

+ + + +

Below is the code to achieve the demo on this page with a JSON file.

+
<aside class="wb-chtwzrd" data-wb-chtwzrd-src="2019-assets/chtwzrd-v1/manual-form.json"></aside>
+ +

Check out he JSON file to get a grasp of how it is done.

+ +
<aside class="provisional wb-chtwzrd" data-wb-chtwzrd-src="demo/manual-form.json"></aside>
+ +{% include web-contents/placeholdercontent-fr.html %} + + + + +
diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-test-meli-melo.html" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-test-meli-melo.html" new file mode 100644 index 0000000000..fd98d52012 --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard-test-meli-melo.html" @@ -0,0 +1,161 @@ +--- +title: "Chat wizard - Provisional feature (test using mél-mélo assets)" +language: "en" +category: "Plugins" +description: "Working example - provisional feature" +tag: "chatwizard" +parentdir: "chatwizard" +altLangPage: "chatwizard-fr.html" +dateModified: "2024-09-11" +script: + - ../../méli-mélo-demos/2025-04-nahanni/2025-04-nahanni.js +css: + - ../../méli-mélo-demos/2025-04-nahanni/2025-04-nahanni.css +--- + +{% include alert-provisional.html %} + + + + +

Below is the code to achieve the demo on this page with an HTML form.

+
<section class="provisional wb-chtwzrd hidden">
+	<h2 data-wb-chtwzrd-replace="I can help you find the information you need">Help us help you</h2>
+	<form class="mrgn-bttm-xl" action="https://google.ca" method="GET">
+		<p class="wb-chtwzrd-greetings">Hi! I can help you find resources that are available to help you in your quest to find information.</p>
+		<p>If you just want to surf the internet, go to <a href="https://google.ca">Google search</a></p>
+		<fieldset id="q1">
+			<legend>It would help me out if I knew a little more about you. Are you ready?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="ask" value="yes" data-wb-chtwzrd-next="q2" />
+						<span>Yes</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="ask" value="no" data-wb-chtwzrd-next="none" />
+						<span>No</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="ask" value="skip" data-wb-chtwzrd-next="q3" />
+						<span>Go straight to the point</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<fieldset id="q2">
+			<legend>Do you have a preferred language?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="preference" value="yes" data-wb-chtwzrd-next="q3" />
+						<span>Of course</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="preference" value="" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/home.html" />
+						<span>No</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<fieldset id="q3">
+			<legend>Which one is it?</legend>
+			<ul class="list-unstyled mrgn-tp-md">
+				<li>
+					<label>
+						<input type="radio" name="lang" value="en" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/en.html" />
+						<span>English</span>
+					</label>
+				</li>
+				<li>
+					<label>
+						<input type="radio" name="lang" value="fr" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/fr.html" />
+						<span>Français</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
+		<p class="wb-chtwzrd-farewell wb-inv">Thank you! Your personalized results are ready for you.</p>
+		<div class="mrgn-tp-md"></div>
+		<button type="submit" class="btn btn-sm btn-primary" data-wb-chtwzrd-replace="Show results">Search</button>
+	</form>
+</section>
+ + diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.css" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.css" new file mode 100644 index 0000000000..89d591f6f7 --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.css" @@ -0,0 +1,429 @@ +/* + * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) + * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * Chat wizard - Provisional CSS + * + * ++++++++ + * This is a Provisional CSS, once stabilized it's include should be done from the theme.scss instead of _provisional.scss + * ++++++++ + * + */ + +/* Animations */ +@keyframes slideInFromRight { + 0% { + transform: scale(0, 1); + } + 95% { + transform: scale(0, 1); + } + 100% { + transform: scale(1, 1); + } +} + +@keyframes pulseIn { + 0% { + transform: scale(1, 1); + } + 15% { + transform: scale(1.15, 1.15); + } + 30% { + transform: scale(1, 1); + } + 65% { + transform: scale(1.3, 1.3); + } + 100% { + transform: scale(1, 1); + } +} + +@keyframes grow { + to { + transform: translateX(-50%) scale(0); + } +} + +.trans-left { + animation-delay: 0s; + animation-duration: 5s; + animation-iteration-count: 1; + animation-name: slideInFromRight; + animation-timing-function: ease-out; + transform-origin: 100% 50%; + will-change: scroll-position; +} + +.trans-pulse { + animation: .5s linear 3.5s 1 pulseIn, .5s linear 15s 1 pulseIn, .5s linear 30s 1 pulseIn; + will-change: transform; +} + +.loader-typing { + bottom: 30%; + height: 6px; + left: 30px; + position: absolute; + transform: translateX(-50%) translateY(-50%); + width: 26px; +} + +.loader-dot { + animation: grow .5s ease-in-out infinite alternate; + background-color: #444; + border-radius: 50%; + height: 6px; + position: absolute; + width: 6px; + will-change: transform; +} + +.loader-dot.dot1 { + left: 0; + transform-origin: 100% 50%; +} + +.loader-dot.dot2 { + animation-delay: .1s; + left: 50%; + margin-left: -3px; + transform: scale(.99); +} + +.loader-dot.dot3 { + animation-delay: .2s; + right: 0; +} + +/* Chat wizard Bubble */ +.wb-chtwzrd-bubble-wrap { + bottom: 30px; + height: 60px; + position: fixed; + right: 30px; + width: 60px; + z-index: 1049; +} + +.wb-chtwzrd-bubble-wrap p { + background: #335075; + border-bottom-left-radius: 25px; + border-top-left-radius: 25px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .45); + color: #fff; + font-size: 14px; + line-height: 20px; + min-height: 50px; + padding: 5px 37.5px 5px 27.5px; + position: relative; + right: 195px; + top: 5px; + width: 225px; +} + +.wb-chtwzrd-bubble-wrap p .notif-close { + background: #333; + border-radius: 50%; + color: #fff; + font-size: 19px; + height: 1.25em; + line-height: 21px; + position: absolute; + right: 92.5%; + text-align: center; + text-decoration: none; + top: 0; + width: 1.25em; +} + +.wb-chtwzrd-bubble-wrap .notif { + cursor: pointer; +} + +.wb-chtwzrd-bubble-wrap .bubble { + background: #fff url("https://www.canada.ca/content/dam/servcan/default-avatar.png") center no-repeat; + border-radius: 50%; + bottom: 0; + box-shadow: 0 2px 4px rgba(0, 0, 0, .45); + height: 100%; + overflow: hidden; + position: absolute; + right: 0; + text-indent: -9999px; + white-space: nowrap; + width: 100%; + z-index: 1048; +} + +.wb-chtwzrd-bubble-wrap .bubble:focus { + border: 1px solid rgba(0, 0, 0, .5); + box-shadow: 0 2px 3px rgba(0, 0, 0, .7); +} + +.wb-chtwzrd-btn-extrnl + .wb-chtwzrd-bubble-wrap { + display: none !important; +} + +/* Chat Wizard */ +.wb-disable .wb-chtwzrd.hidden { + display: block !important; +} + +.wb-chtwzrd-container { + background-color: #fff; + bottom: 20px; + display: none; + font-size: .9em; + min-height: 200px; + overflow: hidden; + position: fixed; + right: 20px; + width: 25%; + z-index: 1050; +} + +.wb-chtwzrd-container .header { + max-height: 70px; + min-height: 39px; + padding-right: 84px; +} + +.wb-chtwzrd-container .header .title { + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + display: -webkit-box; + font-size: 19px; + line-height: 1.35; + overflow: hidden; + padding: 6px 0; + text-overflow: ellipsis; +} + +.wb-chtwzrd-container .minimize, .wb-chtwzrd-container .reset { + -webkit-appearance: none; + background: transparent; + border: 0; + color: #fff; + filter: alpha(opacity=65); + font-size: 1em; + font-weight: 700; + height: 40px; + line-height: 41px; + margin: 0; + opacity: .65; + overflow: visible; + padding: 0; + position: absolute; + right: 0; + text-decoration: none; + top: 0; + width: 40px; +} + +.wb-chtwzrd-container .reset { + right: 42px; +} + +.wb-chtwzrd-container .minimize:focus, .wb-chtwzrd-container .reset:focus { + opacity: 1; + outline: 1px dotted #fff; + outline-offset: -2px; +} + +.wb-chtwzrd-container .conversation { + margin-bottom: 15px; + max-height: 45vh; + min-height: 200px; + overflow-x: hidden; + overflow-y: auto; +} + +.wb-chtwzrd-container .history { + padding-top: 15px; +} + +.wb-chtwzrd-container .history::before { + background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), to(rgba(255, 255, 255, 0))); + background: linear-gradient(to bottom, #fff 20%, rgba(255, 255, 255, 0) 100%); + content: ""; + height: 40px; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; + z-index: 1054; +} + +.wb-chtwzrd-container .controls { + height: 75px; +} + +.wb-chtwzrd-container .inputs-zone fieldset:first-child { + border-top: 1px solid #e5e5e5; +} + +.wb-chtwzrd-container .inputs-zone ul:last-child { + margin-bottom: 0; +} + +.wb-chtwzrd-container .choices input[type=radio]:checked + span { + color: #333; +} + +.wb-chtwzrd-container h4, +.wb-chtwzrd-container legend, +.wb-chtwzrd-container h4 .question a { + font-size: 1em; + line-height: 1.4375; +} + +.wb-chtwzrd-container .question, +.wb-chtwzrd-container .message, +.wb-chtwzrd-container label, +.wb-chtwzrd-container .question { + border-radius: 15px; + color: #5a5a5a; + font-weight: normal; + padding: 8px 12px; + width: auto; +} + +.wb-chtwzrd-container .question { + background-color: #efefef; + min-width: 60px; + position: relative; +} + +.wb-chtwzrd-container .message:focus { + box-shadow: 0 0 4px #666; +} + +.wb-chtwzrd-container .message, +.wb-chtwzrd-container label { + background-color: #ddd; +} + +.wb-chtwzrd-container .message { + margin-right: 15px; +} + +.wb-chtwzrd-container label { + border: 1px solid #c1c1c1; + font-weight: bold; + padding: 6px 10px; +} + +.wb-chtwzrd-container .avatar, +.wb-chtwzrd-container .question { + display: table-cell; + vertical-align: middle; +} + +.wb-chtwzrd-container .avatar { + background-color: #fff; + background-image: url("https://www.canada.ca/content/dam/servcan/default-avatar.png"); + background-position: center; + background-repeat: no-repeat; + background-size: 25px; + height: 30px; + width: 30px; +} + +.wb-chtwzrd-container .basic-link { + min-height: inherit; +} + +.wb-chtwzrd-mrgn { + margin-top: 80px; +} + +.wb-chtwzrd-container legend:focus { + outline: 1px dotted #666; +} + +/* Chat wizard inline (full-screen) */ +.wb-chtwzrd-contained { + bottom: 0; + box-shadow: none; + margin: 30px auto; + position: static; + right: 0; + width: 100%; +} + +.wb-chtwzrd-contained .conversation { + max-height: 70vh; +} + +.wb-chtwzrd-contained .minimize { + display: none; +} + +.wb-chtwzrd-contained .reset { + right: 0; +} + +/* Chat wizard Media queries */ +@media screen and (max-width: 1199px) { + .wb-chtwzrd-container { + width: 35%; + } +} + +@media screen and (max-width: 992px) { + .wb-chtwzrd-container { + width: 45%; + } +} + +@media screen and (max-width: 768px) { + .wb-chtwzrd-bubble-wrap { + right: 10px; + } + .wb-chtwzrd-container { + bottom: 0; + height: 100%; + margin: 0; + padding: 0; + right: 0; + width: 100%; + } + .wb-chtwzrd-container .body { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + height: 100%; + padding-bottom: 75px; + width: 100%; + } + .wb-chtwzrd-container .conversation { + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + max-height: none; + min-height: 2em; + } + .wb-chtwzrd-container .controls { + -ms-flex-negative: 0; + flex-shrink: 0; + height: 75px; + } + .wb-chtwzrd-noscroll { + overflow: hidden !important; + } + .wb-chtwzrd-bubble-wrap p .notif-close { + font-size: 2em; + height: 35px; + line-height: 1.1em; + right: 90%; + width: 35px; + } + .wb-chtwzrd-contained .body { + padding-bottom: 10px; + } +} diff --git "a/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.js" "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.js" new file mode 100644 index 0000000000..13e4cad712 --- /dev/null +++ "b/m\303\251li-m\303\251lo/2024-09-chatwizard/chatwizard.js" @@ -0,0 +1,830 @@ +/** + * @title WET-BOEW Chat Wizard plugin container + * @overview Plugin used to translate a form into a conversational form, hence a Chat Wizard + * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * @author @gormfrank + */ +( 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 = "wb-chtwzrd", + selector = "." + componentName, + replacement = componentName + "-replace", + initEvent = "wb-init" + selector, + $document = wb.doc, + datainput = {}, + timeValues = {}, + waitingForAnswer, + formType, + isInline, + isNotif, + redirurl, + first, + intro, + current, + waitTimeout, + inputsTimeout, + sendButton, + i18nDict = { + en: { + "chtwzrd-send": "Send reply and continue", + "chtwzrd-reset": "Restart from the beginning", + "chtwzrd-toggle": "Switch to wizard", + "chtwzrd-notification": "Close chat notification", + "chtwzrd-open": "Open chat wizard", + "chtwzrd-minimize": "Minimize chat wizard", + "chtwzrd-history": "Conversation history", + "chtwzrd-reply": "Reply", + "chtwzrd-controls": "Controls", + "chtwzrd-toggle-basic": "Switch to basic form", + "chtwzrd-waiting": "Waiting for message", + "chtwzrd-answer": "You have answered:" + }, + fr: { + "chtwzrd-send": "Envoyer la réponse et continuer", + "chtwzrd-reset": "Recommencer depuis le début", + "chtwzrd-toggle": "Basculer vers l'assistant", + "chtwzrd-notification": "Fermer la notification de discussion", + "chtwzrd-open": "Ouvrir l'assistant de discussion", + "chtwzrd-minimize": "Réduire l'assistant de discussion", + "chtwzrd-history": "Historique de discussion", + "chtwzrd-reply": "Répondre", + "chtwzrd-controls": "Contrôles", + "chtwzrd-toggle-basic": "Basculer vers le formulaire", + "chtwzrd-waiting": "En attente d'un message", + "chtwzrd-answer": "Vous avez répondu :" + } + }, + + /** + * @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 ); + + fireChtwzrd( $elm ); + + // Identify that initialization has completed + wb.ready( $elm, componentName ); + } + }, + + /** + * Prepare initiation depending on the input type, wether it's JSON or a form + * @method fireChtwzrd + * @param {jQuery DOM element} $selector Element to which the wizard will be appended + */ + fireChtwzrd = function( $selector ) { + + // Grab JSON File, parse and create + if ( $selector.data( componentName + "-src" ) ) { + var data = $selector.data( componentName + "-src" ); + $.getJSON( data, function( json ) { + datainput = json; + buildBasicForm( $selector, datainput ); + initiateChtwzrd( $selector ); + } ); + + // Start from a form on the page + } else { + datainput = convertToObject( $selector ); + initiateChtwzrd( $selector ); + } + }, + + /** + * Initiate chat wizard experience + * @method initiateChtwzrd + * @param {jQuery DOM element} $selector Element to which the wizard will be appended + */ + initiateChtwzrd = function( $selector ) { + + // Check for local storage if we need to show notification + isNotif = localStorage.getItem( "wb-chtwzrd-notif" ); + + // Prevent on load flick and identify basic form + $selector.removeClass( "hidden wb-inv" ).addClass( componentName + "-basic" ); + + // Initiate default values + timeValues = { + shortDelay: 500, + mediumDelay: 750, + longDelay: 1250, + xLongDelay: 2000, + xxLongDelay: 2500 + }; + waitingForAnswer = false; + first = datainput.header.first; + intro = ( datainput.header.instructions ? datainput.header.instructions : "" ); + redirurl = datainput.header.defaultDestination; + current = datainput.questions[ first ]; + formType = datainput.header.formType ? datainput.header.formType : "dynamic"; + isInline = datainput.header.inline ? true : false; + + // Initiate dictionary + i18nDict = i18nDict[ $( "html" ).attr( "lang" ) || "en" ]; + i18nDict = { + send: i18nDict[ "chtwzrd-send" ], + reset: i18nDict[ "chtwzrd-reset" ], + toggle: i18nDict[ "chtwzrd-toggle" ], + notification: i18nDict[ "chtwzrd-notification" ], + trigger: i18nDict[ "chtwzrd-open" ], + minimize: i18nDict[ "chtwzrd-minimize" ], + conversation: i18nDict[ "chtwzrd-history" ], + reply: i18nDict[ "chtwzrd-reply" ], + controls: i18nDict[ "chtwzrd-controls" ], + toggleBasic: i18nDict[ "chtwzrd-toggle-basic" ], + waiting: i18nDict[ "chtwzrd-waiting" ], + answer: i18nDict[ "chtwzrd-answer" ] + }; + + // Build chat wizard + buildChtwzrd( $selector, datainput.header.title ); + + // All the commonly used elements + var $basic = $( selector + "-basic" ), + $bubble = $( selector + "-bubble-wrap" ), + $externalBtn = $( selector + "-btn" ), + $container = $( selector + "-container" ), + $form = $( ".body", $container ), + $conversation = $( ".history", $container ), + $minimize = $( ".minimize", $container ), + $reset = $( ".reset", $container ), + $basiclink = $( ".basic-link", $container ), + $focusedBeforechtwzrd, + $firstTabStop = $reset, + $lastTabStop = $basiclink; + + // Initiate basic form + initiateBasicForm( $basic ); + + // Initiate chat wizard bubble + initiateBubble( $bubble ); + + // Initiate chat wizard external btn + initiateExternalButton( $externalBtn ); + + // Show basic form and hide chat wizard + $basiclink.on( "click", function( event ) { + event.preventDefault(); + + var $legendFocus = $( "legend:first", $basic ); + $legendFocus.attr( "tabindex", "0" ); + + $conversation.attr( "aria-live", "" ); + toggleExperience( $basic, "form" ); + + $container.stop().hide(); + $basic.stop().show( function() { + $legendFocus.focus(); + $legendFocus.removeAttr( "tabindex" ); + } ); + + $( "body" ).removeClass( componentName + "-noscroll" ); + } ); + + // Show chat wizard and hide basic form + $( selector + "-link" ).on( "click", function( event ) { + event.preventDefault(); + + $basic.stop().hide(); + $focusedBeforechtwzrd = $( ":focus" ); + + if ( !$( this ).hasClass( componentName + "-bubble" ) ) { + toggleExperience( $container, "wizard" ); + } + $( ".bubble", $bubble ).removeClass( "trans-pulse" ); + $( "p", $bubble ).hide().removeClass( "trans-left" ); + + $container.stop().show(); + $bubble.stop().hide(); + + $externalBtn.prop( "disabled", true ); + + if ( !isInline ) { + $( "body" ).addClass( componentName + "-noscroll" ); + } + if ( $conversation.length ) { + $( ".conversation", $container ).scrollTop( $conversation[ 0 ].scrollHeight ); + } + if ( !waitingForAnswer ) { + appendInteraction( $form ); + } + + // Do not show notification on next load + localStorage.setItem( "wb-chtwzrd-notif", 1 ); + } ); + + // External btn event handler + $( selector + "-btn" ).on( "click", function( event ) { + event.preventDefault(); + + $externalBtn.prop( "disabled", true ); + + $basic.stop().hide(); + $focusedBeforechtwzrd = $( ":focus" ); + + toggleExperience( $container, "wizard" ); + + $container.stop().show(); + $bubble.stop().hide(); + $container.find( ":focusable" ).first().focus(); + + if ( !isInline ) { + $( "body" ).addClass( componentName + "-noscroll" ); + } + if ( $conversation.length ) { + $( ".conversation", $container ).scrollTop( $conversation[ 0 ].scrollHeight ); + } + if ( !waitingForAnswer ) { + appendInteraction( $form ); + } + } ); + + // If inline, do not trap user with keyboard + if ( isInline ) { + $( selector + "-link" ).click(); + } else { + + // Listen for and trap the keyboard + $container.on( "keydown", function( event ) { + + // Check for TAB key press, cycle through + if ( event.keyCode === 9 ) { + if ( event.shiftKey ) { + if ( $firstTabStop.is( ":focus" ) ) { + event.preventDefault(); + $lastTabStop.focus(); + } + } else { + if ( $lastTabStop.is( ":focus" ) ) { + event.preventDefault(); + $firstTabStop.focus(); + } + } + } + + // ESCAPE, close + if ( event.keyCode === 27 ) { + $minimize.click(); + } + } ); + } + + // On chat button pressed: append answer, and on submit: redirect + $document.on( "click", selector + "-container .btn-send", function( event ) { + + if ( $( this ).attr( "type" ) !== "submit" ) { + event.preventDefault(); + var $choiceselected = $( "input:checked", $form ); + if ( !$choiceselected.length ) { + $choiceselected = $( "input:first", $form ); + $choiceselected.attr( "checked", true ); + } + appendReply( $form, cookAnswerObj( $choiceselected ), false ); + } + } ); + + // On chat reset button pressed: toggle experience to wizard + $reset.on( "click", function( event ) { + event.preventDefault(); + toggleExperience( $( selector + "-container" ), "wizard" ); + } ); + + // Minimize chat wizard + $minimize.on( "click", function( event ) { + event.preventDefault(); + $container.stop().hide(); + + $externalBtn.prop( "disabled", false ); + $bubble.stop().show(); + + $( "body" ).removeClass( componentName + "-noscroll" ); + + // Set focus back to element that had it before the modal was opened + $focusedBeforechtwzrd.focus(); + } ); + }, + + /** + * Initiate basic form + * @method initiateBasicForm + * @param {jQuery DOM element} $selector Element to which the basic form will be appended + */ + initiateBasicForm = function( $selector ) { + var $basicForm = $( "form", $selector ), + $allQuestions = $( "fieldset", $selector ), + $firstQuestion = $allQuestions.first(); + + if ( formType === "dynamic" ) { + $firstQuestion.addClass( componentName + "-first-q" ); + $allQuestions.not( selector + "-first-q" ).hide(); + } + + // Hide and restart fresh on reload + $selector.hide(); + $( "input", $basicForm ).prop( "checked", false ); + + // Add link to chat from the basic form + $basicForm.append( "" ); + + // On input change in the basic form + $( "input", $basicForm ).on( "change", function() { + var answerData = cookAnswerObj( $( this ) ), + $qNext = $( "#" + answerData.qNext, $basicForm ); + + // Dynamically append next question on checked + if ( formType === "dynamic" ) { + var $fieldset = $( this ).closest( "fieldset" ); + if ( $qNext.is( ":hidden" ) || $fieldset.next().attr( "id" ) !== $qNext.attr( "id" ) || answerData.qNext === "none" ) { + $fieldset.nextAll( "fieldset" ).hide().find( "input" ).prop( "checked", false ); + } + if ( answerData.qNext !== "none" ) { + $( "#" + answerData.qNext ).show(); + } + if ( answerData.url !== "" ) { + $basicForm.attr( "action", answerData.url ); + } + } + } ); + }, + + /** + * Initiate chat wizard bubble + * @method initiateBubble + * @param {jQuery DOM element} $selector Element which is the actual bubble + */ + initiateBubble = function( $selector ) { + var $footer = $( "#wb-info" ), + $link = $( selector + "-link", $selector ); + + // Change to custom avatar if provided + if ( datainput.header.avatar ) { + $link.css( "background-image", "url(" + datainput.header.avatar + ")" ); + } + + // Hide basic form on load, show chat bubble instead + $selector.fadeIn( "slow" ); + + // Add some white space over the footer for the bubble to sit + $footer.addClass( componentName + "-mrgn" ); + + // Ensure that the bubble does not go passed the footer + if ( $footer.length ) { + + // Keep the bubble sticky while scrolling Y until user reaches the footer + var stickyUntilFooter = function( $element ) { + + // Equals to bubble default bottom value in CSS + var bottomY = 30; + + if ( $( window ).scrollTop() >= $( document ).outerHeight() - $( window ).outerHeight() - $footer.outerHeight() ) { + $element.css( { + bottom: ( $footer.outerHeight() - ( $( document ).outerHeight() - $( window ).outerHeight() - $( window ).scrollTop() ) + bottomY ) + } ); + } else { + $element.css( { + bottom: bottomY + } ); + } + }; + + // Correct bubble positionning on load, on resize an on Y scroll if necessary + stickyUntilFooter( $selector ); + + $( window ).on( "resize scroll", function() { + stickyUntilFooter( $selector ); + } ); + } + + // Open Chat from the notification message + $( ".notif", $selector ).on( "click", function() { + $link.click(); + } ); + + // Close notification aside bubble + $( ".notif-close", $selector ).on( "click", function( event ) { + event.preventDefault(); + $( this ).parent().hide(); + $selector.focus(); + + // Do not show notification on next load + localStorage.setItem( "wb-chtwzrd-notif", 1 ); + } ); + }, + + /** + * Initiate chat wizard external button + * @method initiateExternalButton + * @param {jQuery DOM element} $selector Element which is the actual external button + */ + initiateExternalButton = function( $selector ) { + $selector.attr( "aria-controls", componentName + "-container" ); + }, + + /** + * Convert Data attributes from the form and return a Javascript Object + * @method convertToObject + * @param {jQuery DOM element} $selector Basic from which the wizard will be created + * @returns {Object} Data used by the wizard for the experience + */ + convertToObject = function( $selector ) { + var $form = $( "form", $selector ), + $title = $( "h2", $selector ).first(), + $intro = $( "p:not(" + selector + "-greetings):not(" + selector + "-farewell)", $form ).first(), + btnClassName = "btn-former-send", + header = {}, + questions = {}, + $questions = $( "fieldset", $selector ); + + header = ( typeof $selector.data( componentName ) !== undefined && $selector.data( componentName ) ? $selector.data( componentName ) : {} ); + + header.inline = $selector.hasClass( "wb-chtwzrd-inline" ); + header.avatar = $selector.data( componentName + "-avatar" ); + + header.defaultDestination = $form.attr( "action" ); + header.name = $form.attr( "name" ); + header.method = $form.attr( "method" ); + + header.form = {}; + + header.form.title = $title.html(); + header.title = replaceForWizard( $title, header.form.title ); + + header.greetings = $( "p" + selector + "-greetings", $form ).html(); + header.farewell = $( "p" + selector + "-farewell", $form ).html(); + + header.form.sendButton = ( $( "input[type=submit]", $form ).length ? $( "input[type=submit]", $form ).addClass( btnClassName ).val() : $( "button[type=submit]", $form ).addClass( btnClassName ).html() ); + header.sendButton = replaceForWizard( $( "." + btnClassName, $form ), header.form.sendButton ); + + if ( $intro.length ) { + header.form.instructions = $intro.html(); + header.instructions = replaceForWizard( $intro, header.form.instructions ); + } + + + header.first = header.first || $questions.first().attr( "id" ); + + $questions.each( function() { + var $this = $( this ), + $label = $( "legend", $this ), + $choices = $( "label", $this ), + questionID = this.id, + qInput = ( $( "input[type=radio]", $this ).length ? "radio" : "checkbox" ), + choices = [], + qName = "", + theQuestion = {}; + + $choices.each( function( index ) { + var $choice = $( "input", $( this ) ), + choice = {}, + name = $choice.attr( "name" ), + action = $choice.data( componentName + "-url" ), + textval = $choice.siblings( "span:not(.no-" + componentName + ")" ).html(); + + if ( !index ) { + qName = name; + } + choice.content = textval; + choice.value = $choice.val(); + choice.next = $choice.data( componentName + "-next" ); + if ( typeof action !== undefined && action ) { + choice.url = action; + } + choices.push( choice ); + } ); + + theQuestion.name = qName; + theQuestion.input = qInput; + theQuestion.formLabel = $label.html(); + theQuestion.label = replaceForWizard( $label, theQuestion.formLabel ); + theQuestion.choices = choices; + + questions[ questionID ] = theQuestion; + + } ); + return { + header: header, + questions: questions + }; + }, + + /** + * Build the chat wizard skeleton + * @method buildChtwzrd + * @param {jQuery DOM element} $selector Element to which the wizard will be appended + * @param {String} title The title of the wizard window, as well as the notification + */ + buildChtwzrd = function( $selector, title ) { + $selector.after( "
" + i18nDict.trigger + "" + + ( !isNotif ? "

" + title + " ×

" : "" ) + + "
" ); + $selector.next( selector + "-bubble-wrap" ).after( "" ); + + var $container = $( selector + "-container" ); + $container.append( + "

" + + title + "

" + + "
" ); + $container.append( "
" ); + + var $form = $( ".body", $container ); + $form.append( "

" + i18nDict.conversation + "

" + i18nDict.reply + "

" ); + $form.append( + "

" + + i18nDict.controls + "

" + + i18nDict.toggleBasic + "
" ); + + $form.attr( "name", datainput.header.name + "-chat" ); + $form.attr( "method", datainput.header.method ); + sendButton = $( ".btn-send ", $form ).html(); + }, + + /** + * Build Basic Form from JSON + * @method buildBasicForm + * @param {jQuery DOM element} $selector Element to which the form will be appended + * @param {Object} data Data used by the form to build itself + */ + buildBasicForm = function( $selector, data ) { + $selector.html( "" ); + + var h2 = "

" + data.header.title + "

", + intro = "

" + data.header.instructions + "

", + btn = ">" + data.header.sendButton + ""; + + if ( typeof data.header.form.title !== undefined ) { + h2 = "

" + data.header.form.title + "

"; + } + $selector.append( h2 + "
" ); + + var $basicForm = $( "form", $selector ); + + if ( typeof data.header.form.instructions !== undefined ) { + intro = "

" + data.header.form.instructions + "

"; + } + $basicForm.append( "

" + data.header.greetings + "

" + intro ); + + $.each( data.questions, function( key, value ) { + var randID = wb.getId(), + legend = "" + value.label + ""; + + if ( typeof value.formLabel !== undefined && value.formLabel ) { + legend = "" + value.formLabel + ""; + } + + $basicForm.append( "
" + legend + "
    " ); + + var $thisQ = $( "." + randID, $basicForm ); + + $.each( value.choices, function( index, ivalue ) { + randID = wb.getId(); + $( "ul", $thisQ ).append( "