├── .babelrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── dist
├── images
│ ├── b257fa9c5ac8c515ac4d77a667ce2943.svg
│ ├── e34aafbb485a96eaf2a789b2bf3af6fe.gif
│ └── e3f799c6dec9af194c86decdf7392405.png
├── index.html
├── vue-image-swipe.css
└── vue-image-swipe.js
├── example
└── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── App.vue
├── index.html
├── index.js
└── lib
│ ├── index.js
│ └── preview.vue
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env"
4 | ]
5 | }
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | .idea/
4 | npm-debug.logenz
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 zhh shen
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-image-swipe
2 |
3 | 基于photoswipe实现的vue图片预览组件
4 |
5 | ### 安装
6 |
7 | 1 第一步
8 | ```
9 | npm install vue-image-swipe -D
10 | ```
11 | 2 第二步
12 |
13 | vue 入口文件引入
14 |
15 | ``` javascript
16 | import Vue from 'vue'
17 | import VueImageSwipe from 'vue-image-swipe'
18 | import 'vue-image-swipe/dist/vue-image-swipe.css'
19 | Vue.use(VueImageSwipe)
20 | ```
21 |
22 | ### 使用
23 |
24 | ```
25 |
26 |
27 | hello world
28 |
29 |
30 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
67 | ```
68 | ### methods
69 |
70 | 只暴露了一个方法**this.$imagePreview**,并绑定到vue的原型上
71 | 使用
72 | ```
73 | this.$imagePreview(options = {})
74 | ```
75 | options有三个参数
76 |
77 | 参数 | 默认值 | 说明
78 | --- | ---| ---
79 | images | 空数组 | 图片的url数组
80 | index | 0 | 预览图片的索引值, 默认是0
81 | defaultOpt | {} | 配置项
82 |
83 | defaultOpt 的配置项请参考[photoswipe配置项](http://photoswipe.com/documentation/options.html),
84 | **注意:不能保证所有配置项都是可用的**
85 |
86 | 列举一些常用的配置
87 | ```
88 | defaultOpt: {
89 | fullscreenEl: true,
90 | shareEl: false,
91 | arrowEl: true,
92 | preloaderEl: true,
93 | loop: false,
94 | bgOpacity: 0.85,
95 | showHideOpacity: true,
96 | errorMsg: '
图片加载失败
',
97 | }
98 | ```
99 | ### demo
100 |
101 | [demo](https://zhhshen.github.io/vue-image-swipe/example/index.html)
102 | ### LICENSE
103 |
104 | MIT
105 |
--------------------------------------------------------------------------------
/dist/images/b257fa9c5ac8c515ac4d77a667ce2943.svg:
--------------------------------------------------------------------------------
1 | default-skin 2
--------------------------------------------------------------------------------
/dist/images/e34aafbb485a96eaf2a789b2bf3af6fe.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhhshen/vue-image-swipe/da37f00bcb95965cb2c03ff5fd0d20d16533009e/dist/images/e34aafbb485a96eaf2a789b2bf3af6fe.gif
--------------------------------------------------------------------------------
/dist/images/e3f799c6dec9af194c86decdf7392405.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhhshen/vue-image-swipe/da37f00bcb95965cb2c03ff5fd0d20d16533009e/dist/images/e3f799c6dec9af194c86decdf7392405.png
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | 基于photeswipe实现的vue预览组件
--------------------------------------------------------------------------------
/dist/vue-image-swipe.css:
--------------------------------------------------------------------------------
1 | /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */.pswp{-webkit-backface-visibility:hidden;-webkit-text-size-adjust:100%;display:none;height:100%;left:0;outline:none;overflow:hidden;position:absolute;top:0;touch-action:none;width:100%;z-index:1500}.pswp *{box-sizing:border-box}.pswp img{max-width:none}.pswp--animate_opacity{opacity:.001;transition:opacity 333ms cubic-bezier(.4,0,.22,1);will-change:opacity}.pswp--open{display:block}.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--zoomed-in .pswp__img{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--dragging .pswp__img{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp__bg{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);background:#000;opacity:0;transform:translateZ(0)}.pswp__bg,.pswp__scroll-wrap{height:100%;left:0;position:absolute;top:0;width:100%}.pswp__scroll-wrap{overflow:hidden}.pswp__container,.pswp__zoom-wrap{bottom:0;left:0;position:absolute;right:0;top:0;touch-action:none}.pswp__container,.pswp__img{-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.pswp__zoom-wrap{-webkit-transform-origin:left top;position:absolute;transform-origin:left top;transition:-webkit-transform 333ms cubic-bezier(.4,0,.22,1);transition:transform 333ms cubic-bezier(.4,0,.22,1);transition:transform 333ms cubic-bezier(.4,0,.22,1),-webkit-transform 333ms cubic-bezier(.4,0,.22,1);width:100%}.pswp__bg{transition:opacity 333ms cubic-bezier(.4,0,.22,1);will-change:opacity}.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{transition:none}.pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden}.pswp__item{bottom:0;overflow:hidden;right:0}.pswp__img,.pswp__item{left:0;position:absolute;top:0}.pswp__img{height:auto;width:auto}.pswp__img--placeholder{-webkit-backface-visibility:hidden}.pswp__img--placeholder--blank{background:#222}.pswp--ie .pswp__img{height:auto!important;left:0;top:0;width:100%!important}.pswp__error-msg{color:#ccc;font-size:14px;left:0;line-height:16px;margin-top:-8px;position:absolute;text-align:center;top:50%;width:100%}.pswp__error-msg a{color:#ccc;text-decoration:underline}
2 | /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */.pswp__button{-webkit-appearance:none;background:none;border:0;box-shadow:none;cursor:pointer;display:block;float:right;height:44px;margin:0;opacity:.75;overflow:visible;padding:0;position:relative;transition:opacity .2s;width:44px}.pswp__button:focus,.pswp__button:hover{opacity:1}.pswp__button:active{opacity:.9;outline:none}.pswp__button::-moz-focus-inner{border:0;padding:0}.pswp__ui--over-close .pswp__button--close{opacity:1}.pswp__button,.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{background:url(images/e3f799c6dec9af194c86decdf7392405.png) 0 0 no-repeat;background-size:264px 88px;height:44px;width:44px}@media (-webkit-min-device-pixel-ratio:1.1),(-webkit-min-device-pixel-ratio:1.09375),(min-resolution:1.1dppx),(min-resolution:105dpi){.pswp--svg .pswp__button,.pswp--svg .pswp__button--arrow--left:before,.pswp--svg .pswp__button--arrow--right:before{background-image:url(images/b257fa9c5ac8c515ac4d77a667ce2943.svg)}.pswp--svg .pswp__button--arrow--left,.pswp--svg .pswp__button--arrow--right{background:none}}.pswp__button--close{background-position:0 -44px}.pswp__button--share{background-position:-44px -44px}.pswp__button--fs{display:none}.pswp--supports-fs .pswp__button--fs{display:block}.pswp--fs .pswp__button--fs{background-position:-44px 0}.pswp__button--zoom{background-position:-88px 0;display:none}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__button--zoom{background-position:-132px 0}.pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right{visibility:hidden}.pswp__button--arrow--left,.pswp__button--arrow--right{background:none;height:100px;margin-top:-50px;position:absolute;top:50%;width:70px}.pswp__button--arrow--left{left:0}.pswp__button--arrow--right{right:0}.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{background-color:rgba(0,0,0,.3);content:"";height:30px;position:absolute;top:35px;width:32px}.pswp__button--arrow--left:before{background-position:-138px -44px;left:6px}.pswp__button--arrow--right:before{background-position:-94px -44px;right:6px}.pswp__counter,.pswp__share-modal{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pswp__share-modal{-webkit-backface-visibility:hidden;background:rgba(0,0,0,.5);display:block;height:100%;left:0;opacity:0;padding:10px;position:absolute;top:0;transition:opacity .25s ease-out;width:100%;will-change:opacity;z-index:1600}.pswp__share-modal--hidden{display:none}.pswp__share-tooltip{-webkit-backface-visibility:hidden;-webkit-transform:translateY(6px);background:#fff;border-radius:2px;box-shadow:0 2px 5px rgba(0,0,0,.25);display:block;position:absolute;right:44px;top:56px;transform:translateY(6px);transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s;width:auto;will-change:transform;z-index:1620}.pswp__share-tooltip a{display:block;font-size:14px;line-height:18px;padding:8px 12px}.pswp__share-tooltip a,.pswp__share-tooltip a:hover{color:#000;text-decoration:none}.pswp__share-tooltip a:first-child{border-radius:2px 2px 0 0}.pswp__share-tooltip a:last-child{border-radius:0 0 2px 2px}.pswp__share-modal--fade-in{opacity:1}.pswp__share-modal--fade-in .pswp__share-tooltip{-webkit-transform:translateY(0);transform:translateY(0)}.pswp--touch .pswp__share-tooltip a{padding:16px 12px}a.pswp__share--facebook:before{-moz-pointer-events:none;-webkit-pointer-events:none;border:6px solid transparent;border-bottom-color:#fff;content:"";display:block;height:0;pointer-events:none;position:absolute;right:15px;top:-12px;width:0}a.pswp__share--facebook:hover{background:#3e5c9a;color:#fff}a.pswp__share--facebook:hover:before{border-bottom-color:#3e5c9a}a.pswp__share--twitter:hover{background:#55acee;color:#fff}a.pswp__share--pinterest:hover{background:#ccc;color:#ce272d}a.pswp__share--download:hover{background:#ddd}.pswp__counter{color:#fff;font-size:13px;height:44px;left:0;line-height:44px;opacity:.75;padding:0 10px;position:absolute;top:0}.pswp__caption{bottom:0;left:0;min-height:44px;position:absolute;width:100%}.pswp__caption small{color:#bbb;font-size:11px}.pswp__caption__center{color:#ccc;font-size:13px;line-height:20px;margin:0 auto;max-width:420px;padding:10px;text-align:left}.pswp__caption--empty{display:none}.pswp__caption--fake{visibility:hidden}.pswp__preloader{direction:ltr;height:44px;left:50%;margin-left:-22px;opacity:0;position:absolute;top:0;transition:opacity .25s ease-out;width:44px;will-change:opacity}.pswp__preloader__icn{height:20px;margin:12px;width:20px}.pswp__preloader--active{opacity:1}.pswp__preloader--active .pswp__preloader__icn{background:url(images/e34aafbb485a96eaf2a789b2bf3af6fe.gif) 0 0 no-repeat}.pswp--css_animation .pswp__preloader--active{opacity:1}.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn{-webkit-animation:clockwise .5s linear infinite;animation:clockwise .5s linear infinite}.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut{-webkit-animation:donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite;animation:donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite}.pswp--css_animation .pswp__preloader__icn{background:none;height:14px;left:15px;margin:0;opacity:.75;position:absolute;top:15px;width:14px}.pswp--css_animation .pswp__preloader__cut{height:14px;overflow:hidden;position:relative;width:7px}.pswp--css_animation .pswp__preloader__donut{background:none;border-color:#fff #fff transparent transparent;border-radius:50%;border-style:solid;border-width:2px;box-sizing:border-box;height:14px;left:0;margin:0;position:absolute;top:0;width:14px}@media screen and (max-width:1024px){.pswp__preloader{float:right;left:auto;margin:0;position:relative;top:auto}}@-webkit-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes donut-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}.pswp__ui{-webkit-font-smoothing:auto;opacity:1;visibility:visible;z-index:1550}.pswp__top-bar{height:44px;left:0;position:absolute;top:0;width:100%}.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right,.pswp__caption,.pswp__top-bar{-webkit-backface-visibility:hidden;transition:opacity 333ms cubic-bezier(.4,0,.22,1);will-change:opacity}.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{visibility:visible}.pswp__caption,.pswp__top-bar{background-color:rgba(0,0,0,.5)}.pswp__ui--fit .pswp__caption,.pswp__ui--fit .pswp__top-bar{background-color:rgba(0,0,0,.3)}.pswp__ui--idle .pswp__button--arrow--left,.pswp__ui--idle .pswp__button--arrow--right,.pswp__ui--idle .pswp__top-bar{opacity:0}.pswp__ui--hidden .pswp__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__top-bar{opacity:.001}.pswp__ui--one-slide .pswp__button--arrow--left,.pswp__ui--one-slide .pswp__button--arrow--right,.pswp__ui--one-slide .pswp__counter{display:none}.pswp__element--disabled{display:none!important}.pswp--minimal--dark .pswp__top-bar{background:none}.my-gallery[data-v-5ac397f5]{opacity:0}
--------------------------------------------------------------------------------
/dist/vue-image-swipe.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("VueImageSwipe",[],t):"object"==typeof exports?exports.VueImageSwipe=t():e.VueImageSwipe=t()}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=13)}([function(e,t,n){var o=n(11);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);(0,n(1).default)("f8f3f614",o,!1,{})},function(e,t,n){"use strict";function o(e,t){for(var n=[],o={},i=0;in.parts.length&&(o.parts.length=n.parts.length)}else{var a=[];for(i=0;i0&&(a=parseInt(a[1],10))>=1&&a<8&&(o.isOldIOSPhone=!0)}var l=r.match(/Android\s([0-9\.]*)/),s=l?l[1]:0;(s=parseFloat(s))>=1&&(s<4.4&&(o.isOldAndroid=!0),o.androidVersion=s),o.isMobileOpera=/opera mini|opera mobi/i.test(r)}for(var u,c,d=["transform","perspective","animationName"],p=["","webkit","Moz","ms","O"],f=0;f<4;f++){n=p[f];for(var m=0;m<3;m++)u=d[m],c=n+(n?u.charAt(0).toUpperCase()+u.slice(1):u),!o[u]&&c in t&&(o[u]=c);n&&!o.raf&&(n=n.toLowerCase(),o.raf=window[n+"RequestAnimationFrame"],o.raf&&(o.caf=window[n+"CancelAnimationFrame"]||window[n+"CancelRequestAnimationFrame"]))}if(!o.raf){var h=0;o.raf=function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-h)),o=window.setTimeout(function(){e(t+n)},n);return h=t+n,o},o.caf=function(e){clearTimeout(e)}}return o.svg=!!document.createElementNS&&!!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect,i.features=o,o}};i.detectFeatures(),i.features.oldIE&&(i.bind=function(e,t,n,o){t=t.split(" ");for(var i,r=(o?"detach":"attach")+"Event",a=function(){n.handleEvent.call(n)},l=0;lt-1?e-t:e<0?t+e:e},Ce={},Ie=function(e,t){return Ce[e]||(Ce[e]=[]),Ce[e].push(t)},Te=function(e){var t=Ce[e];if(t){var n=Array.prototype.slice.call(arguments);n.shift();for(var o=0;or.currItem.fitRatio?xe||(qt(r.currItem,!1,!0),xe=!0):xe&&(qt(r.currItem),xe=!1)),Oe(te,de.x,de.y,v))},Me=function(e){e.container&&Oe(e.container.style,e.initialPosition.x,e.initialPosition.y,e.initialZoomLevel,e)},Ae=function(e,t){t[O]=y+e+"px, 0px"+w},ke=function(e,t){if(!a.loop&&t){var n=c+(he.x*fe-e)/he.x,o=Math.round(e-ct.x);(n<0&&o>0||n>=Kt()-1&&o<0)&&(e=ct.x+o*a.mainScrollEndFriction)}ct.x=e,Ae(e,d)},Fe=function(e,t){var n=dt[e]-me[e];return ce[e]+ue[e]+n-n*(t/g)},Re=function(e,t){e.x=t.x,e.y=t.y,t.id&&(e.id=t.id)},Pe=function(e){e.x=Math.round(e.x),e.y=Math.round(e.y)},Le=null,Ze=function(){Le&&(i.unbind(document,"mousemove",Ze),i.addClass(e,"pswp--has_mouse"),a.mouseUsed=!0,Te("mouseUsed")),Le=setTimeout(function(){Le=null},100)},ze=function(e,t){var n=jt(r.currItem,pe,e);return t&&(ee=n),n},Ne=function(e){return e||(e=r.currItem),e.initialZoomLevel},Ue=function(e){return e||(e=r.currItem),e.w>0?a.maxSpreadZoom:1},Ke=function(e,t,n,o){return o===r.currItem.initialZoomLevel?(n[e]=r.currItem.initialPosition[e],!0):(n[e]=Fe(e,o),n[e]>t.min[e]?(n[e]=t.min[e],!0):n[e]=o)return $e(e),r(n),void(a&&a());r((n-t)*i(l/o)+t),Ge[e].raf=A(u)}};u()},Xe={shout:Te,listen:Ie,viewportSize:pe,options:a,isMainScrollAnimating:function(){return ne},getZoomLevel:function(){return v},getCurrentIndex:function(){return c},isDragging:function(){return G},isZooming:function(){return J},setScrollOffset:function(e,t){me.x=e,L=me.y=t,Te("updateScrollOffset",me)},applyZoomPan:function(e,t,n,o){de.x=t,de.y=n,v=e,De(o)},init:function(){if(!l&&!s){var n;r.framework=i,r.template=e,r.bg=i.getChildByClass(e,"pswp__bg"),F=e.className,l=!0,Z=i.detectFeatures(),A=Z.raf,k=Z.caf,O=Z.transform,P=Z.oldIE,r.scrollWrap=i.getChildByClass(e,"pswp__scroll-wrap"),r.container=i.getChildByClass(r.scrollWrap,"pswp__container"),d=r.container.style,r.itemHolders=_=[{el:r.container.children[0],wrap:0,index:-1},{el:r.container.children[1],wrap:0,index:-1},{el:r.container.children[2],wrap:0,index:-1}],_[0].el.style.display=_[2].el.style.display="none",function(){if(O){var t=Z.perspective&&!M;return y="translate"+(t?"3d(":"("),void(w=Z.perspective?", 0px)":")")}O="left",i.addClass(e,"pswp--ie"),Ae=function(e,t){t.left=e+"px"},Me=function(e){var t=e.fitRatio>1?1:e.fitRatio,n=e.container.style,o=t*e.w,i=t*e.h;n.width=o+"px",n.height=i+"px",n.left=e.initialPosition.x+"px",n.top=e.initialPosition.y+"px"},De=function(){if(te){var e=te,t=r.currItem,n=t.fitRatio>1?1:t.fitRatio,o=n*t.w,i=n*t.h;e.width=o+"px",e.height=i+"px",e.left=de.x+"px",e.top=de.y+"px"}}}(),h={resize:r.updateSize,orientationchange:function(){clearTimeout(z),z=setTimeout(function(){pe.x!==r.scrollWrap.clientWidth&&r.updateSize()},500)},scroll:He,keydown:Be,click:We};var o=Z.isOldIOSPhone||Z.isOldAndroid||Z.isMobileOpera;for(Z.animationName&&Z.transform&&!o||(a.showAnimationDuration=a.hideAnimationDuration=0),n=0;n=Kt())&&(c=0),r.currItem=Ut(c),(Z.isOldIOSPhone||Z.isOldAndroid)&&(ge=!1),e.setAttribute("aria-hidden","false"),a.modal&&(ge?e.style.position="fixed":(e.style.position="absolute",e.style.top=i.getScrollY()+"px")),void 0===L&&(Te("initialLayout"),L=R=i.getScrollY());var f="pswp--open ";for(a.mainClass&&(f+=a.mainClass+" "),a.showHideOpacity&&(f+="pswp--animate_opacity "),f+=M?"pswp--touch":"pswp--notouch",f+=Z.animationName?" pswp--css_animation":"",f+=Z.svg?" pswp--svg":"",i.addClass(e,f),r.updateSize(),p=-1,ve=null,n=0;n<3;n++)Ae((n+p)*he.x,_[n].el.style);P||i.bind(r.scrollWrap,m,r),Ie("initialZoomInEnd",function(){r.setContent(_[0],c-1),r.setContent(_[2],c+1),_[0].el.style.display=_[2].el.style.display="block",a.focus&&e.focus(),i.bind(document,"keydown",r),Z.transform&&i.bind(r.scrollWrap,"click",r),a.mouseUsed||i.bind(document,"mousemove",Ze),i.bind(window,"resize scroll orientationchange",r),Te("bindEvents")}),r.setContent(_[1],c),r.updateCurrItem(),Te("afterInit"),ge||(x=setInterval(function(){je||G||J||v!==r.currItem.initialZoomLevel||r.updateSize()},1e3)),i.addClass(e,"pswp--visible")}},close:function(){l&&(l=!1,s=!0,Te("close"),i.unbind(window,"resize scroll orientationchange",r),i.unbind(window,"scroll",h.scroll),i.unbind(document,"keydown",r),i.unbind(document,"mousemove",Ze),Z.transform&&i.unbind(r.scrollWrap,"click",r),G&&i.unbind(window,f,r),clearTimeout(z),Te("unbindEvents"),Bt(r.currItem,null,!0,r.destroy))},destroy:function(){Te("destroy"),Lt&&clearTimeout(Lt),e.setAttribute("aria-hidden","true"),e.className=F,x&&clearInterval(x),i.unbind(r.scrollWrap,m,r),i.unbind(window,"scroll",r),mt(),Ve(),Ce=null},panTo:function(e,t,n){n||(e>ee.min.x?e=ee.min.x:eee.min.y?t=ee.min.y:t=3&&(p+=ve+(ve>0?-3:3),n=3);for(var o=0;o0?(t=_.shift(),_[2]=t,Ae((++p+2)*he.x,t.el.style),r.setContent(t,c-n+o+1+1)):(t=_.pop(),_.unshift(t),Ae(--p*he.x,t.el.style),r.setContent(t,c+n-o-1-1));if(te&&1===Math.abs(ve)){var i=Ut(C);i.initialZoomLevel!==v&&(jt(i,pe),qt(i),Me(i))}ve=0,r.updateCurrZoomItem(),C=c,Te("afterChange")}}},updateSize:function(t){if(!ge&&a.modal){var n=i.getScrollY();if(L!==n&&(e.style.top=n+"px",L=n),!t&&we.x===window.innerWidth&&we.y===window.innerHeight)return;we.x=window.innerWidth,we.y=window.innerHeight,e.style.height=we.y+"px"}if(pe.x=r.scrollWrap.clientWidth,pe.y=r.scrollWrap.clientHeight,He(),he.x=pe.x+Math.round(pe.x*a.spacing),he.y=pe.y,ke(he.x*fe),Te("beforeResize"),void 0!==p){for(var o,l,s,u=0;u<3;u++)o=_[u],Ae((u+p)*he.x,o.el.style),s=c+u-1,a.loop&&Kt()>2&&(s=_e(s)),(l=Ut(s))&&(b||l.needsUpdate||!l.bounds)?(r.cleanSlide(l),r.setContent(o,s),1===u&&(r.currItem=l,r.updateCurrZoomItem(!0)),l.needsUpdate=!1):-1===o.index&&s>=0&&r.setContent(o,s),l&&l.container&&(jt(l,pe),qt(l),Me(l));b=!1}g=v=r.currItem.initialZoomLevel,(ee=r.currItem.bounds)&&(de.x=ee.center.x,de.y=ee.center.y,De(!0)),Te("resize")},zoomTo:function(e,t,n,o,r){t&&(g=v,dt.x=Math.abs(t.x)-de.x,dt.y=Math.abs(t.y)-de.y,Re(ce,de));var a=ze(e,!1),l={};Ke("x",a,l,e),Ke("y",a,l,e);var s=v,u={x:de.x,y:de.y};Pe(l);var c=function(t){1===t?(v=e,de.x=l.x,de.y=l.y):(v=(e-s)*t+s,de.x=(l.x-u.x)*t+u.x,de.y=(l.y-u.y)*t+u.y),r&&r(t),De(1===t)};n?qe("customZoomTo",0,1,n,o||i.easing.sine.inOut,c):c(1)}},Je={},Qe={},et={},tt={},nt={},ot=[],it={},rt=[],at={},lt=0,st={x:0,y:0},ut=0,ct={x:0,y:0},dt={x:0,y:0},pt={x:0,y:0},ft=function(e,t){return at.x=Math.abs(e.x-t.x),at.y=Math.abs(e.y-t.y),Math.sqrt(at.x*at.x+at.y*at.y)},mt=function(){V&&(k(V),V=null)},ht=function(){G&&(V=A(ht),Dt())},vt=function(e,t){return!(!e||e===document)&&!(e.getAttribute("class")&&e.getAttribute("class").indexOf("pswp__scroll-wrap")>-1)&&(t(e)?e:vt(e.parentNode,t))},gt={},yt=function(e,t){return gt.prevent=!vt(e.target,a.isClickableElement),Te("preventDragEvent",e,t,gt),gt.prevent},wt=function(e,t){return t.x=e.pageX,t.y=e.pageY,t.id=e.identifier,t},xt=function(e,t,n){n.x=.5*(e.x+t.x),n.y=.5*(e.y+t.y)},bt=function(){var e=de.y-r.currItem.initialPosition.y;return 1-Math.abs(e/(pe.y/2))},_t={},Ct={},It=[],Tt=function(e){for(;It.length>0;)It.pop();return D?(se=0,ot.forEach(function(e){0===se?It[0]=e:1===se&&(It[1]=e),se++})):e.type.indexOf("touch")>-1?e.touches&&e.touches.length>0&&(It[0]=wt(e.touches[0],_t),e.touches.length>1&&(It[1]=wt(e.touches[1],Ct))):(_t.x=e.pageX,_t.y=e.pageY,_t.id="",It[0]=_t),It},Et=function(e,t){var n,o,i,l,s=de[e]+t[e],u=t[e]>0,c=ct.x+t.x,d=ct.x-it.x;if(n=s>ee.min[e]||see.min[e]&&(n=a.panEndFriction,ee.min[e],o=ee.min[e]-ce[e]),(o<=0||d<0)&&Kt()>1?(l=c,d<0&&c>it.x&&(l=it.x)):ee.min.x!==ee.max.x&&(i=s)):(s0)&&Kt()>1?(l=c,d>0&&cr.currItem.fitRatio&&(de[e]+=t[e]*n)},St=function(e){if(!("mousedown"===e.type&&e.button>0))if(Nt)e.preventDefault();else if(!H||"mousedown"!==e.type){if(yt(e,!0)&&e.preventDefault(),Te("pointerDown"),D){var t=i.arraySearch(ot,e.pointerId,"id");t<0&&(t=ot.length),ot[t]={x:e.pageX,y:e.pageY,id:e.pointerId}}var n=Tt(e),o=n.length;X=null,Ve(),G&&1!==o||(G=ie=!0,i.bind(window,f,r),B=le=re=W=q=Y=j=$=!1,oe=null,Te("firstTouchStart",n),Re(ce,de),ue.x=ue.y=0,Re(tt,n[0]),Re(nt,tt),it.x=he.x*fe,rt=[{x:tt.x,y:tt.y}],U=N=Ee(),ze(v,!0),mt(),ht()),!J&&o>1&&!ne&&!q&&(g=v,$=!1,J=j=!0,ue.y=ue.x=0,Re(ce,de),Re(Je,n[0]),Re(Qe,n[1]),xt(Je,Qe,pt),dt.x=Math.abs(pt.x)-de.x,dt.y=Math.abs(pt.y)-de.y,Q=ft(Je,Qe))}},Ot=function(e){if(e.preventDefault(),D){var t=i.arraySearch(ot,e.pointerId,"id");if(t>-1){var n=ot[t];n.x=e.pageX,n.y=e.pageY}}if(G){var o=Tt(e);if(oe||Y||J)X=o;else if(ct.x!==he.x*fe)oe="h";else{var r=Math.abs(o[0].x-tt.x)-Math.abs(o[0].y-tt.y);Math.abs(r)>=10&&(oe=r>0?"h":"v",X=o)}}},Dt=function(){if(X){var e=X.length;if(0!==e)if(Re(Je,X[0]),et.x=Je.x-tt.x,et.y=Je.y-tt.y,J&&e>1){if(tt.x=Je.x,tt.y=Je.y,!et.x&&!et.y&&function(e,t){return e.x===t.x&&e.y===t.y}(X[1],Qe))return;Re(Qe,X[1]),$||($=!0,Te("zoomGestureStarted"));var t=ft(Je,Qe),n=Rt(t);n>r.currItem.initialZoomLevel+r.currItem.initialZoomLevel/15&&(le=!0);var o=1,i=Ne(),l=Ue();if(n1&&(o=1),n=i-o*(i/3);else n>l&&((o=(n-l)/(6*i))>1&&(o=1),n=l+o*i);o<0&&(o=0),xt(Je,Qe,st),ue.x+=st.x-pt.x,ue.y+=st.y-pt.y,Re(pt,st),de.x=Fe("x",n),de.y=Fe("y",n),B=n>v,v=n,De()}else{if(!oe)return;if(ie&&(ie=!1,Math.abs(et.x)>=10&&(et.x-=X[0].x-nt.x),Math.abs(et.y)>=10&&(et.y-=X[0].y-nt.y)),tt.x=Je.x,tt.y=Je.y,0===et.x&&0===et.y)return;if("v"===oe&&a.closeOnVerticalDrag&&"fit"===a.scaleMode&&v===r.currItem.initialZoomLevel){ue.y+=et.y,de.y+=et.y;var c=bt();return W=!0,Te("onVerticalDrag",c),Se(c),void De()}!function(e,t,n){if(e-U>50){var o=rt.length>2?rt.shift():{};o.x=t,o.y=n,rt.push(o),U=e}}(Ee(),Je.x,Je.y),Y=!0,ee=r.currItem.bounds;var d=Et("x",et);d||(Et("y",et),Pe(de),De())}}},Mt=function(e){if(Z.isOldAndroid){if(H&&"mouseup"===e.type)return;e.type.indexOf("touch")>-1&&(clearTimeout(H),H=setTimeout(function(){H=0},600))}var t;if(Te("pointerUp"),yt(e,!1)&&e.preventDefault(),D){var n=i.arraySearch(ot,e.pointerId,"id");n>-1&&(t=ot.splice(n,1)[0],navigator.pointerEnabled?t.type=e.pointerType||"mouse":(t.type={4:"mouse",2:"touch",3:"pen"}[e.pointerType],t.type||(t.type=e.pointerType||"mouse")))}var o,l=Tt(e),s=l.length;if("mouseup"===e.type&&(s=0),2===s)return X=null,!0;1===s&&Re(nt,l[0]),0!==s||oe||ne||(t||("mouseup"===e.type?t={x:e.pageX,y:e.pageY,type:"mouse"}:e.changedTouches&&e.changedTouches[0]&&(t={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY,type:"touch"})),Te("touchRelease",e,t));var u=-1;if(0===s&&(G=!1,i.unbind(window,f,r),mt(),J?u=0:-1!==ut&&(u=Ee()-ut)),ut=1===s?Ee():-1,o=-1!==u&&u<150?"zoom":"swipe",J&&s<2&&(J=!1,1===s&&(o="zoomPointerUp"),Te("zoomGestureEnded")),X=null,Y||$||ne||W)if(Ve(),K||(K=At()),K.calculateSwipeSpeed("x"),W){var c=bt();if(cr.currItem.fitRatio&&kt(K):Pt())}},At=function(){var e,t,n={lastFlickOffset:{},lastFlickDist:{},lastFlickSpeed:{},slowDownRatio:{},slowDownRatioReverse:{},speedDecelerationRatio:{},speedDecelerationRatioAbs:{},distanceOffset:{},backAnimDestination:{},backAnimStarted:{},calculateSwipeSpeed:function(o){rt.length>1?(e=Ee()-U+50,t=rt[rt.length-2][o]):(e=Ee()-N,t=nt[o]),n.lastFlickOffset[o]=tt[o]-t,n.lastFlickDist[o]=Math.abs(n.lastFlickOffset[o]),n.lastFlickDist[o]>20?n.lastFlickSpeed[o]=n.lastFlickOffset[o]/e:n.lastFlickSpeed[o]=0,Math.abs(n.lastFlickSpeed[o])<.1&&(n.lastFlickSpeed[o]=0),n.slowDownRatio[o]=.95,n.slowDownRatioReverse[o]=1-n.slowDownRatio[o],n.speedDecelerationRatio[o]=1},calculateOverBoundsAnimOffset:function(e,t){n.backAnimStarted[e]||(de[e]>ee.min[e]?n.backAnimDestination[e]=ee.min[e]:de[e]30&&(u||t.lastFlickOffset.x>20)?o=-1:s<-30&&(u||t.lastFlickOffset.x<-20)&&(o=1)}o&&((c+=o)<0?(c=a.loop?Kt()-1:0,l=!0):c>=Kt()&&(c=a.loop?0:Kt()-1,l=!0),l&&!a.loop||(ve+=o,fe-=o,n=!0));var d,p=he.x*fe,f=Math.abs(p-ct.x);return n||p>ct.x==t.lastFlickSpeed.x>0?(d=Math.abs(t.lastFlickSpeed.x)>0?f/Math.abs(t.lastFlickSpeed.x):333,d=Math.min(d,400),d=Math.max(d,250)):d=333,lt===c&&(n=!1),ne=!0,Te("mainScrollAnimStart"),qe("mainScroll",ct.x,p,d,i.easing.cubic.out,ke,function(){Ve(),ne=!1,lt=-1,(n||lt!==c)&&r.updateCurrItem(),Te("mainScrollAnimComplete")}),n&&r.updateCurrItem(!0),n},Rt=function(e){return 1/Q*e*g},Pt=function(){var e=v,t=Ne(),n=Ue();vn&&(e=n);var o,a=ae;return re&&!B&&!le&&v1||navigator.msMaxTouchPoints>1),r.likelyTouchDevice=M,h[I]=St,h[T]=Ot,h[E]=Mt,S&&(h[S]=h[E]),Z.touch&&(m+=" mousedown",f+=" mousemove mouseup",h.mousedown=h[I],h.mousemove=h[T],h.mouseup=h[E]),M||(a.allowPanToNext=!1)}}});var Lt,Zt,zt,Nt,Ut,Kt,Bt=function(t,n,o,l){var s;Lt&&clearTimeout(Lt),Nt=!0,zt=!0,t.initialLayout?(s=t.initialLayout,t.initialLayout=null):s=a.getThumbBoundsFn&&a.getThumbBoundsFn(c);var d=o?a.hideAnimationDuration:a.showAnimationDuration,p=function(){$e("initialZoom"),o?(r.template.removeAttribute("style"),r.bg.removeAttribute("style")):(Se(1),n&&(n.style.display="block"),i.addClass(e,"pswp--animated-in"),Te("initialZoom"+(o?"OutEnd":"InEnd"))),l&&l(),Nt=!1};if(!d||!s||void 0===s.x)return Te("initialZoom"+(o?"Out":"In")),v=t.initialZoomLevel,Re(de,t.initialPosition),De(),e.style.opacity=o?0:1,Se(1),void(d?setTimeout(function(){p()},d):p());!function(){var n=u,l=!r.currItem.src||r.currItem.loadError||a.showHideOpacity;t.miniImg&&(t.miniImg.style.webkitBackfaceVisibility="hidden"),o||(v=s.w/t.w,de.x=s.x,de.y=s.y-R,r[l?"template":"bg"].style.opacity=.001,De()),Ye("initialZoom"),o&&!n&&i.removeClass(e,"pswp--animated-in"),l&&(o?i[(n?"remove":"add")+"Class"](e,"pswp--animate_opacity"):setTimeout(function(){i.addClass(e,"pswp--animate_opacity")},30)),Lt=setTimeout(function(){if(Te("initialZoom"+(o?"Out":"In")),o){var r=s.w/t.w,a={x:de.x,y:de.y},u=v,c=ae,f=function(t){1===t?(v=r,de.x=s.x,de.y=s.y-L):(v=(r-u)*t+u,de.x=(s.x-a.x)*t+a.x,de.y=(s.y-L-a.y)*t+a.y),De(),l?e.style.opacity=1-t:Se(c-t*c)};n?qe("initialZoom",0,1,d,i.easing.cubic.out,f,p):(f(1),Lt=setTimeout(p,d+20))}else v=t.initialZoomLevel,Re(de,t.initialPosition),De(),Se(1),l?e.style.opacity=1:Se(1),Lt=setTimeout(p,d+20)},o?25:90)}()},Wt={},Ht=[],Gt={index:0,errorMsg:'',forceProgressiveLoading:!1,preload:[1,1],getNumItemsFn:function(){return Zt.length}},jt=function(e,t,n){if(e.src&&!e.loadError){var o=!n;if(o&&(e.vGap||(e.vGap={top:0,bottom:0}),Te("parseVerticalMargin",e)),Wt.x=t.x,Wt.y=t.y-e.vGap.top-e.vGap.bottom,o){var i=Wt.x/e.w,r=Wt.y/e.h;e.fitRatio=i1&&(n=1),e.initialZoomLevel=n,e.bounds||(e.bounds={center:{x:0,y:0},max:{x:0,y:0},min:{x:0,y:0}})}if(!n)return;return function(e,t,n){var o=e.bounds;o.center.x=Math.round((Wt.x-t)/2),o.center.y=Math.round((Wt.y-n)/2)+e.vGap.top,o.max.x=t>Wt.x?Math.round(Wt.x-t):o.center.x,o.max.y=n>Wt.y?Math.round(Wt.y-n)+e.vGap.top:o.center.y,o.min.x=t>Wt.x?0:o.center.x,o.min.y=n>Wt.y?e.vGap.top:o.center.y}(e,e.w*n,e.h*n),o&&n===e.initialZoomLevel&&(e.initialPosition=e.bounds.center),e.bounds}return e.w=e.h=0,e.initialZoomLevel=e.fitRatio=1,e.bounds={center:{x:0,y:0},max:{x:0,y:0},min:{x:0,y:0}},e.initialPosition=e.bounds.center,e.bounds},$t=function(e,t,n,o,i,a){t.loadError||o&&(t.imageAppended=!0,qt(t,o,t===r.currItem&&xe),n.appendChild(o),a&&setTimeout(function(){t&&t.loaded&&t.placeholder&&(t.placeholder.style.display="none",t.placeholder=null)},500))},Yt=function(e){e.loading=!0,e.loaded=!1;var t=e.img=i.createEl("pswp__img","img"),n=function(){e.loading=!1,e.loaded=!0,e.loadComplete?e.loadComplete(e):e.img=null,t.onload=t.onerror=null,t=null};return t.onload=n,t.onerror=function(){e.loadError=!0,n()},t.src=e.src,t},Vt=function(e,t){if(e.src&&e.loadError&&e.container)return t&&(e.container.innerHTML=""),e.container.innerHTML=a.errorMsg.replace("%url%",e.src),!0},qt=function(e,t,n){if(e.src){t||(t=e.container.lastChild);var o=n?e.w:Math.round(e.w*e.fitRatio),i=n?e.h:Math.round(e.h*e.fitRatio);e.placeholder&&!e.loaded&&(e.placeholder.style.width=o+"px",e.placeholder.style.height=i+"px"),t.style.width=o+"px",t.style.height=i+"px"}},Xt=function(){if(Ht.length){for(var e,t=0;t=0,i=Math.min(n[0],Kt()),l=Math.min(n[1],Kt());for(t=1;t<=(o?l:i);t++)r.lazyLoadItem(c+t);for(t=1;t<=(o?i:l);t++)r.lazyLoadItem(c-t)}),Ie("initialLayout",function(){r.currItem.initialLayout=a.getThumbBoundsFn&&a.getThumbBoundsFn(c)}),Ie("mainScrollAnimComplete",Xt),Ie("initialZoomInEnd",Xt),Ie("destroy",function(){for(var e,t=0;t=0&&void 0!==Zt[e]&&Zt[e]},allowProgressiveImg:function(){return a.forceProgressiveLoading||!M||a.mouseUsed||screen.width>1200},setContent:function(e,t){a.loop&&(t=_e(t));var n=r.getItemAt(e.index);n&&(n.container=null);var o,s=r.getItemAt(t);if(s){Te("gettingData",t,s),e.index=t,e.item=s;var u=s.container=i.createEl("pswp__zoom-wrap");if(!s.src&&s.html&&(s.html.tagName?u.appendChild(s.html):u.innerHTML=s.html),Vt(s),jt(s,pe),!s.src||s.loadError||s.loaded)s.src&&!s.loadError&&((o=i.createEl("pswp__img","img")).style.opacity=1,o.src=s.src,qt(s,o),$t(0,s,u,o));else{if(s.loadComplete=function(n){if(l){if(e&&e.index===t){if(Vt(n,!0))return n.loadComplete=n.img=null,jt(n,pe),Me(n),void(e.index===c&&r.updateCurrZoomItem());n.imageAppended?!Nt&&n.placeholder&&(n.placeholder.style.display="none",n.placeholder=null):Z.transform&&(ne||Nt)?Ht.push({item:n,baseDiv:u,img:n.img,index:t,holder:e,clearPlaceholder:!0}):$t(0,n,u,n.img,0,!0)}n.loadComplete=null,n.img=null,Te("imageLoadComplete",t,n)}},i.features.transform){var d="pswp__img pswp__img--placeholder";d+=s.msrc?"":" pswp__img--placeholder--blank";var p=i.createEl(d,s.msrc?"img":"");s.msrc&&(p.src=s.msrc),qt(s,p),u.appendChild(p),s.placeholder=p}s.loading||Yt(s),r.allowProgressiveImg()&&(!zt&&Z.transform?Ht.push({item:s,baseDiv:u,img:s.img,index:t,holder:e}):$t(0,s,u,s.img,0,!0))}zt||t!==c?Me(s):(te=u.style,Bt(s,o||s.img)),e.el.innerHTML="",e.el.appendChild(u)}else e.el.innerHTML=""},cleanSlide:function(e){e.img&&(e.img.onload=e.img.onerror=null),e.loaded=e.loading=e.img=e.imageAppended=!1}}});var Jt,Qt,en={},tn=function(e,t,n){var o=document.createEvent("CustomEvent"),i={origEvent:e,target:e.target,releasePoint:t,pointerType:n||"touch"};o.initCustomEvent("pswpTap",!0,!0,i),e.target.dispatchEvent(o)};be("Tap",{publicMethods:{initTap:function(){Ie("firstTouchStart",r.onTapStart),Ie("touchRelease",r.onTapRelease),Ie("destroy",function(){en={},Jt=null})},onTapStart:function(e){e.length>1&&(clearTimeout(Jt),Jt=null)},onTapRelease:function(e,t){if(t&&!Y&&!j&&!je){var n=t;if(Jt&&(clearTimeout(Jt),Jt=null,function(e,t){return Math.abs(e.x-t.x)<25&&Math.abs(e.y-t.y)<25}(n,en)))return void Te("doubleTap",n);if("mouse"===t.type)return void tn(e,t,"mouse");var o=e.target.tagName.toUpperCase();if("BUTTON"===o||i.hasClass(e.target,"pswp__single-tap"))return void tn(e,t);Re(en,n),Jt=setTimeout(function(){tn(e,t),Jt=null},300)}}}}),be("DesktopZoom",{publicMethods:{initDesktopZoom:function(){P||(M?Ie("mouseUsed",function(){r.setupDesktopZoom()}):r.setupDesktopZoom(!0))},setupDesktopZoom:function(t){Qt={};var n="wheel mousewheel DOMMouseScroll";Ie("bindEvents",function(){i.bind(e,n,r.handleMouseWheel)}),Ie("unbindEvents",function(){Qt&&i.unbind(e,n,r.handleMouseWheel)}),r.mouseZoomedIn=!1;var o,a=function(){r.mouseZoomedIn&&(i.removeClass(e,"pswp--zoomed-in"),r.mouseZoomedIn=!1),v<1?i.addClass(e,"pswp--zoom-allowed"):i.removeClass(e,"pswp--zoom-allowed"),l()},l=function(){o&&(i.removeClass(e,"pswp--dragging"),o=!1)};Ie("resize",a),Ie("afterChange",a),Ie("pointerDown",function(){r.mouseZoomedIn&&(o=!0,i.addClass(e,"pswp--dragging"))}),Ie("pointerUp",l),t||a()},handleMouseWheel:function(e){if(v<=r.currItem.fitRatio)return a.modal&&(!a.closeOnScroll||je||G?e.preventDefault():O&&Math.abs(e.deltaY)>2&&(u=!0,r.close())),!0;if(e.stopPropagation(),Qt.x=0,"deltaX"in e)1===e.deltaMode?(Qt.x=18*e.deltaX,Qt.y=18*e.deltaY):(Qt.x=e.deltaX,Qt.y=e.deltaY);else if("wheelDelta"in e)e.wheelDeltaX&&(Qt.x=-.16*e.wheelDeltaX),e.wheelDeltaY?Qt.y=-.16*e.wheelDeltaY:Qt.y=-.16*e.wheelDelta;else{if(!("detail"in e))return;Qt.y=e.detail}ze(v,!0);var t=de.x-Qt.x,n=de.y-Qt.y;(a.modal||t<=ee.min.x&&t>=ee.max.x&&n<=ee.min.y&&n>=ee.max.y)&&e.preventDefault(),r.panTo(t,n)},toggleDesktopZoom:function(t){t=t||{x:pe.x/2+me.x,y:pe.y/2+me.y};var n=a.getDoubleTapZoom(!0,r.currItem),o=v===n;r.mouseZoomedIn=!o,r.zoomTo(o?r.currItem.initialZoomLevel:n,t,333),i[(o?"remove":"add")+"Class"](e,"pswp--zoomed-in")}}});var nn,on,rn,an,ln,sn,un,cn,dn,pn,fn,mn,hn={history:!0,galleryUID:1},vn=function(){return fn.hash.substring(1)},gn=function(){nn&&clearTimeout(nn),rn&&clearTimeout(rn)},yn=function(){var e=vn(),t={};if(e.length<5)return t;var n,o=e.split("&");for(n=0;n-1&&(un=(un=un.split("&gid=")[0]).split("?gid=")[0]),Ie("afterChange",r.updateURL),Ie("unbindEvents",function(){i.unbind(window,"hashchange",r.onHashChange)});var e=function(){sn=!0,dn||(pn?history.back():un?fn.hash=un:mn?history.pushState("",document.title,fn.pathname+fn.search):fn.hash=""),gn()};Ie("unbindEvents",function(){u&&e()}),Ie("destroy",function(){sn||e()}),Ie("firstUpdate",function(){c=yn().pid});var t=un.indexOf("pid=");t>-1&&"&"===(un=un.substring(0,t)).slice(-1)&&(un=un.slice(0,-1)),setTimeout(function(){l&&i.bind(window,"hashchange",r.onHashChange)},40)}},onHashChange:function(){if(vn()===un)return dn=!0,void r.close();an||(ln=!0,r.goTo(yn().pid),ln=!1)},updateURL:function(){gn(),ln||(cn?nn=setTimeout(wn,800):wn())}}}),i.extend(r,Xe)}})?o.call(t,n,t,e):o)||(e.exports=i)},function(e,t,n){var o,i;
5 | /*! PhotoSwipe Default UI - 4.1.2 - 2017-04-05
6 | * http://photoswipe.com
7 | * Copyright (c) 2017 Dmitry Semenov; */void 0===(i="function"==typeof(o=function(){"use strict";return function(e,t){var n,o,i,r,a,l,s,u,c,d,p,f,m,h,v,g,y,w,x=this,b=!1,_=!0,C=!0,I={barsSize:{top:44,bottom:"auto"},closeElClasses:["item","caption","zoom-wrap","ui","top-bar"],timeToIdle:4e3,timeToIdleOutside:1e3,loadingIndicatorDelay:1e3,addCaptionHTMLFn:function(e,t){return e.title?(t.children[0].innerHTML=e.title,!0):(t.children[0].innerHTML="",!1)},closeEl:!0,captionEl:!0,fullscreenEl:!0,zoomEl:!0,shareEl:!0,counterEl:!0,arrowEl:!0,preloaderEl:!0,tapToClose:!1,tapToToggleControls:!0,clickToCloseNonZoomable:!0,shareButtons:[{id:"facebook",label:"Share on Facebook",url:"https://www.facebook.com/sharer/sharer.php?u={{url}}"},{id:"twitter",label:"Tweet",url:"https://twitter.com/intent/tweet?text={{text}}&url={{url}}"},{id:"pinterest",label:"Pin it",url:"http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}"},{id:"download",label:"Download image",url:"{{raw_image_url}}",download:!0}],getImageURLForShare:function(){return e.currItem.src||""},getPageURLForShare:function(){return window.location.href},getTextForShare:function(){return e.currItem.title||""},indexIndicatorSep:" / ",fitControlsWidth:1200},T=function(e){if(g)return!0;e=e||window.event,v.timeToIdle&&v.mouseUsed&&!c&&R();for(var n,o,i=e.target||e.srcElement,r=i.getAttribute("class")||"",a=0;a-1&&(n.onTap(),o=!0);if(o){e.stopPropagation&&e.stopPropagation(),g=!0;var l=t.features.isOldAndroid?600:30;setTimeout(function(){g=!1},l)}},E=function(e,n,o){t[(o?"add":"remove")+"Class"](e,"pswp__"+n)},S=function(){var e=1===v.getNumItemsFn();e!==h&&(E(o,"ui--one-slide",e),h=e)},O=function(){E(s,"share-modal--hidden",C)},D=function(){return(C=!C)?(t.removeClass(s,"pswp__share-modal--fade-in"),setTimeout(function(){C&&O()},300)):(O(),setTimeout(function(){C||t.addClass(s,"pswp__share-modal--fade-in")},30)),C||A(),!1},M=function(t){var n=(t=t||window.event).target||t.srcElement;return e.shout("shareLinkClick",t,n),!(!n.href||!n.hasAttribute("download")&&(window.open(n.href,"pswp_share","scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=550,height=420,top=100,left="+(window.screen?Math.round(screen.width/2-275):100)),C||D(),1))},A=function(){for(var e,t,n,o,i,r="",a=0;a"+e.label+"",v.parseShareButtonOut&&(r=v.parseShareButtonOut(e,r));s.children[0].innerHTML=r,s.children[0].onclick=M},k=function(e){for(var n=0;nv.fitControlsWidth){var l=v.barsSize;if(v.captionEl&&"auto"===l.bottom)if(r||((r=t.createEl("pswp__caption pswp__caption--fake")).appendChild(t.createEl("pswp__caption__center")),o.insertBefore(r,i),t.addClass(o,"pswp__ui--fit")),v.addCaptionHTMLFn(n,r,!0)){var s=r.clientHeight;a.bottom=parseInt(s,10)||44}else a.bottom=l.top;else a.bottom="auto"===l.bottom?0:l.bottom;a.top=l.top}else a.top=a.bottom=0},z=[{name:"caption",option:"captionEl",onInit:function(e){i=e}},{name:"share-modal",option:"shareEl",onInit:function(e){s=e},onTap:function(){D()}},{name:"button--share",option:"shareEl",onInit:function(e){l=e},onTap:function(){D()}},{name:"button--zoom",option:"zoomEl",onTap:e.toggleDesktopZoom},{name:"counter",option:"counterEl",onInit:function(e){a=e}},{name:"button--close",option:"closeEl",onTap:e.close},{name:"button--arrow--left",option:"arrowEl",onTap:e.prev},{name:"button--arrow--right",option:"arrowEl",onTap:e.next},{name:"button--fs",option:"fullscreenEl",onTap:function(){n.isFullscreen()?n.exit():n.enter()}},{name:"preloader",option:"preloaderEl",onInit:function(e){p=e}}];x.init=function(){t.extend(e.options,I,!0),v=e.options,o=t.getChildByClass(e.scrollWrap,"pswp__ui"),d=e.listen,function(){var e;d("onVerticalDrag",function(e){_&&e<.95?x.hideControls():!_&&e>=.95&&x.showControls()}),d("onPinchClose",function(t){_&&t<.9?(x.hideControls(),e=!0):e&&!_&&t>.9&&x.showControls()}),d("zoomGestureEnded",function(){(e=!1)&&!_&&x.showControls()})}(),d("beforeChange",x.update),d("doubleTap",function(t){var n=e.currItem.initialZoomLevel;e.getZoomLevel()!==n?e.zoomTo(n,t,333):e.zoomTo(v.getDoubleTapZoom(!1,e.currItem),t,333)}),d("preventDragEvent",function(e,t,n){var o=e.target||e.srcElement;o&&o.getAttribute("class")&&e.type.indexOf("mouse")>-1&&(o.getAttribute("class").indexOf("__caption")>0||/(SMALL|STRONG|EM)/i.test(o.tagName))&&(n.prevent=!1)}),d("bindEvents",function(){t.bind(o,"pswpTap click",T),t.bind(e.scrollWrap,"pswpTap",x.onGlobalTap),e.likelyTouchDevice||t.bind(e.scrollWrap,"mouseover",x.onMouseOver)}),d("unbindEvents",function(){C||D(),y&&clearInterval(y),t.unbind(document,"mouseout",P),t.unbind(document,"mousemove",R),t.unbind(o,"pswpTap click",T),t.unbind(e.scrollWrap,"pswpTap",x.onGlobalTap),t.unbind(e.scrollWrap,"mouseover",x.onMouseOver),n&&(t.unbind(document,n.eventK,x.updateFullscreen),n.isFullscreen()&&(v.hideAnimationDuration=0,n.exit()),n=null)}),d("destroy",function(){v.captionEl&&(r&&o.removeChild(r),t.removeClass(i,"pswp__caption--empty")),s&&(s.children[0].onclick=null),t.removeClass(o,"pswp__ui--over-close"),t.addClass(o,"pswp__ui--hidden"),x.setIdle(!1)}),v.showAnimationDuration||t.removeClass(o,"pswp__ui--hidden"),d("initialZoomIn",function(){v.showAnimationDuration&&t.removeClass(o,"pswp__ui--hidden")}),d("initialZoomOut",function(){t.addClass(o,"pswp__ui--hidden")}),d("parseVerticalMargin",Z),function(){var e,n,i,r=function(o){if(o)for(var r=o.length,a=0;a-1&&(v[i.option]?(t.removeClass(e,"pswp__element--disabled"),i.onInit&&i.onInit(e)):t.addClass(e,"pswp__element--disabled"))}};r(o.children);var a=t.getChildByClass(o,"pswp__top-bar");a&&r(a.children)}(),v.shareEl&&l&&s&&(C=!0),S(),v.timeToIdle&&d("mouseUsed",function(){t.bind(document,"mousemove",R),t.bind(document,"mouseout",P),y=setInterval(function(){2==++F&&x.setIdle(!0)},v.timeToIdle/2)}),v.fullscreenEl&&!t.features.isOldAndroid&&(n||(n=x.getFullscreenAPI()),n?(t.bind(document,n.eventK,x.updateFullscreen),x.updateFullscreen(),t.addClass(e.template,"pswp--supports-fs")):t.removeClass(e.template,"pswp--supports-fs")),v.preloaderEl&&(L(!0),d("beforeChange",function(){clearTimeout(m),m=setTimeout(function(){e.currItem&&e.currItem.loading?(!e.allowProgressiveImg()||e.currItem.img&&!e.currItem.img.naturalWidth)&&L(!1):L(!0)},v.loadingIndicatorDelay)}),d("imageLoadComplete",function(t,n){e.currItem===n&&L(!0)}))},x.setIdle=function(e){c=e,E(o,"ui--idle",e)},x.update=function(){_&&e.currItem?(x.updateIndexIndicator(),v.captionEl&&(v.addCaptionHTMLFn(e.currItem,i),E(i,"caption--empty",!e.currItem.title)),b=!0):b=!1,C||D(),S()},x.updateFullscreen=function(o){o&&setTimeout(function(){e.setScrollOffset(0,t.getScrollY())},50),t[(n.isFullscreen()?"add":"remove")+"Class"](e.template,"pswp--fs")},x.updateIndexIndicator=function(){v.counterEl&&(a.innerHTML=e.getCurrentIndex()+1+v.indexIndicatorSep+v.getNumItemsFn())},x.onGlobalTap=function(n){var o=(n=n||window.event).target||n.srcElement;if(!g)if(n.detail&&"mouse"===n.detail.pointerType){if(k(o))return void e.close();t.hasClass(o,"pswp__img")&&(1===e.getZoomLevel()&&e.getZoomLevel()<=e.currItem.fitRatio?v.clickToCloseNonZoomable&&e.close():e.toggleDesktopZoom(n.detail.releasePoint))}else if(v.tapToToggleControls&&(_?x.hideControls():x.showControls()),v.tapToClose&&(t.hasClass(o,"pswp__img")||k(o)))return void e.close()},x.onMouseOver=function(e){var t=(e=e||window.event).target||e.srcElement;E(o,"ui--over-close",k(t))},x.hideControls=function(){t.addClass(o,"pswp__ui--hidden"),_=!1},x.showControls=function(){_=!0,b||x.update(),t.removeClass(o,"pswp__ui--hidden")},x.supportsFullscreen=function(){var e=document;return!!(e.exitFullscreen||e.mozCancelFullScreen||e.webkitExitFullscreen||e.msExitFullscreen)},x.getFullscreenAPI=function(){var t,n=document.documentElement,o="fullscreenchange";return n.requestFullscreen?t={enterK:"requestFullscreen",exitK:"exitFullscreen",elementK:"fullscreenElement",eventK:o}:n.mozRequestFullScreen?t={enterK:"mozRequestFullScreen",exitK:"mozCancelFullScreen",elementK:"mozFullScreenElement",eventK:"moz"+o}:n.webkitRequestFullscreen?t={enterK:"webkitRequestFullscreen",exitK:"webkitExitFullscreen",elementK:"webkitFullscreenElement",eventK:"webkit"+o}:n.msRequestFullscreen&&(t={enterK:"msRequestFullscreen",exitK:"msExitFullscreen",elementK:"msFullscreenElement",eventK:"MSFullscreenChange"}),t&&(t.enter=function(){if(u=v.closeOnScroll,v.closeOnScroll=!1,"webkitRequestFullscreen"!==this.enterK)return e.template[this.enterK]();e.template[this.enterK](Element.ALLOW_KEYBOARD_INPUT)},t.exit=function(){return v.closeOnScroll=u,document[this.exitK]()},t.isFullscreen=function(){return document[this.elementK]}),t}}})?o.call(t,n,t,e):o)||(e.exports=i)},function(e,t,n){var o=n(5);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);(0,n(1).default)("edd1bb48",o,!1,{})},function(e,t,n){},,function(e,t,n){var o=n(8);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals);(0,n(1).default)("713951a0",o,!1,{})},function(e,t,n){},,function(e,t,n){"use strict";var o=n(0);n.n(o).a},function(e,t,n){},,function(e,t,n){"use strict";n.r(t);var o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.data.length?n("div",[n("div",{ref:"myGallery",staticClass:"my-gallery",attrs:{"data-pswp-uid":"1"}},e._l(e.slides,function(t,o){return e.slides.length?n("div",{key:o},[n("img",{attrs:{preview:"",src:t,alt:""}})]):e._e()})),e._v(" "),n("div",{ref:"pswpWrap",staticClass:"pswp",attrs:{tabindex:"-1",role:"dialog","aria-hidden":"true"}},[n("div",{staticClass:"pswp__bg"}),e._v(" "),e._m(0)])]):e._e()};o._withStripped=!0;n(4),n(7);var i=n(2),r=n.n(i),a=n(3),l=n.n(a);function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var u={name:"PreviewImage",props:{data:{type:Array,default:function(){return[]}},imageIndex:{type:Number,default:0},options:{type:Object,default:function(){}}},data:function(){return{slides:this.data||[],gallery:null}},watch:{data:function(e){var t=this;Array.isArray(e)&&(this.slides=Object.assign([],e),e.length>0&&this.$nextTick(function(){t.initPhotoSwipe()}))}},mounted:function(){var e=this;this.slides.length>0&&this.$nextTick(function(){e.initPhotoSwipe()})},methods:{initPhotoSwipe:function(){var e=this,t=this,n=this.options,o=this.imageIndex;n=n||{},n=Object.assign({fullscreenEl:!0,shareEl:!1,arrowEl:!0,preloaderEl:!0,loop:!1,bgOpacity:.85,showHideOpacity:!0,errorMsg:'图片加载失败
'},n,{index:o});var i=this.$refs.myGallery,a=this.$refs.pswpWrap,u=this.transThumbnailElements(),c=function(e){for(var t=1;t1&&void 0!==arguments[1]&&arguments[1];var t=e.extend(d);t.prototype.close=function(){this.data=[],this.options={},this.imageIndex=0},e.prototype.$imagePreview=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=document.createElement("div"),o=new t;o.$mount(n),o.data=e.images||[],o.imageIndex=e.index||0,o.options=e.defaultOpt||{},document.body.appendChild(o.$el),o.$on("close",function(){o.close(),document.body.removeChild(o.$el),o=null})}}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(p);t.default=p}])});
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | vue图片预览
8 |
9 |
10 |
11 |
56 |
57 |
58 |
59 |
60 |
61 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-image-swipe",
3 | "version": "1.0.5",
4 | "description": "基于photoswipe的vue预览组件",
5 | "main": "dist/vue-image-swipe.js",
6 | "scripts": {
7 | "dev": "webpack-dev-server --mode development --open --inline --hotOnly",
8 | "build": "webpack --mode production",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/zhhshen/vue-photo-swipe.git"
14 | },
15 | "keywords": [
16 | "photoswipe",
17 | "vue",
18 | "webpack"
19 | ],
20 | "author": "zhhshen",
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/zhhshen/vue-photo-swipe/issues"
24 | },
25 | "homepage": "https://github.com/zhhshen/vue-photo-swipe#readme",
26 | "dependencies": {
27 | "photoswipe": "^4.1.2"
28 | },
29 | "devDependencies": {
30 | "@babel/core": "^7.0.0",
31 | "@babel/preset-env": "^7.0.0",
32 | "autoprefixer": "^9.1.5",
33 | "babel-loader": "^8.0.2",
34 | "clean-webpack-plugin": "^0.1.19",
35 | "cross-env": "^5.2.0",
36 | "css-loader": "^1.0.0",
37 | "file-loader": "^2.0.0",
38 | "html-webpack-plugin": "^3.2.0",
39 | "html-withimg-loader": "^0.1.16",
40 | "mini-css-extract-plugin": "^0.4.2",
41 | "optimize-css-assets-webpack-plugin": "^5.0.1",
42 | "postcss-loader": "^3.0.0",
43 | "resolve-url-loader": "^2.3.1",
44 | "style-loader": "^0.23.0",
45 | "uglifyjs-webpack-plugin": "^1.3.0",
46 | "url-loader": "^1.1.1",
47 | "vue": "^2.5.17",
48 | "vue-loader": "^15.4.1",
49 | "vue-template-compiler": "^2.5.17",
50 | "webpack": "^4.17.2",
51 | "webpack-cli": "^3.1.0",
52 | "webpack-dev-server": "^3.1.8",
53 | "webpack-merge": "^4.1.4"
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | require('autoprefixer')
4 | ]
5 | }
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | hello world
4 |
5 |
6 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
44 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 基于photeswipe实现的vue预览组件
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import Preview from './lib/index.js'
4 | Vue.use(Preview)
5 |
6 | /* eslint-disable no-new */
7 | new Vue({
8 | el: '#app',
9 | render: h => h(App),
10 | })
--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | import Preview from './preview.vue'
2 |
3 | const VueImageSwipe = {}
4 | VueImageSwipe.install = (Vue, options = {}) => {
5 | const PreviewController = Vue.extend(Preview)
6 | PreviewController.prototype.close = function () {
7 | this.data = []
8 | this.options = {}
9 | this.imageIndex = 0
10 | }
11 | Vue.prototype.$imagePreview = (opts = {}) => {
12 | const elem = document.createElement('div')
13 | let instance = new PreviewController()
14 | instance.$mount(elem)
15 | instance.data = opts.images || []
16 | instance.imageIndex = opts.index || 0
17 | instance.options = opts.defaultOpt || {}
18 | document.body.appendChild(instance.$el)
19 | instance.$on('close', () => {
20 | instance.close()
21 | document.body.removeChild(instance.$el)
22 | instance = null
23 | })
24 | }
25 | }
26 | if (typeof window !== 'undefined' && window.Vue) {
27 | window.Vue.use(VueImageSwipe)
28 | }
29 | export default VueImageSwipe
30 |
--------------------------------------------------------------------------------
/src/lib/preview.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
12 |
48 |
49 |
50 |
183 |
188 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const merge = require('webpack-merge')
4 | const HtmlWebPackPlugin = require('html-webpack-plugin')
5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
6 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
7 | const CleanWebpackPlugin = require('clean-webpack-plugin')
8 | const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
9 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
10 | let config = {
11 | context: __dirname,
12 | entry: './src/lib/index.js',
13 | output: {
14 | path: path.resolve(__dirname, './dist'),
15 | filename: 'vue-image-swipe.js',
16 | library: 'VueImageSwipe',
17 | libraryTarget: 'umd',
18 | umdNamedDefine: true
19 | },
20 | resolve: {
21 | extensions: ['.js', '.json', '.vue'],
22 | alias: {
23 | vue: 'vue/dist/vue.js'
24 | }
25 | },
26 | module: {
27 | rules: [{
28 | test: /\.vue$/,
29 | use: [{
30 | loader: 'vue-loader',
31 | }],
32 | exclude: file => (
33 | /node_modules/.test(file) &&
34 | !/\.vue\.js/.test(file)
35 | ),
36 | }, {
37 | test: /\.(jsx|js)$/,
38 | use: [{
39 | loader: 'babel-loader',
40 | }],
41 | exclude: /node_modules/,
42 | }, {
43 | test: /\.css$/,
44 | use: [{
45 | loader: process.env.NODE_ENV !== 'production'
46 | ? 'vue-style-loader': MiniCssExtractPlugin.loader
47 | },
48 | MiniCssExtractPlugin.loader,
49 | 'css-loader',
50 | 'resolve-url-loader',
51 | "postcss-loader"
52 | ],
53 | }, {
54 | test: /\.(png|jpe?g|gif|svg)$/,
55 | use: [{
56 | loader: 'file-loader',
57 | options: {
58 | limit: 100000,
59 | outputPath: 'images/',
60 | }
61 | }]
62 | }, {
63 | test: /\.(htm|html)$/,
64 | use: [
65 | 'html-withimg-loader'
66 | ]
67 | },
68 | // {
69 | // test: /\.(eot|ttf|woff|woff2|svg)$/,
70 | // use: [{
71 | // loader: 'file-loader',
72 | // options: {
73 | // name: 'fonts/[name].[ext]',
74 | // publicPath:'./'
75 | // }
76 | // }]
77 | // }
78 | ]
79 | },
80 | plugins: [
81 | new VueLoaderPlugin(),
82 | new HtmlWebPackPlugin({
83 | template: "./src/index.html",
84 | filename: "index.html"
85 | }),
86 | ],
87 | }
88 | module.exports = (env, argv) => {
89 | if (argv.mode === 'development') {
90 | config = merge(config, {
91 | devServer: {
92 | contentBase: path.join(__dirname, "dist"),
93 | hot: true,
94 | },
95 | plugins: [
96 | new webpack.HotModuleReplacementPlugin(),
97 | new MiniCssExtractPlugin({
98 | filename: '[name].css',
99 | })
100 | ],
101 | devtool: 'source-map',
102 | })
103 | }
104 | if (argv.mode === 'production') {
105 | config = merge(config, {
106 | optimization: {
107 | minimizer: [
108 | new UglifyJsPlugin({
109 | cache: true,
110 | parallel: true,
111 | sourceMap: true
112 | }),
113 | new OptimizeCSSAssetsPlugin({}) // use OptimizeCSSAssetsPlugin
114 | ]
115 | },
116 | plugins: [
117 | // build前执行下清空
118 | new CleanWebpackPlugin(['dist']),
119 | new MiniCssExtractPlugin({
120 | filename: 'vue-image-swipe.css',
121 | chunkFilename: 'css/[contenthash:12].css' // use contenthash *
122 | })
123 | ]
124 | })
125 | }
126 | return config
127 | }
128 |
--------------------------------------------------------------------------------