[Back] import isNumber from 'is-number';
import $ from 'jquery';
const $doc = $(document);
const { screenSizes } = window.VPData;
function getSwiperVersion(Swiper) {
let ver = 8;
// in version 8 added new parameter `maxBackfaceHiddenSlides`.
if (typeof Swiper.defaults.maxBackfaceHiddenSlides === 'undefined') {
ver = 7;
}
// in version 7 added new parameter `rewind`.
if (typeof Swiper.defaults.rewind === 'undefined') {
ver = 6;
}
// in version 6 added new parameter `loopPreventsSlide`.
if (typeof Swiper.defaults.loopPreventsSlide === 'undefined') {
ver = 5;
}
return ver;
}
// Extend VP class.
$doc.on('extendClass.vpf', (event, VP) => {
if (event.namespace !== 'vpf') {
return;
}
/**
* Init Swiper plugin
*
* @param {mixed} options - slider options.
*/
VP.prototype.initSwiper = function (options = false) {
const self = this;
if (
self.options.layout === 'slider' &&
typeof window.Swiper !== 'undefined'
) {
const $parent = self.$items_wrap.parent();
$parent.addClass('swiper');
self.$items_wrap.addClass('swiper-wrapper');
self.$items_wrap.children().addClass('swiper-slide');
// calculate responsive.
let slidesPerView = self.options.sliderSlidesPerView || 3;
const breakPoints = {};
if (self.options.sliderEffect === 'fade') {
slidesPerView = 1;
}
if (isNumber(slidesPerView)) {
let count = slidesPerView;
let currentPoint = Math.min(screenSizes.length - 1, count - 1);
for (; currentPoint >= 0; currentPoint -= 1) {
if (
count > 0 &&
typeof screenSizes[currentPoint] !== 'undefined'
) {
breakPoints[screenSizes[currentPoint] + 1] = {
slidesPerView: count,
};
}
count -= 1;
}
slidesPerView = count || 1;
}
let optionsThumbs = false;
let $thumbsParent = false;
options = options || {
speed: (parseFloat(self.options.sliderSpeed) || 0) * 1000,
autoHeight: self.options.sliderItemsHeight === 'auto',
effect: self.options.sliderEffect || 'slide',
// fix fade items collapse (mostly in Default items style).
fadeEffect: {
crossFade: true,
},
spaceBetween: parseFloat(self.options.itemsGap) || 0,
centeredSlides: self.options.sliderCenteredSlides === 'true',
freeMode: {
enabled: self.options.sliderFreeMode === 'true',
sticky: self.options.sliderFreeModeSticky === 'true',
},
loop: self.options.sliderLoop === 'true',
// This feature is cool, but not working properly when loop enabled
// and fast clicking on previous button is not working properly
// https://github.com/nolimits4web/swiper/issues/5945
// loopPreventsSlide: false,
autoplay: parseFloat(self.options.sliderAutoplay) > 0 && {
delay: parseFloat(self.options.sliderAutoplay) * 1000,
disableOnInteraction: false,
},
navigation: self.options.sliderArrows === 'true' && {
nextEl: '.vp-portfolio__items-arrow-next',
prevEl: '.vp-portfolio__items-arrow-prev',
},
pagination: self.options.sliderBullets === 'true' && {
el: '.vp-portfolio__items-bullets',
clickable: true,
dynamicBullets:
self.options.sliderBulletsDynamic === 'true',
renderBullet(index, className) {
return `<span class="${className}" data-bullet-index="${index}" data-bullet-number="${
index + 1
}"></span>`;
},
},
mousewheel: self.options.sliderMousewheel === 'true',
slidesPerView,
breakpoints: breakPoints,
keyboard: true,
grabCursor: true,
preloadImages: false,
// fixes text selection when swipe in the items gap.
touchEventsTarget: 'container',
};
// fix first load slide position (seems like a conflict with lazySizes)
// issue: https://github.com/nk-crew/visual-portfolio/issues/54
if (options.speed === 0) {
options.speed = 1;
}
let positionFix = 0;
options.on = {
transitionEnd() {
if (positionFix === 0) {
positionFix = 1;
this.setTransition(1);
this.setTranslate(this.translate + 0.1);
} else if (positionFix === 1) {
positionFix = 2;
this.slideReset();
}
},
// These events used to add fixes for
// conflict with custom cursor movement.
touchStart(swiper, e) {
self.emitEvent('swiperTouchStart', [swiper, e]);
},
touchMove(swiper, e) {
self.emitEvent('swiperTouchMove', [swiper, e]);
},
touchEnd(swiper, e) {
self.emitEvent('swiperTouchEnd', [swiper, e]);
},
};
self.emitEvent('beforeInitSwiper', [options]);
// thumbnails.
if (self.$slider_thumbnails_wrap.length) {
$thumbsParent = self.$slider_thumbnails_wrap.parent();
$thumbsParent.addClass('swiper');
self.$slider_thumbnails_wrap.addClass('swiper-wrapper');
self.$slider_thumbnails_wrap
.children()
.addClass('swiper-slide');
// calculate responsive.
let thumbnailsPerView =
self.options.sliderThumbnailsPerView || 8;
const thumbnailsBreakPoints = {};
if (isNumber(thumbnailsPerView)) {
let count = thumbnailsPerView;
let currentPoint = Math.min(
screenSizes.length - 1,
count - 1
);
for (; currentPoint >= 0; currentPoint -= 1) {
if (
count > 0 &&
typeof screenSizes[currentPoint] !== 'undefined'
) {
thumbnailsBreakPoints[
screenSizes[currentPoint] + 1
] = {
slidesPerView: count,
};
}
count -= 1;
}
thumbnailsPerView = count || 1;
}
optionsThumbs = {
autoHeight: self.options.sliderThumbnailsHeight === 'auto',
effect: 'slide',
spaceBetween:
parseFloat(self.options.sliderThumbnailsGap) || 0,
loop: false,
// This feature is cool, but not working properly when loop enabled
// and fast clicking on previous button is not working properly
// https://github.com/nolimits4web/swiper/issues/5945
// loopPreventsSlide: false,
freeMode: {
enabled: true,
sticky: true,
},
loopedSlides: 5,
slidesPerView: thumbnailsPerView,
breakpoints: thumbnailsBreakPoints,
keyboard: true,
grabCursor: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
preloadImages: false,
// fixed text selection when swipe in the items gap.
touchEventsTarget: 'container',
on: {
// These events used to add fixes for
// conflict with custom cursor movement.
touchStart(swiper, e) {
self.emitEvent('swiperTouchStart', [swiper, e]);
},
touchMove(swiper, e) {
self.emitEvent('swiperTouchMove', [swiper, e]);
},
touchEnd(swiper, e) {
self.emitEvent('swiperTouchEnd', [swiper, e]);
},
},
};
}
// Fallbacks for old Swiper versions.
(() => {
const swiperVersion = getSwiperVersion(window.Swiper);
const isThumbsEnabled =
optionsThumbs && $thumbsParent && $thumbsParent[0];
// Since v7 used container class `swiper`, we should also add old `swiper-container` class.
if (swiperVersion < 7) {
$parent.addClass('swiper-container');
if (isThumbsEnabled) {
$thumbsParent.addClass('swiper-container');
}
}
// Since v7 freeMode options moved under `freeMode` object.
if (swiperVersion < 7) {
options.freeModeSticky = options.freeMode.sticky;
options.freeMode = options.freeMode.enabled;
if (isThumbsEnabled) {
optionsThumbs.freeModeSticky =
optionsThumbs.freeMode.sticky;
optionsThumbs.freeMode = optionsThumbs.freeMode.enabled;
}
}
// Since v5 `breakpointsInverse` option is removed and it is now `true` by default, but in older versions it was `false`.
if (swiperVersion >= 5) {
options.breakpointsInverse = true;
if (isThumbsEnabled) {
optionsThumbs.breakpointsInverse = true;
}
}
})();
// Init Swiper.
if (optionsThumbs && $thumbsParent && $thumbsParent[0]) {
const swiperThumbs = new window.Swiper(
$thumbsParent[0],
optionsThumbs
);
options.thumbs = {
swiper: swiperThumbs,
};
}
const instance = new window.Swiper($parent[0], options);
// Autoplay Hover Pause.
if (
self.options.sliderAutoplayHoverPause === 'true' &&
parseFloat(self.options.sliderAutoplay) > 0
) {
self.$item.on(
`mouseenter.vpf-uid-${self.uid}`,
'.swiper',
() => {
$parent[0].swiper.autoplay.stop();
}
);
self.$item.on(
`mouseleave.vpf-uid-${self.uid}`,
'.swiper',
() => {
$parent[0].swiper.autoplay.start();
}
);
}
self.emitEvent('initSwiper', [options, instance]);
}
};
/**
* Destroy Swiper plugin
*/
VP.prototype.destroySwiper = function () {
const self = this;
const $parent = self.$items_wrap.parent();
const $thumbsParent = self.$slider_thumbnails_wrap.length
? self.$slider_thumbnails_wrap.parent()
: false;
const SliderSwiper = $parent[0].swiper;
const ThumbsSwiper = $thumbsParent ? $thumbsParent[0].swiper : false;
let isDestroyed = false;
// Thumbnails.
if (ThumbsSwiper) {
ThumbsSwiper.destroy();
$thumbsParent.removeClass('swiper');
self.$slider_thumbnails_wrap.removeClass('swiper-wrapper');
self.$slider_thumbnails_wrap.children().removeClass('swiper-slide');
isDestroyed = true;
}
// Slider.
if (SliderSwiper) {
SliderSwiper.destroy();
$parent.removeClass('swiper');
self.$items_wrap.removeClass('swiper-wrapper');
self.$items_wrap.children().removeClass('swiper-slide');
$parent
.find('.vp-portfolio__items-bullets')
.removeClass(
'swiper-pagination-clickable swiper-pagination-bullets-dynamic'
)
.removeAttr('style')
.html('');
isDestroyed = true;
}
if (isDestroyed) {
self.emitEvent('destroySwiper');
}
};
});
// Add Items.
$doc.on('addItems.vpf', (event, self, $items, removeExisting, $newVP) => {
if (event.namespace !== 'vpf') {
return;
}
const Swiper = self.$items_wrap.parent()[0].swiper;
if (!Swiper) {
return;
}
// Slider.
{
if (removeExisting) {
Swiper.removeAllSlides();
}
const appendArr = [];
$items.addClass('swiper-slide').each(function () {
appendArr.push(this);
});
Swiper.appendSlide(appendArr);
}
// Thumbnails.
const ThumbsSwiper = self.$slider_thumbnails_wrap.length
? self.$slider_thumbnails_wrap.parent()[0].swiper
: false;
if (ThumbsSwiper) {
if (removeExisting) {
ThumbsSwiper.removeAllSlides();
}
const appendArr = [];
$newVP
.find('.vp-portfolio__thumbnails > .vp-portfolio__thumbnail-wrap')
.clone()
.addClass('swiper-slide')
.each(function () {
appendArr.push(this);
});
ThumbsSwiper.appendSlide(appendArr);
}
});
// Init.
$doc.on('init.vpf', (event, self) => {
if (event.namespace !== 'vpf') {
return;
}
self.initSwiper();
});
// Destroy.
$doc.on('destroy.vpf', (event, self) => {
if (event.namespace !== 'vpf') {
return;
}
self.destroySwiper();
});