Minimal non-intrusive Cookie consent block

blocks/cookie-consent/consent-banner.js

@@ -0,0 +1,167 @@
+import {
+  fetchPlaceholders,
+  decorateIcons,
+} from '../../scripts/aem.js';
+
+import { loadFragment } from '../fragment/fragment.js';
+import { buildAndShowDialog } from './consent-dialog.js';
+
+const BASE_CONSENT_PATH = '/block-collection/cookie-consent';
+function addCloseButton(banner) {
+  const closeButton = document.createElement('button');
+  closeButton.classList.add('close-button');
+  closeButton.setAttribute('aria-label', 'Close');
+  closeButton.type = 'button';
+  closeButton.innerHTML = '<span class="icon icon-close"></span>';
+  closeButton.addEventListener('click', () => (banner.close ? banner.close() : banner.remove()));
+  banner.append(closeButton);
+  decorateIcons(closeButton);
+}
+
+function addListeners(bannerDiv, consentUpdateCallback, arrayCategories, categoriesSections) {
+  const acceptAll = bannerDiv.querySelector('.consent.banner .accept');
+  const rejectAll = bannerDiv.querySelector('.consent.banner .decline');
+  const moreInformation = bannerDiv.querySelector('.consent.banner .more-info');
+
+  if (acceptAll) {
+    acceptAll.addEventListener('click', () => {
+      consentUpdateCallback(arrayCategories.map((c) => c.code));
+      bannerDiv.remove();
+    });
+  }
+  if (rejectAll) {
+    rejectAll.addEventListener('click', () => {
+      consentUpdateCallback(arrayCategories.filter((c) => !c.optional)
+        .map((c) => c.code));
+      bannerDiv.remove();
+    });
+  }
+  if (moreInformation && categoriesSections) {
+    moreInformation.addEventListener('click', () => {
+      buildAndShowDialog(categoriesSections, consentUpdateCallback);
+      bannerDiv.remove();
+    });
+  }
+}
+/**
+ * Returns the categories from the banner.
+ * Categories can come from:
+ * the section metadata properties: 'required cookies' and 'optional cookies'
+ * or if categories sections are available from their metadata.
+ * @param {*} bannerSection the section where banner is defined
+ * @param {*} categoriesSections array of sections where categories are defined.
+ * @returns array of categories, where each entry has category code and the optional flag
+ */
+function getCategoriesInBanner(bannerSection, categoriesSections) {
+  // If banner section has metadata about the cookie categories
+  if (bannerSection.getAttribute('data-required-cookies') || bannerSection.getAttribute('data-optional-cookies')) {
+    const categories = [];
+    if (bannerSection.getAttribute('data-required-cookies')) {
+      bannerSection.getAttribute('data-required-cookies').split(',')
+        .map((c) => c.trim())
+        .forEach((c) => categories.push({ code: c, optional: false }));
+    }
+
+    if (bannerSection.getAttribute('data-optional-cookies')) {
+      bannerSection.getAttribute('data-optional-cookies').split(',')
+        .map((c) => c.trim())
+        .forEach((c) => categories.push({ code: c, optional: true }));
+    }
+    return categories;
+  }
+  // Banner section doesn't have metadata about cookie categories,
+  // but the document contains categories sections => extract categories metadata from the sections
+  if (categoriesSections && categoriesSections.length) {
+    return categoriesSections
+      .filter((category) => category.dataset && category.dataset.code && category.dataset.optional)
+      .map((category) => ({ code: category.dataset.code, optional: ['yes', 'true'].includes(category.dataset.optional.toLowerCase().trim()) }));
+  }
+  return [{ code: 'CC_ESSENTIAL', optional: false }];
+}
+
+/**
+ * Creates the consent banner HTML
+ * @param {*} bannerSection the section where banner is defined
+ * @returns HTMLElement of the consent banner div
+ */
+function createBanner(bannerSection) {
+  const content = bannerSection.childNodes;
+  const buttonString = bannerSection.getAttribute('data-buttons') || 'accept_all';
+  const buttonsArray = buttonString.toLowerCase().split(',').map((s) => s.trim());
+  const placeholders = fetchPlaceholders();
+  const div = document.createElement('div');
+  div.classList.add('consent', 'banner');
+  div.append(...content);
+  const acceptAllButton = `<button class="consent-button accept primary">${placeholders.consentAcceptAll || 'Accept All'}</button>`;
+  const rejectAllButton = `<button class="consent-button decline secondary">${placeholders.consentDeclineAll || 'Decline All'}</button>`;
+  const moreInfoLink = `<a class="more-info">${placeholders.moreInformation || 'More Information'}</a>`;
+  if (buttonsArray.includes('more_info')) {
+    div.querySelector('p').append(document.createRange().createContextualFragment(moreInfoLink));
+  }
+  const buttonsHTML = `${buttonsArray.includes('accept_all') ? acceptAllButton : ''}${buttonsArray.includes('deny_all') ? rejectAllButton : ''}`;
+  if (buttonsHTML) {
+    const buttonsDiv = document.createElement('div');
+    buttonsDiv.classList = 'controls';
+    buttonsDiv.innerHTML = buttonsHTML;
+    div.append(buttonsDiv);
+  }
+
+  addCloseButton(div);
+  return div;
+}
+
+function buildAndShowBanner(consentSections, callback) {
+  const bannerSection = consentSections.shift();
+  const bannerElement = createBanner(bannerSection);
+  const categoriesMap = getCategoriesInBanner(bannerSection, consentSections);
+  addListeners(bannerElement, callback, categoriesMap, consentSections);
+  document.querySelector('main').append(bannerElement);
+}
+
+/**
+ * Gets the sections in a consent banner passed fragment.
+ * @param {String} consentName name of the consent banner
+ * @returns Array of sections in the consent banner section
+ */
+async function getSectionsFromConsentFragment(consentName) {
+  const path = `${BASE_CONSENT_PATH}/${consentName}`;
+  const fragment = await loadFragment(path);
+  if (!fragment) {
+    // eslint-disable-next-line no-console
+    console.debug('could not find consent fragment in path ', path);
+    return [];
+  }
+  return [...fragment.querySelectorAll('div.section')];
+}
+
+/**
+ * Shows a non-intrusive consent banner
+ * @param {String} consentName name of the consent banner to show, a document
+ * with that name should exist in the /cookie-consent folder
+ * @param {Function} consentUpdateCallback callback to execute when consent is updated
+ */
+export async function showConsentBanner(consentName, consentUpdateCallback) {
+  const consentSections = await getSectionsFromConsentFragment(consentName);
+  buildAndShowBanner(consentSections, consentUpdateCallback);
+}
+
+/**
+ * Shows the consent for update.
+ * If the consent banner fragment passed as a parameter has detailed consent categories
+ * defined, shows the modal dialog with the categories. If not shows the non-intrusive banner.
+ * @param {String} consentName name of the consent banner fragment to show, a document
+ * with that name should exist in the /cookie-consent folder
+ * @param {Function} consentUpdateCallback callback to execute when consent is updated
+ */
+export async function showConsentBannerForUpdate(consentName, consentUpdateCallback) {
+  const consentSections = await getSectionsFromConsentFragment(consentName);
+  if (consentSections && (consentSections.length > 1)) {
+    // If there are more than one section means that the fragment
+    // has defined cookie category sections
+    // We skip the banner section, and go to the category sections
+    consentSections.shift();
+    buildAndShowDialog(consentSections, consentUpdateCallback);
+  } else {
+    buildAndShowBanner(consentSections, consentUpdateCallback);
+  }
+}

blocks/cookie-consent/consent-dialog.js

@@ -0,0 +1,150 @@
+import {
+  decorateIcons, fetchPlaceholders,
+} from '../../scripts/aem.js';
+
+/**
+ *
+ * @param {String} mode type of consent selected { ALL | NONE | SELECTED }
+ * @param {Element} dialogContainer
+ * @param {*} consentUpdateCallback
+ * @param {*} categoriesMap
+ */
+function consentUpdated(mode, dialogContainer, consentUpdateCallback) {
+  // category list is not passed as a parameter, we get it from the checkboxes
+  const selectedCategories = [...dialogContainer.querySelectorAll('input[type=checkbox][data-cc-code]')]
+    .filter((cat) => mode === 'ALL' || (mode === 'NONE' && cat.disabled) || (mode === 'SELECTED' && cat.checked))
+    .map((cat) => cat.value);
+
+  // invoke the consent update logic
+  consentUpdateCallback(selectedCategories);
+  // close the dialog
+  dialogContainer.remove();
+}
+
+/** FULL DIALOG functions */
+function consentButtonsPanelHTML() {
+  const placeholders = fetchPlaceholders();
+  return document.createRange().createContextualFragment(`
+    <div class='consent-buttons'>
+      <button class="consent-button decline secondary">${placeholders.consentDeclineAll || 'Decline All'}</button>
+      <button class="consent-button accept primary">${placeholders.consentAcceptAll || 'Accept All'}</button>
+    </div>`);
+}
+
+function consentCategoriesButtonsPanelHTML() {
+  const placeholders = fetchPlaceholders();
+  return document.createRange().createContextualFragment(`
+    <div class='consent-buttons-preferences'>
+      <button class="consent-button only-selected primary">${placeholders.consentSavePrefernces || 'Save my preferences'}</button>
+    </div>`);
+}
+
+function categoryHeaderHTML(title, code, optional, selected) {
+  return `
+  <div>
+    <p>${title}</p>
+  </div>
+  <div class="consent-category-switch">
+    <label class="switch">
+      <input type="checkbox" data-cc-code="${code}" value="${code}"
+              ${!optional || selected ? ' checked ' : ''}
+              ${!optional ? 'disabled' : ''}  tabindex=0 />
+      <span class="slider round"></span>
+    </label>
+  </div>`;
+}
+
+function addCloseButton(banner) {
+  const closeButton = document.createElement('button');
+  closeButton.classList.add('close-button');
+  closeButton.setAttribute('aria-label', 'Close');
+  closeButton.type = 'button';
+  closeButton.innerHTML = '<span class="icon icon-close"></span>';
+  closeButton.addEventListener('click', () => (banner.close ? banner.close() : banner.remove()));
+  banner.append(closeButton);
+  decorateIcons(closeButton);
+}
+
+function generateCategoriesPanel(consentSections, selectedCategories) {
+  const placeholders = fetchPlaceholders();
+  const ccCategoriesSection = document.createElement('div');
+  ccCategoriesSection.classList = 'consent-categories-panel';
+  const ccCategoriesDetails = document.createElement('div');
+  ccCategoriesDetails.classList = 'accordion';
+  consentSections.forEach((category) => {
+    const optional = ['yes', 'true'].includes(category.dataset.optional.toLowerCase().trim());
+    const title = category.querySelector('h2') || category.firstElementChild.firstElementChild;
+    const categoryHeader = document.createElement('div');
+    categoryHeader.classList = 'consent-category-header';
+    const selected = selectedCategories && selectedCategories.includes(category.dataset.code);
+    // eslint-disable-next-line max-len
+    categoryHeader.innerHTML = categoryHeaderHTML(title.innerHTML, category.dataset.code, optional, selected);
+
+    const summary = document.createElement('summary');
+    summary.className = 'accordion-item-label';
+    summary.append(categoryHeader);
+
+    // decorate accordion item body
+    const body = document.createElement('div');
+    body.className = 'accordion-item-body';
+    const bodyContent = [...category.firstElementChild.children].slice(1);
+    body.append(...bodyContent);
+
+    // decorate accordion item
+    const details = document.createElement('details');
+    details.className = 'accordion-item';
+    details.append(summary, body);
+    ccCategoriesDetails.append(details);
+    category.remove();
+  });
+
+  const ccCategoriesSectionTitle = document.createElement('div');
+  ccCategoriesSectionTitle.innerHTML = `<h2>${placeholders.consentCookieSettings || 'Cookie Settings'}</h2>`;
+  ccCategoriesSection.append(ccCategoriesSectionTitle);
+  ccCategoriesSection.append(ccCategoriesDetails);
+  ccCategoriesSection.append(consentCategoriesButtonsPanelHTML(placeholders));
+  return ccCategoriesSection;
+}
+
+function addListeners(dialogContainer, consentUpdateCallback) {
+  dialogContainer.querySelector('.consent-button.accept').addEventListener('click', () => consentUpdated('ALL', dialogContainer, consentUpdateCallback));
+  dialogContainer.querySelector('.consent-button.decline').addEventListener('click', () => consentUpdated('NONE', dialogContainer, consentUpdateCallback));
+  dialogContainer.querySelector('.consent-button.only-selected').addEventListener('click', () => consentUpdated('SELECTED', dialogContainer, consentUpdateCallback));
+}
+
+/**
+ * Shows a modal dialog with detail information about the different
+ * categories of cookies the website uses, and enables the users
+ * to select individually the different categories they want to
+ * allow or reject
+ * @param {*} categoriesSections array of div sections containing the categories.
+ * The first section is considered the introduction, the rest are considered
+ * a category of cookies each
+ * @param {Function} consentUpdateCallback callback to invoke when consent is updated
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function buildAndShowDialog(categoriesSections, consentUpdateCallback) {
+  // eslint-disable-next-line max-len
+  const selectedCategories = (window.hlx && window.hlx.consent) ? window.hlx.consent.categories : [];
+  // eslint-disable-next-line object-curly-newline, max-len
+  const infoSection = categoriesSections.shift();
+  infoSection.classList = 'consent-info-panel';
+  infoSection.append(consentButtonsPanelHTML());
+  const ccCategoriesPanel = generateCategoriesPanel(categoriesSections, selectedCategories);
+  const dialog = document.createElement('dialog');
+  const dialogContent = document.createElement('div');
+  dialogContent.classList.add('dialog-content');
+  dialogContent.append(infoSection, ccCategoriesPanel);
+  dialog.append(dialogContent);
+
+  addCloseButton(dialog);
+
+  const dialogContainer = document.createElement('div');
+  dialogContainer.classList = 'consent';
+  dialog.addEventListener('close', () => dialogContainer.remove());
+  document.querySelector('main').append(dialogContainer);
+  dialogContainer.append(dialog);
+
+  addListeners(dialogContainer, consentUpdateCallback);
+  dialog.showModal();
+}