popup-manager.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _vue = require('vue');
  4. var _vue2 = _interopRequireDefault(_vue);
  5. var _dom = require('element-ui/lib/utils/dom');
  6. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  7. var hasModal = false;
  8. var getModal = function getModal() {
  9. if (_vue2.default.prototype.$isServer) return;
  10. var modalDom = PopupManager.modalDom;
  11. if (modalDom) {
  12. hasModal = true;
  13. } else {
  14. hasModal = false;
  15. modalDom = document.createElement('div');
  16. PopupManager.modalDom = modalDom;
  17. modalDom.addEventListener('touchmove', function (event) {
  18. event.preventDefault();
  19. event.stopPropagation();
  20. });
  21. modalDom.addEventListener('click', function () {
  22. PopupManager.doOnModalClick && PopupManager.doOnModalClick();
  23. });
  24. }
  25. return modalDom;
  26. };
  27. var instances = {};
  28. var PopupManager = {
  29. zIndex: 2000,
  30. modalFade: true,
  31. getInstance: function getInstance(id) {
  32. return instances[id];
  33. },
  34. register: function register(id, instance) {
  35. if (id && instance) {
  36. instances[id] = instance;
  37. }
  38. },
  39. deregister: function deregister(id) {
  40. if (id) {
  41. instances[id] = null;
  42. delete instances[id];
  43. }
  44. },
  45. nextZIndex: function nextZIndex() {
  46. return PopupManager.zIndex++;
  47. },
  48. modalStack: [],
  49. doOnModalClick: function doOnModalClick() {
  50. var topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
  51. if (!topItem) return;
  52. var instance = PopupManager.getInstance(topItem.id);
  53. if (instance && instance.closeOnClickModal) {
  54. instance.close();
  55. }
  56. },
  57. openModal: function openModal(id, zIndex, dom, modalClass, modalFade) {
  58. if (_vue2.default.prototype.$isServer) return;
  59. if (!id || zIndex === undefined) return;
  60. this.modalFade = modalFade;
  61. var modalStack = this.modalStack;
  62. for (var i = 0, j = modalStack.length; i < j; i++) {
  63. var item = modalStack[i];
  64. if (item.id === id) {
  65. return;
  66. }
  67. }
  68. var modalDom = getModal();
  69. (0, _dom.addClass)(modalDom, 'v-modal');
  70. if (this.modalFade && !hasModal) {
  71. (0, _dom.addClass)(modalDom, 'v-modal-enter');
  72. }
  73. if (modalClass) {
  74. var classArr = modalClass.trim().split(/\s+/);
  75. classArr.forEach(function (item) {
  76. return (0, _dom.addClass)(modalDom, item);
  77. });
  78. }
  79. setTimeout(function () {
  80. (0, _dom.removeClass)(modalDom, 'v-modal-enter');
  81. }, 200);
  82. if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
  83. dom.parentNode.appendChild(modalDom);
  84. } else {
  85. document.body.appendChild(modalDom);
  86. }
  87. if (zIndex) {
  88. modalDom.style.zIndex = zIndex;
  89. }
  90. modalDom.tabIndex = 0;
  91. modalDom.style.display = '';
  92. this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
  93. },
  94. closeModal: function closeModal(id) {
  95. var modalStack = this.modalStack;
  96. var modalDom = getModal();
  97. if (modalStack.length > 0) {
  98. var topItem = modalStack[modalStack.length - 1];
  99. if (topItem.id === id) {
  100. if (topItem.modalClass) {
  101. var classArr = topItem.modalClass.trim().split(/\s+/);
  102. classArr.forEach(function (item) {
  103. return (0, _dom.removeClass)(modalDom, item);
  104. });
  105. }
  106. modalStack.pop();
  107. if (modalStack.length > 0) {
  108. modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
  109. }
  110. } else {
  111. for (var i = modalStack.length - 1; i >= 0; i--) {
  112. if (modalStack[i].id === id) {
  113. modalStack.splice(i, 1);
  114. break;
  115. }
  116. }
  117. }
  118. }
  119. if (modalStack.length === 0) {
  120. if (this.modalFade) {
  121. (0, _dom.addClass)(modalDom, 'v-modal-leave');
  122. }
  123. setTimeout(function () {
  124. if (modalStack.length === 0) {
  125. if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
  126. modalDom.style.display = 'none';
  127. PopupManager.modalDom = undefined;
  128. }
  129. (0, _dom.removeClass)(modalDom, 'v-modal-leave');
  130. }, 200);
  131. }
  132. }
  133. };
  134. var getTopPopup = function getTopPopup() {
  135. if (_vue2.default.prototype.$isServer) return;
  136. if (PopupManager.modalStack.length > 0) {
  137. var topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
  138. if (!topPopup) return;
  139. var instance = PopupManager.getInstance(topPopup.id);
  140. return instance;
  141. }
  142. };
  143. if (!_vue2.default.prototype.$isServer) {
  144. // handle `esc` key when the popup is shown
  145. window.addEventListener('keydown', function (event) {
  146. if (event.keyCode === 27) {
  147. var topPopup = getTopPopup();
  148. if (topPopup && topPopup.closeOnPressEscape) {
  149. topPopup.handleClose ? topPopup.handleClose() : topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close();
  150. }
  151. }
  152. });
  153. }
  154. exports.default = PopupManager;