wot-design/lib/mixins/popup/index.js

Mobile UI components built on vue.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.stopPropagation = stopPropagation;
exports.preventDefault = preventDefault;
exports.default = void 0;

var _context = require("./context");

var _modal = require("./modal");

var _touch = _interopRequireDefault(require("../touch"));

var _scroll = require("../../utils/scroll");

var _event = require("../../utils/event");

function stopPropagation(event) {
  event.stopPropagation();
}

function preventDefault(event, isStopPropagation) {
  /* istanbul ignore else */
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    event.preventDefault();
  }

  if (isStopPropagation) {
    stopPropagation(event);
  }
}

var _default2 = {
  mixins: [_touch.default],
  data: function data() {
    return {
      inited: this.value
    };
  },
  props: {
    value: Boolean,
    lockScroll: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPopstate: {
      type: Boolean,
      default: true
    },
    zIndex: Number,
    duration: {
      type: Number,
      default: 300
    },
    modal: {
      type: Boolean,
      default: true
    },
    modalStyle: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    teleport: {
      type: [String, Object],
      default: 'body'
    }
  },
  watch: {
    value: function value(val) {
      var type = val ? 'open' : 'close';
      this.inited = this.inited || this.value;
      this[type]();
      this.$emit(type);
    },
    teleport: 'appendTeleport'
  },
  methods: {
    open: function open() {
      if (this.$isServer || this.opened) return;

      if (this.zIndex !== undefined) {
        _context.context.zIndex = this.zIndex;
      }

      this.opened = true;
      this.modal && this.renderModal();

      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('wd-overflow-hidden');
        }

        _context.context.lockCount++;
      }
    },
    close: function close() {
      if (!this.opened) return;

      if (this.lockScroll) {
        (0, _event.off)(document, 'touchstart', this.touchStart);
        (0, _event.off)(document, 'touchmove', this.onTouchMove);
        _context.context.lockCount--;

        if (!_context.context.lockCount) {
          document.body.classList.remove('wd-overflow-hidden');
        }
      }

      this.opened = false;
      this.modal && (0, _modal.closeModal)(this);
      this.$emit('input', false);
    },
    renderModal: function renderModal() {
      this.$el.style.zIndex = ++_context.context.zIndex + 1;
      (0, _modal.openModal)(this, {
        duration: this.duration,
        zIndex: _context.context.zIndex++,
        closeOnClickModal: this.closeOnClickModal,
        modalStyle: this.modalStyle
      });
    },
    onTouchMove: function onTouchMove(event) {
      this.touchMove(event);
      var direction = this.deltaY > 0 ? '10' : '01';
      var el = (0, _scroll.getScrollEventTarget)(event.target, this.$el);
      var scrollHeight = el.scrollHeight,
          offsetHeight = el.offsetHeight,
          scrollTop = el.scrollTop;
      var status = '11';

      if (scrollTop === 0) {
        status = offsetHeight >= scrollHeight ? '00' : '01';
      } else if (scrollTop + offsetHeight >= scrollHeight) {
        status = '10';
      }

      if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
        preventDefault(event);
      }
    },
    appendTeleport: function appendTeleport() {
      if (this.$isServer) return;
      var to = 'body';
      var disabled = false;
      var teleportType = typeof this.teleport;

      if (teleportType === 'object') {
        to = this.teleport.to;
        disabled = this.teleport.disabled;
      } else if (teleportType === 'string') {
        to = this.teleport;
      }

      if (!disabled) {
        var container = document.querySelector(to);
        container.appendChild(this.$el);
      }
    },
    handlePopstate: function handlePopstate() {
      this.$emit('popstate');
      this.close();
    }
  },
  mounted: function mounted() {
    if (this.teleport) {
      this.appendTeleport();
    }

    if (this.value) {
      this.open();
    }

    if (this.closeOnPopstate) {
      window.addEventListener('popstate', this.handlePopstate);
    }
  },
  beforeDestroy: function beforeDestroy() {
    if (this.teleport) {
      var parentNode = this.$el.parentNode;
      parentNode.removeChild(this.$el);
    }

    this.close();

    if (this.closeOnPopstate) {
      window.removeEventListener('popstate', this.handlePopstate);
    }
  }
};
exports.default = _default2;