index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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. props: popupMixinProps,
  56. data: function data() {
  57. return {
  58. inited: this.value
  59. };
  60. },
  61. computed: {
  62. shouldRender: function shouldRender() {
  63. return this.inited || !this.lazyRender;
  64. }
  65. },
  66. watch: {
  67. value: function value(val) {
  68. var type = val ? 'open' : 'close';
  69. this.inited = this.inited || this.value;
  70. this[type]();
  71. if (!options.skipToggleEvent) {
  72. this.$emit(type);
  73. }
  74. },
  75. overlay: 'renderOverlay'
  76. },
  77. mounted: function mounted() {
  78. if (this.value) {
  79. this.open();
  80. }
  81. },
  82. /* istanbul ignore next */
  83. activated: function activated() {
  84. if (this.shouldReopen) {
  85. this.$emit('input', true);
  86. this.shouldReopen = false;
  87. }
  88. },
  89. beforeDestroy: function beforeDestroy() {
  90. (0, _overlay.removeOverlay)(this);
  91. if (this.opened) {
  92. this.removeLock();
  93. }
  94. if (this.getContainer) {
  95. (0, _node.removeNode)(this.$el);
  96. }
  97. },
  98. /* istanbul ignore next */
  99. deactivated: function deactivated() {
  100. if (this.value) {
  101. this.close();
  102. this.shouldReopen = true;
  103. }
  104. },
  105. methods: {
  106. open: function open() {
  107. /* istanbul ignore next */
  108. if (this.$isServer || this.opened) {
  109. return;
  110. } // cover default zIndex
  111. if (this.zIndex !== undefined) {
  112. _context.context.zIndex = this.zIndex;
  113. }
  114. this.opened = true;
  115. this.renderOverlay();
  116. this.addLock();
  117. },
  118. addLock: function addLock() {
  119. if (this.lockScroll) {
  120. (0, _event.on)(document, 'touchstart', this.touchStart);
  121. (0, _event.on)(document, 'touchmove', this.onTouchMove);
  122. if (!_context.context.lockCount) {
  123. document.body.classList.add('van-overflow-hidden');
  124. }
  125. _context.context.lockCount++;
  126. }
  127. },
  128. removeLock: function removeLock() {
  129. if (this.lockScroll && _context.context.lockCount) {
  130. _context.context.lockCount--;
  131. (0, _event.off)(document, 'touchstart', this.touchStart);
  132. (0, _event.off)(document, 'touchmove', this.onTouchMove);
  133. if (!_context.context.lockCount) {
  134. document.body.classList.remove('van-overflow-hidden');
  135. }
  136. }
  137. },
  138. close: function close() {
  139. if (!this.opened) {
  140. return;
  141. }
  142. (0, _overlay.closeOverlay)(this);
  143. this.opened = false;
  144. this.removeLock();
  145. this.$emit('input', false);
  146. },
  147. onTouchMove: function onTouchMove(event) {
  148. this.touchMove(event);
  149. var direction = this.deltaY > 0 ? '10' : '01';
  150. var el = (0, _scroll.getScroller)(event.target, this.$el);
  151. var scrollHeight = el.scrollHeight,
  152. offsetHeight = el.offsetHeight,
  153. scrollTop = el.scrollTop;
  154. var status = '11';
  155. /* istanbul ignore next */
  156. if (scrollTop === 0) {
  157. status = offsetHeight >= scrollHeight ? '00' : '01';
  158. } else if (scrollTop + offsetHeight >= scrollHeight) {
  159. status = '10';
  160. }
  161. /* istanbul ignore next */
  162. if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
  163. (0, _event.preventDefault)(event, true);
  164. }
  165. },
  166. renderOverlay: function renderOverlay() {
  167. var _this = this;
  168. if (this.$isServer || !this.value) {
  169. return;
  170. }
  171. this.$nextTick(function () {
  172. _this.updateZIndex(_this.overlay ? 1 : 0);
  173. if (_this.overlay) {
  174. (0, _overlay.openOverlay)(_this, {
  175. zIndex: _context.context.zIndex++,
  176. duration: _this.duration,
  177. className: _this.overlayClass,
  178. customStyle: _this.overlayStyle
  179. });
  180. } else {
  181. (0, _overlay.closeOverlay)(_this);
  182. }
  183. });
  184. },
  185. updateZIndex: function updateZIndex(value) {
  186. if (value === void 0) {
  187. value = 0;
  188. }
  189. this.$el.style.zIndex = ++_context.context.zIndex + value;
  190. }
  191. }
  192. };
  193. }