window.FieldGallery = function(settings) {
const BLOCK_CLASS = 'field-gallery';
const BLOCK = document.querySelector(`.${BLOCK_CLASS}`);
let swiper = null;
let numberSlides = 0;
const OPTIONS = {
init: false,
wrapperClass: 'values',
slideClass: 'value',
slidesPerView: 1,
slidesPerGroup: 1,
setWrapperSize: true,
grabCursor: true,
spaceBetween: 0,
watchOverflow: true,
updateOnWindowResize: true,
observer: true,
observeParents: true,
observeSlideChildren: true,
loop: false,
loopFillGroupWithBlank: true,
freeMode: false,
freeModeMomentum: false,
}
this.init = function() {
this.initSwiper();
}
this.initSwiper = function() {
swiper = new Swiper(`.${BLOCK_CLASS} .values-wrapper`, OPTIONS);
this.addArrows();
this.addDots();
}
this.destroy = function() {
if (BLOCK.classList.contains('js-slider-processed')) {
swiper.destroy(true, true);
this.removeProcessed();
this.removeArrows();
this.removeDots();
}
}
this.addProcessed = function () {
BLOCK.classList.add("js-slider-processed");
}
this.removeProcessed = function () {
BLOCK.classList.remove("js-slider-processed");
}
this.addArrows = function () {
if (!BLOCK.querySelector(".arrows")) {
BLOCK.insertAdjacentHTML('beforeend', ``);
}
this.setArrows();
}
this.setArrows = function () {
swiper.params.navigation.nextEl = BLOCK.querySelector(".arrows__next");
swiper.params.navigation.prevEl = BLOCK.querySelector(".arrows__prev");
swiper.params.navigation.disabledClass = "arrows__arrow_disabled";
}
this.removeArrows = function () {
if (BLOCK.querySelector(".arrows")) {
BLOCK.querySelector(".arrows").remove();
}
}
this.addDots = function () {
if (!BLOCK.querySelector(".dots")) {
BLOCK.insertAdjacentHTML("beforeend", `
`);
}
this.setDots();
}
this.setDots = function () {
swiper.params.pagination.el = BLOCK.querySelector(".dots");
swiper.params.pagination.dynamicBullets = true;
swiper.params.pagination.clickable = true;
}
this.removeDots = function () {
if (BLOCK.querySelector(".dots")) {
BLOCK.querySelector(".dots").remove();
}
}
this.setParameters = function (device) {
const {
slidesPerView,
slidesPerGroup,
spaceBetween,
} = settings.breakpoint[device];
swiper.params.slidesPerView = slidesPerView;
swiper.params.slidesPerGroup = slidesPerGroup;
swiper.params.spaceBetween = spaceBetween;
swiper.init();
}
this.initRange = function () {
if (document.body.offsetWidth >= BREAKPOINT.desktop[0]) {
if (settings.breakpoint.desktop) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.desktop.slidesPerView) {
this.init();
this.setParameters("desktop");
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
if (document.body.offsetWidth >= BREAKPOINT.laptop[0] && document.body.offsetWidth <= BREAKPOINT.laptop[1]) {
if (settings.breakpoint.laptop) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.laptop.slidesPerView) {
this.init();
this.setParameters('laptop');
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
if ( document.body.offsetWidth >= BREAKPOINT.tablet[0] && document.body.offsetWidth <= BREAKPOINT.tablet[1] ) {
if (settings.breakpoint.tablet) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.tablet.slidesPerView) {
this.init();
this.setParameters('tablet');
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
if ( document.body.offsetWidth <= BREAKPOINT.mobile[1] ) {
if (settings.breakpoint.mobile) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.mobile.slidesPerView) {
this.init();
this.setParameters('mobile');
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
}
if (BLOCK) {
numberSlides = BLOCK.querySelectorAll('.value').length;
this.initRange();
window.addEventListener('resize', e => {
if (document.body.offsetWidth >= BREAKPOINT.desktop[0]) {
if (!BLOCK.classList.contains("js-slider-desktop")) {
this.destroy();
}
}
if (document.body.offsetWidth >= BREAKPOINT.laptop[0] && document.body.offsetWidth <= BREAKPOINT.laptop[1]) {
if (!BLOCK.classList.contains("js-slider-laptop")) {
this.destroy();
}
}
if (document.body.offsetWidth >= BREAKPOINT.tablet[0] && document.body.offsetWidth <= BREAKPOINT.tablet[1]) {
if (!BLOCK.classList.contains("js-slider-tablet")) {
this.destroy();
}
}
if (document.body.offsetWidth <= BREAKPOINT.mobile[1]) {
if (!BLOCK.classList.contains("js-slider-mobile")) {
this.destroy();
}
}
numberSlides = BLOCK.querySelectorAll('.teaser').length;
this.initRange();
});
lightGallery(`.${BLOCK_CLASS}`, ".value a");
}
}