From e8d036834ebf667ac6b02fe97e291c8138e5852d Mon Sep 17 00:00:00 2001 From: Rohit Sahu Date: Thu, 4 Sep 2025 14:43:12 +0530 Subject: [PATCH 1/5] modal detecting utils --- lib/core/utils/detect-modal-stack.js | 64 ++++++++++++++++++++++++ lib/core/utils/get-overlay-from-stack.js | 23 +++++++++ lib/core/utils/index.js | 2 + 3 files changed, 89 insertions(+) create mode 100644 lib/core/utils/detect-modal-stack.js create mode 100644 lib/core/utils/get-overlay-from-stack.js diff --git a/lib/core/utils/detect-modal-stack.js b/lib/core/utils/detect-modal-stack.js new file mode 100644 index 000000000..1313d63ae --- /dev/null +++ b/lib/core/utils/detect-modal-stack.js @@ -0,0 +1,64 @@ +import { getViewportSize } from '../../commons/dom'; +export default function detectModalStack(options) { + options = options || {}; + const modalPercent = options.modalPercent || 0.75; + + // there is no "definitive" way to code a modal so detecting when one is open + // is a bit of a guess. a modal won't always be accessible, so we can't rely + // on the `role` attribute, and relying on a class name as a convention is + // unreliable. we also cannot rely on the body/html not scrolling. + // + // because of this, we will look for two different types of modals: + // "definitely a modal" and "could be a modal." + // + // "definitely a modal" is any visible element that is coded to be a modal + // by using one of the following criteria: + // + // - has the attribute `role=dialog` + // - has the attribute `aria-modal=true` + // - is the dialog element + // + // "could be a modal" is a visible element that takes up more than 75% of + // the screen (though typically full width/height) and is the top-most element + // in the viewport. since we aren't sure if it is or is not a modal this is + // just our best guess of being one based on convention. + + // if (cache.get('isModalOpen')) { + // return cache.get('isModalOpen'); + // } + + const definiteModals = Array.from( + document.querySelectorAll( + 'dialog[open], [role="dialog"], [role="alertdialog"], [aria-modal="true"]' + ) + ); + + // to find a "could be a modal" we will take the element stack from each of + // four corners and one from the middle of the viewport (total of 5). if each + // stack contains an element whose width/height is >= 75% of the screen, we + // found a "could be a modal" + const viewport = getViewportSize(window); + const percentWidth = viewport.width * modalPercent; + const percentHeight = viewport.height * modalPercent; + const x = (viewport.width - percentWidth) / 2; + const y = (viewport.height - percentHeight) / 2; + + const points = [ + // top-left corner + { x, y }, + // top-right corner + { x: viewport.width - x, y }, + // center + { x: viewport.width / 2, y: viewport.height / 2 }, + // bottom-left corner + { x, y: viewport.height - y }, + // bottom-right corner + { x: viewport.width - x, y: viewport.height - y } + ]; + + const stacks = points.map(point => { + return Array.from(document.elementsFromPoint(point.x, point.y)); + }); + + return { definiteModals, stacks }; +} diff --git a/lib/core/utils/get-overlay-from-stack.js b/lib/core/utils/get-overlay-from-stack.js new file mode 100644 index 000000000..21a3e0fa8 --- /dev/null +++ b/lib/core/utils/get-overlay-from-stack.js @@ -0,0 +1,23 @@ +import { getViewportSize } from '../../commons/dom'; + +export default function getOverlayFromStack(elm, options) { + options = options || {}; + const modalPercent = options.modalPercent || 0.75; + + const viewport = getViewportSize(window); + const percentWidth = viewport.width * modalPercent; + const percentHeight = viewport.height * modalPercent; + + if (elm instanceof window.Element) { + const style = window.getComputedStyle(elm); + if ( + parseInt(style?.width, 10) >= percentWidth && + parseInt(style?.height, 10) >= percentHeight && + style?.getPropertyValue('pointer-events') !== 'none' && + (style?.position === 'absolute' || style?.position === 'fixed') + ) { + return true; + } + } + return false; +} diff --git a/lib/core/utils/index.js b/lib/core/utils/index.js index 360c1d728..b906f2908 100644 --- a/lib/core/utils/index.js +++ b/lib/core/utils/index.js @@ -86,3 +86,5 @@ export { default as uniqueArray } from './unique-array'; export { default as uuid } from './uuid'; export { default as validInputTypes } from './valid-input-type'; export { default as isValidLang, validLangs } from './valid-langs'; +export { default as detectModalStack } from './detect-modal-stack'; +export { default as getOverlayFromStack } from './get-overlay-from-stack'; From ac98ca49199a2140758e065570d86336b3fa549d Mon Sep 17 00:00:00 2001 From: rohit sahu <93916322+rohitsahu-bstack@users.noreply.github.com> Date: Wed, 17 Sep 2025 10:35:56 +0530 Subject: [PATCH 2/5] Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- lib/core/utils/detect-modal-stack.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/core/utils/detect-modal-stack.js b/lib/core/utils/detect-modal-stack.js index 1313d63ae..d8fa2de95 100644 --- a/lib/core/utils/detect-modal-stack.js +++ b/lib/core/utils/detect-modal-stack.js @@ -23,9 +23,6 @@ export default function detectModalStack(options) { // in the viewport. since we aren't sure if it is or is not a modal this is // just our best guess of being one based on convention. - // if (cache.get('isModalOpen')) { - // return cache.get('isModalOpen'); - // } const definiteModals = Array.from( document.querySelectorAll( From 35b0aba566071739026d462dfc490abcf3adfe6b Mon Sep 17 00:00:00 2001 From: rohitsahu-bstack Date: Wed, 17 Sep 2025 05:07:08 +0000 Subject: [PATCH 3/5] :robot: Automated formatting fixes --- lib/core/utils/detect-modal-stack.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/core/utils/detect-modal-stack.js b/lib/core/utils/detect-modal-stack.js index d8fa2de95..f5fcb284e 100644 --- a/lib/core/utils/detect-modal-stack.js +++ b/lib/core/utils/detect-modal-stack.js @@ -23,7 +23,6 @@ export default function detectModalStack(options) { // in the viewport. since we aren't sure if it is or is not a modal this is // just our best guess of being one based on convention. - const definiteModals = Array.from( document.querySelectorAll( 'dialog[open], [role="dialog"], [role="alertdialog"], [aria-modal="true"]' From 824733a824d8ab61bab12fd0dd74b422286de76d Mon Sep 17 00:00:00 2001 From: rohit sahu <93916322+rohitsahu-bstack@users.noreply.github.com> Date: Wed, 17 Sep 2025 10:56:20 +0530 Subject: [PATCH 4/5] Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- lib/core/utils/get-overlay-from-stack.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/core/utils/get-overlay-from-stack.js b/lib/core/utils/get-overlay-from-stack.js index 21a3e0fa8..fa784322b 100644 --- a/lib/core/utils/get-overlay-from-stack.js +++ b/lib/core/utils/get-overlay-from-stack.js @@ -10,12 +10,12 @@ export default function getOverlayFromStack(elm, options) { if (elm instanceof window.Element) { const style = window.getComputedStyle(elm); + const rect = elm.getBoundingClientRect(); if ( - parseInt(style?.width, 10) >= percentWidth && - parseInt(style?.height, 10) >= percentHeight && + rect.width >= percentWidth && + rect.height >= percentHeight && style?.getPropertyValue('pointer-events') !== 'none' && (style?.position === 'absolute' || style?.position === 'fixed') - ) { return true; } } From 10c2713d9a75fd53387fc5238bcbb11bceac683f Mon Sep 17 00:00:00 2001 From: Rohit Sahu Date: Wed, 17 Sep 2025 10:58:14 +0530 Subject: [PATCH 5/5] copilot comments --- lib/core/utils/get-overlay-from-stack.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/core/utils/get-overlay-from-stack.js b/lib/core/utils/get-overlay-from-stack.js index fa784322b..a0de37b22 100644 --- a/lib/core/utils/get-overlay-from-stack.js +++ b/lib/core/utils/get-overlay-from-stack.js @@ -16,6 +16,7 @@ export default function getOverlayFromStack(elm, options) { rect.height >= percentHeight && style?.getPropertyValue('pointer-events') !== 'none' && (style?.position === 'absolute' || style?.position === 'fixed') + ) { return true; } }