MWPW-140906 Graybox Misc UI Fixes

libs/blocks/graybox/graybox.css

@@ -26,7 +26,7 @@
   width: calc(100% - 15.5px);
   height: 100%;
   border: var(--gb-page-outline-border);
-  z-index: var(--above-all);
+  z-index: calc(var(--above-all) + 1);
   pointer-events: none;
 }
 
@@ -39,25 +39,35 @@
   position: fixed;
 }
 
-.gb-graybox-body .gb-no-click::before {
+.gb-no-click::after {
   content: "";
   height: 100%;
-  pointer-events: all;
+  pointer-events: none;
   position: absolute;
   width: 100%;
   z-index: var(--above-all);
+  left: 0;
+  top: 0;
 }
 
 .gb-no-change {
   position: relative;
 }
 
-.gb-overlay {
-  position: relative;
+.gb-page-overlay {
+  background-color: var(--gb-overlay-color);
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: calc(var(--above-all) - 1);
 }
 
-.gb-graybox-body .gb-no-change::before,
-.gb-graybox-body.gb-overlay::before {
+.gb-no-change::before {
   background-color: var(--gb-overlay-color);
   content: "";
   display: block;
@@ -70,14 +80,10 @@
   z-index: calc(var(--above-all) - 1);
 }
 
-body.gb-overlay::before {
-  position: fixed;
-}
-
 /* The elements that should appear above the overlay */
 .gb-graybox-body .gb-changed {
   position: relative;
-  z-index: var(--above-all);
+  z-index: calc(var(--above-all) - 1);
 }
 
 .graybox-container {
@@ -208,40 +214,44 @@ body.gb-overlay::before {
   position: absolute;
   pointer-events: none;
   width: 859px;
-  height: 1205px;
+  min-height: 1189px;
 }
 
 .dialog-modal.graybox-modal.mobile {
+  min-width: 417px;
   width: 417px;
+  min-height: 863px;
   border-radius: 66px;
   background: var(--gb-modal-bg);
   overflow-y: hidden;
 }
 
 .dialog-modal.graybox-modal.tablet {
-  width: 858px;
+  min-width: 858px;
   border-radius: 66px;
   background: var(--gb-modal-bg);
   border-top-right-radius: 60px 78px;
   border-bottom-right-radius: 51px 69px;
   border-bottom-left-radius: 55px 84px;
   overflow-y: hidden;
+  zoom: 0.8;
+  min-height: 1187px;
 }
 
 .dialog-modal.graybox-modal.mobile iframe {
   width: 391px;
-  height: 852px;
+  min-height: 852px;
   padding-left: 16px;
   margin-left: 4px;
 }
 
 .dialog-modal.graybox-modal.tablet iframe {
-  width: 808px;
-  height: 1194px;
+  width: 814px;
+  height: 1067px;
   padding-left: 26px;
-  margin-left: 6px;
-  margin-top: 62px;
-  margin-bottom: -62px;
+  padding-top: 57px;
+  margin-left: 5px;
+  margin-top: 8px;
 }
 
 .dialog-modal.graybox-modal button.dialog-close {
@@ -253,9 +263,9 @@ body.gb-overlay::before {
   z-index: calc(var(--above-all) - 1);
 }
 
-@media (max-height: 910px) {
+@media (max-height: 910px), (max-width: 420px) {
   body.gb-phone-preview::after {
-    content: "Expand window height to see full preview";
+    content: "Expand window to see full preview";
     position: fixed;
     right: 10px;
     bottom: 2px;
@@ -268,9 +278,9 @@ body.gb-overlay::before {
   }
 }
 
-@media (max-height: 1255px) {
+@media (max-height: 1040px), (max-width: 710px) {
   body.gb-tablet-preview::after {
-    content: "Expand window height to see full preview";
+    content: "Expand window to see full preview";
     position: fixed;
     right: 10px;
     bottom: 2px;

libs/blocks/graybox/graybox.js

@@ -13,8 +13,7 @@ const CLASS = {
   NO_BORDER: 'gb-no-border',
   NO_CHANGE: 'gb-no-change',
   NO_CLICK: 'gb-no-click',
-  NO_OVERLAY: 'gb-no-overlay',
-  OVERLAY: 'gb-overlay',
+  PAGE_OVERLAY: 'gb-page-overlay',
   PHONE_PREVIEW: 'gb-phone-preview',
   TABLET_PREVIEW: 'gb-tablet-preview',
 };
@@ -51,11 +50,11 @@ const isMobileDevice = () => /Android|webOS|iPhone|iPad|iPod/i.test(navigator.us
 const getTableValues = (el) => [...el.childNodes].reduce((rdx, row) => {
   if (!row.children) return rdx;
 
-  const key = row.children[0].textContent?.trim().toLowerCase();
+  const key = row.children[0]?.textContent?.trim().toLowerCase();
   const content = row.children[1];
   let text = content?.textContent.trim();
   /* c8 ignore next 3 */
-  if (key !== 'title' && key !== 'desc') {
+  if (key !== 'title' && key !== 'desc' && text) {
     text = text.toLowerCase();
   }
   if (key && content) {
@@ -76,9 +75,9 @@ const decorateFooter = (footer, options) => {
   if (footerOptions?.includes(OPTION.CHANGED)) {
     footer.classList.add(CLASS.CHANGED);
   } else {
-    footer.classList.add(CLASS.OVERLAY);
+    footer.classList.add(CLASS.NO_CHANGE);
   }
-  if (footerOptions?.includes(OPTION.NO_CLICK)) {
+  if (footerOptions?.includes(OPTION.NO_CLICK) || footerOptions?.includes(CLASS.NO_CLICK)) {
     footer.classList.add(CLASS.NO_CLICK);
   }
 };
@@ -108,15 +107,15 @@ const checkFooter = (options) => {
 const checkGnav = (options, globalNoClick) => {
   const gnav = document.querySelector('.global-navigation');
   if (gnav) {
-    gnav.style.zIndex = '1002';
+    gnav.style.zIndex = '9000';
     const gnavOptions = getOptions(options.gnav?.text, METADATA.GNAV);
     if (!(gnavOptions?.includes(OPTION.CHANGED))) {
-      gnav.classList.add(CLASS.OVERLAY);
+      gnav.classList.add(CLASS.NO_CHANGE);
       if (globalNoClick) {
         gnav.classList.add(CLASS.NO_CLICK);
       }
     }
-    if (gnavOptions?.includes(OPTION.NO_CLICK)) {
+    if (gnavOptions?.includes(OPTION.NO_CLICK) || gnavOptions?.includes(CLASS.NO_CLICK)) {
       gnav.classList.add(CLASS.NO_CLICK);
     }
   }
@@ -128,7 +127,7 @@ const checkNoClick = (grayboxEl, noClickOnGray) => {
     return;
   }
   /* c8 ignore next 6 */
-  if (document.body.classList.contains(CLASS.OVERLAY)) {
+  if (document.body.classList.contains(CLASS.NO_CHANGE)) {
     document.body.classList.add(CLASS.NO_CLICK);
   } else {
     document.querySelectorAll(`.${CLASS.NO_CHANGE}`)
@@ -153,9 +152,13 @@ function setUserAgent(window, userAgent) {
   }
 }
 
+// eslint-disable-next-line no-promise-executor-return
+const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
+
 const openDeviceModal = async (e) => {
   if (deviceModal) {
     closeModal(deviceModal);
+    await sleep(300);
     deviceModal = null;
   }
 
@@ -239,6 +242,57 @@ const createGrayboxMenu = (options, { isOpen = false } = {}) => {
   }
 };
 
+const addPageOverlayDiv = () => {
+  const overlayDiv = createTag('div', { class: CLASS.PAGE_OVERLAY });
+  document.body.insertBefore(overlayDiv, document.body.firstChild);
+};
+
+const setupChangedEls = (globalNoClick) => {
+  const changedElSel = `.${CLASS.CHANGED}:not(main > div), main > div.${CLASS.CHANGED} > div:not(.${CLASS.NO_CHANGE})`;
+  const changedSectionSel = `main > div.${CLASS.CHANGED}`;
+  const gbChangedEls = [...document.querySelectorAll(changedElSel)];
+  [...gbChangedEls, ...document.querySelectorAll(changedSectionSel)].forEach((el) => {
+    if (!el.style.backgroundColor) el.style.backgroundColor = 'white';
+  });
+  if (globalNoClick) {
+    const blockEls = document.querySelectorAll('main > div > div');
+    blockEls.forEach((el) => {
+      if (!gbChangedEls.includes(el)) {
+        el.classList.add(CLASS.NO_CLICK);
+      }
+    });
+  }
+};
+
+const grayboxThePage = (grayboxEl, grayboxMenuOff) => () => {
+  document.body.classList.add(CLASS.GRAYBOX_BODY);
+  const globalNoClick = grayboxEl.classList.contains(CLASS.NO_CLICK)
+  || grayboxEl.classList.contains(OPTION.NO_CLICK);
+
+  const hasGrayboxChangedEl = !!document.querySelector(`.${CLASS.CHANGED}`);
+  if (hasGrayboxChangedEl) {
+    // If there is at least one element with the 'gb-changed' class
+    // a whole page overlay is set on all elements without the 'gb-changed' class
+    addPageOverlayDiv();
+    setupChangedEls(globalNoClick);
+  } else if (globalNoClick) {
+    document.querySelectorAll(`.${CLASS.NO_CHANGE}`)
+      .forEach((el) => el.classList.add(CLASS.NO_CLICK));
+  }
+
+  const options = getTableValues(grayboxEl);
+  checkGnav(options, globalNoClick);
+  checkFooter(options);
+  checkNoClick(grayboxEl, globalNoClick);
+
+  /* c8 ignore next 3 */
+  if (grayboxMenuOff) {
+    document.body.classList.add(CLASS.NO_BORDER);
+  } else {
+    createGrayboxMenu(options, { isOpen: true });
+  }
+};
+
 export default function init(grayboxEl) {
   const url = new URL(window.location.href);
 
@@ -256,30 +310,11 @@ export default function init(grayboxEl) {
   }
 
   setMetadata({ selector: 'georouting', val: 'off' });
+  const grayboxMenuOff = url.searchParams.get('graybox') === 'menu-off';
 
-  const options = getTableValues(grayboxEl);
-  const grayboxThePage = () => {
-    document.body.classList.add(CLASS.GRAYBOX_BODY);
-    const hasGrayboxChanged = !!document.querySelector(`.${CLASS.CHANGED}`);
-    if (hasGrayboxChanged) {
-      document.body.classList.add(CLASS.OVERLAY);
-
-      document.querySelectorAll(`.${CLASS.CHANGED}`).forEach((el) => {
-        el.classList.add(CLASS.NO_OVERLAY);
-        if (!el.style.backgroundColor) el.style.backgroundColor = 'white';
-      });
-    }
-    const globalNoClick = grayboxEl.classList.contains(OPTION.NO_CLICK);
-    checkGnav(options, globalNoClick);
-    checkFooter(options);
-    checkNoClick(grayboxEl, globalNoClick);
-    /* c8 ignore next 3 */
-    if (url.searchParams.get('graybox') === 'menu-off') {
-      document.body.classList.add(CLASS.NO_BORDER);
-    } else {
-      createGrayboxMenu(options, { isOpen: true });
-    }
-  };
-
-  document.addEventListener(MILO_EVENTS.DEFERRED, grayboxThePage, { once: true });
+  document.addEventListener(
+    MILO_EVENTS.DEFERRED,
+    grayboxThePage(grayboxEl, grayboxMenuOff),
+    { once: true },
+  );
 }

test/blocks/graybox/globalnoclick.test.js

@@ -0,0 +1,58 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { loadStyle, MILO_EVENTS } from '../../../libs/utils/utils.js';
+
+const { default: init } = await import('../../../libs/blocks/graybox/graybox.js');
+await loadStyle('../../../libs/blocks/graybox/graybox.css');
+
+const CLASS = {
+  CHANGED: 'gb-changed',
+  NO_CHANGE: 'gb-no-change',
+};
+
+describe('Graybox Global No Click With Changed Els', () => {
+  before(async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/noclick-changed-els.html' });
+    await init(document.querySelector('.graybox'));
+    document.dispatchEvent(new Event(MILO_EVENTS.DEFERRED));
+  });
+
+  it('Stops all grayed elements from being clickable', async () => {
+    const changedElSel = `.${CLASS.CHANGED}:not(main > div), main > div.${CLASS.CHANGED} > div:not(.${CLASS.NO_CHANGE})`;
+    const changedEls = [...document.querySelectorAll(changedElSel)];
+    const allBlockEls = document.querySelectorAll('main > div > div');
+    allBlockEls.forEach((el) => {
+      // skip the graybox block
+      if (el.classList.contains('graybox')) return;
+
+      if (!changedEls.includes(el)) {
+        expect(el.classList.contains('gb-no-click')).to.be.true;
+      } else {
+        expect(el.classList.contains('gb-no-click')).to.be.false;
+      }
+    });
+  });
+});
+
+describe('Graybox Global No Click With Not Changed Els Marked', () => {
+  before(async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/noclick-no-change.html' });
+    await init(document.querySelector('.graybox'));
+    document.dispatchEvent(new Event(MILO_EVENTS.DEFERRED));
+  });
+
+  it('Stops all grayed elements from being clickable', async () => {
+    const notChangedEls = [...document.querySelectorAll(`.${CLASS.NO_CHANGE}`)];
+    const allBlockAndSectionEls = document.querySelectorAll('main > div > div, main > div');
+    allBlockAndSectionEls.forEach((el) => {
+      // skip the graybox block
+      if (el.classList.contains('graybox')) return;
+
+      if (notChangedEls.includes(el)) {
+        expect(el.classList.contains('gb-no-click')).to.be.true;
+      } else {
+        expect(el.classList.contains('gb-no-click')).to.be.false;
+      }
+    });
+  });
+});