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.
170 lines
4.7 KiB
170 lines
4.7 KiB
import { getCurrentInstance } from 'vue';
|
|
import { isClient } from '@vueuse/core';
|
|
import '../hooks/index.mjs';
|
|
import { on, addClass, removeClass } from './dom.mjs';
|
|
import { EVENT_CODE } from './aria.mjs';
|
|
import { useGlobalConfig } from '../hooks/use-global-config/index.mjs';
|
|
|
|
const onTouchMove = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
const onModalClick = () => {
|
|
PopupManager == null ? void 0 : PopupManager.doOnModalClick();
|
|
};
|
|
let hasModal = false;
|
|
const getModal = function() {
|
|
if (!isClient)
|
|
return void 0;
|
|
let modalDom = PopupManager.modalDom;
|
|
if (modalDom) {
|
|
hasModal = true;
|
|
} else {
|
|
hasModal = false;
|
|
modalDom = document.createElement("div");
|
|
PopupManager.modalDom = modalDom;
|
|
on(modalDom, "touchmove", onTouchMove);
|
|
on(modalDom, "click", onModalClick);
|
|
}
|
|
return modalDom;
|
|
};
|
|
const instances = {};
|
|
const PopupManager = {
|
|
modalFade: true,
|
|
modalDom: void 0,
|
|
globalInitialZIndex: 2e3,
|
|
zIndex: 0,
|
|
getInitialZIndex() {
|
|
var _a;
|
|
if (!getCurrentInstance())
|
|
return this.globalInitialZIndex;
|
|
return (_a = useGlobalConfig("zIndex").value) != null ? _a : this.globalInitialZIndex;
|
|
},
|
|
getInstance(id) {
|
|
return instances[id];
|
|
},
|
|
register(id, instance) {
|
|
if (id && instance) {
|
|
instances[id] = instance;
|
|
}
|
|
},
|
|
deregister(id) {
|
|
if (id) {
|
|
instances[id] = null;
|
|
delete instances[id];
|
|
}
|
|
},
|
|
nextZIndex() {
|
|
return this.getInitialZIndex() + ++this.zIndex;
|
|
},
|
|
modalStack: [],
|
|
doOnModalClick() {
|
|
const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
|
if (!topItem)
|
|
return;
|
|
const instance = PopupManager.getInstance(topItem.id);
|
|
if (instance && instance.closeOnClickModal.value) {
|
|
instance.close();
|
|
}
|
|
},
|
|
openModal(id, zIndex, dom, modalClass, modalFade) {
|
|
if (!isClient)
|
|
return;
|
|
if (!id || zIndex === void 0)
|
|
return;
|
|
this.modalFade = modalFade;
|
|
const modalStack = this.modalStack;
|
|
for (let i = 0, j = modalStack.length; i < j; i++) {
|
|
const item = modalStack[i];
|
|
if (item.id === id) {
|
|
return;
|
|
}
|
|
}
|
|
const modalDom = getModal();
|
|
addClass(modalDom, "v-modal");
|
|
if (this.modalFade && !hasModal) {
|
|
addClass(modalDom, "v-modal-enter");
|
|
}
|
|
if (modalClass) {
|
|
const classArr = modalClass.trim().split(/\s+/);
|
|
classArr.forEach((item) => addClass(modalDom, item));
|
|
}
|
|
setTimeout(() => {
|
|
removeClass(modalDom, "v-modal-enter");
|
|
}, 200);
|
|
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
|
dom.parentNode.appendChild(modalDom);
|
|
} else {
|
|
document.body.appendChild(modalDom);
|
|
}
|
|
if (zIndex) {
|
|
modalDom.style.zIndex = String(zIndex);
|
|
}
|
|
modalDom.tabIndex = 0;
|
|
modalDom.style.display = "";
|
|
this.modalStack.push({ id, zIndex, modalClass });
|
|
},
|
|
closeModal(id) {
|
|
const modalStack = this.modalStack;
|
|
const modalDom = getModal();
|
|
if (modalStack.length > 0) {
|
|
const topItem = modalStack[modalStack.length - 1];
|
|
if (topItem.id === id) {
|
|
if (topItem.modalClass) {
|
|
const classArr = topItem.modalClass.trim().split(/\s+/);
|
|
classArr.forEach((item) => removeClass(modalDom, item));
|
|
}
|
|
modalStack.pop();
|
|
if (modalStack.length > 0) {
|
|
modalDom.style.zIndex = `${modalStack[modalStack.length - 1].zIndex}`;
|
|
}
|
|
} else {
|
|
for (let i = modalStack.length - 1; i >= 0; i--) {
|
|
if (modalStack[i].id === id) {
|
|
modalStack.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (modalStack.length === 0) {
|
|
if (this.modalFade) {
|
|
addClass(modalDom, "v-modal-leave");
|
|
}
|
|
setTimeout(() => {
|
|
if (modalStack.length === 0) {
|
|
if (modalDom.parentNode)
|
|
modalDom.parentNode.removeChild(modalDom);
|
|
modalDom.style.display = "none";
|
|
PopupManager.modalDom = void 0;
|
|
}
|
|
removeClass(modalDom, "v-modal-leave");
|
|
}, 200);
|
|
}
|
|
}
|
|
};
|
|
const getTopPopup = function() {
|
|
if (!isClient)
|
|
return;
|
|
if (PopupManager.modalStack.length > 0) {
|
|
const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
|
if (!topPopup)
|
|
return;
|
|
const instance = PopupManager.getInstance(topPopup.id);
|
|
return instance;
|
|
}
|
|
};
|
|
if (isClient) {
|
|
window.addEventListener("keydown", function(event) {
|
|
if (event.code === EVENT_CODE.esc) {
|
|
const topPopup = getTopPopup();
|
|
if (topPopup && topPopup.closeOnPressEscape.value) {
|
|
topPopup.handleClose ? topPopup.handleClose() : topPopup.handleAction ? topPopup.handleAction("cancel") : topPopup.close();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
export { PopupManager };
|
|
//# sourceMappingURL=popup-manager.mjs.map
|