Disclaimer modal block (#80)

* Disclaimer modal block * updated based on feedback * fixed linting issues * fixed lint issues * fixing lint issues * fixing lint issues * fixing css linting issues * fixing css lint issues * moved logic to scripts.js * fixing lint issues * fixing lint issues * fixed error with modal * fixed linting issues * removed test cookie * Add some adjustments to the logic. * load css and wrapped modal * Disclaimer modal block * updated based on feedback * fixed linting issues * fixed lint issues * fixing lint issues * fixing lint issues * fixing css linting issues * fixing css lint issues * moved logic to scripts.js * fixing lint issues * fixing lint issues * fixed error with modal * fixed linting issues * removed test cookie * Add some adjustments to the logic. * load css and wrapped modal * Some fixes for CSS and DOM * fix lint. * Do not display modal on lighthouse checks * Update PR Template. * Add space * Space is optional. * look through search string. --------- Co-authored-by: Bryan Stopp <[email protected]> Co-authored-by: Bryan Stopp <[email protected]>
hlxsites · Aug 16, 2023 · 2a07da6 · 2a07da6
1 parent 90d68ef
commit 2a07da6
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 10 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,6 +2,12 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a
 
 Fix #<gh-issue-id>
 
+
+
 Test URLs:
-- Before: https://main--takeda-ihs--hlxsites.hlx.page/
-- After: https://<branch>--takeda-ihs--hlxsites.hlx.page/
+
+Please note, for testing urls, make sure to include the `lighthouse=on` URL parameter to bypass the Modal, and get the correct PSI Score.
+
+
+- Before: https://main--takeda-ihs--hlxsites.hlx.page/?=lighthouse=on
+- After: https://<branch>--takeda-ihs--hlxsites.hlx.page/?lighthouse=on
diff --git a/blocks/disclaimer-modal/disclaimer-modal.css b/blocks/disclaimer-modal/disclaimer-modal.css
@@ -0,0 +1,80 @@
+.disclaimer-modal-container {
+  background-color: var(--black);
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  font-family: var(--body-font-family);
+  padding: 0;
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper {
+  position: relative;
+  display: flex;
+  background-color: var(--black);
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal {
+  width: 90%;
+  max-width: 600px;
+  background-color: var(--white);
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .title h2 {
+  color: var(--white);
+  padding: 30px 38px;
+  margin: 0;
+  background-color: #898989;
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .content p {
+  padding: 30px 38px 40px;
+  margin: 0;
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .button-section {
+  background-color: var(--white);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  padding: 0 38px 40px;
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .button-section p {
+  margin-bottom: 0;
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .button-section .agree p {
+  cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+  background-color: var(--red);
+  color: var(--white);
+  padding: 12px 18px;
+  border-radius: 4px;
+  box-shadow: 3px 3px 7px 1px #0003;
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .button-section .leave a p {
+  text-decoration: underline;
+  color: var(--black);
+  font-weight: var(--font-weight-semibold);
+}
+
+.disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .button-section .agree p:hover {
+  background-color: #c00;
+}
+
+@media screen and (min-width: 600px) {
+  .disclaimer-modal-container .disclaimer-modal-wrapper .disclaimer-modal .button-section {
+    flex-direction: row;
+    justify-content: space-evenly;
+  }
+}
diff --git a/blocks/disclaimer-modal/disclaimer-modal.js b/blocks/disclaimer-modal/disclaimer-modal.js
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -10,7 +10,8 @@ import {
   waitForLCP,
   loadBlocks,
   buildBlock,
-  loadCSS, readBlockConfig,
+  loadCSS,
+  readBlockConfig,
 } from './lib-franklin.js';
 
 import {
@@ -25,6 +26,47 @@ export const BREAKPOINTS = {
 
 const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list
 
+async function decorateDisclaimerModal() {
+  const main = document.querySelector('main');
+  const isModalAccepted = document.cookie.match(/\s*hcpModalDismiss=1;?/) !== null || window.location.search.indexOf('bypassModal') > -1 || window.hlx.lighthouse;
+  const shouldShowModal = !isModalAccepted || (document.location.href.indexOf('?showModal') > -1);
+  if (shouldShowModal) {
+    await loadCSS(`${window.hlx.codeBasePath}/blocks/disclaimer-modal/disclaimer-modal.css`);
+    const response = await fetch('/fragments/disclaimer-modal.plain.html');
+    document.body.style.overflowY = 'hidden';
+    if (response.ok) {
+      const html = await response.text();
+      const tmp = document.createElement('div');
+      tmp.innerHTML = html;
+      const modal = tmp.querySelector('.disclaimer-modal');
+      const config = readBlockConfig(modal);
+      modal.innerHTML = `
+        <div class="title"><h2>${config.title}</h2></div>
+          <div class="content"><p> ${config.content}</p></div>
+          <div class="button-section">
+          <div class="agree"><p> ${config.agree}</p></div>
+          <div class="leave"><a class="link" href=" ${config.link} "> <p>${config.leave} </p></a></div>
+        </div>
+      `;
+      const disclaimerContainer = document.createElement('div');
+      disclaimerContainer.className = 'disclaimer-modal-container';
+      const disclaimerWrapper = document.createElement('div');
+      disclaimerWrapper.className = 'disclaimer-modal-wrapper';
+      disclaimerWrapper.appendChild(modal);
+      disclaimerContainer.appendChild(disclaimerWrapper);
+
+      const acceptButn = modal.querySelector('.agree');
+      acceptButn.addEventListener('click', () => {
+        const CookieDate = new Date();
+        CookieDate.setFullYear(CookieDate.getFullYear() + 5);
+        document.cookie = `hcpModalDismiss=1;path=/;expires=${CookieDate.get()};`;
+        document.body.style.overflowY = null;
+        disclaimerContainer.remove();
+      });
+      main.append(disclaimerContainer);
+    }
+  }
+}
 /**
  * Converts paagraphs that start with a `<sup>` element, to a p.reference paragraph.
  * @param {HTMLElement} main
@@ -109,13 +151,6 @@ function fixDefaultImage(main) {
     picture.parentElement.style.maxWidth = `${img.width}px`;
     picture.parentElement.style.margin = '0 auto 1.5em';
   });
-
-  main.querySelectorAll(':scope .section.image-boxshadow .default-content-wrapper > p > picture').forEach((picture) => {
-    const p = picture.parentElement;
-    if (p.children.length === 1) {
-      p.classList.add('image');
-    }
-  });
 }
 
 /**
@@ -244,6 +279,7 @@ function loadDelayed() {
 }
 
 async function loadPage() {
+  decorateDisclaimerModal();
   await loadEager(document);
   await loadLazy(document);
   loadDelayed();