devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
117 lines (116 loc) • 4.61 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/popup/m_popup_overflow_manager.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import devices from "../../../core/devices";
import domAdapter from "../../../core/dom_adapter";
import {
noop
} from "../../../core/utils/common";
import {
isDefined
} from "../../../core/utils/type";
import windowUtils from "../../core/utils/m_window";
const overflowManagerMock = {
setOverflow: noop,
restoreOverflow: noop
};
export const createBodyOverflowManager = () => {
if (!windowUtils.hasWindow()) {
return overflowManagerMock
}
const window = windowUtils.getWindow();
const {
documentElement: documentElement
} = domAdapter.getDocument();
const body = domAdapter.getBody();
const isIosDevice = "ios" === devices.real().platform;
const prevSettings = {
overflow: null,
overflowX: null,
overflowY: null,
paddingRight: null,
position: null,
top: null,
left: null
};
return {
setOverflow: isIosDevice ? () => {
if (isDefined(prevSettings.position) || "fixed" === body.style.position) {
return
}
const {
scrollY: scrollY,
scrollX: scrollX
} = window;
prevSettings.position = body.style.position;
prevSettings.top = body.style.top;
prevSettings.left = body.style.left;
body.style.setProperty("position", "fixed");
body.style.setProperty("top", -scrollY + "px");
body.style.setProperty("left", -scrollX + "px")
} : () => {
(() => {
const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
if (prevSettings.paddingRight || scrollBarWidth <= 0) {
return
}
const paddingRight = window.getComputedStyle(body).getPropertyValue("padding-right");
const computedBodyPaddingRight = parseInt(paddingRight, 10);
prevSettings.paddingRight = computedBodyPaddingRight;
body.style.setProperty("padding-right", `${computedBodyPaddingRight+scrollBarWidth}px`)
})();
if (prevSettings.overflow || "hidden" === body.style.overflow) {
return
}
prevSettings.overflow = body.style.overflow;
prevSettings.overflowX = body.style.overflowX;
prevSettings.overflowY = body.style.overflowY;
body.style.setProperty("overflow", "hidden")
},
restoreOverflow: isIosDevice ? () => {
if (!isDefined(prevSettings.position)) {
return
}
const scrollY = -parseInt(body.style.top, 10);
const scrollX = -parseInt(body.style.left, 10);
["position", "top", "left"].forEach((property => {
if (prevSettings[property]) {
body.style.setProperty(property, prevSettings[property])
} else {
body.style.removeProperty(property)
}
}));
window.scrollTo(scrollX, scrollY);
prevSettings.position = null
} : () => {
(() => {
if (!isDefined(prevSettings.paddingRight)) {
return
}
if (prevSettings.paddingRight) {
body.style.setProperty("padding-right", `${prevSettings.paddingRight}px`)
} else {
body.style.removeProperty("padding-right")
}
prevSettings.paddingRight = null
})();
["overflow", "overflowX", "overflowY"].forEach((property => {
if (!isDefined(prevSettings[property])) {
return
}
const propertyInKebabCase = property.replace(/(X)|(Y)/, (symbol => `-${symbol.toLowerCase()}`));
if (prevSettings[property]) {
body.style.setProperty(propertyInKebabCase, prevSettings[property])
} else {
body.style.removeProperty(propertyInKebabCase)
}
prevSettings[property] = null
}))
}
}
};