130 lines
4.1 KiB
JavaScript
130 lines
4.1 KiB
JavaScript
(function initHelpIconOverlayModule() {
|
|
const CLOSE_HANDLERS = {
|
|
'.sg-pulldown-demo': (root) => {
|
|
root.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
|
demo.dataset.open = 'false';
|
|
if (trigger) {
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
},
|
|
'.sg-sandwich-menu-wrap': (root) => {
|
|
root.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
|
const button = wrap.querySelector('.sg-sandwich-button');
|
|
wrap.dataset.open = 'false';
|
|
if (button) {
|
|
button.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
},
|
|
};
|
|
|
|
const getViewportWidth = () => {
|
|
if (window.visualViewport && typeof window.visualViewport.width === 'number') {
|
|
return window.visualViewport.width;
|
|
}
|
|
return window.innerWidth;
|
|
};
|
|
|
|
const getSafeInsetPx = () => {
|
|
const rootStyles = getComputedStyle(document.documentElement);
|
|
const spacingSmallRaw = rootStyles.getPropertyValue('--spacing-small').trim();
|
|
const rootFontSize = parseFloat(rootStyles.fontSize) || 16;
|
|
const spacingSmallValue = parseFloat(spacingSmallRaw);
|
|
if (Number.isNaN(spacingSmallValue)) {
|
|
return 0;
|
|
}
|
|
if (spacingSmallRaw.endsWith('rem')) {
|
|
return spacingSmallValue * rootFontSize;
|
|
}
|
|
return spacingSmallValue;
|
|
};
|
|
|
|
const closeAllHelpIcons = (root) => {
|
|
root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
|
const button = wrap.querySelector('.sg-help-icon');
|
|
const panel = wrap.querySelector('.sg-help-icon-panel');
|
|
wrap.dataset.open = 'false';
|
|
if (panel) {
|
|
panel.style.removeProperty('transform');
|
|
}
|
|
if (button) {
|
|
button.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
};
|
|
|
|
window.sgInitHelpIconOverlays = (options = {}) => {
|
|
const root = options.root || document;
|
|
const closeOnOpenSelectors = options.closeOnOpenSelectors || [];
|
|
const outsideClickIgnoreSelectors = options.outsideClickIgnoreSelectors || [];
|
|
|
|
root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
|
if (wrap.dataset.helpIconInit === 'true') {
|
|
return;
|
|
}
|
|
wrap.dataset.helpIconInit = 'true';
|
|
|
|
const button = wrap.querySelector('.sg-help-icon');
|
|
const panel = wrap.querySelector('.sg-help-icon-panel');
|
|
if (!button || !panel) {
|
|
return;
|
|
}
|
|
|
|
button.addEventListener('click', (event) => {
|
|
event.stopPropagation();
|
|
const nextState = wrap.dataset.open !== 'true';
|
|
|
|
closeAllHelpIcons(root);
|
|
closeOnOpenSelectors.forEach((selector) => {
|
|
const handler = CLOSE_HANDLERS[selector];
|
|
if (handler) {
|
|
handler(root);
|
|
}
|
|
});
|
|
|
|
if (!nextState) {
|
|
return;
|
|
}
|
|
|
|
wrap.dataset.align = 'left';
|
|
wrap.dataset.open = 'true';
|
|
button.setAttribute('aria-expanded', 'true');
|
|
|
|
const viewportWidth = getViewportWidth();
|
|
const panelRect = panel.getBoundingClientRect();
|
|
if (panelRect.right > viewportWidth) {
|
|
wrap.dataset.align = 'right';
|
|
}
|
|
const alignedPanelRect = panel.getBoundingClientRect();
|
|
if (alignedPanelRect.left < 0) {
|
|
wrap.dataset.align = 'left';
|
|
}
|
|
|
|
const clampedRect = panel.getBoundingClientRect();
|
|
const safeInset = getSafeInsetPx();
|
|
let shiftX = 0;
|
|
if (clampedRect.right > (viewportWidth - safeInset)) {
|
|
shiftX -= clampedRect.right - (viewportWidth - safeInset);
|
|
}
|
|
if ((clampedRect.left + shiftX) < safeInset) {
|
|
shiftX += safeInset - (clampedRect.left + shiftX);
|
|
}
|
|
if (shiftX !== 0) {
|
|
panel.style.transform = `translateX(${shiftX}px)`;
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', (event) => {
|
|
const isInsideIgnoredZone = ['.sg-help-icon-wrap', ...outsideClickIgnoreSelectors]
|
|
.some((selector) => event.target.closest(selector));
|
|
if (isInsideIgnoredZone) {
|
|
return;
|
|
}
|
|
closeAllHelpIcons(root);
|
|
});
|
|
};
|
|
})();
|