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.
205 lines
5.1 KiB
205 lines
5.1 KiB
4 weeks ago
|
'use strict';
|
||
|
|
||
|
exports.__esModule = true;
|
||
|
|
||
|
var _vue = require('vue');
|
||
|
|
||
|
var _vue2 = _interopRequireDefault(_vue);
|
||
|
|
||
|
var _dom = require('element-ui/lib/utils/dom');
|
||
|
|
||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
||
|
var hasModal = false;
|
||
|
var hasInitZIndex = false;
|
||
|
var zIndex = void 0;
|
||
|
|
||
|
var getModal = function getModal() {
|
||
|
if (_vue2.default.prototype.$isServer) return;
|
||
|
var modalDom = PopupManager.modalDom;
|
||
|
if (modalDom) {
|
||
|
hasModal = true;
|
||
|
} else {
|
||
|
hasModal = false;
|
||
|
modalDom = document.createElement('div');
|
||
|
PopupManager.modalDom = modalDom;
|
||
|
|
||
|
modalDom.addEventListener('touchmove', function (event) {
|
||
|
event.preventDefault();
|
||
|
event.stopPropagation();
|
||
|
});
|
||
|
|
||
|
modalDom.addEventListener('click', function () {
|
||
|
PopupManager.doOnModalClick && PopupManager.doOnModalClick();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
return modalDom;
|
||
|
};
|
||
|
|
||
|
var instances = {};
|
||
|
|
||
|
var PopupManager = {
|
||
|
modalFade: true,
|
||
|
|
||
|
getInstance: function getInstance(id) {
|
||
|
return instances[id];
|
||
|
},
|
||
|
|
||
|
register: function register(id, instance) {
|
||
|
if (id && instance) {
|
||
|
instances[id] = instance;
|
||
|
}
|
||
|
},
|
||
|
|
||
|
deregister: function deregister(id) {
|
||
|
if (id) {
|
||
|
instances[id] = null;
|
||
|
delete instances[id];
|
||
|
}
|
||
|
},
|
||
|
|
||
|
nextZIndex: function nextZIndex() {
|
||
|
return PopupManager.zIndex++;
|
||
|
},
|
||
|
|
||
|
modalStack: [],
|
||
|
|
||
|
doOnModalClick: function doOnModalClick() {
|
||
|
var topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||
|
if (!topItem) return;
|
||
|
|
||
|
var instance = PopupManager.getInstance(topItem.id);
|
||
|
if (instance && instance.closeOnClickModal) {
|
||
|
instance.close();
|
||
|
}
|
||
|
},
|
||
|
|
||
|
openModal: function openModal(id, zIndex, dom, modalClass, modalFade) {
|
||
|
if (_vue2.default.prototype.$isServer) return;
|
||
|
if (!id || zIndex === undefined) return;
|
||
|
this.modalFade = modalFade;
|
||
|
|
||
|
var modalStack = this.modalStack;
|
||
|
|
||
|
for (var i = 0, j = modalStack.length; i < j; i++) {
|
||
|
var item = modalStack[i];
|
||
|
if (item.id === id) {
|
||
|
return;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var modalDom = getModal();
|
||
|
|
||
|
(0, _dom.addClass)(modalDom, 'v-modal');
|
||
|
if (this.modalFade && !hasModal) {
|
||
|
(0, _dom.addClass)(modalDom, 'v-modal-enter');
|
||
|
}
|
||
|
if (modalClass) {
|
||
|
var classArr = modalClass.trim().split(/\s+/);
|
||
|
classArr.forEach(function (item) {
|
||
|
return (0, _dom.addClass)(modalDom, item);
|
||
|
});
|
||
|
}
|
||
|
setTimeout(function () {
|
||
|
(0, _dom.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 = zIndex;
|
||
|
}
|
||
|
modalDom.tabIndex = 0;
|
||
|
modalDom.style.display = '';
|
||
|
|
||
|
this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
|
||
|
},
|
||
|
|
||
|
closeModal: function closeModal(id) {
|
||
|
var modalStack = this.modalStack;
|
||
|
var modalDom = getModal();
|
||
|
|
||
|
if (modalStack.length > 0) {
|
||
|
var topItem = modalStack[modalStack.length - 1];
|
||
|
if (topItem.id === id) {
|
||
|
if (topItem.modalClass) {
|
||
|
var classArr = topItem.modalClass.trim().split(/\s+/);
|
||
|
classArr.forEach(function (item) {
|
||
|
return (0, _dom.removeClass)(modalDom, item);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
modalStack.pop();
|
||
|
if (modalStack.length > 0) {
|
||
|
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
||
|
}
|
||
|
} else {
|
||
|
for (var i = modalStack.length - 1; i >= 0; i--) {
|
||
|
if (modalStack[i].id === id) {
|
||
|
modalStack.splice(i, 1);
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (modalStack.length === 0) {
|
||
|
if (this.modalFade) {
|
||
|
(0, _dom.addClass)(modalDom, 'v-modal-leave');
|
||
|
}
|
||
|
setTimeout(function () {
|
||
|
if (modalStack.length === 0) {
|
||
|
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
||
|
modalDom.style.display = 'none';
|
||
|
PopupManager.modalDom = undefined;
|
||
|
}
|
||
|
(0, _dom.removeClass)(modalDom, 'v-modal-leave');
|
||
|
}, 200);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
Object.defineProperty(PopupManager, 'zIndex', {
|
||
|
configurable: true,
|
||
|
get: function get() {
|
||
|
if (!hasInitZIndex) {
|
||
|
zIndex = zIndex || (_vue2.default.prototype.$ELEMENT || {}).zIndex || 2000;
|
||
|
hasInitZIndex = true;
|
||
|
}
|
||
|
return zIndex;
|
||
|
},
|
||
|
set: function set(value) {
|
||
|
zIndex = value;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
var getTopPopup = function getTopPopup() {
|
||
|
if (_vue2.default.prototype.$isServer) return;
|
||
|
if (PopupManager.modalStack.length > 0) {
|
||
|
var topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||
|
if (!topPopup) return;
|
||
|
var instance = PopupManager.getInstance(topPopup.id);
|
||
|
|
||
|
return instance;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
if (!_vue2.default.prototype.$isServer) {
|
||
|
// handle `esc` key when the popup is shown
|
||
|
window.addEventListener('keydown', function (event) {
|
||
|
if (event.keyCode === 27) {
|
||
|
var topPopup = getTopPopup();
|
||
|
|
||
|
if (topPopup && topPopup.closeOnPressEscape) {
|
||
|
topPopup.handleClose ? topPopup.handleClose() : topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close();
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
exports.default = PopupManager;
|