You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.2 KiB
132 lines
3.2 KiB
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = exports.OPEN_DATA_ATTRIBUTE = void 0;
|
|
|
|
var _css = _interopRequireDefault(require("dom-helpers/css"));
|
|
|
|
var _DataKey = require("./DataKey");
|
|
|
|
var _getScrollbarWidth = _interopRequireDefault(require("./getScrollbarWidth"));
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
const OPEN_DATA_ATTRIBUTE = (0, _DataKey.dataAttr)('modal-open');
|
|
/**
|
|
* Manages a stack of Modals as well as ensuring
|
|
* body scrolling is is disabled and padding accounted for
|
|
*/
|
|
|
|
exports.OPEN_DATA_ATTRIBUTE = OPEN_DATA_ATTRIBUTE;
|
|
|
|
class ModalManager {
|
|
constructor({
|
|
ownerDocument,
|
|
handleContainerOverflow = true,
|
|
isRTL = false
|
|
} = {}) {
|
|
this.handleContainerOverflow = handleContainerOverflow;
|
|
this.isRTL = isRTL;
|
|
this.modals = [];
|
|
this.ownerDocument = ownerDocument;
|
|
}
|
|
|
|
getScrollbarWidth() {
|
|
return (0, _getScrollbarWidth.default)(this.ownerDocument);
|
|
}
|
|
|
|
getElement() {
|
|
return (this.ownerDocument || document).body;
|
|
}
|
|
|
|
setModalAttributes(_modal) {// For overriding
|
|
}
|
|
|
|
removeModalAttributes(_modal) {// For overriding
|
|
}
|
|
|
|
setContainerStyle(containerState) {
|
|
const style = {
|
|
overflow: 'hidden'
|
|
}; // we are only interested in the actual `style` here
|
|
// because we will override it
|
|
|
|
const paddingProp = this.isRTL ? 'paddingLeft' : 'paddingRight';
|
|
const container = this.getElement();
|
|
containerState.style = {
|
|
overflow: container.style.overflow,
|
|
[paddingProp]: container.style[paddingProp]
|
|
};
|
|
|
|
if (containerState.scrollBarWidth) {
|
|
// use computed style, here to get the real padding
|
|
// to add our scrollbar width
|
|
style[paddingProp] = `${parseInt((0, _css.default)(container, paddingProp) || '0', 10) + containerState.scrollBarWidth}px`;
|
|
}
|
|
|
|
container.setAttribute(OPEN_DATA_ATTRIBUTE, '');
|
|
(0, _css.default)(container, style);
|
|
}
|
|
|
|
reset() {
|
|
[...this.modals].forEach(m => this.remove(m));
|
|
}
|
|
|
|
removeContainerStyle(containerState) {
|
|
const container = this.getElement();
|
|
container.removeAttribute(OPEN_DATA_ATTRIBUTE);
|
|
Object.assign(container.style, containerState.style);
|
|
}
|
|
|
|
add(modal) {
|
|
let modalIdx = this.modals.indexOf(modal);
|
|
|
|
if (modalIdx !== -1) {
|
|
return modalIdx;
|
|
}
|
|
|
|
modalIdx = this.modals.length;
|
|
this.modals.push(modal);
|
|
this.setModalAttributes(modal);
|
|
|
|
if (modalIdx !== 0) {
|
|
return modalIdx;
|
|
}
|
|
|
|
this.state = {
|
|
scrollBarWidth: this.getScrollbarWidth(),
|
|
style: {}
|
|
};
|
|
|
|
if (this.handleContainerOverflow) {
|
|
this.setContainerStyle(this.state);
|
|
}
|
|
|
|
return modalIdx;
|
|
}
|
|
|
|
remove(modal) {
|
|
const modalIdx = this.modals.indexOf(modal);
|
|
|
|
if (modalIdx === -1) {
|
|
return;
|
|
}
|
|
|
|
this.modals.splice(modalIdx, 1); // if that was the last modal in a container,
|
|
// clean up the container
|
|
|
|
if (!this.modals.length && this.handleContainerOverflow) {
|
|
this.removeContainerStyle(this.state);
|
|
}
|
|
|
|
this.removeModalAttributes(modal);
|
|
}
|
|
|
|
isTopModal(modal) {
|
|
return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
|
|
}
|
|
|
|
}
|
|
|
|
var _default = ModalManager;
|
|
exports.default = _default; |