slider-gallery
Version:
2 lines • 19.8 kB
JavaScript
(function(e){function t(t){for(var a,l,o=t[0],s=t[1],d=t[2],h=0,u=[];h<o.length;h++)l=o[h],Object.prototype.hasOwnProperty.call(n,l)&&n[l]&&u.push(n[l][0]),n[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);c&&c(t);while(u.length)u.shift()();return r.push.apply(r,d||[]),i()}function i(){for(var e,t=0;t<r.length;t++){for(var i=r[t],a=!0,o=1;o<i.length;o++){var s=i[o];0!==n[s]&&(a=!1)}a&&(r.splice(t--,1),e=l(l.s=i[0]))}return e}var a={},n={app:0},r=[];function l(t){if(a[t])return a[t].exports;var i=a[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,l),i.l=!0,i.exports}l.m=e,l.c=a,l.d=function(e,t,i){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(l.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(i,a,function(t){return e[t]}.bind(null,a));return i},l.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],s=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var c=s;r.push([0,"chunk-vendors"]),i()})({0:function(e,t,i){e.exports=i("56d7")},"034f":function(e,t,i){"use strict";i("3ebb")},"04ae":function(e,t,i){var a=i("24fb");t=a(!1),t.push([e.i,'#largeViewContainer[data-v-4147e7f8]{z-index:999;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.75)}#largeViewContainer.fadeIn[data-v-4147e7f8],#largeViewContainer.fadeOut[data-v-4147e7f8]{-webkit-animation-name:fadeIn-data-v-4147e7f8;animation-name:fadeIn-data-v-4147e7f8;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.5s;animation-duration:.5s}#largeViewContainer.fadeOut[data-v-4147e7f8]{-webkit-animation-name:fadeOut-data-v-4147e7f8;animation-name:fadeOut-data-v-4147e7f8}#largeViewContainer img[data-v-4147e7f8]{z-index:1000;position:fixed;top:50%;left:50%;max-width:90vw;max-height:90vh;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-box-shadow:rgba(0,0,0,.2) 0 1px 8px 0,rgba(0,0,0,.14) 0 3px 4px 0,rgba(0,0,0,.12) 0 3px 3px -2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.12)}#largeViewContainer img.fadeIn[data-v-4147e7f8],#largeViewContainer img.fadeOut[data-v-4147e7f8]{-webkit-animation-name:fadeIn-data-v-4147e7f8;animation-name:fadeIn-data-v-4147e7f8;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}#largeViewContainer img.fadeOut[data-v-4147e7f8]{-webkit-animation-name:fadeOut-data-v-4147e7f8;animation-name:fadeOut-data-v-4147e7f8}#largeViewContainer a[data-v-4147e7f8]{position:fixed;top:10px;right:10px;display:block;width:32px;height:32px;opacity:.5;cursor:pointer}#largeViewContainer a[data-v-4147e7f8]:focus,#largeViewContainer a[data-v-4147e7f8]:hover{opacity:1}#largeViewContainer a[data-v-4147e7f8]:after,#largeViewContainer a[data-v-4147e7f8]:before{position:absolute;left:15px;content:" ";height:33px;width:2px;background-color:#fff}#largeViewContainer a[data-v-4147e7f8]:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}#largeViewContainer a[data-v-4147e7f8]:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}@-webkit-keyframes fadeIn-data-v-4147e7f8{0%{opacity:0}to{opacity:1}}@keyframes fadeIn-data-v-4147e7f8{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut-data-v-4147e7f8{0%{opacity:1}to{opacity:0}}@keyframes fadeOut-data-v-4147e7f8{0%{opacity:1}to{opacity:0}}',""]),e.exports=t},"293c":function(e,t,i){e.exports=i.p+"img/slider-right-icon.f86ddb32.svg"},"2cef":function(e,t,i){var a=i("938e");a.__esModule&&(a=a.default),"string"===typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);var n=i("499e").default;n("bf7dea70",a,!0,{sourceMap:!1,shadowMode:!1})},"3b52":function(e,t,i){e.exports=i.p+"img/slider-left.b17bf28d.svg"},"3ebb":function(e,t,i){var a=i("e31a");a.__esModule&&(a=a.default),"string"===typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);var n=i("499e").default;n("517436b3",a,!0,{sourceMap:!1,shadowMode:!1})},"4ed0":function(e,t,i){var a=i("04ae");a.__esModule&&(a=a.default),"string"===typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);var n=i("499e").default;n("8bbbf204",a,!0,{sourceMap:!1,shadowMode:!1})},"54ac":function(e,t,i){"use strict";i.r(t);var a=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",[i("div",{class:{fadeIn:e.runAnimation,fadeOut:!e.runAnimation},attrs:{id:"largeViewContainer"}},[Object.prototype.hasOwnProperty.call(e.item,"pictureElement")?i("picture",[e._l(e.item.pictureElement,(function(e,t){return i("source",{key:t,attrs:{srcset:e.srcset,media:!!e.media&&e.media,type:!!e.type&&e.type}})})),i("img",{attrs:{src:e.item.src,alt:e.item.alt}})],2):i("img",{attrs:{src:e.currentImage}}),i("a",{on:{click:e.handleCloseClick}})])])},n=[],r={name:"LargeView",props:{item:{type:Object,default:function(){return{}}},settings:{type:Object,default:function(){return{maxWidth:750}}},accentColor:{type:String,default:""}},data:function(){return{runAnimation:!0,isLoading:!0}},computed:{currentImage:function(){return Object.prototype.hasOwnProperty.call(this.item,"largeViewSrc")?this.item.largeViewSrc:this.item.src}},methods:{handleCloseClick:function(){var e=this;this.runAnimation=!1,window.setTimeout((function(){e.runAnimation=!0,e.$emit("close-large-view")}),500)}}},l=r,o=(i("aced"),i("2877")),s=Object(o["a"])(l,a,n,!1,null,"4147e7f8",null);t["default"]=s.exports},"56d7":function(e,t,i){"use strict";i.r(t);i("e260"),i("e6cf"),i("cca6"),i("a79d");var a=i("2b0e"),n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{attrs:{id:"app"}},[i("lingallery",{attrs:{addons:{enableLargeView:!0},iid:e.currentId,width:e.width,height:e.height,items:[{id:"someid1",src:"https://picsum.photos/600/400/?image=0",thumbnail:"https://picsum.photos/64/64/?image=0",alt:"Some alt text"},{id:"someid2",src:"https://picsum.photos/600/400/?image=10",thumbnail:"https://picsum.photos/64/64/?image=10",alt:"Another alt text"},{id:"someid3",src:"https://picsum.photos/400/600/?image=20",thumbnail:"https://picsum.photos/64/64/?image=20"}]},on:{"update:iid":function(t){e.currentId=t}}})],1)},r=[],l=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"lingalleryContainer"},[i("div",{staticClass:"lingallery",style:e.lingalleryStyle},[e.addons.enableLargeView&&e.showLargeView?i("large-view",{attrs:{id:"largeView","accent-color":e.accentColor,item:e.items[e.currentIndex]},on:{"close-large-view":function(t){e.showLargeView=!1}}}):e._e(),i("figure",{style:e.figureStyle,attrs:{itemprop:"associatedMedia",itemscope:"",itemtype:"http://schema.org/ImageObject"}},[i("div",{staticClass:"lingallery_spinner"},[e.isLoading?i("half-circle-spinner",{attrs:{"animation-duration":1e3,color:e.accentColor,size:60}}):e._e()],1),e.addons.enablePictureElement?i("picture-element",{ref:"mainImage",attrs:{alt:e.currentAlt,"is-loading":e.isLoading,"main-image-style":e.mainImageStyle,items:e.items,"current-index":e.currentIndex},on:{"handle-large-image-click":e.handleLargeImageClick,"handle-image-swipe":e.handleImageSwipe,"handle-image-loaded":e.handleImageLoaded}}):i("img",{directives:[{name:"swipe",rawName:"v-swipe",value:e.handleImageSwipe,expression:"handleImageSwipe"}],ref:"mainImage",class:{loading:e.isLoading},style:e.mainImageStyle,attrs:{alt:e.currentAlt,src:e.currentImage},on:{click:e.handleLargeImageClick,load:e.handleImageLoaded}}),e.currentCaption?i("div",{staticClass:"lingallery_caption",style:e.captionStyle},[e._v(" "+e._s(e.currentCaption)+" ")]):e._e(),e.showControls&&e.items.length>1?[e.leftControlClass?e._e():i("a",{staticClass:"control left",on:{click:e.showPreviousImage}},[e._m(0)]),e.rightControlClass?e._e():i("a",{staticClass:"control right",on:{click:e.showNextImage}},[e._m(1)]),e.leftControlClass?i("a",{class:"control left "+e.leftControlClass,on:{click:e.showPreviousImage}}):e._e(),e.rightControlClass?i("a",{class:"control right "+e.rightControlClass,on:{click:e.showNextImage}}):e._e()]:e._e()],2),e.showThumbnails?i("div",{staticClass:"lingallery_thumbnails"},[i("div",{staticClass:"lingallery_thumbnails_content"},e._l(e.items,(function(t,a){return i("div",{key:a,staticClass:"lingallery_thumbnails_content_elem"},[i("img",e._g({style:e.thumbnailStyle(a),attrs:{alt:Object.prototype.hasOwnProperty.call(t,"alt")?t.alt:"",src:t.thumbnail,width:"64",height:"64"}},e.currentIndex!==a?{click:function(){return e.handleImageClick(a)}}:{}))])})),0)]):e._e()],1)])},o=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("span",{staticStyle:{position:"relative",top:"50%",left:"20px"}},[a("img",{attrs:{src:i("3b52"),alt:"",width:"42",height:"42"}})])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("span",{staticStyle:{position:"relative",top:"50%",right:"20px"}},[a("img",{attrs:{src:i("293c"),alt:"",width:"42",height:"42"}})])}],s=(i("a9e3"),i("4583")),d=i("c8b5"),c=i.n(d),h={methods:{initAddons:function(){if(this.addons.enableLargeView){var e=i("54ac").default;a["default"].component("LargeView",e)}if(this.addons.enablePictureElement){var t=i("94a2").default;a["default"].component("PictureElement",t)}}}},u={name:"Lingallery",mixins:[h],directives:{swipe:{bind:function(e,t){"function"===typeof t.value&&(t.hammer=new c.a(e),t.hammer.get("swipe").set({direction:c.a.DIRECTION_HORIZONTAL,threshold:5}),t.hammer.on("swipe",t.value))},unbind:function(e,t){t.hammer&&t.hammer.destroy()}}},data:function(){return{currentImage:null,currentImageWidth:0,currentImageHeight:0,currentIndex:0,currentId:null,currentCaption:"",currentAlt:"",windowWidth:0,isLoading:!0,showLargeView:!1}},props:{items:{type:Array,default:function(){return[]}},startImage:{type:Number,default:0},width:{type:Number,default:null},height:{type:Number,default:null},baseColor:{type:String,default:"#fff"},accentColor:{type:String,default:"#3498db"},textColor:{type:String,default:"#000"},responsive:{type:Boolean,default:!1},showThumbnails:{type:Boolean,default:!0},mobileHeight:{type:Number,default:0},mobileHeightBreakpoint:{type:Number,default:0},leftControlClass:{type:String,default:""},rightControlClass:{type:String,default:""},disableImageClick:{type:Boolean,default:!1},squareModeDesktop:{type:Boolean,default:!1},showControls:{type:Boolean,default:!0},addons:{type:Object,default:function(){return{}}}},components:{HalfCircleSpinner:s["a"]},computed:{lingalleryStyle:function(){return this.windowWidth>this.width&&!this.responsive?"width:"+this.width+"px":"width:100%"},captionStyle:function(){return"color:"+this.textColor},mainImageStyle:function(){var e=!(!this.$refs.mainImage||this.addons.enablePictureElement||!Object.prototype.hasOwnProperty.call(this.$refs.mainImage,"classList")||!this.$refs.mainImage.classList.contains("loading"))||!(!this.$refs.mainImage||!this.addons.enablePictureElement)&&this.$refs.mainImage.$el.children[this.$refs.mainImage.$el.children.length-1].classList.contains("loading"),t="";return 0!==this.mobileHeight&&this.windowWidth<this.mobileHeightBreakpoint&&(t+="width:100%;height:"+this.mobileHeight+"px;object-fit:cover;"),e&&(0!==this.mobileHeight?t+="min-height:"+this.mobileHeight+"px;":t+="min-height:200px;"),this.squareModeDesktop&&this.windowWidth&&this.windowWidth>this.width&&(this.currentImageWidth>=this.currentImageHeight?t+="height:"+this.width+"px;width: "+this.width+"px;":t+="width:"+this.height+"px;height:"+this.height+"px;",t+="object-fit: cover;"),t},figureStyle:function(){if(this.currentImage&&this.currentImageWidth&&this.currentImageHeight){var e="height:auto";return this.currentImageWidth<this.currentImageHeight&&0===this.mobileHeight&&!this.responsive&&(e="height:"+this.height+"px"),this.windowWidth>this.width&&!this.responsive?"width:"+this.width+"px;height:"+this.height+"px":"width:100%;"+e}return this.windowWidth>this.width&&!this.responsive?"width:"+this.width+"px;height:"+this.height+"px":"width:100%;height:auto"}},methods:{initLingallery:function(){this.currentImage=this.items[this.startImage].src,this.currentCaption=this.items[this.startImage].caption,this.currentId=this.items[this.startImage].id,this.currentIndex=this.startImage,this.windowWidth=window.innerWidth,this.sendId()},handleImageLoaded:function(){this.isLoading=!1,this.updateCurrentImageSizes()},updateCurrentImageSizes:function(){var e=this.$refs.mainImage&&Object.prototype.hasOwnProperty.call(this.$refs.mainImage,"src")?this.$refs.mainImage:this.$refs.mainImage.$el?this.$refs.mainImage.$el.getElementsByTagName("img")[0]:null;e&&(this.currentImageWidth=e.naturalWidth,this.currentImageHeight=e.naturalHeight)},handleImageSwipe:function(e){4===e.direction?this.showPreviousImage():2===e.direction&&this.showNextImage()},handleImageClick:function(e){this.currentIndex=e,this.pickImage(e)},handleLargeImageClick:function(){this.addons.enableLargeView?this.showLargeView=!0:!this.disableImageClick&&this.items.length>1&&this.showNextImage()},handleLoader:function(e){this.isLoading=e},pickImage:function(e){0===e&&1===this.items.length?this.handleLoader(!1):this.handleLoader(!0),this.currentImage=this.items[e].src,this.currentCaption=Object.prototype.hasOwnProperty.call(this.items[e],"caption")?this.items[e].caption:"",this.currentAlt=Object.prototype.hasOwnProperty.call(this.items[e],"alt")?this.items[e].alt:"",this.currentId=Object.prototype.hasOwnProperty.call(this.items[e],"id")?this.items[e].id:null,this.sendId()},thumbnailStyle:function(e){var t=this.currentIndex===e?this.accentColor:this.baseColor;return"border-color:"+t},sendId:function(){},showNextImage:function(){this.handleLoader(!0);var e=this.currentIndex;this.items.length>this.currentIndex+1?this.currentIndex=this.currentIndex+1:this.currentIndex=0,e!==this.currentIndex?this.pickImage(this.currentIndex):this.handleLoader(!1)},showPreviousImage:function(){this.handleLoader(!0);var e=this.currentIndex;0!==this.currentIndex?this.currentIndex=this.currentIndex-1:this.currentIndex=this.items.length-1,e!==this.currentIndex?this.pickImage(this.currentIndex):this.handleLoader(!1)}},created:function(){this.initAddons()},mounted:function(){this.initLingallery()},watch:{items:function(){this.currentImage=this.items[this.startImage].src}}},g=u,m=(i("d61f"),i("2877")),f=Object(m["a"])(g,l,o,!1,null,"2dbad02f",null),p=f.exports,b={name:"App",components:{Lingallery:p}},y=b,w=(i("034f"),Object(m["a"])(y,n,r,!1,null,null,null)),v=w.exports;a["default"].component("lingallery",p);var x=i("5f5b"),I=i("b1e0");i("f9e3"),i("2dd8");a["default"].config.productionTip=!1,a["default"].use(x["a"]),a["default"].use(I["a"]),new a["default"]({render:function(e){return e(v)}}).$mount("#app")},"938e":function(e,t,i){var a=i("24fb");t=a(!1),t.push([e.i,".lingalleryContainer[data-v-2dbad02f] .lingallery{max-width:100%}.lingalleryContainer[data-v-2dbad02f] .lingallery figure{position:relative;margin:0;padding:0;max-width:100%;text-align:center;cursor:pointer}.lingalleryContainer[data-v-2dbad02f] .lingallery figure img{width:100%;height:454px;-o-object-fit:cover;object-fit:cover;-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.lingalleryContainer[data-v-2dbad02f] .lingallery figure img.loading{opacity:.25;min-height:200px;-webkit-transition:opcacity .25s ease;transition:opcacity .25s ease}.lingalleryContainer[data-v-2dbad02f] .lingallery figure a.control{position:absolute;top:0;padding-left:18px;padding-right:18px;height:100%;cursor:pointer}.lingalleryContainer[data-v-2dbad02f] .lingallery figure a.control span img{width:42px!important;height:42px!important}.lingalleryContainer[data-v-2dbad02f] .lingallery figure a.control:before{position:relative;top:calc(50% - 12px)}.lingalleryContainer[data-v-2dbad02f] .lingallery figure a.control.left{text-align:left;left:0}.lingalleryContainer[data-v-2dbad02f] .lingallery figure a.control.right{text-align:right;right:0}.lingalleryContainer[data-v-2dbad02f] .lingallery figure:hover a.control{display:block}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_caption{position:absolute;bottom:0;left:0;padding:4px 0;width:100%;background-color:hsla(0,0%,100%,.75);font-size:1em}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails{overflow-x:auto;width:100%;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails::-webkit-scrollbar{height:6px}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails::-webkit-scrollbar-track{border-radius:10px;background:#eaeaea}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails::-webkit-scrollbar-thumb{border-radius:10px;background:#b4b4b4}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails::-webkit-scrollbar-thumb:window-inactive{background:hsla(0,0%,39.2%,.4)}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails .lingallery_thumbnails_content{margin-top:2px;width:auto;white-space:nowrap}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails .lingallery_thumbnails_content .lingallery_thumbnails_content_elem{display:inline-block;scroll-snap-align:start}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_thumbnails .lingallery_thumbnails_content .lingallery_thumbnails_content_elem img{border:2px solid #fff;cursor:pointer}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_spinner{position:absolute;left:50%;top:calc(50% - 32px)}.lingalleryContainer[data-v-2dbad02f] .lingallery .lingallery_spinner>div{z-index:9999;position:relative;left:-50%}",""]),e.exports=t},"94a2":function(e,t,i){"use strict";i.r(t);var a=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("picture",[e._l(e.items[e.currentIndex].pictureElement,(function(e,t){return i("source",{key:t,attrs:{srcset:e.srcset}})})),i("img",{directives:[{name:"swipe",rawName:"v-swipe",value:e.handleImageSwipe,expression:"handleImageSwipe"}],class:{loading:e.isLoading},style:e.mainImageStyle,attrs:{src:e.items[e.currentIndex].src,alt:e.items[e.currentIndex].alt},on:{click:e.handleLargeImageClick,load:e.handleImageLoaded}})],2)},n=[],r=(i("a9e3"),i("c8b5")),l=i.n(r),o={name:"PictureElement",directives:{swipe:{bind:function(e,t){"function"===typeof t.value&&(t.hammer=new l.a(e),t.hammer.get("swipe").set({direction:l.a.DIRECTION_HORIZONTAL,threshold:5}),t.hammer.on("swipe",t.value))},unbind:function(e,t){t.hammer&&t.hammer.destroy()}}},props:{alt:{type:String,default:""},isLoading:{type:Boolean,default:!0},currentIndex:{type:Number,default:0},items:{type:Array,default:function(){return[]}},mainImageStyle:{type:String,default:""}},methods:{handleLargeImageClick:function(){this.$emit("handle-large-image-click")},handleImageSwipe:function(e){this.$emit("handle-image-swipe",e)},handleImageLoaded:function(){this.$emit("handle-image-loaded")}}},s=o,d=i("2877"),c=Object(d["a"])(s,a,n,!1,null,"eb373cd6",null);t["default"]=c.exports},aced:function(e,t,i){"use strict";i("4ed0")},d61f:function(e,t,i){"use strict";i("2cef")},e31a:function(e,t,i){var a=i("24fb");t=a(!1),t.push([e.i,"#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}",""]),e.exports=t}});
//# sourceMappingURL=app.11659773.js.map