index.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.PopupMixin = PopupMixin;
  4. exports.popupMixinProps = void 0;
  5. var _context = require("./context");
  6. var _overlay = require("./overlay");
  7. var _event = require("../../utils/dom/event");
  8. var _node = require("../../utils/dom/node");
  9. var _scroll = require("../../utils/dom/scroll");
  10. var _touch = require("../touch");
  11. var _portal = require("../portal");
  12. var _closeOnPopstate = require("../close-on-popstate");
  13. // Context
  14. // Utils
  15. // Mixins
  16. var popupMixinProps = {
  17. // Initial rendering animation
  18. transitionAppear: Boolean,
  19. // whether to show popup
  20. value: Boolean,
  21. // whether to show overlay
  22. overlay: Boolean,
  23. // overlay custom style
  24. overlayStyle: Object,
  25. // overlay custom class name
  26. overlayClass: String,
  27. // whether to close popup when overlay is clicked
  28. closeOnClickOverlay: Boolean,
  29. // z-index
  30. zIndex: [Number, String],
  31. // prevent body scroll
  32. lockScroll: {
  33. type: Boolean,
  34. default: true
  35. },
  36. // whether to lazy render
  37. lazyRender: {
  38. type: Boolean,
  39. default: true
  40. }
  41. };
  42. exports.popupMixinProps = popupMixinProps;
  43. function PopupMixin(options) {
  44. if (options === void 0) {
  45. options = {};
  46. }
  47. return {
  48. mixins: [_touch.TouchMixin, _closeOnPopstate.CloseOnPopstateMixin, (0, _portal.PortalMixin)({
  49. afterPortal: function afterPortal() {
  50. if (this.overlay) {
  51. (0, _overlay.updateOverlay)();
  52. }
  53. }
  54. })],
  55. provide: function provide() {
  56. return {
  57. vanPopup: this
  58. };
  59. },
  60. props: popupMixinProps,
  61. data: function data() {
  62. this.onReopenCallback = [];
  63. return {
  64. inited: this.value
  65. };
  66. },
  67. computed: {
  68. shouldRender: function shouldRender() {
  69. return this.inited || !this.lazyRender;
  70. }
  71. },
  72. watch: {
  73. value: function value(val) {
  74. var type = val ? 'open' : 'close';
  75. this.inited = this.inited || this.value;
  76. this[type]();
  77. if (!options.skipToggleEvent) {
  78. this.$emit(type);
  79. }
  80. },
  81. overlay: 'renderOverlay'
  82. },
  83. mounted: function mounted() {
  84. if (this.value) {
  85. this.open();
  86. }
  87. },
  88. /* istanbul ignore next */
  89. activated: function activated() {
  90. if (this.shouldReopen) {
  91. this.$emit('input', true);
  92. this.shouldReopen = false;
  93. }
  94. },
  95. beforeDestroy: function beforeDestroy() {
  96. (0, _overlay.removeOverlay)(this);
  97. if (this.opened) {
  98. this.removeLock();
  99. }
  100. if (this.getContainer) {
  101. (0, _node.removeNode)(this.$el);
  102. }
  103. },
  104. /* istanbul ignore next */
  105. deactivated: function deactivated() {
  106. if (this.value) {
  107. this.close();
  108. this.shouldReopen = true;
  109. }
  110. },
  111. methods: {
  112. open: function open() {
  113. /* istanbul ignore next */
  114. if (this.$isServer || this.opened) {
  115. return;
  116. } // cover default zIndex
  117. if (this.zIndex !== undefined) {
  118. _context.context.zIndex = this.zIndex;
  119. }
  120. this.opened = true;
  121. this.renderOverlay();
  122. this.addLock();
  123. this.onReopenCallback.forEach(function (callback) {
  124. callback();
  125. });
  126. },
  127. addLock: function addLock() {
  128. if (this.lockScroll) {
  129. (0, _event.on)(document, 'touchstart', this.touchStart);
  130. (0, _event.on)(document, 'touchmove', this.onTouchMove);
  131. if (!_context.context.lockCount) {
  132. document.body.classList.add('van-overflow-hidden');
  133. }
  134. _context.context.lockCount++;
  135. }
  136. },
  137. removeLock: function removeLock() {
  138. if (this.lockScroll && _context.context.lockCount) {
  139. _context.context.lockCount--;
  140. (0, _event.off)(document, 'touchstart', this.touchStart);
  141. (0, _event.off)(document, 'touchmove', this.onTouchMove);
  142. if (!_context.context.lockCount) {
  143. document.body.classList.remove('van-overflow-hidden');
  144. }
  145. }
  146. },
  147. close: function close() {
  148. if (!this.opened) {
  149. return;
  150. }
  151. (0, _overlay.closeOverlay)(this);
  152. this.opened = false;
  153. this.removeLock();
  154. this.$emit('input', false);
  155. },
  156. onTouchMove: function onTouchMove(event) {
  157. this.touchMove(event);
  158. var direction = this.deltaY > 0 ? '10' : '01';
  159. var el = (0, _scroll.getScroller)(event.target, this.$el);
  160. var scrollHeight = el.scrollHeight,
  161. offsetHeight = el.offsetHeight,
  162. scrollTop = el.scrollTop;
  163. var status = '11';
  164. /* istanbul ignore next */
  165. if (scrollTop === 0) {
  166. status = offsetHeight >= scrollHeight ? '00' : '01';
  167. } else if (scrollTop + offsetHeight >= scrollHeight) {
  168. status = '10';
  169. }
  170. /* istanbul ignore next */
  171. if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
  172. (0, _event.preventDefault)(event, true);
  173. }
  174. },
  175. renderOverlay: function renderOverlay() {
  176. var _this = this;
  177. if (this.$isServer || !this.value) {
  178. return;
  179. }
  180. this.$nextTick(function () {
  181. _this.updateZIndex(_this.overlay ? 1 : 0);
  182. if (_this.overlay) {
  183. (0, _overlay.openOverlay)(_this, {
  184. zIndex: _context.context.zIndex++,
  185. duration: _this.duration,
  186. className: _this.overlayClass,
  187. customStyle: _this.overlayStyle
  188. });
  189. } else {
  190. (0, _overlay.closeOverlay)(_this);
  191. }
  192. });
  193. },
  194. updateZIndex: function updateZIndex(value) {
  195. if (value === void 0) {
  196. value = 0;
  197. }
  198. this.$el.style.zIndex = ++_context.context.zIndex + value;
  199. },
  200. onReopen: function onReopen(callback) {
  201. this.onReopenCallback.push(callback);
  202. }
  203. }
  204. };
  205. }