popup-manager.js 5.1 KB

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