/*！
* Vue-slideshow v1.1.0
*
* Copyright (C) 2019, ZhaoGang
* Released under the MIT license
*
* Update: 2019-04-20
*/
!(( document, window, Vue ) => {
"use strict";
function $ ( selector, context ) {
return ( context || document ).querySelector( selector );
}
function $$ ( selector, context ) {
return [].slice.call( ( context || document ).querySelectorAll( selector ) );
}
if ( !$( "style.v-slideshow-style" ) ) {
$( "head" ).insertAdjacentHTML( "beforeend", `
` );
}
Vue.component("vue-slideshow", {
template: `
`,
props: [ "data", "config" ],
computed: {
wrapperStyle: function () {
return {
width: this.config.effect === "slide" ? ( `${ 100 * ( this.data.length + 2 ) }%` ) : "100%",
transform: this.config.effect === "slide" && `translateX(-${ 100 / ( this.data.length + 2 ) }%)`
}
},
boxClass: function () {
return function ( index ) {
return {
"v-slideshow-box": true,
"v-slideshow-box-fade": this.config.effect === "fade" && true,
"v-slideshow-box-show": this.config.effect === "fade" && index === 0,
"v-slideshow-box-block": this.config.effect === "fade" && index === 0
}
}
},
boxStyle: function () {
return function ( index ) {
return {
width: `${ this.config.effect !== "slide" ? 100 : ( 100 / ( this.data.length + 2 ) ) }%`,
left: this.config.effect === "slide" && `${ 100 / ( this.data.length + 2 ) * index }%`
}
}
},
dotIClass: function () {
return function ( index ) {
return {
active: index === 0
}
}
}
},
methods: {
slide: function ( index ) {
const ID = window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ];
ID.animated = true;
const w = 100 / ( this.data.length + 2 );
const length = this.data.length;
this.dotChange( index, this.config.dot );
if ( index === -1 ) {
this.dotChange( length - 1, this.config.dot );
}
if ( index === length ) {
this.dotChange( 0, this.config.dot );
}
const $wrapper = this.$el.querySelector( ".v-slideshow-wrapper" );
$wrapper.style.transition = ".7s";
requestAnimationFrame(() => {
$wrapper.style.transform = `translateX(-${ w * ( index + 1 ) }%)`;
})
const timer = window.setTimeout(() => {
$wrapper.style.transition = "0s";
if ( index === length ) {
ID.imageIndex = 0;
$wrapper.style.transform = `translateX(-${ w }%)`;
}
if ( index === -1 ) {
ID.imageIndex = length - 1;
$wrapper.style.transform = `translateX(-${ w * length }%)`;
}
window.clearTimeout( timer );
ID.animated = false;
}, 700)
},
fade: function ( index ) {
const ID = window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ];
ID.animated = true;
this.dotChange( index, this.config.dot );
const $box = $$( ".v-slideshow-box", this.$el );
$box.forEach(function ( box, item ) {
if ( item === index ) {
box.classList.add( "v-slideshow-box-block" );
const timer_1 = window.setTimeout(function () {
box.classList.add( "v-slideshow-box-show" );
window.clearTimeout( timer_1 );
}, 16);
} else {
box.classList.remove( "v-slideshow-box-show" );
const timer_2 = window.setTimeout(function () {
box.classList.remove( "v-slideshow-box-block" );
window.clearTimeout( timer_2 );
ID.animated = false;
}, 700);
}
})
},
dotChange: function ( index, useCustomDot ) {
window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ].imageIndex = index;
const $dot = typeof useCustomDot === "string" ? [].slice.call( $( useCustomDot ).children ) : $$( ".v-slideshow-dot i", this.$el );
$dot.forEach(function ( dot, item ) {
dot.classList.remove( "active" );
if ( item === index ) {
dot.classList.add( "active" );
}
})
},
dotEvent: function ( index, useCustomDot ) {
if ( !window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ].animated ) {
this[ this.config.effect === "fade" ? "fade" : "slide" ]( index );
this.dotChange( index, useCustomDot );
}
},
arrowEvent: function ( i ) {
if ( !window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ].animated ) {
const ID = window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ];
if ( i ) {
ID.imageIndex++;
if ( ID.imageIndex > this.data.length - 1 && this.config.effect !== "slide" ) {
ID.imageIndex = 0;
}
} else {
ID.imageIndex--;
if ( ID.imageIndex < 0 && this.config.effect !== "slide" ) {
ID.imageIndex = this.data.length - 1;
}
}
if ( this.config.effect === "fade" ) {
this.fade( ID.imageIndex );
} else {
this.slide( ID.imageIndex );
}
}
},
enter: function () {
this.config.autoplay && window.clearInterval( window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ].autoTimer );
},
leave: function () {
this.config.autoplay && this.play();
},
play: function () {
window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ].autoTimer = window.setInterval(() => {
this.arrowEvent( 1 );
}, ~~this.config.autoplay);
}
},
mounted: function () {
if ( !window.VueSlideShowIDCache ) {
window.VueSlideShowIDCache = {};
}
window.VueSlideShowIDCache[ this.$el.getAttribute( "data-id" ) ] = {
imageIndex: 0,
animated: false,
autoTimer: null
};
this.config.autoplay && this.play();
let customArrow = this.$el.getAttribute( "data-custom-arrow" );
if ( customArrow ) {
customArrow = customArrow.split( "|" );
$( customArrow[ 0 ] ).onclick = () => this.arrowEvent( 0 );
$( customArrow[ 1 ] ).onclick = () => this.arrowEvent( 1 );
}
let customDot = this.$el.getAttribute( "data-custom-dot" );
if ( customDot ) {
[].slice.call( $( customDot ).children ).forEach(( dot, item ) => {
if ( item > this.data.length - 1 ) {
return;
}
dot.onclick = () => this.dotEvent( item, this.config.dot );
})
}
}
});
Vue.prototype.VueSlideShow = function ( selector, options ) {
$( selector ).innerHTML = ``;
return new Vue({
el: selector,
data: {
images: options.images,
config: options.config
}
});
}
})( document, window, Vue );