index.js 5.6 KB

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