Page MenuHomec4science
Files F100890698

ModalManager.js
No OneTemporary
Actions

File Metadata

Created
Mon, Feb 3, 16:17

ModalManager.js
View Options

"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;

Event Timeline

c4science · Help