269 lines
9.3 KiB
JavaScript
269 lines
9.3 KiB
JavaScript
|
CNVS.CanvasSlider = function() {
|
||
|
|
var __core = SEMICOLON.Core;
|
||
|
|
var __base = SEMICOLON.Base;
|
||
|
|
var __modules = SEMICOLON.Modules;
|
||
|
|
|
||
|
|
return {
|
||
|
|
init: function(selector) {
|
||
|
|
if( __core.getSelector(selector, false, false).length < 1 ){
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
__core.loadJS({ file: 'plugins.swiper.js', id: 'canvas-swiper-js', jsFolder: true });
|
||
|
|
|
||
|
|
__core.isFuncTrue( function() {
|
||
|
|
return typeof Swiper !== "undefined";
|
||
|
|
}).then( function(cond) {
|
||
|
|
if( !cond ) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
__core.initFunction({ class: 'has-plugin-swiper', event: 'pluginSwiperReady' });
|
||
|
|
|
||
|
|
selector = __core.getSelector( selector, false );
|
||
|
|
if( selector.length < 1 ){
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
selector.forEach( function(element) {
|
||
|
|
if( !element.classList.contains('swiper_wrapper') ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if( element.querySelectorAll('.swiper-slide').length < 1 ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
var elDirection = element.getAttribute('data-direction') || 'horizontal',
|
||
|
|
elSpeed = element.getAttribute('data-speed') || 300,
|
||
|
|
elAutoPlay = element.getAttribute('data-autoplay'),
|
||
|
|
elAutoPlayDisableOnInteraction = element.getAttribute('data-autoplay-disable-on-interaction') || true,
|
||
|
|
elPauseOnHover = element.getAttribute('data-hover'),
|
||
|
|
elLoop = element.getAttribute('data-loop'),
|
||
|
|
elStart = element.getAttribute('data-start') || 1,
|
||
|
|
elEffect = element.getAttribute('data-effect') || 'slide',
|
||
|
|
elGrabCursor = element.getAttribute('data-grab'),
|
||
|
|
elParallax = element.getAttribute('data-parallax'),
|
||
|
|
elAutoHeight = element.getAttribute('data-autoheight'),
|
||
|
|
slideNumberTotal = element.querySelector('.slide-number-total'),
|
||
|
|
slideNumberCurrent = element.querySelector('.slide-number-current'),
|
||
|
|
elVideoAutoPlay = element.getAttribute('data-video-autoplay'),
|
||
|
|
elSettings = element.getAttribute('data-settings'),
|
||
|
|
elPagination, elPaginationClickable;
|
||
|
|
|
||
|
|
elAutoPlay = elAutoPlay ? Number( elAutoPlay ) : 999999999;
|
||
|
|
elPauseOnHover = elPauseOnHover == 'true' ? true : false;
|
||
|
|
elAutoPlayDisableOnInteraction = elAutoPlayDisableOnInteraction == 'false' ? false : true;
|
||
|
|
elLoop = elLoop == 'true' ? true : false;
|
||
|
|
elParallax = elParallax == 'true' ? true : false;
|
||
|
|
elGrabCursor = elGrabCursor == 'false' ? false : true;
|
||
|
|
elAutoHeight = elAutoHeight == 'true' ? true : false;
|
||
|
|
elVideoAutoPlay = elVideoAutoPlay == 'false' ? false : true;
|
||
|
|
elStart = elStart == 'random' ? Math.floor( Math.random() * element.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)').length ) : Number( elStart ) - 1;
|
||
|
|
|
||
|
|
if( element.querySelector('.swiper-pagination') ) {
|
||
|
|
elPagination = element.querySelector('.swiper-pagination');
|
||
|
|
elPaginationClickable = true;
|
||
|
|
} else {
|
||
|
|
elPagination = '';
|
||
|
|
elPaginationClickable = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
var elementNavNext = element.querySelector('.slider-arrow-right'),
|
||
|
|
elementNavPrev = element.querySelector('.slider-arrow-left'),
|
||
|
|
elementScollBar = element.querySelector('.swiper-scrollbar');
|
||
|
|
|
||
|
|
var cnvsSwiper = new Swiper( element.querySelector('.swiper-parent'), {
|
||
|
|
direction: elDirection,
|
||
|
|
speed: Number( elSpeed ),
|
||
|
|
autoplay: {
|
||
|
|
delay: elAutoPlay,
|
||
|
|
pauseOnMouseEnter: elPauseOnHover,
|
||
|
|
disableOnInteraction: elAutoPlayDisableOnInteraction
|
||
|
|
},
|
||
|
|
loop: elLoop,
|
||
|
|
initialSlide: elStart,
|
||
|
|
effect: elEffect,
|
||
|
|
parallax: elParallax,
|
||
|
|
slidesPerView: 1,
|
||
|
|
grabCursor: elGrabCursor,
|
||
|
|
autoHeight: elAutoHeight,
|
||
|
|
pagination: {
|
||
|
|
el: elPagination,
|
||
|
|
clickable: elPaginationClickable
|
||
|
|
},
|
||
|
|
navigation: {
|
||
|
|
prevEl: elementNavPrev,
|
||
|
|
nextEl: elementNavNext
|
||
|
|
},
|
||
|
|
scrollbar: {
|
||
|
|
el: elementScollBar
|
||
|
|
},
|
||
|
|
on: {
|
||
|
|
afterInit: function(swiper) {
|
||
|
|
__base.sliderDimensions();
|
||
|
|
|
||
|
|
if( element.querySelectorAll('.yt-bg-player').length > 0 ) {
|
||
|
|
element.querySelectorAll('.yt-bg-player').forEach( function(el) {
|
||
|
|
el.setAttribute('data-autoplay', 'false');
|
||
|
|
el.classList.remove('customjs');
|
||
|
|
});
|
||
|
|
|
||
|
|
__modules.youtubeBgVideo();
|
||
|
|
|
||
|
|
var activeYTVideo = jQuery('.swiper-slide-active').find('.yt-bg-player:not(.customjs)');
|
||
|
|
activeYTVideo.on('YTPReady', function() {
|
||
|
|
setTimeout( function() {
|
||
|
|
activeYTVideo.filter('.mb_YTPlayer').YTPPlay();
|
||
|
|
}, 1200);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll('.swiper-slide-active [data-animate]').forEach( function(el) {
|
||
|
|
var toAnimateDelay = el.getAttribute('data-delay'),
|
||
|
|
toAnimateDelayTime = 0;
|
||
|
|
|
||
|
|
if( toAnimateDelay ) {
|
||
|
|
toAnimateDelayTime = Number( toAnimateDelay ) + 750;
|
||
|
|
} else {
|
||
|
|
toAnimateDelayTime = 750;
|
||
|
|
}
|
||
|
|
|
||
|
|
if( !el.classList.contains('animated') ) {
|
||
|
|
el.classList.add('not-animated');
|
||
|
|
|
||
|
|
var elementAnimation = el.getAttribute('data-animate');
|
||
|
|
|
||
|
|
setTimeout( function() {
|
||
|
|
el.classList.remove('not-animated');
|
||
|
|
|
||
|
|
( elementAnimation + ' animated').split(" ").forEach( function(_class) {
|
||
|
|
el.classList.add(_class);
|
||
|
|
});
|
||
|
|
}, toAnimateDelayTime);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
element.querySelectorAll('[data-animate]').forEach( function(el) {
|
||
|
|
var elementAnimation = el.getAttribute('data-animate');
|
||
|
|
|
||
|
|
if( el.closest('.swiper-slide').classList.contains('swiper-slide-active') ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
( elementAnimation + ' animated').split(" ").forEach( function(_class) {
|
||
|
|
el.classList.remove(_class);
|
||
|
|
});
|
||
|
|
|
||
|
|
el.classList.add('not-animated');
|
||
|
|
});
|
||
|
|
|
||
|
|
if( elAutoHeight ) {
|
||
|
|
setTimeout( function() {
|
||
|
|
swiper.updateAutoHeight(300);
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
transitionStart: function(swiper) {
|
||
|
|
element.querySelectorAll('[data-animate]').forEach( function(el) {
|
||
|
|
var elementAnimation = el.getAttribute('data-animate');
|
||
|
|
|
||
|
|
if( el.closest('.swiper-slide').classList.contains('swiper-slide-active') ) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
( elementAnimation + ' animated').split(" ").forEach( function(_class) {
|
||
|
|
el.classList.remove(_class);
|
||
|
|
});
|
||
|
|
|
||
|
|
el.classList.add('not-animated');
|
||
|
|
});
|
||
|
|
|
||
|
|
SEMICOLON.Base.sliderMenuClass();
|
||
|
|
},
|
||
|
|
transitionEnd: function(swiper) {
|
||
|
|
if( slideNumberCurrent ){
|
||
|
|
if( elLoop == true ) {
|
||
|
|
slideNumberCurrent.innerHTML = Number( element.querySelector('.swiper-slide.swiper-slide-active').getAttribute('data-swiper-slide-index') ) + 1;
|
||
|
|
} else {
|
||
|
|
slideNumberCurrent.innerHTML = swiper.activeIndex + 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
element.querySelectorAll('.swiper-slide').forEach( function(slide) {
|
||
|
|
if( slide.querySelector('video') && elVideoAutoPlay == true ) {
|
||
|
|
slide.querySelector('video').pause();
|
||
|
|
}
|
||
|
|
|
||
|
|
if( slide.querySelector('.yt-bg-player.mb_YTPlayer:not(.customjs)') ) {
|
||
|
|
jQuery(slide).find('.yt-bg-player.mb_YTPlayer:not(.customjs)').YTPPause();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
element.querySelectorAll('.swiper-slide:not(.swiper-slide-active)').forEach( function(slide) {
|
||
|
|
if( slide.querySelector('video') ) {
|
||
|
|
if( slide.querySelector('video').currentTime != 0 ) {
|
||
|
|
slide.querySelector('video').currentTime = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var activeYTPlayer = slide.querySelector('.yt-bg-player.mb_YTPlayer:not(.customjs)');
|
||
|
|
|
||
|
|
if( activeYTPlayer ) {
|
||
|
|
jQuery(activeYTPlayer).YTPSeekTo( activeYTPlayer.getAttribute('data-start') );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if( element.querySelector('.swiper-slide.swiper-slide-active').querySelector('video') && elVideoAutoPlay == true ) {
|
||
|
|
element.querySelector('.swiper-slide.swiper-slide-active').querySelector('video').play();
|
||
|
|
}
|
||
|
|
|
||
|
|
if( element.querySelector('.swiper-slide.swiper-slide-active').querySelector('.yt-bg-player.mb_YTPlayer:not(.customjs)') && elVideoAutoPlay == true ) {
|
||
|
|
jQuery(element).find('.swiper-slide.swiper-slide-active').find('.yt-bg-player.mb_YTPlayer:not(.customjs)').YTPPlay();
|
||
|
|
}
|
||
|
|
|
||
|
|
element.querySelectorAll('.swiper-slide.swiper-slide-active [data-animate]').forEach( function(el) {
|
||
|
|
var toAnimateDelay = el.getAttribute('data-delay'),
|
||
|
|
toAnimateDelayTime = 0;
|
||
|
|
|
||
|
|
if( toAnimateDelay ) {
|
||
|
|
toAnimateDelayTime = Number( toAnimateDelay ) + 300;
|
||
|
|
} else {
|
||
|
|
toAnimateDelayTime = 300;
|
||
|
|
}
|
||
|
|
|
||
|
|
if( !el.classList.contains('animated') ) {
|
||
|
|
el.classList.add('not-animated');
|
||
|
|
|
||
|
|
var elementAnimation = el.getAttribute('data-animate');
|
||
|
|
|
||
|
|
setTimeout( function() {
|
||
|
|
el.classList.remove('not-animated');
|
||
|
|
|
||
|
|
( elementAnimation + ' animated').split(" ").forEach( function(_class) {
|
||
|
|
el.classList.add(_class);
|
||
|
|
});
|
||
|
|
}, toAnimateDelayTime);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if( slideNumberCurrent ) {
|
||
|
|
if( elLoop == true ) {
|
||
|
|
slideNumberCurrent.innerHTML = cnvsSwiper.realIndex + 1;
|
||
|
|
} else {
|
||
|
|
slideNumberCurrent.innerHTML = cnvsSwiper.activeIndex + 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if( slideNumberTotal ) {
|
||
|
|
slideNumberTotal.innerHTML = element.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)').length;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}();
|