vc-popup
Version:
vue popup components with power position and animation support and back key support as well
2,446 lines • 76.2 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("vc-popup-base"), require("vue"));
else if(typeof define === 'function' && define.amd)
define(["vc-popup-base", "vue"], factory);
else {
var a = typeof exports === 'object' ? factory(require("vc-popup-base"), require("vue")) : factory(root["vc-popup-base"], root["vue"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_5__) {
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 = 131);
/******/ })
/************************************************************************/
/******/ ({
/***/ 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__(4)
/*
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 () {}
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 () {
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))
}
}
/***/ }),
/***/ 131:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var version = '0.1.25';
var install = function install(Vue) {
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (install.installed) return;
Vue.use(__webpack_require__(3));
__webpack_require__(132);
};
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
exports.default = {
install: install,
version: version
};
/***/ }),
/***/ 132:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _vcPopupBase = __webpack_require__(3);
var _index = __webpack_require__(133);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var popupConfig = {};
var defaultConfig = {
position: 'domRelative',
autoSetOrthocenter: true,
animationConfigurable: false,
maskOpacity: 1
};
exports.default = (0, _vcPopupBase.popupRegister)('imgViewer', _index2.default, popupConfig, defaultConfig);
/***/ }),
/***/ 133:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__ = __webpack_require__(36);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__);
/* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_6d9755c3_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_index_vue__ = __webpack_require__(145);
var disposed = false
function injectStyle (ssrContext) {
if (disposed) return
__webpack_require__(134)
}
var normalizeComponent = __webpack_require__(2)
/* script */
/* template */
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue___default.a,
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_6d9755c3_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_index_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src\\components\\popup-img-viewer\\index.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-6d9755c3", Component.options)
} else {
hotAPI.reload("data-v-6d9755c3", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
/***/ }),
/***/ 134:
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(135);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(1)("606f9a3f", content, false, {});
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-6d9755c3\",\"scoped\":false,\"hasInlineConfig\":false}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./index.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-6d9755c3\",\"scoped\":false,\"hasInlineConfig\":false}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./index.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/***/ 135:
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(false);
// imports
// module
exports.push([module.i, "\n.vc-img-viewer-swipe.addWeight{\n height: 100vh;\n width: 100vw;\n}\n.vc-img-viewer-swipe-img{\n width: 100vw;\n position: absolute;\n -webkit-transition: all 350ms ease;\n transition: all 350ms ease;\n will-change: transform, opacity;\n}\n.vc-img-viewer-swipe-wrapper{\n width: 100vw;\n height: 100vh;\n overflow: auto;\n position: absolute;\n}\n", ""]);
// exports
/***/ }),
/***/ 136:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _index = __webpack_require__(137);
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_index).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/***/ 137:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__ = __webpack_require__(37);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__);
/* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_65a4e420_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_index_vue__ = __webpack_require__(141);
var disposed = false
function injectStyle (ssrContext) {
if (disposed) return
__webpack_require__(138)
}
var normalizeComponent = __webpack_require__(2)
/* script */
/* template */
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue___default.a,
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_65a4e420_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_index_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src\\components\\swipe\\index.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-65a4e420", Component.options)
} else {
hotAPI.reload("data-v-65a4e420", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
/***/ }),
/***/ 138:
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(139);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(1)("68453228", content, false, {});
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-65a4e420\",\"scoped\":false,\"hasInlineConfig\":false}!../../../node_modules/sass-loader/lib/loader.js?{\"sourceMap\":false}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./index.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-65a4e420\",\"scoped\":false,\"hasInlineConfig\":false}!../../../node_modules/sass-loader/lib/loader.js?{\"sourceMap\":false}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./index.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/***/ 139:
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(false);
// imports
// module
exports.push([module.i, "\n.vc-swipe {\n overflow: hidden;\n width: 100%;\n}\n.vc-swipe .vc-swipe-wrapper {\n height: 100%;\n}\n.vc-swipe .vc-swipe-wrapper .vc-swipe-items {\n height: 100%;\n overflow-y: hidden;\n will-change: transform;\n -webkit-transition: all 0.2s ease 0s;\n transition: all 0.2s ease 0s;\n}\n.vc-swipe .vc-swipe-wrapper .vc-swipe-items div {\n position: relative;\n height: 100%;\n width: 100vw;\n display: block;\n float: left;\n overflow-y: auto;\n}\n.vc-swipe .vc-swipe-wrapper.loop .vc-swipe-items {\n will-change: unset;\n -webkit-transition: none;\n transition: none;\n position: relative;\n z-index: 0;\n}\n.vc-swipe .vc-swipe-wrapper.loop .vc-swipe-items div {\n will-change: transform;\n -webkit-transition: all 0.2s ease 0s;\n transition: all 0.2s ease 0s;\n position: absolute;\n}\n.vc-swipe .vc-swipe-indicators {\n position: absolute;\n bottom: 10px;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n}\n.vc-swipe .vc-swipe-indicators .vc-swipe-indicator {\n display: inline-block;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n margin: 0 4px;\n background-color: #000;\n opacity: 0.3;\n}\n.vc-swipe .vc-swipe-indicators .vc-swipe-indicator.is-active {\n background-color: #fff;\n}\n.vc-swipe .noneAnimation, .vc-swipe .subNoneAnimation * {\n -webkit-transition: none !important;\n transition: none !important;\n}\n.vc-swipe *::-webkit-scrollbar {\n display: none;\n}\n", ""]);
// exports
/***/ }),
/***/ 140:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getStyle = exports.once = exports.off = exports.on = undefined;
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; };
exports.hasClass = hasClass;
exports.addClass = addClass;
exports.removeClass = removeClass;
exports.setStyle = setStyle;
var _vue = __webpack_require__(5);
var _vue2 = _interopRequireDefault(_vue);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var isServer = _vue2.default.prototype.$isServer;
var SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;
var MOZ_HACK_REGEXP = /^moz([A-Z])/;
var ieVersion = isServer ? 0 : Number(document.documentMode);
/* istanbul ignore next */
var trim = function trim(string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};
/* istanbul ignore next */
var camelCase = function camelCase(name) {
return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
}).replace(MOZ_HACK_REGEXP, 'Moz$1');
};
/* istanbul ignore next */
var on = exports.on = function () {
if (!isServer && document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
}();
/* istanbul ignore next */
var off = exports.off = function () {
if (!isServer && document.removeEventListener) {
return function (element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler);
}
};
}
}();
/* istanbul ignore next */
var once = exports.once = function once(el, event, fn) {
var listener = function listener() {
if (fn) {
fn.apply(this, arguments);
}
off(el, event, listener);
};
on(el, event, listener);
};
/* istanbul ignore next */
function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
if (el.classList) {
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
};
/* istanbul ignore next */
function addClass(el, cls) {
if (!el) return;
var curClass = el.className;
var classes = (cls || '').split(' ');
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.add(clsName);
} else {
if (!hasClass(el, clsName)) {
curClass += ' ' + clsName;
}
}
}
if (!el.classList) {
el.className = curClass;
}
};
/* istanbul ignore next */
function removeClass(el, cls) {
if (!el || !cls) return;
var classes = cls.split(' ');
var curClass = ' ' + el.className + ' ';
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else {
if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ');
}
}
}
if (!el.classList) {
el.className = trim(curClass);
}
};
/* istanbul ignore next */
var getStyle = exports.getStyle = ieVersion < 9 ? function (element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'styleFloat';
}
try {
switch (styleName) {
case 'opacity':
try {
return element.filters.item('alpha').opacity / 100;
} catch (e) {
return 1.0;
}
default:
return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null;
}
} catch (e) {
return element.style[styleName];
}
} : function (element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'cssFloat';
}
try {
var computed = document.defaultView.getComputedStyle(element, '');
return element.style[styleName] || computed ? computed[styleName] : null;
} catch (e) {
return element.style[styleName];
}
};
/* istanbul ignore next */
function setStyle(element, styleName, value) {
if (!element || !styleName) return;
if ((typeof styleName === 'undefined' ? 'undefined' : _typeof(styleName)) === 'object') {
for (var prop in styleName) {
if (styleName.hasOwnProperty(prop)) {
setStyle(element, prop, styleName[prop]);
}
}
} else {
styleName = camelCase(styleName);
if (styleName === 'opacity' && ieVersion < 9) {
element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
} else {
element.style[styleName] = value;
}
}
};
/***/ }),
/***/ 141:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { staticClass: "vc-swipe" }, [
_c(
"div",
{
directives: [
{
name: "swipe",
rawName: "v-swipe:horizonal.lock",
value: _vm.swipeConfig,
expression: "swipeConfig",
arg: "horizonal",
modifiers: { lock: true }
}
],
staticClass: "vc-swipe-wrapper"
},
[
_c(
"div",
{ ref: "swipeItems", staticClass: "vc-swipe-items" },
[_vm._t("default")],
2
)
]
),
_vm._v(" "),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.showIndicators,
expression: "showIndicators"
}
],
ref: "swipeIndicators",
staticClass: "vc-swipe-indicators"
},
[_vm._t("indicator")],
2
)
])
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-65a4e420", esExports)
}
}
/***/ }),
/***/ 142:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _index = __webpack_require__(143);
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_index).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/***/ 143:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__ = __webpack_require__(38);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__);
/* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1a8a1f2c_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_index_vue__ = __webpack_require__(144);
var disposed = false
var normalizeComponent = __webpack_require__(2)
/* script */
/* template */
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_index_vue___default.a,
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1a8a1f2c_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_index_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src\\components\\swipe-item\\index.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-1a8a1f2c", Component.options)
} else {
hotAPI.reload("data-v-1a8a1f2c", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
/***/ }),
/***/ 144:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{
directives: [
{
name: "swipe",
rawName: "v-swipe:vertical",
value: {},
expression: "{}",
arg: "vertical"
}
],
staticClass: "vc-swipe-item"
},
[_vm._t("default")],
2
)
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-1a8a1f2c", esExports)
}
}
/***/ }),
/***/ 145:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"vc-swipe",
{
ref: "swiper",
staticClass: "vc-img-viewer-swipe addWeight",
attrs: {
overflow: "backDrag",
gap: _vm.gap,
continuous: _vm.loop,
defaultIndex: _vm.defaultIndex,
swipeItemLen: _vm.originalImgs.length
}
},
_vm._l(_vm.originalImgs, function(img, $index) {
return _c("vc-swipe-item", { key: $index }, [
_c(
"div",
{
directives: [
{
name: "swipe",
rawName: "v-swipe:down",
value: _vm.swipeConfig,
expression: "swipeConfig",
arg: "down"
}
],
staticClass: "vc-img-viewer-swipe-wrapper",
on: {
click: function($event) {
_vm.$popupCtrl.close()
}
}
},
[
_c("img", {
staticClass: "vc-img-viewer-swipe-img",
attrs: { src: img.src, alt: "" }
})
]
)
])
})
)
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-6d9755c3", esExports)
}
}
/***/ }),
/***/ 18:
/***/ (function(module, exports) {
module.exports = {
bind: function ($el, binding) {
// any , horizonal, vertical, right, left, up, down
// modifiers: lock
var argument = [
'any',
'horizonal',
'vertical',
'right',
'left',
'up',
'down'
]
var lock = binding.modifiers.lock
var processor = binding.value
var startX
var startY
var movingX
var movingY
var directionFour
var directionTwo
var offset
var directionCheckDone
var continuePropagation
var startWidthTwo
var startWidthFour
function getInfo (srcEvt) {
return {
element: $el,
scrEvt: srcEvt,
offset: offset,
startX: startX,
startY: startY,
movingX: movingX,
movingY: movingY,
directionTwo: directionTwo,
directionFour: directionFour,
startWidthTwo: startWidthTwo,
startWidthFour: startWidthFour
}
}
// offset的含义由directionTwo来确定的
if (argument.includes(binding.arg)) {
$el.addEventListener('touchstart', function (e) {
startX = e.touches[0].clientX
startY = e.touches[0].clientY
directionTwo = null
directionCheckDone = null
startWidthTwo = null
startWidthFour = null
continuePropagation = false
})
$el.addEventListener('touchmove', function (e) {
movingX = e.touches[0].clientX
movingY = e.touches[0].clientY
var x = movingX - startX
var y = movingY - startY
var lockCheck = false
var check
(directionTwo == null || binding.arg === 'any') && (
directionTwo = (Math.abs(y) <= Math.abs(x)) ? 'horizonal' : 'vertical'
)
if (directionTwo === 'vertical') {
offset = y
directionFour = (y < 0) ? 'up' : 'down'
} else {
offset = x
directionFour = (x > 0) ? 'right' : 'left'
}
check = [directionFour, directionTwo].includes(binding.arg) || binding.arg === 'any'
if (directionCheckDone === null) {
if (check === true) {
startWidthTwo = directionTwo
startWidthFour = directionFour
processor.start instanceof Function && (
processor.start(getInfo(e), (setTo) => {
lockCheck = setTo
}, (setTo) => {
continuePropagation = setTo
})
)
}
directionCheckDone = check
}
if (directionCheckDone) {
lock && (lockCheck = true)
processor.move instanceof Function && (
processor.move(getInfo(e), (setTo) => {
lockCheck = setTo
}, (setTo) => {
continuePropagation = setTo
})
)
!continuePropagation && e.stopPropagation()
lockCheck && e.preventDefault()
}
})
$el.addEventListener('touchend', function (e) {
var lockCheck = false
continuePropagation = true
lock && directionCheckDone && (lockCheck = true)
directionCheckDone && processor.end instanceof Function && (
processor.end(getInfo(e), (setTo) => {
lockCheck = setTo
}, (setTo) => {
continuePropagation = setTo
}
)
)
!continuePropagation && e.stopPropagation()
lockCheck && e.preventDefault()
})
} else {
console.log(`未知自定义swipe位置参数:${binding.argument}`)
}
}
}
/***/ }),
/***/ 2:
/***/ (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 (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
}
}
/***/ }),
/***/ 3:
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ }),
/***/ 36:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _swipe = __webpack_require__(136);
var _swipe2 = _interopRequireDefault(_swipe);
var _swipeItem = __webpack_require__(142);
var _swipeItem2 = _interopRequireDefault(_swipeItem);
var _vueSwipeDirective = __webpack_require__(18);
var _vueSwipeDirective2 = _interopRequireDefault(_vueSwipeDirective);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: 'vc-popup-img-viewer',
data: function data() {
return {
defaultIndex: 0,
originalImgs: []
};
},
components: {
VcSwipe: _swipe2.default,
VcSwipeItem: _swipeItem2.default
},
props: {
e: {
default: null
},
imgs: {
type: [Array, HTMLCollection],
required: true
},
loop: {
type: Boolean,
default: false
},
gap: {
type: Number,
default: 16
}
},
created: function created() {
var _this = this;
this.popupEvt = {
beforeEnter: function beforeEnter() {
var vmSwiper = _this.$refs.swiper;
var $onSwipeImg = _this._getSwipeImg(_this.defaultIndex);
vmSwiper.reSize();
var _getAnimationSettings = _this._getAnimationSettings(_this.defaultIndex),
clipTop = _getAnimationSettings.clipTop,
clipLeft = _getAnimationSettings.clipLeft,
clipBottom = _getAnimationSettings.clipBottom,
clipRight = _getAnimationSettings.clipRight,
clipRadius = _getAnimationSettings.clipRadius,
translateX = _getAnimationSettings.translateX,
translateY = _getAnimationSettings.translateY,
scale = _getAnimationSettings.scale,
hasClip = _getAnimationSettings.hasClip;
_this.$popupCtrl.vmBase.setAnimateDom($onSwipeImg);
_this._initPosition();
$onSwipeImg.style.webkitTransform = 'translate3d(' + translateX + 'px, ' + translateY + 'px,0) scale(' + scale + ')';
if (hasClip) $onSwipeImg.style.clipPath = 'inset(' + clipTop + 'px ' + clipRight + 'px ' + clipBottom + 'px ' + clipLeft + 'px round ' + clipRadius + ')';
requestAnimationFrame(function () {
$onSwipeImg.style.webkitTransform = 'translate3d(0,0,0)';
if (hasClip) $onSwipeImg.style.clipPath = 'inset(0px 0px 0px 0px round 0px)';
});
},
beforeLeave: function beforeLeave() {
var index = _this.$refs.swiper.index,
$onSwipeImg = _this._getSwipeImg(index);
var _getAnimationSettings2 = _this._getAnimationSettings(index),
clipTop = _getAnimationSettings2.clipTop,
clipLeft = _getAnimationSettings2.clipLeft,
clipBottom = _getAnimationSettings2.clipBottom,
clipRight = _getAnimationSettings2.clipRight,
clipRadius = _getAnimationSettings2.clipRadius,
translateX = _getAnimationSettings2.translateX,
translateY = _getAnimationSettings2.translateY,
scale = _getAnimationSettings2.scale,
hasClip = _getAnimationSettings2.hasClip;
_this.$popupCtrl.vmBase.setAnimateDom($onSwipeImg);
if (hasClip) $onSwipeImg.style.clipPath = 'inset(0px 0px 0px 0px round 0px)';
requestAnimationFrame(function () {
$onSwipeImg.style.webkitTransform = 'translate3d(' + translateX + 'px, ' + translateY + 'px,0) scale(' + scale + ')';
if (hasClip) $onSwipeImg.style.clipPath = 'inset(' + clipTop + 'px ' + clipRight + 'px ' + clipBottom + 'px ' + clipLeft + 'px round ' + clipRadius + ')';
});
}
};
this.swipeConfig = {
move: this._onItemSwipe,
end: this._onItemSwipeDone
};
var e = this.e,
self = this,
defaultIndex;
this.originalImgs = this.imgs;
this.wHeight = window.innerHeight;
this.wWidth = window.innerWidth;
this.wRotaio = this.wWidth / this.wHeight;
this.status = {
initLock: false,
swipeStartX: null,
swipeStartY: null
};
if (e.targetChangeTo) defaultIndex = Array.prototype.indexOf.call(this.originalImgs, e.targetChangeTo);else defaultIndex = Array.prototype.indexOf.call(this.originalImgs, e.target);
if (defaultIndex === -1) {
console.log('popup-img-viewer open的时候指定的img不在所导入的列表当中,检查传递的是否正确~');
defaultIndex = 0;
}
this.defaultIndex = defaultIndex;
//关联源img的src,这个传参的问题,唉不方便啊
this._syncImgSrc = function () {
var $originImg = this;
var index = Array.prototype.indexOf.call(self.originalImgs, $originImg);
var $showImg = self._getSwipeImg(index);
$showImg.setAttribute('src', $originImg.getAttribute('src'));
self._initPosition(index);
};
Array.prototype.forEach.call(this.imgs, function ($img) {
$img.addEventListener('load', _this._syncImgSrc);
});
},
methods: {
_getAnimationSettings: function _getAnimationSettings(index) {
var wHeight = this.wHeight,
wWidth = this.wWidth,
wRotaio = this.wRotaio,
scale,
translateX,
translateY,
triggeredImgCenterX,
triggeredImgCenterY,
zoomedImgCenterX,
zoomedImgCenterY,
clipTop,
clipRight,
clipBottom,
clipLeft,
clipRadius,
hasClip,
clipRightVals,
$img = this.originalImgs[index],
iRatio = $img.naturalWidth / $img.naturalHeight,
imgRect = $img.getBoundingClientRect(),
contianerRect = $img.parentElement.getBoundingClientRect(),
containerStyle = getComputedStyle($img.parentElement);
//生成开始位置
scale = imgRect.width / wWidth;
zoomedImgCenterX = wWidth / 2;
zoomedImgCenterY = iRatio > wRotaio ? wHeight / 2 : wWidth / iRatio / 2;
triggeredImgCenterX = imgRect.left + imgRect.width / 2;
triggeredImgCenterY = imgRect.top + imgRect.height / 2;
//然后做动画偏移, 需要区分布局偏移
translateX = triggeredImgCenterX - zoomedImgCenterX;
translateY = triggeredImgCenterY - zoomedImgCenterY;
//设置clip-path
clipTop = contianerRect.top - imgRect.top;
clipLeft = contianerRect.left - imgRect.left;
clipBottom = imgRect.bottom - contianerRect.bottom;
clipRight = imgRect.right - contianerRect.right;
clipRadius = containerStyle.borderRadius;
clipTop = clipTop > 0 ? clipTop / scale : 0;
clipLeft = clipLeft > 0 ? clipLeft / scale : 0;
clipBottom = clipBottom > 0 ? clipBottom / scale : 0;
clipRight = clipRight > 0 ? clipRight / scale : 0;
//clipRadius放大麻烦一丢丢,仅仅px,先是最简单版本
clipRightVals = clipRadius.split(' ');
clipRightVals.forEach(function (val, i) {
//提取数值
var num = parseFloat(val);
var unit = val.replace(num.toString(), '');
if (unit !== '%') {
num /= scale;
clipRightVals[i] = num + unit;
}
});
clipRadius = clipRightVals.join(' ');
hasClip = clipTop !== 0 || clipLeft !== 0 || clipBottom !== 0 || clipRight !== 0 || clipRadius !== '0px';
return {
clipTop: clipTop,
clipLeft: clipLeft,
clipBottom: clipBottom,
clipRight: clipRight,
clipRadius: clipRadius,
translateX: translateX,
translateY: translateY,
scale: scale,
hasClip: hasClip
};
},
_getSwipeImg: function _getSwipeImg(index) {
return this.$refs.swiper.$refs.swipeItems.children[index].children[0].children[0];
},
_initPosition: function _initPosition(index) {
var _this2 = this;
var i,
iRatio,
iHeight,
iWidth,
$img,
$imgZoom,
fromTop,
wHeight = this.wHeight,
wWidth = this.wWidth,
wRotaio = this.wRotaio;
var ajustOne = function ajustOne(i) {
$img = _this2.originalImgs[i];
$imgZoom = _this2._getSwipeImg(i);
iHeight = $img.naturalHeight;
iWidth = $img.naturalWidth;
iRatio = iWidth / iHeight;
//生成结束位置
if (iRatio > wRotaio) {
//设置垂直居中
fromTop = (wHeight - wWidth / iWidth * iHeight) / 2;
} else {
// 设置自然布局
fromTop = 0;
$imgZoom.overHeight = true;
}
//设置的是swiper里面的图片
$imgZoom.style.top = fromTop + 'px';
$imgZoom.style.clipPath = 'inset(0px 0px 0px 0px 0px)';
};
if (index !== undefined) ajustOne(index);else for (i = 0; i < this.originalImgs.length; i++) {
ajustOne(i);
}$img = null;
},
_onItemSwipe: function _onItemSwipe(info, lock) {
var _this3 = this;
var scale,
transformOrgin,
x,
y,
$item = info.element,
$img = $item.children[0];
if ($item.scrollTop !== 0) {
this.swipeStartX = info.movingX;
this.swipeStartY = info.movingY;
return;
}
lock(true);
y = info.movingY - (this.swipeStartY || info.startY);
x = info.movingX - (this.swipeStartX || info.startX);
if (info.directionFour === 'down') scale = 1 - y / this.wWidth;else scale = 1;
scale < 0 && (scale = 0);
if ($img.overHeight) transformOrgin = 'center 17%';
if (!this.status.initLock) {
this.status.initLock = true;
$img.style.webkitTransitionDuration = '0ms';
this.$popupCtrl.vmBase.trunOffMaskTransition();
$img.style['transform-origin'] = transformOrgin;
$item.style['overflow'] = 'hidden';
}
requestAnimationFrame(function () {
$img.style.setProperty('transform', 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + scale + ')', 'important');
_this3.$popupCtrl.vmBase.setMaskOpacity(scale);
});
},
_onItemSwipeDone: function _onItemSwipeDone(info) {
var _this4 = this;
var $item = info.element,
$img = $item.children[0],
y = info.movingY - (this.swipeStartY || info.startY);
this.status.initLock = false;
this.swipeStartX = null;
this.swipeStartY = null;
requestAnimationFrame(function () {
$img.style.webkitTransitionDuration = null;
_this4.$popupCtrl.vmBase.trunOnMaskTransition();
$img.style['transform-origin'] = null;
$img.style.webkitTransform = null;
_this4.$popupCtrl.vmBase.setMaskOpacity(1);
});
if (info.directionFour === 'down' && $item.scrollTop === 0 && y >= 284 / 3) {
this.$popupCtrl.close();
} else {
$item.style.overflow = null;
}
}
},
destory: function destory() {
var _this5 = this;
this.imgs.forEach(function ($img) {
$img.removeEventListener('load', _this5._syncImgSrc);
});
},
directives: {
swipe: _vueSwipeDirective2.default
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ }),
/***/ 37:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _dom = __webpack_require__(140);
var _vueSwipeDirective = __webpack_require__(18);
var _vueSwipeDirective2 = _interopRequireDefault(_vueSwipeDirective);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//
//
//
//
//
//
//
//
//
//
//
//
//
exports.default = {
name: 'vc-swipe',
created: function created() {
this.info = null;
this.dom = {
$pages: null,
$pageContainer: null,
$indicators: null,
$indicatorContainer: null,
itemWidth: null,
actualSwipeValue: null,
speedAjustRange: 100
};
this.status = {
initLocker: false,
rafLocker: false,
edgeLocker: false,
swipeCurrentOffset: null,
swipeStartOffset: null,
activatedClass: 'is-active',
swipeStartTime: null
};
this.swipeConfig = {
move: this.onSwipe,
end: this.onSwipeDone
};
this.swipeItemMounted = 0;
},
data: function data() {
return {
ready: false,
dragging: false,
animating: false,
index: 0,
timer: null,
reInitTimer: null
};
},
props: {
speed: {
type: Number,
default: 280
},
defaultIndex: {
type: Number,
default: 0
},
auto: {
type: Number,
default: 0
},
continuous: {
type: Boolean,
default: false
},
showIndicators: {
type: Boolean,
default: true
},
noDragWhenSingle: {
type: Boolean,
default: true
},
prevent: {
type: Boolean,
default: false
},
//新增的
gap: {
type: Number,
default: 0
},
itemWidth: {
type: Number,
default: null
},
overflow: {
type: String,
default: 'default'
},
onSwitch: {
type: Function,
default: null
},
swipeItemLen: {
type: Number,
default: null
}
},
mounted: function mounted() {
this.ready = true;
this.setTimer();
window.addEventListener('resize', this.reSize);
this.dom.$pageContainer = this.$refs.swipeItems;
this.dom.$indicatorContainer = this.$refs.swipeIndicators;
this.reInitPages();
},
methods: {
swipeItemCreated: function swipeItemCreated() {
var _this = this;
this.swipeItemMounted++;
if (!this.ready) return;
if (this.swipeItemLen === null) {
clearTimeout(this.reInitTimer);
this.reInitTimer = setTimeout(function () {
_this.reInitPages();
}, 20);
} else if (this.swipeItemLen === this.swipeItemMounted) {
this.reInitPages();
}
},
swipeItemDestroyed: function swipeItemDestroyed() {
var _this2 = this;
this.swipeItemMounted--;
if (!this.ready) return;
if (this.swipeItemLen === null) {
clearTimeout(this.reInitTimer);
this.reInitTimer = setTimeout(function () {
_this2.reInitPages(true);
}, 20);
} else if (this.swipeItemLen === this.swipeItemMounted) {
this.reInitPages();
}
},
reInitPages: function reInitPages() {
this.dom.$pages = this.dom.$pageContainer.children;
this.dom.$indicators = this.dom.$indicatorContainer.children;
this.index = this.defaultIndex >= 0 && this.defaultIndex < this.dom.$pages.length ? this.defaultIndex : 0;
this.reSize();
},
reSize: function reSize() {
var _this3 = this;
var self = this;
var gap = this.gap;
var index = this.index;
var $pages = this.dom.$pages;
var actualSwipeValue, itemWidth;
var continuous = this.continuous;
var $swiper = this.$el.children[0];
var $indicators = this.dom.$indicators;
var $pageContainer = this.dom.$pageContainer;
requestAnimationFrame(function () {
itemWidth = _this3.dom.itemWidth = _this3.itemWidth || $swiper.clientWidth;
actualSwipeValue = _this3.dom.actualSwipeValue = _this3.dom.itemWidth + gap;
_this3.status.swipeStartOffset = index * actualSwipeValue;
$pages[index].classList.add(self.status.activatedClass);
$indicators[index] && $indicators[index].classList.add(self.status.activatedClass);
$pageContainer.style.width = $pages.length * actualSwipeValue + 'px';
Array.prototype.forEach.call($pages, function ($page) {
$page.style.width = itemWidth + 'px';
$page.style.marginRight = gap + 'px';
});
if (continuous) {
$swiper.classList.add('loop');
Array.prototype.forEach.call($pages, function ($page, i) {
$page.currentPosition = i * itemWidth;
$page.index = i;
$page.style.webkitTransform = 'translate3d(' + $page.currentPosition + 'px,0,0)';
});
}
self.goTo(index, true);
});
},
goTo: function goTo(page, immediately) {
var fromPage = this.index;
var $pages = this.dom.$pages;
var self = this;
if (page === 'next') page = this.index + 1;else if (page === 'prev') page = this.index - 1;
if (!this.continuous) {
if (page > $pages.length - 1 || page < 0) return;
} else {
if (page > $pages.length - 1) page = 0;
if (page < 0) page = $pages.length - 1;
}
this.index = page;
this.status.swipeStartOffset = page * this.dom.actualSwipeValue;
if (immediately) self.noAnimate(fromPage, page);else self.animate(fromPage, page);
},
next: function next() {
this.goTo('next');
},
prev: function prev() {
this.goTo('prev');
},
clearTimer: function clearTimer() {
clearInterval(this.timer);
this.timer = null;
},
setTimer: function setTimer() {
var _this4 = this;
if (this.auto > 0) {
this.timer = setInterval(function () {
if (!_this4.continuous && _this4.index >= _this4.dom.$pages.length - 1) {
return _this4.clearTimer();
}
if (!_this4.dragging && !_this4.animating) {
_this4.next();
}
}, this.auto);
}
},
onSwipe: function onSwipe(info) {
var $pageContainer = this.dom.$pageContainer,
$pages = this.dom.$pages,
continuous = this.continuous,
actualSwipeValue = this.dom.actualSwipeValue,
handleOverflow = this.handleOverflow,
self = this,
offset = self.status.swipeStartOffset - info.offset,
indexTo = info.offset > 0 ? this.index - 1 : this.index + 1,
indexFrom = this.index,
maxOffset = ($pages.length - 1) * actualSwipeValue,
needPass = false;
// 更新状态
this.dragging = true;
this.animating = false;
// 修正
if (indexTo < 0) indexTo = $pages.length - 1;
if (indexTo > $pages.length - 1) indexTo = 0;
if (self.status.edgeLocker === 1) return;
if (offset < 0) {
offset = 0;
needPass = true;
} else if (offset > maxOffset) {
offset = maxOffset;
needPass = true;
}
self.status.swipeCurrentOffset = offset;
if (!self.status.rafLocker) {
self.status.rafLocker = true;
requestAnimationFrame(function () {
if (!self.status.initLocker) {
self.status.initLocker = true;
if (continuous) $pageContainer.classList.add('subNoneAnimation');else $pageContainer.classList.add('noneAnimation');
self.status.swipeStartTime = Date.now();
}
if (continuous) {
Array.prototype.forEach.call($pages, function ($li) {
$li.style.webkitTransform = 'translate3d(' + ($li.currentPosition + info.offset) + 'px,0,0)';
});
} else {
$pageContainer.style.webkitTransform = 'translate3d(' + -offset + 'px,0,0)';
}
self.indicatorOnSwipe instanceof Function && self.indicatorOnSwipe({
$form: self.dom.$indicators[indexFrom],
$to: self.dom.$indicators[indexTo],
from: indexFrom,
to: indexTo,
percentage: Math.abs(info.offset / self.itemWidth)
});
self.status.rafLocker = false;
});
}
if (needPass && !continuous) return handleOverflow(info);
},
onSwipeDone: function onSwipeDone(info) {
var self = this;
var needPass = false;
var $pages = this.dom.$pages;
var continuous = this.continuous;
var itemWidth = this.dom.itemWidth;
var actualSwipeValue = this.dom.actualSwipeValue;
var maxOffset = ($pages.length - 1) * actualSwipeValue;
var indexFrom = this.index;
var indexTo = indexFrom;
// 状态更新
this.dragging = false;
this.animating = true;
if (self.status.edgeLocker === 1) return;
if (Math.abs(info.offset) / itemWidth > 0.15 && self.status.swipeCurrentOffset <= maxOffset && self.status.swipeCurrentOffset >= 0) {
if (info.offset > 0) {
if (self.index !== 0 || continuous) self.index--;else needPass = true;
} else {
if (self.index < $pages.length - 1 || continuous) self.index++;else needPass = true;
}
indexTo = info.offset > 0 ? indexFrom - 1 : indexFrom + 1;
} else needPass = true;
if (continuous) {
if (indexTo < 0) {
indexTo = $pages.length - 1;
self.status.edgeLocker++;
} else if (indexTo > $pages.length - 1) {
indexTo = 0;
self.status.edgeLocker++;
}
} else if (indexTo < 0 || indexTo > $pages.length - 1) indexTo = indexFrom;
if (indexTo === indexFrom) this.animate(indexFrom, indexTo);else this.animate(indexFrom, indexTo, info);
this.indicatorOnSwipe instanceof Function && this.indicatorOnSwipe({
$form: self.dom.$indicators[indexFrom],
$to: self.dom.$indicators[indexTo],
from: indexFrom,
to: indexTo
});
if (needPass && !continuous) return needPass;
},
transitionendProcessor: function transitionendProcessor() {
this.clearTimer();
this.setTimer();
this.animating = false;
this.dom.$pageContainer.removeEventListener('transitionend', this.transitionendProcessor);
},
animate: function animate(indexFrom, indexTo, info) {
var self = this;
var $pages = this.dom.$pages;
var continuous = this.continuous;
var speed = this.ajustSpeed(info);
var $pageContainer = this.dom.$pageContainer;
var actualSwipeValue = this.dom.actualSwipeValue;
$pageContainer.addEventListener('transitionend', self.transitionendProcessor);
self.status.swipeStartOffset = self.index * actualSwipeValue;
requestAnimationFrame(function () {
if (!continuous) {
$pageContainer.classList.remove('noneAnimation');
$pageContainer.style['transform'] = 'translate3d(' + -self.status.swipeStartOffset + 'px,0,0)';
$pageContainer.style.webkitTransition = '-webkit-transform ' + speed + 'ms ease';
} else {
var _loop = function _loop(reset) {
if (!reset) $pageContainer.classList.remove('subNoneAnimation');
Array.prototype.forEach.call($pages, function ($li, i) {
$li.classList.add('noneAnimation');
$li.currentPosition = ($li.index - self.index) * actualSwipeValue;
$li.style.webkitTransform = 'translate3d(' + $li.currentPosition + 'px,0,0)';
$li.style.webkitTransition = '-webkit-transform ' + speed + 'ms ease';
if (i === indexTo || i === indexFrom) $li.classList.remove('noneAnimation');
});
//如果是确认到达边缘修把另一头挪过来,这里重构一下
function switchTo(where) {
var i, currentPosition;
if (where === 'tial') {
i = $pages.length - 1;
currentPosition = (-1 - self.index) * actualSwipeValue;
} else if (where === 'head') {
i = 0;
currentPosition = ($pages.length - self.index) * actualSwipeValue;
}
$pages[i].classList.add('noneAnimation');
$pages[i].currentPosition = currentPosition;
$pages[i].style.webkitTransform = 'translate3d(' + $pages[i].currentPosition + 'px,0,0)';
requestAnimationFrame(function () {
$pages[i].classList.remove('noneAnimation');
});
}
if (self.index === 0) switchTo('tial');else if (self.index === $pages.length - 1) switchTo('head');
//溢出重置处理
var animationEnd = function animationEnd() {
requestAnimationFrame(function () {
$pageContainer.classList.add('subNoneAnimation');
if (self.index > $pages.length - 1) {
self.index = 0;
(0, _dom.once)($pages[0], 'transitionend', animationEnd);
} else if (self.index < 0) {
self.index = $pages.length - 1;
(0, _dom.once)($pages[$pages.length - 1], 'transitionend', animationEnd);
}
Array.prototype.forEach.call($pages, function ($li) {
$li.currentPosition = ($li.index - self.index) * actualSwipeValue;
$li.style.webkitTransform = 'translate3d(' + $li.currentPosition + 'px,0,0)';
});
_loop(true);
requestAnimationFrame(function () {
$pageContainer.classList.remove('subNoneAnimation');
self.status.edgeLocker = 0;
});
});
};
if (self.index > $pages.length - 1) {
(0, _dom.once)($pages[0], 'transitionend', animationEnd.bind(null, info));
$pages[0].classList.remove('noneAnimation');
$pages[0].currentPosition = ($pages.length - self.index) * actualSwipeValue;
$pages[0].style.webkitTransform = 'translate3d(' + $pages[0].currentPosition + 'px,0,0)';
} else if (self.index < 0) {
(0, _dom.once)($pages[$pages.length - 1], 'transitionend', animationEnd.bind(null, info));
$pages[$pages.length - 1].classList.remove('noneAnimation');
$pages[$pages.length - 1].currentPosition = (-1 - self.index) * actualSwipeValue;
$pages[$pages.length - 1].style.webkitTransform = 'translate3d(' + $pages[$pages.length - 1].currentPosition + 'px,0,0)';
}
};
_loop();
}
//重置locker
self.status.rafLocker = false;
self.status.initLocker = false;
indexFrom === indexTo && self.transitionendProcessor();
});
},
noAnimate: function noAnimate(indexFrom, indexTo) {
var self = this;
var $pages = this.dom.$pages;
var continuous = this.continuous;
var $pageContainer = this.dom.$pageContainer;
var actualSwipeValue = this.dom.actualSwipeValue;
self.status.swipeStartOffset = self.index * actualSwipeValue;
if (!continuous) {
$pageContainer.style['transform'] = 'translate3d(' + -self.status.swipeStartOffset + 'px,0,0)';
$pageContainer.style.webkitTransition = '-webkit-transform 0ms ease';
} else {
Array.prototype.forEach.call($pages, function ($li, i) {
$li.currentPosition = ($li.index - self.index) * actualSwipeValue;
$li.style.webkitTransform = 'translate3d(' + $li.currentPosition + 'px,0,0)';
$li.style.webkitTransition = '-webkit-transform 0ms ease';
});
}
self.transitionendProcessor();
},
handleOverflow: function handleOverflow(info) {
var type = this.overflow;
if (type === 'backDrag') this.overflowBackDrag(info);
return true;
},
overflowBackDrag: function overflowBackDrag(info) {
var _this5 = this;
var x = 288 / 3 / 360,
speed = this.speed || 280; // 默认为微信的转换比例
x = -this.status.swipeStartOffset + info.offset * x;
requestAnimationFrame(function () {
_this5.dom.$pageContainer.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
_this5.dom.$pageContainer.style.webkitTransition = '-webkit-transform ' + speed + 'ms ease';
});
return true;
},
updateIndex: function updateIndex(val, oVal) {
var max = this.dom.$pages.length - 1;
if (val >= 0 && val <= max) {
if (oVal < 0) oVal = max;
if (oVal > max) oVal = 0;
this.dom.$pages[val].classList.add(this.status.activatedClass);
this.dom.$pages[oVal].classList.remove(this.status.activatedClass);
this.dom.$indicators[val] && this.dom.$indicators[val].classList.add(this.status.activatedClass);
this.dom.$indicators[oVal] && this.dom.$indicators[oVal].classList.remove(this.status.activatedClass);
this.dom.$pages[val] && this.dom.$pages[val].__vue__ && this.dom.$pages[val].__vue__.onEnter instanceof Function && this.dom.$pages[val].__vue__.onEnter[val]();
this.dom.$pages[oVal] && this.dom.$pages[oVal].__vue__ && this.dom.$pages[oVal].__vue__.onLeave instanceof Function && this.dom.$pages[oVal].__vue__.onLeave[oVal]();
this.dom.$indicators[val] && this.dom.$indicators[val].__vue__ && this.dom.$indicators[val].__vue__.onEnter instanceof Function && this.dom.$indicators[val].__vue__.onEnter[val]();
this.dom.$indicators[oVal] && this.dom.$indicators[oVal].__vue__ && this.dom.$indicators[oVal].__vue__.onLeave instanceof Function && this.dom.$indicators[oVal].__vue__.onLeave[oVal]();
this.onSwitch instanceof Function && this.onSwitch(val, oVal);
}
},
ajustSpeed: function ajustSpeed(info) {
var speed = this.speed || 240;
var swipeTime = Date.now() - this.status.swipeStartTime;
var offsetToAnimate, swipeOffset, _speed;
// var speedOfAnimate, avgSwipeSpeed
if (info) {
swipeOffset = Math.abs(info.offset);
offsetToAnimate = this.dom.itemWidth - swipeOffset;
// avgSwipeSpeed = swipeOffset / swipeTime
// speedOfAnimate = offsetToAnimate * avgSwipeSpeed
_speed = offsetToAnimate / (swipeOffset / swipeTime) * 1.2;
if (_speed > 1.6 * speed) _speed = 1.6 * speed;
if (_speed < 0.5 * speed) _speed = 0.5 * speed;
speed = _speed;
}
return speed;
}
},
destroyed: function destroyed() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
if (this.reInitTimer) {
clearTimeout(this.reInitTimer);
this.reInitTimer = null;
}
},
watch: {
index: function index(val) {
this.$emit('change', val);
this.updateIndex.apply(this, arguments);
}
},
directives: {
swipe: _vueSwipeDirective2.default
}
};
/***/ }),
/***/ 38:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _vueSwipeDirective = __webpack_require__(18);
var _vueSwipeDirective2 = _interopRequireDefault(_vueSwipeDirective);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: 'vc-swipe-item',
props: {
onEnter: {
type: Function,
default: null
},
onLeave: {
type: Function,
default: null
}
},
mounted: function mounted() {
this.$parent && this.$parent.swipeItemCreated();
},
destroyed: function destroyed() {
this.$parent && this.$parent.swipeItemDestroyed();
},
directives: {
swipe: _vueSwipeDirective2.default
}
}; //
//
//
//
//
//
/***/ }),
/***/ 4:
/***/ (function(module, exports) {
/**
* Translates the list format produced by css-loader into something
* easier to manipulate.
*/
module.exports = function listToStyles (parentId, list) {
var styles = []
var newStyles = {}
for (var i = 0; i < list.length; i++) {
var item = list[i]
var id = item[0]
var css = item[1]
var media = item[2]
var sourceMap = item[3]
var part = {
id: parentId + ':' + i,
css: css,
media: media,
sourceMap: sourceMap
}
if (!newStyles[id]) {
styles.push(newStyles[id] = { id: id, parts: [part] })
} else {
newStyles[id].parts.push(part)
}
}
return styles
}
/***/ }),
/***/ 5:
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
/***/ })
/******/ })["default"];
});
//# sourceMappingURL=index.js.map