vc-popup
Version:
vue popup components with power position and animation support and back key support as well
1,428 lines (1,230 loc) • 674 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
define(["vue"], factory);
else {
var a = typeof exports === 'object' ? factory(require("vue")) : factory(root["vue"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 27);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(module) {var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
(function webpackUniversalModuleDefinition(root, factory) {
if (( false ? 'undefined' : _typeof(exports)) === 'object' && ( false ? 'undefined' : _typeof(module)) === 'object') module.exports = factory(__webpack_require__(2));else if (true) !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(2)], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));else {
var a = (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' ? factory(require("vue")) : factory(root["vue"]);
for (var i in a) {
((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' ? exports : root)[i] = a[i];
}
}
})(typeof self !== 'undefined' ? self : undefined, function (__WEBPACK_EXTERNAL_MODULE_3__) {
return (/******/function (modules) {
// webpackBootstrap
/******/ // The module cache
/******/var installedModules = {};
/******/
/******/ // The require function
/******/function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/if (installedModules[moduleId]) {
/******/return installedModules[moduleId].exports;
/******/
}
/******/ // Create a new module (and put it into the cache)
/******/var module = installedModules[moduleId] = {
/******/i: moduleId,
/******/l: false,
/******/exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/module.l = true;
/******/
/******/ // Return the exports of the module
/******/return module.exports;
/******/
}
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/__webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/__webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/__webpack_require__.d = function (exports, name, getter) {
/******/if (!__webpack_require__.o(exports, name)) {
/******/Object.defineProperty(exports, name, {
/******/configurable: false,
/******/enumerable: true,
/******/get: getter
/******/ });
/******/
}
/******/
};
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/__webpack_require__.n = function (module) {
/******/var getter = module && module.__esModule ?
/******/function getDefault() {
return module['default'];
} :
/******/function getModuleExports() {
return module;
};
/******/__webpack_require__.d(getter, 'a', getter);
/******/return getter;
/******/
};
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
/******/
/******/ // __webpack_public_path__
/******/__webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/return __webpack_require__(__webpack_require__.s = 8);
/******/
}(
/************************************************************************/
/******/[
/* 0 */
/***/function (module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function (useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if (item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function (modules, mediaQuery) {
if (typeof modules === "string") modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for (var i = 0; i < this.length; i++) {
var id = this[i][0];
if (typeof id === "number") alreadyImportedModules[id] = true;
}
for (i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/
},
/* 1 */
/***/function (module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var hasDocument = typeof document !== 'undefined';
if (typeof DEBUG !== 'undefined' && DEBUG) {
if (!hasDocument) {
throw new Error('vue-style-loader cannot be used in a non-browser environment. ' + "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");
}
}
var listToStyles = __webpack_require__(15);
/*
type StyleObject = {
id: number;
parts: Array<StyleObjectPart>
}
type StyleObjectPart = {
css: string;
media: string;
sourceMap: ?string
}
*/
var stylesInDom = {/*
[id: number]: {
id: number,
refs: number,
parts: Array<(obj?: StyleObjectPart) => void>
}
*/};
var head = hasDocument && (document.head || document.getElementsByTagName('head')[0]);
var singletonElement = null;
var singletonCounter = 0;
var isProduction = false;
var noop = function noop() {};
var options = null;
var ssrIdKey = 'data-vue-ssr-id';
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase());
module.exports = function (parentId, list, _isProduction, _options) {
isProduction = _isProduction;
options = _options || {};
var styles = listToStyles(parentId, list);
addStylesToDom(styles);
return function update(newList) {
var mayRemove = [];
for (var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if (newList) {
styles = listToStyles(parentId, newList);
addStylesToDom(styles);
} else {
styles = [];
}
for (var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if (domStyle.refs === 0) {
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j]();
}
delete stylesInDom[domStyle.id];
}
}
};
};
function addStylesToDom(styles /* Array<StyleObject> */) {
for (var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if (domStyle) {
domStyle.refs++;
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for (; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j]));
}
if (domStyle.parts.length > item.parts.length) {
domStyle.parts.length = item.parts.length;
}
} else {
var parts = [];
for (var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j]));
}
stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts };
}
}
}
function createStyleElement() {
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
head.appendChild(styleElement);
return styleElement;
}
function addStyle(obj /* StyleObjectPart */) {
var update, remove;
var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]');
if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
return noop;
} else {
// has SSR styles but in dev mode.
// for some reason Chrome can't handle source map in server-rendered
// style tags - source maps in <style> only works if the style tag is
// created and inserted dynamically. So we remove the server rendered
// styles and inject new ones.
styleElement.parentNode.removeChild(styleElement);
}
}
if (isOldIE) {
// use singleton mode for IE9.
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement());
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else {
// use multi-style-tag mode in all other cases
styleElement = createStyleElement();
update = applyToTag.bind(null, styleElement);
remove = function remove() {
styleElement.parentNode.removeChild(styleElement);
};
}
update(obj);
return function updateStyle(newObj /* StyleObjectPart */) {
if (newObj) {
if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
return;
}
update(obj = newObj);
} else {
remove();
}
};
}
var replaceText = function () {
var textStore = [];
return function (index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
}();
function applyToSingletonTag(styleElement, index, remove, obj) {
var css = remove ? '' : obj.css;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = styleElement.childNodes;
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index]);
} else {
styleElement.appendChild(cssNode);
}
}
}
function applyToTag(styleElement, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;
if (media) {
styleElement.setAttribute('media', media);
}
if (options.ssrId) {
styleElement.setAttribute(ssrIdKey, obj.id);
}
if (sourceMap) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */';
}
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}
styleElement.appendChild(document.createTextNode(css));
}
}
/***/
},
/* 2 */
/***/function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _popupController = __webpack_require__(9);
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_popupController).default;
}
});
var _popupRegister = __webpack_require__(25);
Object.defineProperty(exports, 'popupRegister', {
enumerable: true,
get: function get() {
return _popupRegister.popupRegister;
}
});
var _effectRegister = __webpack_require__(6);
Object.defineProperty(exports, 'effectRegister', {
enumerable: true,
get: function get() {
return _effectRegister.effectRegister;
}
});
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
/***/
},
/* 3 */
/***/function (module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/
},
/* 4 */
/***/function (module, exports) {
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file.
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
module.exports = function normalizeComponent(rawScriptExports, compiledTemplate, functionalTemplate, injectStyles, scopeId, moduleIdentifier /* server only */
) {
var esModule;
var scriptExports = rawScriptExports = rawScriptExports || {};
// ES6 modules interop
var type = _typeof(rawScriptExports.default);
if (type === 'object' || type === 'function') {
esModule = rawScriptExports;
scriptExports = rawScriptExports.default;
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports;
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render;
options.staticRenderFns = compiledTemplate.staticRenderFns;
options._compiled = true;
}
// functional template
if (functionalTemplate) {
options.functional = true;
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context);
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (injectStyles) {
hook = injectStyles;
}
if (hook) {
var functional = options.functional;
var existing = functional ? options.render : options.beforeCreate;
if (!functional) {
// inject component registration as beforeCreate hook
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
} else {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook;
// register for functioal component in vue file
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return existing(h, context);
};
}
}
return {
esModule: esModule,
exports: scriptExports,
options: options
};
};
/***/
},
/* 5 */
/***/function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _effectRegister = __webpack_require__(6);
exports.default = {
name: 'vc-popup-base',
props: {
e: {
default: null
},
maskDisable: {
type: Boolean,
default: false
},
runtimeConfig: Object
},
data: function data() {
return {
positionType: null
};
},
created: function created() {
this.isShowing = false;
this.$animateDom = null;
this.afterEnterLocker = false;
this.afterLeaveLocker = false;
this._onOpenTimestamp = null;
this._animationConfigurable = null;
this._removeAnimationEndListener = null;
},
methods: {
// 以下是提供给外部使用的
setMaskOpacity: function setMaskOpacity(val) {
this.$refs.mask.style.opacity = val;
},
setMaskBgColor: function setMaskBgColor(val) {
this.$refs.mask.style.backgroundColor = val;
},
addMaskClass: function addMaskClass(name) {
this.$refs.mask.classList.add(name);
},
removeMaskClass: function removeMaskClass(name) {
this.$refs.mask.classList.remove(name);
},
trunOffMaskTransition: function trunOffMaskTransition() {
this.$refs.mask.style.webkitTransitionDuration = '0ms';
},
trunOnMaskTransition: function trunOnMaskTransition() {
this.$refs.mask.style.webkitTransitionDuration = '';
},
setAnimateDom: function setAnimateDom($dom) {
this.$animateDom = $dom;
},
getAnimateDom: function getAnimateDom($dom) {
return this.$animateDom || this.$refs.slot;
},
wrapSlotWith: function wrapSlotWith(TplConstructor, props) {
var vmWrapper = new TplConstructor({
el: document.createElement('div'),
propsData: props
});
this.$refs.slotContainer.appendChild(vmWrapper.$el);
vmWrapper.$refs.slot.appendChild(this.$refs.slot);
this.vmWrapper = vmWrapper;
return vmWrapper;
},
//内部使用的
_turnOffMask: function _turnOffMask() {
!this.maskDisable && this.vmSlot.$popupCtrl.close();
},
_maskPreventScroll: function _maskPreventScroll(e) {
this.isShowing === true && this.runtimeConfig.lockScroll && this.$refs.base === e.target && e.preventDefault();
},
_addAnimationEndListener: function _addAnimationEndListener(callback, lock) {
var _this = this;
var $dom = this.$animateDom || this.$refs.slot;
var safeBellTimer;
this[lock] = false;
var onAnimationEnd = function onAnimationEnd(e) {
if (e.target === $dom) {
if (_this[lock]) return;
_this._removeAnimationEndListener();
callback instanceof Function && callback();
_this[lock] = true;
}
};
$dom.addEventListener('transitionend', onAnimationEnd);
$dom.addEventListener('animationend', onAnimationEnd);
this.hasAnimationEndListener = true;
if (callback === this._afterLeave && Date.now() - this._onOpenTimestamp < 200) {
// 快速关闭的时候, 会导致animationEnd不会触发
safeBellTimer = setTimeout(function () {
onAnimationEnd({
target: $dom
});
}, 200);
}
this._removeAnimationEndListener = function () {
if (_this.hasAnimationEndListener) {
$dom.removeEventListener('transitionend', onAnimationEnd);
$dom.removeEventListener('animationend', onAnimationEnd);
_this.hasAnimationEndListener = false;
if (safeBellTimer) clearTimeout(safeBellTimer);
}
};
},
_beforeMount: function _beforeMount() {
this.$refs.slot.style.webkitTransitionDuration = '0ms';
if (this.runtimeConfig.lockScroll) document.body.style.overflow = 'hidden';
var className = this.runtimeConfig.className;
this._animationConfigurable = this.runtimeConfig.animationConfigurable;
if (typeof className === 'string') this.vmSlot.$el.classList.add(className);else if (className instanceof Array) this.vmSlot.$el.classList.add.apply(this.vmSlot.$el.classList, className);
this.vmSlot.popupEvt.beforeMount && this.vmSlot.popupEvt.beforeMount();
this._animation('beforeMount');
},
_afterMount: function _afterMount() {
this.vmSlot.$popupCtrl.configPosition(this.e);
this._animation('afterMount');
this._enter();
this.vmSlot.popupEvt.afterMount && this.vmSlot.popupEvt.afterMount();
},
_enter: function _enter() {
this._beforeEnter();
this.isShowing = true;
this._onOpenTimestamp = Date.now();
},
_leave: function _leave(callback) {
this._afterLeaveCallback = callback;
this._beforeLeave();
this.isShowing = false;
},
_beforeEnter: function _beforeEnter() {
var _this2 = this;
this._initMask();
var animationCfg = this.runtimeConfig.animation.in;
var maskOpacity = this.runtimeConfig.maskOpacity || 0.25;
var maskBgColor = this.runtimeConfig.maskBgColor;
var hasConfigAnimation = this._animationConfigurable && animationCfg !== undefined;
this.setMaskOpacity(animationCfg !== false ? 0 : maskOpacity);
this._animation('beforeEnter');
this._animation('init');
this.vmSlot.popupEvt.beforeEnter instanceof Function && this.vmSlot.popupEvt.beforeEnter(hasConfigAnimation);
!hasConfigAnimation && this.vmSlot.popupEvt.inAnimation instanceof Function && this.vmSlot.popupEvt.inAnimation();
this.runtimeConfig.beforeEnter instanceof Function && this.runtimeConfig.beforeEnter();
this.getAnimateDom().style.webkitTransitionDuration = '0ms';
this.$nextTick(function () {
requestAnimationFrame(function () {
_this2._addAnimationEndListener(_this2._afterEnter, 'afterEnterLocker');
_this2.$refs.slot.style.webkitTransitionDuration = '';
_this2.getAnimateDom().style.webkitTransitionDuration = '';
_this2.getAnimateDom().classList.add('vc-popup-default-transition');
_this2.setMaskOpacity(maskOpacity);
maskBgColor && _this2.setMaskBgColor(maskBgColor);
});
});
},
_afterEnter: function _afterEnter() {
if (this.animationendTriggered) return;
this._animation('afterEnter');
this.vmSlot.popupEvt.afterEnter instanceof Function && this.vmSlot.popupEvt.afterEnter();
this.runtimeConfig.afterEnter instanceof Function && this.runtimeConfig.afterEnter();
this.animationendTriggered = true;
},
_beforeLeave: function _beforeLeave() {
var _this3 = this;
this._freezeEvents();
this._removeAnimationEndListener();
requestAnimationFrame(function () {
var animationCfg = _this3.runtimeConfig.animation.out;
var hasConfigAnimation = _this3._animationConfigurable && animationCfg !== undefined;
_this3.setMaskOpacity(animationCfg !== false ? 0 : 0.25);
_this3._animation('beforeLeave');
_this3.vmSlot.popupEvt.beforeLeave instanceof Function && _this3.vmSlot.popupEvt.beforeLeave(hasConfigAnimation);
!hasConfigAnimation && _this3.vmSlot.popupEvt.outAnimation instanceof Function && _this3.vmSlot.popupEvt.outAnimation();
_this3.runtimeConfig.beforeLeave instanceof Function && _this3.runtimeConfig.beforeLeave();
_this3._addAnimationEndListener(_this3._afterLeave, 'afterLeaveLocker');
});
},
_afterLeave: function _afterLeave() {
this._animation('afterLeave');
this.vmSlot.popupEvt.afterLeave instanceof Function && this.vmSlot.popupEvt.afterLeave();
this.runtimeConfig.afterLeave instanceof Function && this.runtimeConfig.afterLeave();
this._afterLeaveCallback instanceof Function && this._afterLeaveCallback();
document.body.style.overflow = '';
},
_freezeEvents: function _freezeEvents() {
this.$refs.base.addEventListener('touchstart', this._stopPropagation, true);
this.$refs.base.addEventListener('touchmove', this._stopPropagation, true);
this.$refs.base.addEventListener('touchend', this._stopPropagation, true);
},
_stopPropagation: function _stopPropagation(e) {
e.stopPropagation();
e.preventDefault();
},
_animation: function _animation(evt) {
var _this4 = this;
var animation = this.runtimeConfig.animation;
if (!this._animationConfigurable) return;
if (animation instanceof Object === false) return;
var cfg;
var $dom = this.getAnimateDom();
var isPowerByTransition = animation.init !== undefined;
var animationOffClass = 'vc-animation-fake-off-' + evt;
var evtToCfg = {
beforeMount: 'in',
afterMount: 'in',
beforeEnter: 'in',
afterEnter: 'in',
beforeLeave: 'out',
afterLeave: 'out',
init: 'init'
};
var parseString = function parseString(val, unset) {
if (typeof val === 'string') {
if (!unset) $dom.classList.add(val);else $dom.classList.remove(val);
}
};
var parseBoolean = function parseBoolean(val, unset) {
if (typeof val === 'boolean') {
if (!unset) $dom.classList.add(animationOffClass);else $dom.classList.remove(animationOffClass);
}
};
var parseObject = function parseObject(val) {
var effect;
if (val instanceof Object) {
effect = _effectRegister.effectStack[val.effect];
if (effect) effect[evt] instanceof Function && effect[evt](val, _this4);
}
};
cfg = animation[evtToCfg[evt]];
if (cfg === undefined) return;
if (evt === 'beforeMount' || evt === 'afterMount' || evt === 'afterLeave') {
parseObject(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseObject(val);
});
} else if (evt === 'init') {
parseString(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val);
});
} else if (evt === 'beforeEnter') {
parseBoolean(cfg);
parseString(cfg);
parseObject(cfg);
isPowerByTransition && this.$nextTick(function () {
requestAnimationFrame(function () {
parseString(cfg, true);
});
});
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val);
parseObject(val);
});
} else if (evt === 'afterEnter') {
parseBoolean(cfg, true);
parseString(cfg, true);
parseObject(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val, true);
parseObject(val);
});
} else if (evt === 'beforeLeave') {
parseBoolean(cfg);
parseString(cfg);
parseObject(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val);
parseObject(val);
});
}
},
_initMask: function _initMask() {
if (this.runtimeConfig.positionType === 'absolute') {
// 因为背景没有文字, 所以可以使用动画偏移
this.$refs.mask.style.webkitTransform = 'translate(' + window.scrollX + 'px,' + window.scrollY + 'px)';
// mask就跟踪好了, 不使用fixed来做定位的了
if (!this.runtimeConfig.lockScroll) window.addEventListener('scroll', this._maskFollowScroll);
}
},
_maskFollowScroll: function _maskFollowScroll() {
this.$refs.mask.style.webkitTransitionDuration = '0ms';
this.$refs.mask.style.webkitTransform = 'translate(' + window.scrollX + 'px,' + window.scrollY + 'px)';
}
},
destroyed: function destroyed() {
this.$animateDom = null;
window.removeEventListener('scroll', this._maskFollowScroll);
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/
},
/* 6 */
/***/function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var effectStack = {};
function effectRegister(name, processor) {
if (effectStack[name] !== undefined) console.log('\u6CE8\u610F\u5DF2\u5B58\u5728' + name + '\u7684effect, \u5DF2\u8986\u76D6');
effectStack[name] = processor;
}
// 注册内置effect
/**
* zoomFromDom 效果是从触发事件点击的dom节点开始放大, 如其名
* fromDom: HTMLElemet
*/
effectRegister('zoomFromDom', {
beforeEnter: function beforeEnter(cfg, vmBase) {
var $fromDom = cfg.fromDom || (vmBase.e ? vmBase.e.target : null),
$slot = vmBase.vmSlot.$el,
fromDomRect,
slotRect,
scaleAdjusted = 2 / 3,
translateX,
translateY,
fromDomCenterX,
fromDomCenterY,
slotCenterX,
slotCenterY;
if (!$fromDom) throw new Error('无法找到zoomFromDom的参考dom节点, 请检查设置');
if ($fromDom) {
slotRect = $slot.getBoundingClientRect();
fromDomRect = $fromDom.getBoundingClientRect();
if (cfg.scale !== undefined) scaleAdjusted = cfg.scale;
slotCenterX = slotRect.left + slotRect.width / 2;
slotCenterY = slotRect.top + slotRect.height / 2;
fromDomCenterX = fromDomRect.left + fromDomRect.width / 2;
fromDomCenterY = fromDomRect.top + fromDomRect.height / 2;
translateX = fromDomCenterX - slotCenterX;
translateY = fromDomCenterY - slotCenterY;
$slot._x = translateX * scaleAdjusted;
$slot._y = translateY * scaleAdjusted;
$slot._scale = scaleAdjusted;
//无论in或者out都是一样的
$slot.style.opacity = 0;
$slot.style.webkitTransform = 'translate3d(' + $slot._x + 'px, ' + $slot._y + 'px,0) scale(' + $slot._scale + ')';
vmBase.$nextTick(function () {
requestAnimationFrame(function () {
$slot.style.webkitTransform = null;
$slot.style.webkitTransitionDuration = null;
$slot.style.opacity = null;
});
});
}
},
beforeLeave: function beforeLeave(cfg, vmBase) {
var $slot = vmBase.vmSlot.$el;
$slot.style.opacity = 0;
$slot.style.webkitTransform = 'translate3d(' + $slot._x + 'px, ' + $slot._y + 'px,0) scale(' + $slot._scale + ')';
}
});
/**
* addClass 方便添加class的工具, 算是一个内置的拓展, 增加onDom的配置
* value: String | Array
* onDom: HTMLElemet | String(parse by document.querySelector)
*/
effectRegister('addClass', {
beforeEnter: function beforeEnter(cfg, vmBase) {
var $dom = vmBase.vmSlot.$el;
if (typeof cfg.onDom === 'string') $dom = document.querySelector(cfg.onDom);else if (cfg.onDom instanceof HTMLElement) $dom = cfg.onDom;
if (typeof cfg.value === 'string') $dom.classList.add(cfg.value);else if (cfg.value instanceof Array) $dom.classList.add.apply($dom.classList, cfg.value);
},
beforeLeave: function beforeLeave(cfg, vmBase) {
var $dom = vmBase.vmSlot.$el;
if (typeof cfg.onDom === 'string') $dom = document.querySelector(cfg.onDom);else if (cfg.onDom instanceof HTMLElement) $dom = cfg.onDom;
if (typeof cfg.value === 'string') $dom.classList.add(cfg.value);else if (cfg.value instanceof Array) $dom.classList.add.apply($dom.classList, cfg.value);
}
});
/**
* bodyBlur 实现模糊效果, 等同于addClass到#app而已, 这是图个方便
*/
effectRegister('bodyBlur', {
beforeEnter: function beforeEnter() {
document.querySelector('#app').style.filter = 'blur(1.5px)';
},
beforeLeave: function beforeLeave() {
document.querySelector('#app').style.filter = '';
}
});
exports.default = effectRegister;
exports.effectStack = effectStack;
exports.effectRegister = effectRegister;
/***/
},
/* 7 */
/***/function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//
//
//
//
//
//
//
//
//
//
//
exports.default = {
name: 'vc-popup-conatiner',
methods: {
addPopup: function addPopup($dom) {
this.$refs.container.appendChild($dom);
},
removePopup: function removePopup($dom) {
this.$refs.container.removeChild($dom);
},
turnOn: function turnOn() {
this.$el.classList.add('on');
},
turnOff: function turnOff() {
this.$el.classList.remove('on');
}
}
};
/***/
},
/* 8 */
/***/function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _popupBase = __webpack_require__(2);
var version = '0.1.25';
var install = function install(Vue) {
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (install.installed) return;
__webpack_require__(2);
};
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
exports.default = {
install: install,
version: version,
popupRegister: _popupBase.popupRegister,
effectRegister: _popupBase.effectRegister
};
/***/
},
/* 9 */
/***/function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Popup = undefined;
var _vue = __webpack_require__(3);
var _vue2 = _interopRequireDefault(_vue);
var _router = __webpack_require__(10);
var _router2 = _interopRequireDefault(_router);
var _popupBase = __webpack_require__(12);
var _popupBase2 = _interopRequireDefault(_popupBase);
var _popupConatiner = __webpack_require__(17);
var _popupConatiner2 = _interopRequireDefault(_popupConatiner);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function top(arr) {
return arr[arr.length - 1];
}
function prev(arr) {
return arr[arr.length - 2];
}
function splitPopupValue(val) {
return val ? decodeURIComponent(val).split('/') : [];
}
var Popup;
if (_vue2.default.prototype.__popup__ !== undefined) {
exports.Popup = Popup = _vue2.default.prototype.__popup__;
} else {
__webpack_require__(21);
__webpack_require__(23);
var popupContainer = null;
var vmBaseOfRouterId = {};
var constructorOfRouterId = {};
var PopupBaseConstructor = _vue2.default.extend(_popupBase2.default);
var PopupContainerConstructor = _vue2.default.extend(_popupConatiner2.default);
var containerInBody = document.body.getElementsByClassName('vc-popup-conatiner');
_router2.default.initialParam('popup');
if (containerInBody.length === 0) {
popupContainer = new PopupContainerConstructor({
el: document.createElement('div')
});
document.body.appendChild(popupContainer.$el);
} else {
popupContainer = containerInBody[0].__vue__;
}
// TODO: 提供全局常用方法来实现引用解耦
_vue2.default.prototype.$popup = {};
_vue2.default.prototype.$popup.prototype = {
$closeTop: function $closeTop() {},
$getPopupCtrls: function $getPopupCtrls() {}
};
_vue2.default.prototype.__popup__ = exports.Popup = Popup = {
fromHashChange: false,
fromUpdateRouter: false,
popupInShowingNum: 0,
lastPageStatus: null,
open: function open(vmBase, routerId) {
popupContainer.turnOn();
this.popupInShowingNum++;
vmBase._beforeMount();
popupContainer.addPopup(vmBase.$el);
vmBase._afterMount();
this.updateRouter(routerId);
this.lastPageStatus = 'showing';
},
close: function close(routerId) {
var _this = this;
var vmBase = vmBaseOfRouterId[routerId];
this.lastPageStatus = 'closing';
vmBase && vmBase._leave(function () {
if (--_this.popupInShowingNum === 0) {
popupContainer.turnOff();
_this.lastPageStatus = 'closed';
}
_this.destroyPopup(routerId);
});
},
register: function register(routerId, trigger) {
constructorOfRouterId[routerId] = trigger;
},
createPopup: function createPopup(config, runtimeConfig, routerId) {
config.runtimeConfig = runtimeConfig;
config.e = runtimeConfig.propsData.e;
return vmBaseOfRouterId[routerId] = new PopupBaseConstructor({
el: document.createElement('div'),
propsData: config
});
},
destroyPopup: function destroyPopup(routerId) {
var vmBase = vmBaseOfRouterId[routerId];
vmBaseOfRouterId[routerId] = undefined;
vmBase.isShowing = false;
popupContainer.removePopup(vmBase.$el);
vmBase.vmSlot.$destroy();
vmBase.$destroy();
},
updateRouter: function updateRouter(popupName) {
if (this.fromHashChange) {
this.fromHashChange = false;
return this.fromHashChange;
}
var value = _router2.default.getParamValue('popup');
if (value && value.split('/').pop() !== popupName) {
value += '/' + popupName;
} else {
value = popupName;
}
this.fromUpdateRouter = true;
_router2.default.parseHashCommand('&popup=' + value);
}
};
// 返回键
_router2.default.listenParam('popup', {
onEnter: function onEnter(val) {
if (Popup.fromUpdateRouter) {
Popup.fromUpdateRouter = false;
return Popup.fromUpdateRouter;
}
var list = splitPopupValue(val);
var trigger = constructorOfRouterId[top(list)];
Popup.fromHashChange = true;
trigger && trigger();
},
onLeave: function onLeave(val, oVal) {
var oList = splitPopupValue(oVal);
var list = splitPopupValue(val);
var oListTop = top(oList);
if (prev(list) !== oListTop) {
Popup.fromUpdateRouter = false;
Popup.fromHashChange = false;
Popup.close(oListTop);
}
},
onBack: function onBack(val) {}
});
// esc键
var ESC_KEY_CODE = 27;
window.addEventListener('keyup', function (e) {
e.keyCode === ESC_KEY_CODE && Popup.lastPageStatus === 'showing' && Popup.popupInShowingNum > 0 && history.back();
});
}
exports.Popup = Popup;
exports.default = Popup;
/***/
},
/* 10 */
/***/function (module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Router = undefined;
var _utils = __webpack_require__(11);
var Router = {
history: [],
listeners: {},
init: function init() {
var _this = this;
Object.defineProperty(this.history, 'top', {
get: function get() {
return this[this.length - 1];
}
});
Object.defineProperty(this.history, 'prev', {
get: function get() {
return this[this.length - 2];
}
});
if (window) {
window.addEventListener('popstate', function () {
var hash = location.hash;
var params, lastParams;
// 返回
if (_this.history.prev === hash) {
lastParams = _this.getUrlParams(_this.history.pop());
params = _this.getUrlParams(_this.history.top);
(0, _utils.forEach)(_this.listeners, function (config, name) {
if (params.hasOwnProperty(name)) {
config.onBack(params[name], lastParams[name]);
}
if (lastParams.hasOwnProperty(name)) {
config.onLeave(params[name], lastParams[name]);
}
});
// 前进
} else if (_this.history.top !== hash) {
params = _this.getUrlParams(hash);
lastParams = _this.getUrlParams(_this.history.top);
_this.history.push(hash);
(0, _utils.forEach)(_this.listeners, function (config, name) {
if (params.hasOwnProperty(name)) {
config.onEnter(params[name], lastParams[name]);
}
if (lastParams.hasOwnProperty(name)) {
config.onLeave(params[name], lastParams[name]);
}
});
}
});
this.history.push(location.hash);
}
},
getUrlParams: function getUrlParams(url) {
var params = {};
if (url.indexOf('?') !== -1) {
url = url.slice(url.index