Skip to content

Commit

Permalink
[Release] Stage to Main (#2470)
Browse files Browse the repository at this point in the history
  • Loading branch information
milo-pr-merge[bot] authored Jun 13, 2024
2 parents 2350bd0 + 3d61c97 commit 931fa67
Show file tree
Hide file tree
Showing 8 changed files with 523 additions and 111 deletions.
58 changes: 34 additions & 24 deletions libs/blocks/graybox/graybox.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down
105 changes: 70 additions & 35 deletions libs/blocks/graybox/graybox.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
};
Expand Down Expand Up @@ -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);
}
}
Expand All @@ -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}`)
Expand All @@ -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;
}

Expand Down Expand Up @@ -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);

Expand All @@ -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 },
);
}
2 changes: 1 addition & 1 deletion libs/features/personalization/personalization.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const PERSONALIZATION_KEYS = Object.keys(PERSONALIZATION_TAGS);

const CLASS_EL_DELETE = 'p13n-deleted';
const CLASS_EL_REPLACE = 'p13n-replaced';
const COLUMN_NOT_OPERATOR = 'not';
const COLUMN_NOT_OPERATOR = 'not ';
const TARGET_EXP_PREFIX = 'target-';
const INLINE_HASH = '_inline';
const PAGE_URL = new URL(window.location.href);
Expand Down
58 changes: 58 additions & 0 deletions test/blocks/graybox/globalnoclick.test.js
Original file line number Diff line number Diff line change
@@ -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;
}
});
});
});
Loading

0 comments on commit 931fa67

Please sign in to comment.