(function (){
function BreakdanceSwiper(){
const { mergeObjects, matchMedia, getCurrentBreakpoint, is, isBuilder, prefersReducedMotion }=BreakdanceFrontend.utils;
function isElementInDom(selector){
const isElementInDom=document.querySelector(selector);
return !!isElementInDom;
}
function setBreakpoint(swiper, settings){
const { BASE_BREAKPOINT_ID }=window.BreakdanceFrontend.data;
const isLoop=settings.infinite==="enabled"&&!isBuilder();
const slidesPerView=settings.advanced.slides_per_view;
const slidesPerGroup=settings.advanced.slides_per_group;
const spaceBetween=settings.advanced.between_slides;
const onePerViewAt=settings.advanced.one_per_view_at;
const onePerViewAtDesktop=onePerViewAt===BASE_BREAKPOINT_ID;
const alwaysOne=settings.effect==="fade"||settings.effect==="flip"||onePerViewAtDesktop;
const { activeIndex, initialized, loopedSlides=0 }=swiper;
const needsReLoop=isLoop&&((slidesPerView!==swiper.params.slidesPerView)||(slidesPerGroup!==swiper.params.slidesPerGroup));
if(alwaysOne||matchMedia(onePerViewAt)){
swiper.params.slidesPerView=1;
swiper.params.slidesPerGroup=1;
}else{
setBreakpointProperty(swiper, "slidesPerView", slidesPerView);
setBreakpointProperty(swiper, "slidesPerGroup", slidesPerGroup);
}
setBreakpointProperty(swiper, "spaceBetween", spaceBetween);
if(needsReLoop&&initialized){
swiper.loopDestroy();
swiper.loopCreate();
swiper.updateSlides();
swiper.slideTo(activeIndex - loopedSlides + swiper.loopedSlides, 0, false);
}else{
swiper.updateSlides();
swiper.slideReset(0);
}}
function setBreakpointProperty(swiper, key, value){
if(Number.isFinite(value)){
swiper.params[key]=value;
}else if(is.obj(value)){
const availableBreakpoints=Object.keys(value);
const currBreakpoint=getCurrentBreakpoint(availableBreakpoints);
const bpValue=value[currBreakpoint.id];
if(bpValue){
swiper.params[key]=isUnitValue(bpValue) ? bpValue.number:bpValue;
}else if(isUnitValue(value)&&!isResponsiveValue(value)){
swiper.params[key]=value.number;
}}
}
function isResponsiveValue(value){
const { breakpoints }=window.BreakdanceFrontend.data;
const ids=breakpoints.map((bp)=> bp.id);
return Object.keys(value).some(key=> ids.includes(key));
}
function isUnitValue(value){
return is.obj(value)&&"number" in value;
}
function syncSliders(sliderA, sliderB, syncMode="thumbs"){
if(!sliderA||!sliderB) return;
if(syncMode==="controller"){
if(!sliderA.controller||!sliderB.controller) return;
sliderA.controller.control=sliderB;
sliderB.controller.control=sliderA;
sliderA.update();
sliderB.update();
return;
}
if(!sliderA.thumbs) return;
sliderB.params.freeMode={ enabled: true };
sliderB.params.watchSlidesProgress=true;
sliderB.params.loop=false;
sliderB.params.slideToClickedSlide=true;
sliderB.update();
sliderA.thumbs.swiper=sliderB;
sliderA.thumbs.init();
sliderA.thumbs.update(true);
sliderA.update();
}
function resetSlideAnimations(slide){
const customEvent=new Event("breakdance_reset_animations", { bubbles: true });
slide.dispatchEvent(customEvent);
}
function playSlideAnimations(slide, delay){
const customEvent=new CustomEvent("breakdance_play_animations", {
bubbles: true,
detail: { delay: delay / 1000 }});
slide.dispatchEvent(customEvent);
}
function supportEntranceAnimations(swiper, settings){
let lastVisibleSlides=swiper.visibleSlides||[];
const playOn=settings.advanced.play_animations_on||"transition_end";
const getNewestSlides=()=> swiper.visibleSlides?.filter(x=> !lastVisibleSlides.includes(x))||[];
const getHiddenSlides=()=> swiper.slides?.filter((slide)=> !swiper.visibleSlides.includes(slide))||[];
swiper.on("sliderFirstMove", ()=> {
const hiddenSlides=getHiddenSlides();
hiddenSlides.forEach((slide)=> resetSlideAnimations(slide));
});
swiper.on("slideChange", ()=> {
const delay=playOn==="transition_start" ? 0:swiper.params.speed * 0.3;
const newSlides=getNewestSlides();
newSlides.forEach(slide=> {
resetSlideAnimations(slide);
playSlideAnimations(slide, delay);
});
lastVisibleSlides=swiper.visibleSlides;
});
}
function destroy(id){
if(window.swiperInstances &&
window.swiperInstances[id] &&
typeof window.swiperInstances[id].el==="object"
){
window.swiperInstances[id].destroy(true, true);
delete window.swiperInstances[id];
}}
function shouldAutoplay(settings, isBuilder, forceAutoplay){
if(prefersReducedMotion()) return false;
if(settings.autoplay==="enabled"&&(!isBuilder||forceAutoplay)){
return {
delay: settings.autoplay_settings.speed.number,
pauseOnMouseEnter:
!!settings.autoplay_settings.pause_on_hover,
disableOnInteraction:
!!settings.autoplay_settings.stop_on_interaction,
stopOnLastSlide: settings.infinite!=="enabled",
};}
return false;
}
function initSliderSync(slideA, sliderB, syncMode){
if(!sliderB) return;
if(sliderB.swiper){
syncSliders(slideA.swiper, sliderB.swiper, syncMode);
}else{
sliderB.addEventListener("breakdance_swiper_init", ()=> {
syncSliders(slideA.swiper, sliderB.swiper, syncMode);
});
}}
function update({ id, selector, settings, paginationSettings, extras }){
if(!isElementInDom(`${selector} > .breakdance-swiper-wrapper > .swiper`)) return;
destroy(id);
const defaultOptions={
settings: {
effect: "slide",
coverflow: {
rotate: {
number: 50
},
depth: {
number: 100
},
stretch: {
number: 0
}},
speed: { number: 1000 },
autoplay_settings: {
speed: {
number: 3000
}},
advanced: {
between_slides: 0,
slides_per_view: 1,
slides_per_group: 1,
initial_slide: 0,
slide_to_clicked: false,
sync_mode: "thumbs",
},
direction: "horizontal",
},
pagination: {
type: "bullets"
}};
settings=mergeObjects(defaultOptions.settings, settings);
paginationSettings=mergeObjects(
defaultOptions.pagination,
paginationSettings
);
const advancedSettings=settings.advanced;
const isBuilder = !!window?.BreakdanceFrontend.utils.isBuilder();
const isCoverflowEffect=settings.effect==="coverflow";
const coverFlowEffect=isCoverflowEffect
? {
coverflowEffect: {
rotate: settings.coverflow.rotate.number,
slideShadows: !!settings.coverflow.shadow,
depth: settings.coverflow.depth.number,
stretch: settings.coverflow.stretch.number
}}
: {};
const fadeEffect =
settings.effect==="fade"
? {
fadeEffect: {
crossFade: true
}}
: {};
const builderOnlySettings=isBuilder
? {
preventClicksPropagation: false,
preventClicks: false,
simulateTouch: false,
allowTouchMove: false
}
: {};
const forceAutoplay=extras&&extras.autoplay===true;
const sliderToSyncWith=advancedSettings.sync_with_another_slider ? document.querySelector(`.${advancedSettings.slider_to_sync} .swiper`):null;
if(advancedSettings.sync_with_another_slider&&advancedSettings.slider_to_sync&&!sliderToSyncWith){
console.error("[Breakdance Slider]: The slider to sync with is not found. Please check if the element you selected exists.");
}
const target=document.querySelector(`${selector} > .breakdance-swiper-wrapper > .swiper`);
const swiperInstance=new Swiper(
target,
{
...extras,
speed: settings.speed.number,
loop: settings.infinite==="enabled"&&!isBuilder,
autoplay:
shouldAutoplay(settings, isBuilder, forceAutoplay),
effect: settings.effect,
pagination: {
el: `${selector} > .breakdance-swiper-wrapper > .swiper-pagination`,
type: paginationSettings.type,
clickable: true,
},
navigation: {
nextEl: `${selector} > .breakdance-swiper-wrapper > .swiper-button-next`,
prevEl: `${selector} > .breakdance-swiper-wrapper > .swiper-button-prev`,
},
keyboard: !advancedSettings.disable_keyboard_control,
...coverFlowEffect,
...fadeEffect,
...builderOnlySettings,
mousewheel: advancedSettings.swipe_on_scroll
? {
releaseOnEdges: true
}
: false,
autoHeight: !!advancedSettings.auto_height,
loopPreventsSlide: false,
centeredSlides: isCoverflowEffect
?
true
: settings.center_slides,
watchSlidesProgress: advancedSettings.slides_per_view!==1,
parallax: true,
direction: settings.direction,
a11y: {
slideRole: ""
},
initialSlide: advancedSettings.initial_slide,
slideToClickedSlide: advancedSettings.slide_to_clicked,
init: false
});
swiperInstance.on("init", ()=> {
const event=new Event("breakdance_swiper_init");
target.dispatchEvent(event);
});
swiperInstance.init();
setBreakpoint(swiperInstance, settings);
supportEntranceAnimations(swiperInstance, settings);
swiperInstance.on("resize", ()=> {
setBreakpoint(swiperInstance, settings);
});
initSliderSync(target, sliderToSyncWith, advancedSettings.sync_mode);
window.swiperInstances={
...window.swiperInstances,
[id]: swiperInstance
};}
function updateSliderFromChild(id){
const sliderId=document
.querySelector(`[data-node-id="${id}"]`)
.parentElement.closest("[data-node-id]").dataset.nodeId;
const sliderIdNumber=sliderId&&parseInt(sliderId);
if(window.swiperInstances&&window.swiperInstances[sliderIdNumber]){
window.swiperInstances[sliderIdNumber].update();
}}
function selectSlide(id){
const slideElement=document
.querySelector(`[data-node-id="${id}"]`)
.closest(".swiper-slide");
if(slideElement){
const slideIndex=Array.from(slideElement.parentElement.children
).indexOf(slideElement);
const sliderElement =
slideElement.parentElement &&
slideElement.parentElement.closest("[data-node-id]");
const sliderId=sliderElement ? sliderElement.dataset.nodeId:null;
if(sliderId &&
slideIndex!==null &&
window.swiperInstances &&
window.swiperInstances[sliderId]
){
if(window.swiperInstances[sliderId].visibleSlides.includes(slideElement)){
return;
}
window.swiperInstances[sliderId].slideTo(slideIndex, 0);
}}
}
return {
update,
destroy,
updateSliderFromChild,
selectSlide
};}
window.BreakdanceSwiper=BreakdanceSwiper;
})();