123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- "use strict";
- exports.__esModule = true;
- exports.PopupMixin = PopupMixin;
- exports.popupMixinProps = void 0;
- var _context = require("./context");
- var _overlay = require("./overlay");
- var _event = require("../../utils/dom/event");
- var _node = require("../../utils/dom/node");
- var _scroll = require("../../utils/dom/scroll");
- var _touch = require("../touch");
- var _portal = require("../portal");
- var _closeOnPopstate = require("../close-on-popstate");
- // Context
- // Utils
- // Mixins
- var popupMixinProps = {
- // Initial rendering animation
- transitionAppear: Boolean,
- // whether to show popup
- value: Boolean,
- // whether to show overlay
- overlay: Boolean,
- // overlay custom style
- overlayStyle: Object,
- // overlay custom class name
- overlayClass: String,
- // whether to close popup when overlay is clicked
- closeOnClickOverlay: Boolean,
- // z-index
- zIndex: [Number, String],
- // prevent body scroll
- lockScroll: {
- type: Boolean,
- default: true
- },
- // whether to lazy render
- lazyRender: {
- type: Boolean,
- default: true
- }
- };
- exports.popupMixinProps = popupMixinProps;
- function PopupMixin(options) {
- if (options === void 0) {
- options = {};
- }
- return {
- mixins: [_touch.TouchMixin, _closeOnPopstate.CloseOnPopstateMixin, (0, _portal.PortalMixin)({
- afterPortal: function afterPortal() {
- if (this.overlay) {
- (0, _overlay.updateOverlay)();
- }
- }
- })],
- provide: function provide() {
- return {
- vanPopup: this
- };
- },
- props: popupMixinProps,
- data: function data() {
- this.onReopenCallback = [];
- return {
- inited: this.value
- };
- },
- computed: {
- shouldRender: function shouldRender() {
- return this.inited || !this.lazyRender;
- }
- },
- watch: {
- value: function value(val) {
- var type = val ? 'open' : 'close';
- this.inited = this.inited || this.value;
- this[type]();
- if (!options.skipToggleEvent) {
- this.$emit(type);
- }
- },
- overlay: 'renderOverlay'
- },
- mounted: function mounted() {
- if (this.value) {
- this.open();
- }
- },
- /* istanbul ignore next */
- activated: function activated() {
- if (this.shouldReopen) {
- this.$emit('input', true);
- this.shouldReopen = false;
- }
- },
- beforeDestroy: function beforeDestroy() {
- (0, _overlay.removeOverlay)(this);
- if (this.opened) {
- this.removeLock();
- }
- if (this.getContainer) {
- (0, _node.removeNode)(this.$el);
- }
- },
- /* istanbul ignore next */
- deactivated: function deactivated() {
- if (this.value) {
- this.close();
- this.shouldReopen = true;
- }
- },
- methods: {
- open: function open() {
- /* istanbul ignore next */
- if (this.$isServer || this.opened) {
- return;
- } // cover default zIndex
- if (this.zIndex !== undefined) {
- _context.context.zIndex = this.zIndex;
- }
- this.opened = true;
- this.renderOverlay();
- this.addLock();
- this.onReopenCallback.forEach(function (callback) {
- callback();
- });
- },
- addLock: function addLock() {
- if (this.lockScroll) {
- (0, _event.on)(document, 'touchstart', this.touchStart);
- (0, _event.on)(document, 'touchmove', this.onTouchMove);
- if (!_context.context.lockCount) {
- document.body.classList.add('van-overflow-hidden');
- }
- _context.context.lockCount++;
- }
- },
- removeLock: function removeLock() {
- if (this.lockScroll && _context.context.lockCount) {
- _context.context.lockCount--;
- (0, _event.off)(document, 'touchstart', this.touchStart);
- (0, _event.off)(document, 'touchmove', this.onTouchMove);
- if (!_context.context.lockCount) {
- document.body.classList.remove('van-overflow-hidden');
- }
- }
- },
- close: function close() {
- if (!this.opened) {
- return;
- }
- (0, _overlay.closeOverlay)(this);
- this.opened = false;
- this.removeLock();
- this.$emit('input', false);
- },
- onTouchMove: function onTouchMove(event) {
- this.touchMove(event);
- var direction = this.deltaY > 0 ? '10' : '01';
- var el = (0, _scroll.getScroller)(event.target, this.$el);
- var scrollHeight = el.scrollHeight,
- offsetHeight = el.offsetHeight,
- scrollTop = el.scrollTop;
- var status = '11';
- /* istanbul ignore next */
- if (scrollTop === 0) {
- status = offsetHeight >= scrollHeight ? '00' : '01';
- } else if (scrollTop + offsetHeight >= scrollHeight) {
- status = '10';
- }
- /* istanbul ignore next */
- if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
- (0, _event.preventDefault)(event, true);
- }
- },
- renderOverlay: function renderOverlay() {
- var _this = this;
- if (this.$isServer || !this.value) {
- return;
- }
- this.$nextTick(function () {
- _this.updateZIndex(_this.overlay ? 1 : 0);
- if (_this.overlay) {
- (0, _overlay.openOverlay)(_this, {
- zIndex: _context.context.zIndex++,
- duration: _this.duration,
- className: _this.overlayClass,
- customStyle: _this.overlayStyle
- });
- } else {
- (0, _overlay.closeOverlay)(_this);
- }
- });
- },
- updateZIndex: function updateZIndex(value) {
- if (value === void 0) {
- value = 0;
- }
- this.$el.style.zIndex = ++_context.context.zIndex + value;
- },
- onReopen: function onReopen(callback) {
- this.onReopenCallback.push(callback);
- }
- }
- };
- }
|