mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-25 09:55:15 +00:00
166 lines
4.9 KiB
JavaScript
166 lines
4.9 KiB
JavaScript
|
import addClass from 'dom-helpers/addClass';
|
||
|
import removeClass from 'dom-helpers/removeClass';
|
||
|
import css from 'dom-helpers/css';
|
||
|
import getScrollbarSize from 'dom-helpers/scrollbarSize';
|
||
|
import isOverflowing from './isOverflowing';
|
||
|
import { ariaHidden, hideSiblings, showSiblings } from './manageAriaHidden';
|
||
|
|
||
|
function findIndexOf(arr, cb) {
|
||
|
var idx = -1;
|
||
|
arr.some(function (d, i) {
|
||
|
if (cb(d, i)) {
|
||
|
idx = i;
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
});
|
||
|
return idx;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Proper state management for containers and the modals in those containers.
|
||
|
*
|
||
|
* @internal Used by the Modal to ensure proper styling of containers.
|
||
|
*/
|
||
|
var ModalManager = /*#__PURE__*/function () {
|
||
|
function ModalManager(_temp) {
|
||
|
var _ref = _temp === void 0 ? {} : _temp,
|
||
|
_ref$hideSiblingNodes = _ref.hideSiblingNodes,
|
||
|
hideSiblingNodes = _ref$hideSiblingNodes === void 0 ? true : _ref$hideSiblingNodes,
|
||
|
_ref$handleContainerO = _ref.handleContainerOverflow,
|
||
|
handleContainerOverflow = _ref$handleContainerO === void 0 ? true : _ref$handleContainerO;
|
||
|
|
||
|
this.hideSiblingNodes = void 0;
|
||
|
this.handleContainerOverflow = void 0;
|
||
|
this.modals = void 0;
|
||
|
this.containers = void 0;
|
||
|
this.data = void 0;
|
||
|
this.scrollbarSize = void 0;
|
||
|
this.hideSiblingNodes = hideSiblingNodes;
|
||
|
this.handleContainerOverflow = handleContainerOverflow;
|
||
|
this.modals = [];
|
||
|
this.containers = [];
|
||
|
this.data = [];
|
||
|
this.scrollbarSize = getScrollbarSize();
|
||
|
}
|
||
|
|
||
|
var _proto = ModalManager.prototype;
|
||
|
|
||
|
_proto.isContainerOverflowing = function isContainerOverflowing(modal) {
|
||
|
var data = this.data[this.containerIndexFromModal(modal)];
|
||
|
return data && data.overflowing;
|
||
|
};
|
||
|
|
||
|
_proto.containerIndexFromModal = function containerIndexFromModal(modal) {
|
||
|
return findIndexOf(this.data, function (d) {
|
||
|
return d.modals.indexOf(modal) !== -1;
|
||
|
});
|
||
|
};
|
||
|
|
||
|
_proto.setContainerStyle = function setContainerStyle(containerState, container) {
|
||
|
var style = {
|
||
|
overflow: 'hidden'
|
||
|
}; // we are only interested in the actual `style` here
|
||
|
// because we will override it
|
||
|
|
||
|
containerState.style = {
|
||
|
overflow: container.style.overflow,
|
||
|
paddingRight: container.style.paddingRight
|
||
|
};
|
||
|
|
||
|
if (containerState.overflowing) {
|
||
|
// use computed style, here to get the real padding
|
||
|
// to add our scrollbar width
|
||
|
style.paddingRight = parseInt(css(container, 'paddingRight') || '0', 10) + this.scrollbarSize + "px";
|
||
|
}
|
||
|
|
||
|
css(container, style);
|
||
|
};
|
||
|
|
||
|
_proto.removeContainerStyle = function removeContainerStyle(containerState, container) {
|
||
|
Object.assign(container.style, containerState.style);
|
||
|
};
|
||
|
|
||
|
_proto.add = function add(modal, container, className) {
|
||
|
var modalIdx = this.modals.indexOf(modal);
|
||
|
var containerIdx = this.containers.indexOf(container);
|
||
|
|
||
|
if (modalIdx !== -1) {
|
||
|
return modalIdx;
|
||
|
}
|
||
|
|
||
|
modalIdx = this.modals.length;
|
||
|
this.modals.push(modal);
|
||
|
|
||
|
if (this.hideSiblingNodes) {
|
||
|
hideSiblings(container, modal);
|
||
|
}
|
||
|
|
||
|
if (containerIdx !== -1) {
|
||
|
this.data[containerIdx].modals.push(modal);
|
||
|
return modalIdx;
|
||
|
}
|
||
|
|
||
|
var data = {
|
||
|
modals: [modal],
|
||
|
// right now only the first modal of a container will have its classes applied
|
||
|
classes: className ? className.split(/\s+/) : [],
|
||
|
overflowing: isOverflowing(container)
|
||
|
};
|
||
|
|
||
|
if (this.handleContainerOverflow) {
|
||
|
this.setContainerStyle(data, container);
|
||
|
}
|
||
|
|
||
|
data.classes.forEach(addClass.bind(null, container));
|
||
|
this.containers.push(container);
|
||
|
this.data.push(data);
|
||
|
return modalIdx;
|
||
|
};
|
||
|
|
||
|
_proto.remove = function remove(modal) {
|
||
|
var modalIdx = this.modals.indexOf(modal);
|
||
|
|
||
|
if (modalIdx === -1) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var containerIdx = this.containerIndexFromModal(modal);
|
||
|
var data = this.data[containerIdx];
|
||
|
var container = this.containers[containerIdx];
|
||
|
data.modals.splice(data.modals.indexOf(modal), 1);
|
||
|
this.modals.splice(modalIdx, 1); // if that was the last modal in a container,
|
||
|
// clean up the container
|
||
|
|
||
|
if (data.modals.length === 0) {
|
||
|
data.classes.forEach(removeClass.bind(null, container));
|
||
|
|
||
|
if (this.handleContainerOverflow) {
|
||
|
this.removeContainerStyle(data, container);
|
||
|
}
|
||
|
|
||
|
if (this.hideSiblingNodes) {
|
||
|
showSiblings(container, modal);
|
||
|
}
|
||
|
|
||
|
this.containers.splice(containerIdx, 1);
|
||
|
this.data.splice(containerIdx, 1);
|
||
|
} else if (this.hideSiblingNodes) {
|
||
|
// otherwise make sure the next top modal is visible to a SR
|
||
|
var _data$modals = data.modals[data.modals.length - 1],
|
||
|
backdrop = _data$modals.backdrop,
|
||
|
dialog = _data$modals.dialog;
|
||
|
ariaHidden(false, dialog);
|
||
|
ariaHidden(false, backdrop);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
_proto.isTopModal = function isTopModal(modal) {
|
||
|
return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
|
||
|
};
|
||
|
|
||
|
return ModalManager;
|
||
|
}();
|
||
|
|
||
|
export default ModalManager;
|