chore: change from delayed flow to include consent

blocks/fragment/fragment.js

@@ -4,7 +4,7 @@
  * https://www.aem.live/developer/block-collection/fragment
  */
 
 import {
   decorateMain,
 } from '../../scripts/scripts.js';
 
@@ -24,12 +24,19 @@
       const main = document.createElement('main');
       main.innerHTML = await resp.text();
 
+      /* remove paths of self references */
+      const { pathname } = new URL(path, window.location);
+      main.querySelectorAll(`a[href^="${pathname}#"]`).forEach((a) => {
+        a.href = `#${a.href.split('#')[1]}`;
+      });
+
       // reset base path for media to fragment base
       const resetAttributeBase = (tag, attr) => {
         main.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((elem) => {
           elem[attr] = new URL(elem.getAttribute(attr), new URL(path, window.location)).href;
         });
       };
+
       resetAttributeBase('img', 'src');
       resetAttributeBase('source', 'srcset');
 

scripts/consent.js

@@ -0,0 +1,79 @@
+/**
+ * Handles consent, including the loading of consented.js
+ * where needed.
+ *
+ * Dispatches `consent` event on document on change
+ */
+
+// eslint-disable-next-line import/no-cycle
+import { loadFragment } from '../blocks/fragment/fragment.js';
+
+/* create button helper */
+function createButton(text, clickHandler, style, label) {
+  const button = document.createElement('button');
+  button.textContent = text;
+  if (style) button.className = style;
+  if (label) button.ariaLabel = label;
+  button.addEventListener('click', clickHandler);
+  return button;
+}
+
+/* display consent banner */
+export async function displayConsentBanner() {
+  const consentBanner = (await loadFragment('/drafts/uncled/consent-banner')).firstElementChild;
+
+  const bannerClose = new Promise((resolve) => {
+    const dialog = document.createElement('dialog');
+
+    const storeAndClose = (status) => {
+      localStorage.setItem('consentStatus', status);
+      dialog.remove();
+      resolve(status);
+      document.dispatchEvent(new CustomEvent('consent', { detail: { consentStatus: status } }));
+      const loc = window.location;
+      if (loc.hash === '#consent') window.history.pushState({}, null, `${loc.pathname}${loc.search}`);
+    };
+
+    const close = () => { storeAndClose('declineAll'); };
+    const accept = () => { storeAndClose('acceptAll'); };
+    const decline = () => { storeAndClose('declineAll'); };
+
+    const config = consentBanner.dataset;
+    dialog.id = 'consent-banner';
+    dialog.append(consentBanner);
+    const buttons = document.createElement('span');
+    buttons.className = 'consent-banner-buttons';
+    if (config.accept) buttons.append(createButton(config.accept, accept));
+    if (config.decline) buttons.append(createButton(config.decline, decline, 'secondary'));
+    if (config.close) buttons.append(createButton('\u2715', close, 'consent-banner-close', config.close));
+    dialog.append(buttons);
+    document.body.append(dialog);
+    dialog.show();
+  });
+
+  return bannerClose;
+}
+
+/* main consent handler */
+export default async function handleConsent() {
+  const mapStatus = (consentStatus) => {
+    if (consentStatus === 'declineAll') return false;
+    return true;
+  };
+
+  document.addEventListener('consent', (e) => {
+    if (mapStatus(e.detail.consentStatus)) import('./consented.js');
+  });
+
+  const consentStatus = localStorage.getItem('consentStatus');
+
+  if (consentStatus === null) {
+    return mapStatus(await displayConsentBanner());
+  }
+
+  window.addEventListener('hashchange', (e) => {
+    if (new URL(e.newURL).hash === '#consent') displayConsentBanner();
+  });
+
+  return mapStatus(consentStatus);
+}

scripts/consented.js

@@ -0,0 +1,5 @@
+// add tag management code here, marketing or advertising functionality
+// this file is gated by consent
+
+// eslint-disable-next-line no-console
+console.log('loading consented.js');

scripts/scripts.js

@@ -116,20 +116,15 @@
   sampleRUM.observe(main.querySelectorAll('picture > img'));
 }
 
-/**
- * Loads everything that happens a lot later,
- * without impacting the user experience.
- */
-function loadDelayed() {
-  // eslint-disable-next-line import/no-cycle
-  window.setTimeout(() => import('./delayed.js'), 3000);
-  // load anything that can be postponed to the latest here
+async function handleConsent() {
+  const mod = await import('./consent.js');
+  return mod.default();
 }
 
 async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
-  loadDelayed();
+  handleConsent();
 }
 
 loadPage();

styles/lazy-styles.css

@@ -1 +1,42 @@
 /* add global styles that can be loaded post LCP here */
+
+dialog#consent-banner {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background-color: var(--light-color);
+    max-width: 600px;
+    padding: 16px;
+    padding-right: 40px;
+    font-size: var(--body-font-size-xs);
+    margin: 16px;
+    border-radius: 16px;
+    border: 0;
+    box-shadow: 3px 3px 10px #0004;
+}
+
+dialog#consent-banner p {
+    margin: 0px;
+}
+
+dialog#consent-banner .consent-banner-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+dialog#consent-banner .consent-banner-buttons button {
+    margin: 8px 0;
+}
+
+dialog#consent-banner .consent-banner-close {
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    right: 16px;
+    top: 12px;
+    border: unset;
+    padding: unset;
+    color: unset;
+    background-color: unset;
+    margin: 0;
+}