@gem-sdk/components 19.0.0-staging.62 → 19.0.0-staging.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react"),t=require("@gem-sdk/core"),n=require("./useTrackPreviewPause.js");exports.useCarousel=(r,s,a,i)=>{let l;let{builderProps:o,moveToIdx:u,styles:p,setting:d,isHiddenArrowWhenDisabled:c=!0,elmRef:f,isEnableCheckHasScrollableContent:m,isDisableResetSlide:y,onClickArrow:g,onHandleChangeSlideByInteraction:v,onChangeActive:S}=r,[k,h]=e.useState(!0),[V,B]=e.useState(!0),[P,R]=e.useState(!1),[b,w]=e.useState(!0),[T,N]=e.useState(!1),{loop:E,navigationEnable:x={desktop:!0},navigationStyle:C}=d??{},[M,I]=e.useState(i),[O,L]=e.useState(d?.defaultCurrentSlider??0),{isFirstPreviewClicked:z}=n.default(d?.runPreview),D=e.useRef(),A=e.useRef(u??0),F=t.useCurrentDevice(),q=t.useEditorMode(),{onListener:$,saveToElementInteractionData:H,getInteractionPreviousData:j,trigger:G}=t.useInteraction(),U=e.useMemo(()=>t.getResponsiveValueByScreen(E,F,!1),[E,F]),W=e.useCallback(()=>{if(!d?.slidesToShow)return null;let e={};return t.DEVICES.forEach(n=>{let r=t.getResponsiveValueByScreen(d?.slidesToShow,n);e[n]=r?"auto"===r?4:Math.floor(r):0}),e},[d?.slidesToShow]),J=e.useCallback(()=>{if(!d?.slidesToShow)return null;let e={};return t.DEVICES.forEach(n=>{let r=t.getResponsiveValueByScreen(d?.slidesToShow,n);e[n]=r?"auto"===r?4:r:0}),e},[d?.slidesToShow]),K=e.useMemo(()=>{let e=J();if(e)return e;let n={};return t.DEVICES.forEach(e=>{let r=t.getResponsiveValueByScreen(d?.sneakPeak,e),s=r?"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,e)?t.getResponsiveValueByScreen(d?.sneakPeakOffsetCenter,e)??0:t.getResponsiveValueByScreen(d?.sneakPeakOffsetForward,e)??0:0,a="center"===t.getResponsiveValueByScreen(d?.sneakPeakType,e)?-2:-1,i=t.getResponsiveValueByScreen(d?.itemNumber,e);n[e]="number"==typeof i?i+s/100*a:"auto"}),n},[J,d?.itemNumber,d?.sneakPeak,d?.sneakPeakOffsetCenter,d?.sneakPeakOffsetForward,d?.sneakPeakType]),Q=e.useMemo(()=>{let e=t.getResponsiveValueByScreen(K,F),n=t.getResponsiveValueByScreen(E,F,!1);return n&&Number(e??0)>i||!n&&Number(e??0)>=i},[K,F,E,i]),X=e.useMemo(()=>{let e=t.getResponsiveValueByScreen(x,F),n=t.getResponsiveValueByScreen(C,F);return e&&"none"!==n},[x,F,C]),Y=e.useMemo(()=>!!a&&k&&!Q,[a,k,Q]),Z=e.useMemo(()=>{let e=W();return e||d?.itemNumber},[W,d?.itemNumber]),_=e.useCallback(e=>{let n="center"===t.getResponsiveValueByScreen(d?.sneakPeakType,e)?2:1;return"number"==typeof t.getResponsiveValueByScreen(Z,e,4)?t.getResponsiveValueByScreen(Z,e,4)-n:void 0},[d?.sneakPeakType,Z]),ee=()=>{let e="auto"===t.getResponsiveValueByScreen(K,F,1)?1:t.getResponsiveValueByScreen(K,F,1);return e??1},et=e.useCallback(()=>{let e=t.getResponsiveValueByScreen(K,F,1),n=_(F)??1,r=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1);return Array.from({length:Math.max(U?i:r?Math.min(i-n+1,i):"auto"===e?0:Math.ceil(i/Number(e)),0)},(e,t)=>t)},[i,K,F,_,d?.sneakPeak,U]),en=e=>{let t=e*ee();return t>=M-ee()&&(t=M-ee()),t},er=e=>{let n="edit"===q?{[e]:!1}:d?.enableDrag;return t.getResponsiveValueByScreen(n,e)};e.useImperativeHandle(s,()=>({nextSlideInteraction:ei,previousSlideInteraction:el,moveToSlideInteraction:eo,getSwiper:()=>a}));let es=e=>{a?.slideTo(e),v&&v(e)},ea=(e,t)=>{let{key:n,data:r,isRollback:s,element:i}=e,l=Math.max(a?.activeIndex??0,0);if(s&&void 0===r)return;if(s){if("specific"===t){let{previousData:e}=j(i,n);es(Number(e))}else es("next"===t?l-1:l+1);return}let o="specific"===t?Math.max(A.current,0):l;H(i,n,o.toString());let u="specific"===t?Number(r):"next"===t?l+1:l-1;es(u)},ei=e=>{ea(e,"next")},el=e=>{ea(e,"previous")},eo=e=>{ea(e,"specific")},eu=ee(),ep=e.useMemo(()=>!!M&&a&&t.getResponsiveValueByScreen(d?.dot,F)&&!Q&&i>1,[M,a,d?.dot,F,Q,i]),ed=t.getResponsiveValueByScreen(d?.vertical,F,!1)?"vertical":"horizontal",ec=e.useMemo(()=>t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F)&&"number"==typeof t.getResponsiveValueByScreen(d?.itemNumber,F)&&Number(t.getResponsiveValueByScreen(d?.itemNumber,F))>1,[d?.sneakPeak,d?.sneakPeakType,d?.itemNumber,F]),ef=e=>{let{swiperWidth:t,slidesPerView:n,itemNumberByDevice:r,centeredSlides:s}=e;if(!s||!r)return 0;let a=t/n,i=(Number(r)-2)/2-1;return-(a/2+i*a)},em=e.useMemo(()=>{let e=t.getResponsiveValueByScreen(E,F,!1),n=a?.width??0,r={0:"mobile",768:"tablet",1025:"desktop"},s=Number(Object.entries(r).find(([,e])=>e===F)?.[0]??1025),i=Object.entries(r).reduce((e,[r,s])=>{if(!e)return;let a=Number(r),i=t.getResponsiveValueByScreen(d?.sneakPeak,s,!1),l=i&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,s),o=t.getResponsiveValueByScreen(d?.itemNumber,s),p=er(s),c=ef({swiperWidth:n,slidesPerView:eu,itemNumberByDevice:o,centeredSlides:l}),f=d?.initialSlide||u||0;return e[a]={allowTouchMove:p,slidesOffsetBefore:c,slidesOffsetAfter:c,initialSlide:f,centeredSlides:l},e},{}),l=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F)&&"number"==typeof t.getResponsiveValueByScreen(d?.itemNumber,F)&&Number(t.getResponsiveValueByScreen(d?.itemNumber,F))>1;return{speed:p?.playSpeed??500,dir:d?.rtl?"rtl":"ltr",spaceBetween:t.getResponsiveValueByScreen(p?.spacing,F)||0,loop:e,slidesPerView:"auto"===t.getResponsiveValueByScreen(K,F,1)?"auto":eu,direction:ed,breakpoints:i,isSneakPeekCenter:l,slidesOffsetBefore:i?.[s]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,touchStartPreventDefault:!1,autoplay:!!d?.autoplay&&{delay:(d?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:d?.pauseOnHover,stopOnLastSlide:!e}}},[d?.autoplay,p?.playSpeed,d?.rtl,p?.spacing,F,E,eu,d?.sneakPeakType,d?.pauseOnHover,d?.autoplayTimeout,a?.width,M]),ey=t.getResponsiveValueByScreen(d?.sneakPeak,F),eg=e.useCallback(e=>{let n=a&&a.params?.slidesPerView,r=n?a?.slidesPerViewDynamic():1;if(e<=1)return!1;let s="auto"===em.slidesPerView?r:em.slidesPerView;if(!U||e<Number(s)||!k)return!1;let i=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1),l=i&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F),o=Number.isNaN(Number(s))?1:Math.ceil(Number(s));l&&o%2==0&&(o+=1);let u=l?Math.max(1,Math.ceil(o/2)):1;return e<o+u},[a,em.slidesPerView,U,k,d?.sneakPeak,d?.sneakPeakType,F]);e.useEffect(()=>{let e=`[data-id="${o?.uid}"]`;$({event:"gp:change-next-slide",selector:e,elementRef:D},e=>{let{data:t,isRollback:n,uniqueStorageKey:r}=e||{};ei({element:D.current,data:t,isRollback:n,key:r})}),$({event:"gp:change-previous-slide",selector:e,elementRef:D},e=>{let{data:t,isRollback:n,uniqueStorageKey:r}=e||{};el({element:D.current,data:t,isRollback:n,key:r})}),$({event:"gp:change-image-step",selector:e,elementRef:D},e=>{let{data:t,isRollback:n,uniqueStorageKey:r}=e||{};eo({element:D.current,data:t,isRollback:n,key:r})}),$({event:"gp:change-index-slide",selector:e},t=>{let n=document.querySelector(e),{data:r,isRollback:s,uniqueStorageKey:a}=t||{};eo({element:n,data:r,isRollback:s,key:a})})},[]),e.useEffect(()=>{I(i)},[i]);let ev=e.useCallback(()=>{y||(L(0),B(!0),R(!1),w(!0),N(!1))},[y]);e.useEffect(()=>{if("number"==typeof u){if(A.current=u,a?.params?.loop){a?.slideToLoop(u);return}a?.slideTo(u)}},[a,u,c]);let eS=e.useCallback(()=>{let e=t.getResponsiveValueByScreen(d?.loop,F,!1);if(!a)return;if(!ec||e){a.allowSlideNext=!0,a.allowSlidePrev=!0;return}let n=et().length;if(!n){a.allowSlideNext=!0,a.allowSlidePrev=!0;return}let r=a.snapIndex>=n-1;a.isEnd=r,a.allowSlideNext=!r,a.allowSlidePrev=!0},[a,d?.loop,F,ec,et]);return e.useEffect(()=>{if(!a)return;let e=()=>{I(a.slides.length),eS(),w(a.isBeginning),N(a.isEnd)},n=()=>{S&&S(a.realIndex)},r=()=>{let e=t.getResponsiveValueByScreen(d?.loop,F,!1);ec&&!e&&(a.allowSlideNext=!0,a.allowSlidePrev=!0)},s=()=>{let e=t.getResponsiveValueByScreen(d?.loop,F,!1);if(ec&&!e){let e=et().length,t=e-1,n=a.rtlTranslate?a.snapGrid[t]:-a.snapGrid[t];if(e&&Number.isFinite(n)){let e=a.rtlTranslate?a.translate>n:a.translate<n;e&&(a.allowSlideNext=!0,a.slideTo(t,0,!1))}}eS()},i=()=>{let e=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"!==t.getResponsiveValueByScreen(d?.sneakPeakType,F);L(!U&&e?a.snapIndex:a.realIndex),w(a.isBeginning),N(a.isEnd),B(a?.translate===0),R(a?.translate<=a?.maxTranslate())};return a.on("transitionEnd",i),a.on("slideChange",e),a.on("slideChangeTransitionStart",n),a.on("touchStart",r),a.on("touchEnd",s),()=>{a?.off("slideChange",e),a?.off("slideChangeTransitionStart",n),a?.off("transitionEnd",i),a?.off("touchStart",r),a?.off("touchEnd",s)}},[em.loop,a,eS,U,F,d?.sneakPeak,d?.sneakPeakType,d?.loop,ec]),e.useEffect(()=>{if(!a)return;let e=ec?et().length:0;e>0&&a.snapIndex>=e&&a.slideTo(e-1,0),eS(),w(a.isBeginning),N(a.isEnd)},[Q,a,K,ec,et,eS]),e.useEffect(()=>{a?.wrapperEl&&(a.wrapperEl.style.transitionTimingFunction=d?.animationMode??"ease")},[a,d?.animationMode]),e.useEffect(()=>{if(a&&a.autoplay){let e="edit"===q?!!z&&d?.runPreview&&d?.autoplay:d?.autoplay;e?a.autoplay.start():a.autoplay.stop()}},[a,d?.autoplay,q,z,d?.runPreview]),e.useEffect(()=>{let e=e=>{if(o?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;a?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[a,o?.uid]),e.useEffect(()=>{if(!a)return;let e=a.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let n=t.getResponsiveValueByScreen(d?.vertical,F)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(n),a?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),a?.update(),a?.wrapperEl&&a.width&&a.wrapperEl.style.setProperty("width",`${a.width}px`)},[F,d?.vertical,a,a?.params,p?.sizeSetting,C]),e.useEffect(()=>{let e;let t=a?.el;if(!t||"undefined"==typeof ResizeObserver)return;let n=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(()=>{!a.destroyed&&(a.update(),a.wrapperEl&&a.width&&a.wrapperEl.style.setProperty("width",`${a.width}px`))})});return n.observe(t),()=>{cancelAnimationFrame(e),n.disconnect()}},[a]),e.useEffect(()=>{if(!a||!m)return;let e=()=>{let e=a?.slides?.slice(0,i)||[],t=Number(em?.spaceBetween||0),n=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),r=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),s=a.params?.direction==="horizontal"?r>(a.width||0):n>(a.height||0);h(s)};return e(),a.on("resize",e),a.on("update",e),a.on("slidesLengthChange",e),a.on("orientationchange",e),()=>{a.off("resize",e),a.off("update",e),a.off("slidesLengthChange",e),a.off("orientationchange",e)}},[a]),{isInfinity:U,sliderSettings:em,totalSlideItem:M,currentSlide:O,localRef:D,isRenderDots:ep,isNavigationEnabled:X,isNavigationVisible:Y,isScrollToStart:V,isScrollToEnd:P,handleDotClick:(e,n)=>{let r=d?.sneakPeak?.[F]?e:n?e:en(e);if(n){if(i<eu){a?.slideTo(r);return}if(a?.realIndex===r)return;if(r===Number(a?.realIndex)+1||0===r&&a?.realIndex===i-1)return a?.slideNext();if(r===Number(a?.realIndex)-1||r===i-1&&a?.realIndex===0)return a?.slidePrev();let e=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F)&&"number"==typeof t.getResponsiveValueByScreen(d?.itemNumber,F)&&Number(t.getResponsiveValueByScreen(d?.itemNumber,F))%2==0;e?a?.slideToLoopCenterSneakPeek(r):a?.slideToLoop(r)}else a?.slideTo(r);A.current=r},getItemsPerPage:ee,handleNextAndPrevSlide:e=>{"next"===e?a?.slideNext():a?.slidePrev(),g&&(l&&clearTimeout(l),l=setTimeout(()=>g&&g(),500))},dispatchEventSelectSlide:e=>{G({event:"gp:rollback:select-slide",selector:`[data-id="${o?.uid}"]`,element:f?.current}),G({event:"gp:select-slide",selector:`[data-id="${o?.uid}"]`,data:e,element:f?.current})},getNumberOfFullWidthShow:_,shouldDuplicateSlides:eg,isHideNavigation:Q,sneakPeak:ey,swiperIsBeginning:b,swiperIsEnd:T,handleSwiperReset:ev}};
|
|
1
|
+
"use strict";var e=require("react"),t=require("@gem-sdk/core"),n=require("./useTrackPreviewPause.js");exports.useCarousel=(r,s,a,l)=>{let i;let{builderProps:o,moveToIdx:u,styles:p,setting:d,isHiddenArrowWhenDisabled:c=!0,elmRef:f,isEnableCheckHasScrollableContent:m,isDisableResetSlide:y,onClickArrow:g,onHandleChangeSlideByInteraction:v,onChangeActive:S}=r,[k,h]=e.useState(!0),[V,B]=e.useState(!0),[P,R]=e.useState(!1),[b,w]=e.useState(!0),[T,N]=e.useState(!1),{loop:E,navigationEnable:x={desktop:!0},navigationStyle:C}=d??{},[M,I]=e.useState(l),[O,L]=e.useState(d?.defaultCurrentSlider??u??0),{isFirstPreviewClicked:z}=n.default(d?.runPreview),D=e.useRef(),A=e.useRef(u??0),F=t.useCurrentDevice(),q=t.useEditorMode(),{onListener:$,saveToElementInteractionData:H,getInteractionPreviousData:j,trigger:G}=t.useInteraction(),U=e.useMemo(()=>t.getResponsiveValueByScreen(E,F,!1),[E,F]),W=e.useCallback(()=>{if(!d?.slidesToShow)return null;let e={};return t.DEVICES.forEach(n=>{let r=t.getResponsiveValueByScreen(d?.slidesToShow,n);e[n]=r?"auto"===r?4:Math.floor(r):0}),e},[d?.slidesToShow]),J=e.useCallback(()=>{if(!d?.slidesToShow)return null;let e={};return t.DEVICES.forEach(n=>{let r=t.getResponsiveValueByScreen(d?.slidesToShow,n);e[n]=r?"auto"===r?4:r:0}),e},[d?.slidesToShow]),K=e.useMemo(()=>{let e=J();if(e)return e;let n={};return t.DEVICES.forEach(e=>{let r=t.getResponsiveValueByScreen(d?.sneakPeak,e),s=r?"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,e)?t.getResponsiveValueByScreen(d?.sneakPeakOffsetCenter,e)??0:t.getResponsiveValueByScreen(d?.sneakPeakOffsetForward,e)??0:0,a="center"===t.getResponsiveValueByScreen(d?.sneakPeakType,e)?-2:-1,l=t.getResponsiveValueByScreen(d?.itemNumber,e);n[e]="number"==typeof l?l+s/100*a:"auto"}),n},[J,d?.itemNumber,d?.sneakPeak,d?.sneakPeakOffsetCenter,d?.sneakPeakOffsetForward,d?.sneakPeakType]),Q=e.useMemo(()=>{let e=t.getResponsiveValueByScreen(K,F),n=t.getResponsiveValueByScreen(E,F,!1);return n&&Number(e??0)>l||!n&&Number(e??0)>=l},[K,F,E,l]),X=e.useMemo(()=>{let e=t.getResponsiveValueByScreen(x,F),n=t.getResponsiveValueByScreen(C,F);return e&&"none"!==n},[x,F,C]),Y=e.useMemo(()=>!!a&&k&&!Q,[a,k,Q]),Z=e.useMemo(()=>{let e=W();return e||d?.itemNumber},[W,d?.itemNumber]),_=e.useCallback(e=>{let n="center"===t.getResponsiveValueByScreen(d?.sneakPeakType,e)?2:1;return"number"==typeof t.getResponsiveValueByScreen(Z,e,4)?t.getResponsiveValueByScreen(Z,e,4)-n:void 0},[d?.sneakPeakType,Z]),ee=()=>{let e="auto"===t.getResponsiveValueByScreen(K,F,1)?1:t.getResponsiveValueByScreen(K,F,1);return e??1},et=e.useCallback(()=>{let e=t.getResponsiveValueByScreen(K,F,1),n=_(F)??1,r=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1);return Array.from({length:Math.max(U?l:r?Math.min(l-n+1,l):"auto"===e?0:Math.ceil(l/Number(e)),0)},(e,t)=>t)},[l,K,F,_,d?.sneakPeak,U]),en=e=>{let t=e*ee();return t>=M-ee()&&(t=M-ee()),t},er=e=>{let n="edit"===q?{[e]:!1}:d?.enableDrag;return t.getResponsiveValueByScreen(n,e)};e.useImperativeHandle(s,()=>({nextSlideInteraction:el,previousSlideInteraction:ei,moveToSlideInteraction:eo,getSwiper:()=>a}));let es=e=>{a?.slideTo(e),v&&v(e)},ea=(e,t)=>{let{key:n,data:r,isRollback:s,element:l}=e,i=Math.max(a?.activeIndex??0,0);if(s&&void 0===r)return;if(s){if("specific"===t){let{previousData:e}=j(l,n);es(Number(e))}else es("next"===t?i-1:i+1);return}let o="specific"===t?Math.max(A.current,0):i;H(l,n,o.toString());let u="specific"===t?Number(r):"next"===t?i+1:i-1;es(u)},el=e=>{ea(e,"next")},ei=e=>{ea(e,"previous")},eo=e=>{ea(e,"specific")},eu=ee(),ep=e.useMemo(()=>!!M&&a&&t.getResponsiveValueByScreen(d?.dot,F)&&!Q&&l>1,[M,a,d?.dot,F,Q,l]),ed=t.getResponsiveValueByScreen(d?.vertical,F,!1)?"vertical":"horizontal",ec=e.useMemo(()=>t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F)&&"number"==typeof t.getResponsiveValueByScreen(d?.itemNumber,F)&&Number(t.getResponsiveValueByScreen(d?.itemNumber,F))>1,[d?.sneakPeak,d?.sneakPeakType,d?.itemNumber,F]),ef=e=>{let{swiperWidth:t,slidesPerView:n,itemNumberByDevice:r,centeredSlides:s}=e;if(!s||!r)return 0;let a=t/n,l=(Number(r)-2)/2-1;return-(a/2+l*a)},em=e.useMemo(()=>{let e=t.getResponsiveValueByScreen(E,F,!1),n=a?.width??0,r={0:"mobile",768:"tablet",1025:"desktop"},s=Number(Object.entries(r).find(([,e])=>e===F)?.[0]??1025),l=Object.entries(r).reduce((e,[r,s])=>{if(!e)return;let a=Number(r),l=t.getResponsiveValueByScreen(d?.sneakPeak,s,!1),i=l&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,s),o=t.getResponsiveValueByScreen(d?.itemNumber,s),p=er(s),c=ef({swiperWidth:n,slidesPerView:eu,itemNumberByDevice:o,centeredSlides:i}),f=d?.initialSlide||u||0;return e[a]={allowTouchMove:p,slidesOffsetBefore:c,slidesOffsetAfter:c,initialSlide:f,centeredSlides:i},e},{}),i=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F)&&"number"==typeof t.getResponsiveValueByScreen(d?.itemNumber,F)&&Number(t.getResponsiveValueByScreen(d?.itemNumber,F))>1;return{speed:p?.playSpeed??500,dir:d?.rtl?"rtl":"ltr",spaceBetween:t.getResponsiveValueByScreen(p?.spacing,F)||0,loop:e,slidesPerView:"auto"===t.getResponsiveValueByScreen(K,F,1)?"auto":eu,direction:ed,breakpoints:l,isSneakPeekCenter:i,slidesOffsetBefore:l?.[s]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,touchStartPreventDefault:!1,autoplay:!!d?.autoplay&&{delay:(d?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:d?.pauseOnHover,stopOnLastSlide:!e}}},[d?.autoplay,p?.playSpeed,d?.rtl,p?.spacing,F,E,eu,d?.sneakPeakType,d?.pauseOnHover,d?.autoplayTimeout,a?.width,M]),ey=t.getResponsiveValueByScreen(d?.sneakPeak,F),eg=e.useCallback(e=>{let n=a&&a.params?.slidesPerView,r=n?a?.slidesPerViewDynamic():1;if(e<=1)return!1;let s="auto"===em.slidesPerView?r:em.slidesPerView;if(!U||e<Number(s)||!k)return!1;let l=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1),i=l&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F),o=Number.isNaN(Number(s))?1:Math.ceil(Number(s));i&&o%2==0&&(o+=1);let u=i?Math.max(1,Math.ceil(o/2)):1;return e<o+u},[a,em.slidesPerView,U,k,d?.sneakPeak,d?.sneakPeakType,F]);e.useEffect(()=>{let e=`[data-id="${o?.uid}"]`;$({event:"gp:change-next-slide",selector:e,elementRef:D},e=>{let{data:t,isRollback:n,uniqueStorageKey:r}=e||{};el({element:D.current,data:t,isRollback:n,key:r})}),$({event:"gp:change-previous-slide",selector:e,elementRef:D},e=>{let{data:t,isRollback:n,uniqueStorageKey:r}=e||{};ei({element:D.current,data:t,isRollback:n,key:r})}),$({event:"gp:change-image-step",selector:e,elementRef:D},e=>{let{data:t,isRollback:n,uniqueStorageKey:r}=e||{};eo({element:D.current,data:t,isRollback:n,key:r})}),$({event:"gp:change-index-slide",selector:e},t=>{let n=document.querySelector(e),{data:r,isRollback:s,uniqueStorageKey:a}=t||{};eo({element:n,data:r,isRollback:s,key:a})})},[]),e.useEffect(()=>{I(l)},[l]);let ev=e.useCallback(()=>{y||(L(0),B(!0),R(!1),w(!0),N(!1))},[y]);e.useEffect(()=>{if("number"==typeof u){if(A.current=u,a&&a.realIndex!==u||L(u),a?.params?.loop){a?.slideToLoop(u);return}a?.slideTo(u)}},[a,u,c]);let eS=e.useCallback(()=>{let e=t.getResponsiveValueByScreen(d?.loop,F,!1);if(!a)return;if(!ec||e){a.allowSlideNext=!0,a.allowSlidePrev=!0;return}let n=et().length;if(!n){a.allowSlideNext=!0,a.allowSlidePrev=!0;return}let r=a.snapIndex>=n-1;a.isEnd=r,a.allowSlideNext=!r,a.allowSlidePrev=!0},[a,d?.loop,F,ec,et]);return e.useEffect(()=>{if(!a)return;let e=()=>{I(a.slides.length),eS(),w(a.isBeginning),N(a.isEnd)},n=()=>{S&&S(a.realIndex)},r=()=>{let e=t.getResponsiveValueByScreen(d?.loop,F,!1);ec&&!e&&(a.allowSlideNext=!0,a.allowSlidePrev=!0)},s=()=>{let e=t.getResponsiveValueByScreen(d?.loop,F,!1);if(ec&&!e){let e=et().length,t=e-1,n=a.rtlTranslate?a.snapGrid[t]:-a.snapGrid[t];if(e&&Number.isFinite(n)){let e=a.rtlTranslate?a.translate>n:a.translate<n;e&&(a.allowSlideNext=!0,a.slideTo(t,0,!1))}}eS()},l=()=>{let e=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"!==t.getResponsiveValueByScreen(d?.sneakPeakType,F);L(!U&&e?a.snapIndex:a.realIndex),w(a.isBeginning),N(a.isEnd),B(a?.translate===0),R(a?.translate<=a?.maxTranslate())};return a.on("transitionEnd",l),a.on("slideChange",e),a.on("slideChangeTransitionStart",n),a.on("touchStart",r),a.on("touchEnd",s),()=>{a?.off("slideChange",e),a?.off("slideChangeTransitionStart",n),a?.off("transitionEnd",l),a?.off("touchStart",r),a?.off("touchEnd",s)}},[em.loop,a,eS,U,F,d?.sneakPeak,d?.sneakPeakType,d?.loop,ec]),e.useEffect(()=>{if(!a)return;let e=ec?et().length:0;e>0&&a.snapIndex>=e&&a.slideTo(e-1,0),eS(),w(a.isBeginning),N(a.isEnd)},[Q,a,K,ec,et,eS]),e.useEffect(()=>{a?.wrapperEl&&(a.wrapperEl.style.transitionTimingFunction=d?.animationMode??"ease")},[a,d?.animationMode]),e.useEffect(()=>{if(a&&a.autoplay){let e="edit"===q?!!z&&d?.runPreview&&d?.autoplay:d?.autoplay;e?a.autoplay.start():a.autoplay.stop()}},[a,d?.autoplay,q,z,d?.runPreview]),e.useEffect(()=>{let e=e=>{if(o?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;a?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[a,o?.uid]),e.useEffect(()=>{if(!a)return;let e=a.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let n=t.getResponsiveValueByScreen(d?.vertical,F)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(n),a?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),a?.update(),a?.wrapperEl&&a.width&&a.wrapperEl.style.setProperty("width",`${a.width}px`)},[F,d?.vertical,a,a?.params,p?.sizeSetting,C]),e.useEffect(()=>{let e;let t=a?.el;if(!t||"undefined"==typeof ResizeObserver)return;let n=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(()=>{!a.destroyed&&(a.update(),a.wrapperEl&&a.width&&a.wrapperEl.style.setProperty("width",`${a.width}px`))})});return n.observe(t),()=>{cancelAnimationFrame(e),n.disconnect()}},[a]),e.useEffect(()=>{if(!a||!m)return;let e=()=>{let e=a?.slides?.slice(0,l)||[],t=Number(em?.spaceBetween||0),n=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),r=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),s=a.params?.direction==="horizontal"?r>(a.width||0):n>(a.height||0);h(s)};return e(),a.on("resize",e),a.on("update",e),a.on("slidesLengthChange",e),a.on("orientationchange",e),()=>{a.off("resize",e),a.off("update",e),a.off("slidesLengthChange",e),a.off("orientationchange",e)}},[a]),{isInfinity:U,sliderSettings:em,totalSlideItem:M,currentSlide:O,localRef:D,isRenderDots:ep,isNavigationEnabled:X,isNavigationVisible:Y,isScrollToStart:V,isScrollToEnd:P,handleDotClick:(e,n)=>{let r=d?.sneakPeak?.[F]?e:n?e:en(e);if(n){if(l<eu){a?.slideTo(r);return}if(a?.realIndex===r)return;if(r===Number(a?.realIndex)+1||0===r&&a?.realIndex===l-1)return a?.slideNext();if(r===Number(a?.realIndex)-1||r===l-1&&a?.realIndex===0)return a?.slidePrev();let e=t.getResponsiveValueByScreen(d?.sneakPeak,F,!1)&&"center"===t.getResponsiveValueByScreen(d?.sneakPeakType,F)&&"number"==typeof t.getResponsiveValueByScreen(d?.itemNumber,F)&&Number(t.getResponsiveValueByScreen(d?.itemNumber,F))%2==0;e?a?.slideToLoopCenterSneakPeek(r):a?.slideToLoop(r)}else a?.slideTo(r);A.current=r},getItemsPerPage:ee,handleNextAndPrevSlide:e=>{"next"===e?a?.slideNext():a?.slidePrev(),g&&(i&&clearTimeout(i),i=setTimeout(()=>g&&g(),500))},dispatchEventSelectSlide:e=>{G({event:"gp:rollback:select-slide",selector:`[data-id="${o?.uid}"]`,element:f?.current}),G({event:"gp:select-slide",selector:`[data-id="${o?.uid}"]`,data:e,element:f?.current})},getNumberOfFullWidthShow:_,shouldDuplicateSlides:eg,isHideNavigation:Q,sneakPeak:ey,swiperIsBeginning:b,swiperIsEnd:T,handleSwiperReset:ev}};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./common/common.js"),a=require("@gem-sdk/core"),i=require("react"),l=require("./components/feature-gallery/FeatureImageWithGallery.js"),o=require("./components/feature-only/OnlyFeatureImage.js"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./common/common.js"),a=require("@gem-sdk/core"),i=require("react"),l=require("./components/feature-gallery/FeatureImageWithGallery.js"),o=require("./components/feature-only/OnlyFeatureImage.js"),r=require("./components/lightbox/ProductImagesLightBox.js"),C=require("../../../common/components/NoDataState.js"),s=require("./composables/getProductImagesClassName.js"),n=require("./common/getBorderActiveCss.js"),d=require("./components/gallery-grid/GalleryGrid.js");const c=e=>e?.medias?.edges.map(e=>e?.node),u=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"];exports.default=p=>{let m=i.useMemo(()=>t.setDefaultWhenUndefineSetting(p),[p]),{redirectProductShopifyLink:g}=a.useProductShopifyEditLink(),{setting:f,styles:h,builderProps:y,builderAttrs:D,style:M,children:I}=m,b=a.useProduct(),v=a.useCurrentDevice(),w=a.useCurrentVariant(),{isChangeSelectedOption:E}=a.useSelectedOption(),V=a.useEditorMode(),k=a.useProductStore(e=>e.setProductFeaturedImage),[x,Z]=i.useState(!1),[S,j]=i.useState(!1),B=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,L=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="IMAGE")?.node,P=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,O=i.useMemo(()=>f?.typeDisplay==="all-images"&&!E,[E,f?.typeDisplay]),H=i.useMemo(()=>{if(O){let e;switch(f?.preDisplay){case"1st-images":e=L(b);break;case"1st-3d-mode":e=P(b);break;case"1st-video":e=B(b);break;case"1st-available-variant":e=w?.media}return k(e),e}},[O,f?.preDisplay,k,b,w?.media]),q=i.useMemo(()=>f?.filterByVariant==="selected_variant",[f?.filterByVariant]),A=i.useMemo(()=>{let e=c(b);return e?.length?e:[{id:b?.featuredImage?.id||"noImageError",baseID:b?.featuredImage?.baseID||"noImageError",src:b?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:b?.featuredImage?.width||480,height:b?.featuredImage?.height||480}]},[b]),F=i.useMemo(()=>{if(!q||!w?.selectedOptions?.length)return A;let e=w.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),t=e.join("-"),a=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),i=A?.filter(e=>{if(!e?.alt)return!1;let i=a(e.alt),l=a(t),o=i===l||i.includes(l);return"all-variants"===i||o});return i?.length>0?i:A},[w?.selectedOptions,q,A]),T=i.useMemo(()=>A.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[A]),_=i.useMemo(()=>a.getResponsiveValueByScreen(h?.position,v),[v,h?.position]),G=({imageID:e,enableOpenLightBox:t,isClickFromFeatureImage:a=!1})=>{R(e),t&&(j(a),N())},N=()=>{Z(!0)},R=e=>{if(!e)return;let t=T[e];if(void 0!==t){let e=A[t];e&&k(e)}};i.useEffect(()=>{if(!w||O)return;let e=T[w?.mediaId],t=q&&"only-feature"!==_?F[0]:void 0,a=void 0!==e?A[e]??b?.featuredImage:t;a&&k(a)},[w,T,A,F,b?.featuredImage,k,O,q,_]);let z=i.useMemo(()=>{let e="popup"===a.getResponsiveValueByScreen(f?.ftClickOpenLightBox,v)||a.getResponsiveValueByScreen(f?.clickOpenLightBox,v);return e||"edit"!==V||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[f?.ftClickOpenLightBox,f?.clickOpenLightBox,v,V]),U=()=>F.length>0?i.Children.map(a.filterToolbarPreview(I),t=>i.isValidElement(t)?e.jsx(t.type,{...t.props,isInsideProductImage:!0,navigationPosition:f?.ftNavigationPosition,imageData:{imageShape:h?.ftShape,imageAlign:h?.align,imageLayout:h?.position},dotData:{dotSize:f?.ftDotSize,dotGapToCarousel:f?.ftDotGapToCarousel,dotStyle:f?.ftDotStyle}}):null):null,W=`
|
|
3
3
|
<svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
4
4
|
<path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
|
|
5
5
|
<path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
|
|
@@ -23,4 +23,4 @@
|
|
|
23
23
|
<path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
|
|
24
24
|
<path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
|
|
25
25
|
</svg>
|
|
26
|
-
`,{t:J}=a.useI18nStore(),X=e.jsx(
|
|
26
|
+
`,{t:J}=a.useI18nStore(),X=e.jsx(C.default,{elementType:"secondary",description:J("Catch your customer's attention with attracted media."),descriptionActions:[{text:J("Add image"),callback:g},{text:J("sync data"),callback:"syncProduct"}],additionalMedia:W}),{wrapperClasses:K}=s.getProductImagesClassName(p);return e.jsxs("div",{...D,className:K,style:M,children:[e.jsx("style",{dangerouslySetInnerHTML:{__html:n.getBorderActiveCss({settings:{...f,...h},uid:y?.uid,type:"React"})}}),u.includes(_)&&e.jsx(l.default,{...m,isFilterByVariantEnabled:q,gallery:F,featureGallery:A,priorityFeatureImage:H,onHandleClickImage:(e,t,a)=>G({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:a}),noDataChildren:X,children:U()}),"only-feature"===_&&e.jsx(o.default,{gallery:A,...m,onHandleClickImage:(e,t)=>G({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:!0}),noDataChildren:X,children:U()}),["one-col","two-col"].includes(_)&&e.jsx(d.default,{gallery:F,...m,onHandleClickImage:(e,t)=>G({imageID:e||"",enableOpenLightBox:t}),noDataChildren:X,children:U()}),z&&e.jsx(r.default,{productImages:S?A:F,builderPropUID:y?.uid,open:x,onHandleClose:()=>Z(!1),imageRatio:t.getAspectRatio(h?.ftShape)}),a.filterToolbarPreview(I,!0)]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useState as e,useRef as t,useMemo as r,useCallback as n,useImperativeHandle as a,useEffect as i}from"react";import{useCurrentDevice as l,useEditorMode as s,useInteraction as o,getResponsiveValueByScreen as d,DEVICES as u}from"@gem-sdk/core";import p from"./useTrackPreviewPause.js";let m=(m,f,c,k)=>{let h;let{builderProps:P,moveToIdx:w,styles:y,setting:b,isHiddenArrowWhenDisabled:g=!0,elmRef:v,isEnableCheckHasScrollableContent:T,isDisableResetSlide:N,onClickArrow:x,onHandleChangeSlideByInteraction:S,onChangeActive:E}=m,[O,C]=e(!0),[M,I]=e(!0),[L,z]=e(!1),[B,A]=e(!0),[F,V]=e(!1),{loop:R,navigationEnable:$={desktop:!0},navigationStyle:D}=b??{},[j,H]=e(k),[q,G]=e(b?.defaultCurrentSlider??0),{isFirstPreviewClicked:U}=p(b?.runPreview),W=t(),J=t(w??0),K=l(),Q=s(),{onListener:X,saveToElementInteractionData:Y,getInteractionPreviousData:Z,trigger:_}=o(),ee=r(()=>d(R,K,!1),[R,K]),et=n(()=>{if(!b?.slidesToShow)return null;let e={};return u.forEach(t=>{let r=d(b?.slidesToShow,t);e[t]=r?"auto"===r?4:Math.floor(r):0}),e},[b?.slidesToShow]),er=n(()=>{if(!b?.slidesToShow)return null;let e={};return u.forEach(t=>{let r=d(b?.slidesToShow,t);e[t]=r?"auto"===r?4:r:0}),e},[b?.slidesToShow]),en=r(()=>{let e=er();if(e)return e;let t={};return u.forEach(e=>{let r=d(b?.sneakPeak,e),n=r?"center"===d(b?.sneakPeakType,e)?d(b?.sneakPeakOffsetCenter,e)??0:d(b?.sneakPeakOffsetForward,e)??0:0,a="center"===d(b?.sneakPeakType,e)?-2:-1,i=d(b?.itemNumber,e);t[e]="number"==typeof i?i+n/100*a:"auto"}),t},[er,b?.itemNumber,b?.sneakPeak,b?.sneakPeakOffsetCenter,b?.sneakPeakOffsetForward,b?.sneakPeakType]),ea=r(()=>{let e=d(en,K),t=d(R,K,!1);return t&&Number(e??0)>k||!t&&Number(e??0)>=k},[en,K,R,k]),ei=r(()=>{let e=d($,K),t=d(D,K);return e&&"none"!==t},[$,K,D]),el=r(()=>!!c&&O&&!ea,[c,O,ea]),es=r(()=>{let e=et();return e||b?.itemNumber},[et,b?.itemNumber]),eo=n(e=>{let t="center"===d(b?.sneakPeakType,e)?2:1;return"number"==typeof d(es,e,4)?d(es,e,4)-t:void 0},[b?.sneakPeakType,es]),ed=()=>{let e="auto"===d(en,K,1)?1:d(en,K,1);return e??1},eu=n(()=>{let e=d(en,K,1),t=eo(K)??1,r=d(b?.sneakPeak,K,!1);return Array.from({length:Math.max(ee?k:r?Math.min(k-t+1,k):"auto"===e?0:Math.ceil(k/Number(e)),0)},(e,t)=>t)},[k,en,K,eo,b?.sneakPeak,ee]),ep=e=>{let t=e*ed();return t>=j-ed()&&(t=j-ed()),t},em=e=>{let t="edit"===Q?{[e]:!1}:b?.enableDrag;return d(t,e)};a(f,()=>({nextSlideInteraction:ek,previousSlideInteraction:eh,moveToSlideInteraction:eP,getSwiper:()=>c}));let ef=e=>{c?.slideTo(e),S&&S(e)},ec=(e,t)=>{let{key:r,data:n,isRollback:a,element:i}=e,l=Math.max(c?.activeIndex??0,0);if(a&&void 0===n)return;if(a){if("specific"===t){let{previousData:e}=Z(i,r);ef(Number(e))}else ef("next"===t?l-1:l+1);return}let s="specific"===t?Math.max(J.current,0):l;Y(i,r,s.toString());let o="specific"===t?Number(n):"next"===t?l+1:l-1;ef(o)},ek=e=>{ec(e,"next")},eh=e=>{ec(e,"previous")},eP=e=>{ec(e,"specific")},ew=ed(),ey=r(()=>!!j&&c&&d(b?.dot,K)&&!ea&&k>1,[j,c,b?.dot,K,ea,k]),eb=d(b?.vertical,K,!1)?"vertical":"horizontal",eg=r(()=>d(b?.sneakPeak,K,!1)&&"center"===d(b?.sneakPeakType,K)&&"number"==typeof d(b?.itemNumber,K)&&Number(d(b?.itemNumber,K))>1,[b?.sneakPeak,b?.sneakPeakType,b?.itemNumber,K]),ev=e=>{let{swiperWidth:t,slidesPerView:r,itemNumberByDevice:n,centeredSlides:a}=e;if(!a||!n)return 0;let i=t/r,l=(Number(n)-2)/2-1;return-(i/2+l*i)},eT=r(()=>{let e=d(R,K,!1),t=c?.width??0,r={0:"mobile",768:"tablet",1025:"desktop"},n=Number(Object.entries(r).find(([,e])=>e===K)?.[0]??1025),a=Object.entries(r).reduce((e,[r,n])=>{if(!e)return;let a=Number(r),i=d(b?.sneakPeak,n,!1),l=i&&"center"===d(b?.sneakPeakType,n),s=d(b?.itemNumber,n),o=em(n),u=ev({swiperWidth:t,slidesPerView:ew,itemNumberByDevice:s,centeredSlides:l}),p=b?.initialSlide||w||0;return e[a]={allowTouchMove:o,slidesOffsetBefore:u,slidesOffsetAfter:u,initialSlide:p,centeredSlides:l},e},{}),i=d(b?.sneakPeak,K,!1)&&"center"===d(b?.sneakPeakType,K)&&"number"==typeof d(b?.itemNumber,K)&&Number(d(b?.itemNumber,K))>1;return{speed:y?.playSpeed??500,dir:b?.rtl?"rtl":"ltr",spaceBetween:d(y?.spacing,K)||0,loop:e,slidesPerView:"auto"===d(en,K,1)?"auto":ew,direction:eb,breakpoints:a,isSneakPeekCenter:i,slidesOffsetBefore:a?.[n]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,touchStartPreventDefault:!1,autoplay:!!b?.autoplay&&{delay:(b?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:b?.pauseOnHover,stopOnLastSlide:!e}}},[b?.autoplay,y?.playSpeed,b?.rtl,y?.spacing,K,R,ew,b?.sneakPeakType,b?.pauseOnHover,b?.autoplayTimeout,c?.width,j]),eN=d(b?.sneakPeak,K),ex=n(e=>{let t=c&&c.params?.slidesPerView,r=t?c?.slidesPerViewDynamic():1;if(e<=1)return!1;let n="auto"===eT.slidesPerView?r:eT.slidesPerView;if(!ee||e<Number(n)||!O)return!1;let a=d(b?.sneakPeak,K,!1),i=a&&"center"===d(b?.sneakPeakType,K),l=Number.isNaN(Number(n))?1:Math.ceil(Number(n));i&&l%2==0&&(l+=1);let s=i?Math.max(1,Math.ceil(l/2)):1;return e<l+s},[c,eT.slidesPerView,ee,O,b?.sneakPeak,b?.sneakPeakType,K]);i(()=>{let e=`[data-id="${P?.uid}"]`;X({event:"gp:change-next-slide",selector:e,elementRef:W},e=>{let{data:t,isRollback:r,uniqueStorageKey:n}=e||{};ek({element:W.current,data:t,isRollback:r,key:n})}),X({event:"gp:change-previous-slide",selector:e,elementRef:W},e=>{let{data:t,isRollback:r,uniqueStorageKey:n}=e||{};eh({element:W.current,data:t,isRollback:r,key:n})}),X({event:"gp:change-image-step",selector:e,elementRef:W},e=>{let{data:t,isRollback:r,uniqueStorageKey:n}=e||{};eP({element:W.current,data:t,isRollback:r,key:n})}),X({event:"gp:change-index-slide",selector:e},t=>{let r=document.querySelector(e),{data:n,isRollback:a,uniqueStorageKey:i}=t||{};eP({element:r,data:n,isRollback:a,key:i})})},[]),i(()=>{H(k)},[k]);let eS=n(()=>{N||(G(0),I(!0),z(!1),A(!0),V(!1))},[N]);i(()=>{if("number"==typeof w){if(J.current=w,c?.params?.loop){c?.slideToLoop(w);return}c?.slideTo(w)}},[c,w,g]);let eE=n(()=>{let e=d(b?.loop,K,!1);if(!c)return;if(!eg||e){c.allowSlideNext=!0,c.allowSlidePrev=!0;return}let t=eu().length;if(!t){c.allowSlideNext=!0,c.allowSlidePrev=!0;return}let r=c.snapIndex>=t-1;c.isEnd=r,c.allowSlideNext=!r,c.allowSlidePrev=!0},[c,b?.loop,K,eg,eu]);return i(()=>{if(!c)return;let e=()=>{H(c.slides.length),eE(),A(c.isBeginning),V(c.isEnd)},t=()=>{E&&E(c.realIndex)},r=()=>{let e=d(b?.loop,K,!1);eg&&!e&&(c.allowSlideNext=!0,c.allowSlidePrev=!0)},n=()=>{let e=d(b?.loop,K,!1);if(eg&&!e){let e=eu().length,t=e-1,r=c.rtlTranslate?c.snapGrid[t]:-c.snapGrid[t];if(e&&Number.isFinite(r)){let e=c.rtlTranslate?c.translate>r:c.translate<r;e&&(c.allowSlideNext=!0,c.slideTo(t,0,!1))}}eE()},a=()=>{let e=d(b?.sneakPeak,K,!1)&&"center"!==d(b?.sneakPeakType,K);G(!ee&&e?c.snapIndex:c.realIndex),A(c.isBeginning),V(c.isEnd),I(c?.translate===0),z(c?.translate<=c?.maxTranslate())};return c.on("transitionEnd",a),c.on("slideChange",e),c.on("slideChangeTransitionStart",t),c.on("touchStart",r),c.on("touchEnd",n),()=>{c?.off("slideChange",e),c?.off("slideChangeTransitionStart",t),c?.off("transitionEnd",a),c?.off("touchStart",r),c?.off("touchEnd",n)}},[eT.loop,c,eE,ee,K,b?.sneakPeak,b?.sneakPeakType,b?.loop,eg]),i(()=>{if(!c)return;let e=eg?eu().length:0;e>0&&c.snapIndex>=e&&c.slideTo(e-1,0),eE(),A(c.isBeginning),V(c.isEnd)},[ea,c,en,eg,eu,eE]),i(()=>{c?.wrapperEl&&(c.wrapperEl.style.transitionTimingFunction=b?.animationMode??"ease")},[c,b?.animationMode]),i(()=>{if(c&&c.autoplay){let e="edit"===Q?!!U&&b?.runPreview&&b?.autoplay:b?.autoplay;e?c.autoplay.start():c.autoplay.stop()}},[c,b?.autoplay,Q,U,b?.runPreview]),i(()=>{let e=e=>{if(P?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;c?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[c,P?.uid]),i(()=>{if(!c)return;let e=c.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let t=d(b?.vertical,K)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(t),c?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),c?.update(),c?.wrapperEl&&c.width&&c.wrapperEl.style.setProperty("width",`${c.width}px`)},[K,b?.vertical,c,c?.params,y?.sizeSetting,D]),i(()=>{let e;let t=c?.el;if(!t||"undefined"==typeof ResizeObserver)return;let r=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(()=>{!c.destroyed&&(c.update(),c.wrapperEl&&c.width&&c.wrapperEl.style.setProperty("width",`${c.width}px`))})});return r.observe(t),()=>{cancelAnimationFrame(e),r.disconnect()}},[c]),i(()=>{if(!c||!T)return;let e=()=>{let e=c?.slides?.slice(0,k)||[],t=Number(eT?.spaceBetween||0),r=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),n=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),a=c.params?.direction==="horizontal"?n>(c.width||0):r>(c.height||0);C(a)};return e(),c.on("resize",e),c.on("update",e),c.on("slidesLengthChange",e),c.on("orientationchange",e),()=>{c.off("resize",e),c.off("update",e),c.off("slidesLengthChange",e),c.off("orientationchange",e)}},[c]),{isInfinity:ee,sliderSettings:eT,totalSlideItem:j,currentSlide:q,localRef:W,isRenderDots:ey,isNavigationEnabled:ei,isNavigationVisible:el,isScrollToStart:M,isScrollToEnd:L,handleDotClick:(e,t)=>{let r=b?.sneakPeak?.[K]?e:t?e:ep(e);if(t){if(k<ew){c?.slideTo(r);return}if(c?.realIndex===r)return;if(r===Number(c?.realIndex)+1||0===r&&c?.realIndex===k-1)return c?.slideNext();if(r===Number(c?.realIndex)-1||r===k-1&&c?.realIndex===0)return c?.slidePrev();let e=d(b?.sneakPeak,K,!1)&&"center"===d(b?.sneakPeakType,K)&&"number"==typeof d(b?.itemNumber,K)&&Number(d(b?.itemNumber,K))%2==0;e?c?.slideToLoopCenterSneakPeek(r):c?.slideToLoop(r)}else c?.slideTo(r);J.current=r},getItemsPerPage:ed,handleNextAndPrevSlide:e=>{"next"===e?c?.slideNext():c?.slidePrev(),x&&(h&&clearTimeout(h),h=setTimeout(()=>x&&x(),500))},dispatchEventSelectSlide:e=>{_({event:"gp:rollback:select-slide",selector:`[data-id="${P?.uid}"]`,element:v?.current}),_({event:"gp:select-slide",selector:`[data-id="${P?.uid}"]`,data:e,element:v?.current})},getNumberOfFullWidthShow:eo,shouldDuplicateSlides:ex,isHideNavigation:ea,sneakPeak:eN,swiperIsBeginning:B,swiperIsEnd:F,handleSwiperReset:eS}};export{m as useCarousel};
|
|
1
|
+
import{useState as e,useRef as t,useMemo as r,useCallback as n,useImperativeHandle as a,useEffect as i}from"react";import{useCurrentDevice as l,useEditorMode as s,useInteraction as o,getResponsiveValueByScreen as d,DEVICES as u}from"@gem-sdk/core";import p from"./useTrackPreviewPause.js";let m=(m,f,c,k)=>{let h;let{builderProps:P,moveToIdx:w,styles:y,setting:b,isHiddenArrowWhenDisabled:g=!0,elmRef:v,isEnableCheckHasScrollableContent:T,isDisableResetSlide:N,onClickArrow:x,onHandleChangeSlideByInteraction:S,onChangeActive:E}=m,[O,C]=e(!0),[I,M]=e(!0),[L,z]=e(!1),[B,A]=e(!0),[F,V]=e(!1),{loop:R,navigationEnable:$={desktop:!0},navigationStyle:D}=b??{},[j,H]=e(k),[q,G]=e(b?.defaultCurrentSlider??w??0),{isFirstPreviewClicked:U}=p(b?.runPreview),W=t(),J=t(w??0),K=l(),Q=s(),{onListener:X,saveToElementInteractionData:Y,getInteractionPreviousData:Z,trigger:_}=o(),ee=r(()=>d(R,K,!1),[R,K]),et=n(()=>{if(!b?.slidesToShow)return null;let e={};return u.forEach(t=>{let r=d(b?.slidesToShow,t);e[t]=r?"auto"===r?4:Math.floor(r):0}),e},[b?.slidesToShow]),er=n(()=>{if(!b?.slidesToShow)return null;let e={};return u.forEach(t=>{let r=d(b?.slidesToShow,t);e[t]=r?"auto"===r?4:r:0}),e},[b?.slidesToShow]),en=r(()=>{let e=er();if(e)return e;let t={};return u.forEach(e=>{let r=d(b?.sneakPeak,e),n=r?"center"===d(b?.sneakPeakType,e)?d(b?.sneakPeakOffsetCenter,e)??0:d(b?.sneakPeakOffsetForward,e)??0:0,a="center"===d(b?.sneakPeakType,e)?-2:-1,i=d(b?.itemNumber,e);t[e]="number"==typeof i?i+n/100*a:"auto"}),t},[er,b?.itemNumber,b?.sneakPeak,b?.sneakPeakOffsetCenter,b?.sneakPeakOffsetForward,b?.sneakPeakType]),ea=r(()=>{let e=d(en,K),t=d(R,K,!1);return t&&Number(e??0)>k||!t&&Number(e??0)>=k},[en,K,R,k]),ei=r(()=>{let e=d($,K),t=d(D,K);return e&&"none"!==t},[$,K,D]),el=r(()=>!!c&&O&&!ea,[c,O,ea]),es=r(()=>{let e=et();return e||b?.itemNumber},[et,b?.itemNumber]),eo=n(e=>{let t="center"===d(b?.sneakPeakType,e)?2:1;return"number"==typeof d(es,e,4)?d(es,e,4)-t:void 0},[b?.sneakPeakType,es]),ed=()=>{let e="auto"===d(en,K,1)?1:d(en,K,1);return e??1},eu=n(()=>{let e=d(en,K,1),t=eo(K)??1,r=d(b?.sneakPeak,K,!1);return Array.from({length:Math.max(ee?k:r?Math.min(k-t+1,k):"auto"===e?0:Math.ceil(k/Number(e)),0)},(e,t)=>t)},[k,en,K,eo,b?.sneakPeak,ee]),ep=e=>{let t=e*ed();return t>=j-ed()&&(t=j-ed()),t},em=e=>{let t="edit"===Q?{[e]:!1}:b?.enableDrag;return d(t,e)};a(f,()=>({nextSlideInteraction:ek,previousSlideInteraction:eh,moveToSlideInteraction:eP,getSwiper:()=>c}));let ef=e=>{c?.slideTo(e),S&&S(e)},ec=(e,t)=>{let{key:r,data:n,isRollback:a,element:i}=e,l=Math.max(c?.activeIndex??0,0);if(a&&void 0===n)return;if(a){if("specific"===t){let{previousData:e}=Z(i,r);ef(Number(e))}else ef("next"===t?l-1:l+1);return}let s="specific"===t?Math.max(J.current,0):l;Y(i,r,s.toString());let o="specific"===t?Number(n):"next"===t?l+1:l-1;ef(o)},ek=e=>{ec(e,"next")},eh=e=>{ec(e,"previous")},eP=e=>{ec(e,"specific")},ew=ed(),ey=r(()=>!!j&&c&&d(b?.dot,K)&&!ea&&k>1,[j,c,b?.dot,K,ea,k]),eb=d(b?.vertical,K,!1)?"vertical":"horizontal",eg=r(()=>d(b?.sneakPeak,K,!1)&&"center"===d(b?.sneakPeakType,K)&&"number"==typeof d(b?.itemNumber,K)&&Number(d(b?.itemNumber,K))>1,[b?.sneakPeak,b?.sneakPeakType,b?.itemNumber,K]),ev=e=>{let{swiperWidth:t,slidesPerView:r,itemNumberByDevice:n,centeredSlides:a}=e;if(!a||!n)return 0;let i=t/r,l=(Number(n)-2)/2-1;return-(i/2+l*i)},eT=r(()=>{let e=d(R,K,!1),t=c?.width??0,r={0:"mobile",768:"tablet",1025:"desktop"},n=Number(Object.entries(r).find(([,e])=>e===K)?.[0]??1025),a=Object.entries(r).reduce((e,[r,n])=>{if(!e)return;let a=Number(r),i=d(b?.sneakPeak,n,!1),l=i&&"center"===d(b?.sneakPeakType,n),s=d(b?.itemNumber,n),o=em(n),u=ev({swiperWidth:t,slidesPerView:ew,itemNumberByDevice:s,centeredSlides:l}),p=b?.initialSlide||w||0;return e[a]={allowTouchMove:o,slidesOffsetBefore:u,slidesOffsetAfter:u,initialSlide:p,centeredSlides:l},e},{}),i=d(b?.sneakPeak,K,!1)&&"center"===d(b?.sneakPeakType,K)&&"number"==typeof d(b?.itemNumber,K)&&Number(d(b?.itemNumber,K))>1;return{speed:y?.playSpeed??500,dir:b?.rtl?"rtl":"ltr",spaceBetween:d(y?.spacing,K)||0,loop:e,slidesPerView:"auto"===d(en,K,1)?"auto":ew,direction:eb,breakpoints:a,isSneakPeekCenter:i,slidesOffsetBefore:a?.[n]?.slidesOffsetBefore,thumbs:{slideThumbActiveClass:"gem-slider-item-active"},loopPreventsSliding:!1,touchStartPreventDefault:!1,autoplay:!!b?.autoplay&&{delay:(b?.autoplayTimeout??1)*1e3,pauseOnMouseEnter:b?.pauseOnHover,stopOnLastSlide:!e}}},[b?.autoplay,y?.playSpeed,b?.rtl,y?.spacing,K,R,ew,b?.sneakPeakType,b?.pauseOnHover,b?.autoplayTimeout,c?.width,j]),eN=d(b?.sneakPeak,K),ex=n(e=>{let t=c&&c.params?.slidesPerView,r=t?c?.slidesPerViewDynamic():1;if(e<=1)return!1;let n="auto"===eT.slidesPerView?r:eT.slidesPerView;if(!ee||e<Number(n)||!O)return!1;let a=d(b?.sneakPeak,K,!1),i=a&&"center"===d(b?.sneakPeakType,K),l=Number.isNaN(Number(n))?1:Math.ceil(Number(n));i&&l%2==0&&(l+=1);let s=i?Math.max(1,Math.ceil(l/2)):1;return e<l+s},[c,eT.slidesPerView,ee,O,b?.sneakPeak,b?.sneakPeakType,K]);i(()=>{let e=`[data-id="${P?.uid}"]`;X({event:"gp:change-next-slide",selector:e,elementRef:W},e=>{let{data:t,isRollback:r,uniqueStorageKey:n}=e||{};ek({element:W.current,data:t,isRollback:r,key:n})}),X({event:"gp:change-previous-slide",selector:e,elementRef:W},e=>{let{data:t,isRollback:r,uniqueStorageKey:n}=e||{};eh({element:W.current,data:t,isRollback:r,key:n})}),X({event:"gp:change-image-step",selector:e,elementRef:W},e=>{let{data:t,isRollback:r,uniqueStorageKey:n}=e||{};eP({element:W.current,data:t,isRollback:r,key:n})}),X({event:"gp:change-index-slide",selector:e},t=>{let r=document.querySelector(e),{data:n,isRollback:a,uniqueStorageKey:i}=t||{};eP({element:r,data:n,isRollback:a,key:i})})},[]),i(()=>{H(k)},[k]);let eS=n(()=>{N||(G(0),M(!0),z(!1),A(!0),V(!1))},[N]);i(()=>{if("number"==typeof w){if(J.current=w,c&&c.realIndex!==w||G(w),c?.params?.loop){c?.slideToLoop(w);return}c?.slideTo(w)}},[c,w,g]);let eE=n(()=>{let e=d(b?.loop,K,!1);if(!c)return;if(!eg||e){c.allowSlideNext=!0,c.allowSlidePrev=!0;return}let t=eu().length;if(!t){c.allowSlideNext=!0,c.allowSlidePrev=!0;return}let r=c.snapIndex>=t-1;c.isEnd=r,c.allowSlideNext=!r,c.allowSlidePrev=!0},[c,b?.loop,K,eg,eu]);return i(()=>{if(!c)return;let e=()=>{H(c.slides.length),eE(),A(c.isBeginning),V(c.isEnd)},t=()=>{E&&E(c.realIndex)},r=()=>{let e=d(b?.loop,K,!1);eg&&!e&&(c.allowSlideNext=!0,c.allowSlidePrev=!0)},n=()=>{let e=d(b?.loop,K,!1);if(eg&&!e){let e=eu().length,t=e-1,r=c.rtlTranslate?c.snapGrid[t]:-c.snapGrid[t];if(e&&Number.isFinite(r)){let e=c.rtlTranslate?c.translate>r:c.translate<r;e&&(c.allowSlideNext=!0,c.slideTo(t,0,!1))}}eE()},a=()=>{let e=d(b?.sneakPeak,K,!1)&&"center"!==d(b?.sneakPeakType,K);G(!ee&&e?c.snapIndex:c.realIndex),A(c.isBeginning),V(c.isEnd),M(c?.translate===0),z(c?.translate<=c?.maxTranslate())};return c.on("transitionEnd",a),c.on("slideChange",e),c.on("slideChangeTransitionStart",t),c.on("touchStart",r),c.on("touchEnd",n),()=>{c?.off("slideChange",e),c?.off("slideChangeTransitionStart",t),c?.off("transitionEnd",a),c?.off("touchStart",r),c?.off("touchEnd",n)}},[eT.loop,c,eE,ee,K,b?.sneakPeak,b?.sneakPeakType,b?.loop,eg]),i(()=>{if(!c)return;let e=eg?eu().length:0;e>0&&c.snapIndex>=e&&c.slideTo(e-1,0),eE(),A(c.isBeginning),V(c.isEnd)},[ea,c,en,eg,eu,eE]),i(()=>{c?.wrapperEl&&(c.wrapperEl.style.transitionTimingFunction=b?.animationMode??"ease")},[c,b?.animationMode]),i(()=>{if(c&&c.autoplay){let e="edit"===Q?!!U&&b?.runPreview&&b?.autoplay:b?.autoplay;e?c.autoplay.start():c.autoplay.stop()}},[c,b?.autoplay,Q,U,b?.runPreview]),i(()=>{let e=e=>{if(P?.uid!==e?.detail.componentUid)return;let t=e?.detail.index||0;c?.slideToLoop(t)};return window.addEventListener("move-to-idx",e),()=>window.removeEventListener("move-to-idx",e)},[c,P?.uid]),i(()=>{if(!c)return;let e=c.el;e?.classList?.remove("swiper-horizontal","swiper-vertical");let t=d(b?.vertical,K)?"swiper-vertical":"swiper-horizontal";e?.classList?.add(t),c?.slides?.forEach(e=>{e.style.width="",e.style.height=""}),c?.update(),c?.wrapperEl&&c.width&&c.wrapperEl.style.setProperty("width",`${c.width}px`)},[K,b?.vertical,c,c?.params,y?.sizeSetting,D]),i(()=>{let e;let t=c?.el;if(!t||"undefined"==typeof ResizeObserver)return;let r=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(()=>{!c.destroyed&&(c.update(),c.wrapperEl&&c.width&&c.wrapperEl.style.setProperty("width",`${c.width}px`))})});return r.observe(t),()=>{cancelAnimationFrame(e),r.disconnect()}},[c]),i(()=>{if(!c||!T)return;let e=()=>{let e=c?.slides?.slice(0,k)||[],t=Number(eT?.spaceBetween||0),r=e.reduce((e,t)=>e+t.offsetHeight,0)+t*(e.length-1),n=e.reduce((e,t)=>e+t.offsetWidth,0)+t*(e.length-1),a=c.params?.direction==="horizontal"?n>(c.width||0):r>(c.height||0);C(a)};return e(),c.on("resize",e),c.on("update",e),c.on("slidesLengthChange",e),c.on("orientationchange",e),()=>{c.off("resize",e),c.off("update",e),c.off("slidesLengthChange",e),c.off("orientationchange",e)}},[c]),{isInfinity:ee,sliderSettings:eT,totalSlideItem:j,currentSlide:q,localRef:W,isRenderDots:ey,isNavigationEnabled:ei,isNavigationVisible:el,isScrollToStart:I,isScrollToEnd:L,handleDotClick:(e,t)=>{let r=b?.sneakPeak?.[K]?e:t?e:ep(e);if(t){if(k<ew){c?.slideTo(r);return}if(c?.realIndex===r)return;if(r===Number(c?.realIndex)+1||0===r&&c?.realIndex===k-1)return c?.slideNext();if(r===Number(c?.realIndex)-1||r===k-1&&c?.realIndex===0)return c?.slidePrev();let e=d(b?.sneakPeak,K,!1)&&"center"===d(b?.sneakPeakType,K)&&"number"==typeof d(b?.itemNumber,K)&&Number(d(b?.itemNumber,K))%2==0;e?c?.slideToLoopCenterSneakPeek(r):c?.slideToLoop(r)}else c?.slideTo(r);J.current=r},getItemsPerPage:ed,handleNextAndPrevSlide:e=>{"next"===e?c?.slideNext():c?.slidePrev(),x&&(h&&clearTimeout(h),h=setTimeout(()=>x&&x(),500))},dispatchEventSelectSlide:e=>{_({event:"gp:rollback:select-slide",selector:`[data-id="${P?.uid}"]`,element:v?.current}),_({event:"gp:select-slide",selector:`[data-id="${P?.uid}"]`,data:e,element:v?.current})},getNumberOfFullWidthShow:eo,shouldDuplicateSlides:ex,isHideNavigation:ea,sneakPeak:eN,swiperIsBeginning:B,swiperIsEnd:F,handleSwiperReset:eS}};export{m as useCarousel};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as l,useProduct as
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as l,useProduct as o,useCurrentDevice as C,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,useProductStore as s,getResponsiveValueByScreen as p,useI18nStore as m,filterToolbarPreview as c}from"@gem-sdk/core";import{useMemo as f,useState as g,useEffect as h,Children as u,isValidElement as y}from"react";import D from"./components/feature-gallery/FeatureImageWithGallery.js";import I from"./components/feature-only/OnlyFeatureImage.js";import b from"./components/lightbox/ProductImagesLightBox.js";import M from"../../../common/components/NoDataState.js";import{getProductImagesClassName as Z}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as k}from"./common/getBorderActiveCss.js";import w from"./components/gallery-grid/GalleryGrid.js";let v=e=>e?.medias?.edges.map(e=>e?.node),E=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],V=V=>{let L=f(()=>a(V),[V]),{redirectProductShopifyLink:x}=l(),{setting:H,styles:O,builderProps:B,builderAttrs:j,style:F,children:S}=L,A=o(),P=C(),T=r(),{isChangeSelectedOption:G}=n(),_=d(),N=s(e=>e.setProductFeaturedImage),[z,R]=g(!1),[J,U]=g(!1),W=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,X=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="IMAGE")?.node,q=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,K=f(()=>H?.typeDisplay==="all-images"&&!G,[G,H?.typeDisplay]),Q=f(()=>{if(K){let e;switch(H?.preDisplay){case"1st-images":e=X(A);break;case"1st-3d-mode":e=q(A);break;case"1st-video":e=W(A);break;case"1st-available-variant":e=T?.media}return N(e),e}},[K,H?.preDisplay,N,A,T?.media]),Y=f(()=>H?.filterByVariant==="selected_variant",[H?.filterByVariant]),$=f(()=>{let e=v(A);return e?.length?e:[{id:A?.featuredImage?.id||"noImageError",baseID:A?.featuredImage?.baseID||"noImageError",src:A?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:A?.featuredImage?.width||480,height:A?.featuredImage?.height||480}]},[A]),ee=f(()=>{if(!Y||!T?.selectedOptions?.length)return $;let e=T.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),t=e.join("-"),a=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),i=$?.filter(e=>{if(!e?.alt)return!1;let i=a(e.alt),l=a(t),o=i===l||i.includes(l);return"all-variants"===i||o});return i?.length>0?i:$},[T?.selectedOptions,Y,$]),et=f(()=>$.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[$]),ea=f(()=>p(O?.position,P),[P,O?.position]),ei=({imageID:e,enableOpenLightBox:t,isClickFromFeatureImage:a=!1})=>{eo(e),t&&(U(a),el())},el=()=>{R(!0)},eo=e=>{if(!e)return;let t=et[e];if(void 0!==t){let e=$[t];e&&N(e)}};h(()=>{if(!T||K)return;let e=et[T?.mediaId],t=Y&&"only-feature"!==ea?ee[0]:void 0,a=void 0!==e?$[e]??A?.featuredImage:t;a&&N(a)},[T,et,$,ee,A?.featuredImage,N,K,Y,ea]);let eC=f(()=>{let e="popup"===p(H?.ftClickOpenLightBox,P)||p(H?.clickOpenLightBox,P);return e||"edit"!==_||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[H?.ftClickOpenLightBox,H?.clickOpenLightBox,P,_]),er=()=>ee.length>0?u.map(c(S),t=>y(t)?e(t.type,{...t.props,isInsideProductImage:!0,navigationPosition:H?.ftNavigationPosition,imageData:{imageShape:O?.ftShape,imageAlign:O?.align,imageLayout:O?.position},dotData:{dotSize:H?.ftDotSize,dotGapToCarousel:H?.ftDotGapToCarousel,dotStyle:H?.ftDotStyle}}):null):null,en=`
|
|
3
3
|
<svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
4
4
|
<path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
|
|
5
5
|
<path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
|
|
@@ -23,4 +23,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineS
|
|
|
23
23
|
<path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
|
|
24
24
|
<path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
|
|
25
25
|
</svg>
|
|
26
|
-
`,{t:ed}=m(),es=e(M,{elementType:"secondary",description:ed("Catch your customer's attention with attracted media."),descriptionActions:[{text:ed("Add image"),callback:x},{text:ed("sync data"),callback:"syncProduct"}],additionalMedia:en}),{wrapperClasses:ep}=Z(V);return t("div",{...j,className:ep,style:F,children:[e("style",{dangerouslySetInnerHTML:{__html:k({settings:{...H,...O},uid:B?.uid,type:"React"})}}),E.includes(ea)&&e(D,{...L,isFilterByVariantEnabled:Y,gallery:ee,featureGallery:$,priorityFeatureImage:Q,onHandleClickImage:(e,t,a)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:a}),noDataChildren:es,children:er()}),"only-feature"===ea&&e(I,{gallery:$,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:!0}),noDataChildren:es,children:er()}),["one-col","two-col"].includes(ea)&&e(w,{gallery:ee,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t}),noDataChildren:es,children:er()}),
|
|
26
|
+
`,{t:ed}=m(),es=e(M,{elementType:"secondary",description:ed("Catch your customer's attention with attracted media."),descriptionActions:[{text:ed("Add image"),callback:x},{text:ed("sync data"),callback:"syncProduct"}],additionalMedia:en}),{wrapperClasses:ep}=Z(V);return t("div",{...j,className:ep,style:F,children:[e("style",{dangerouslySetInnerHTML:{__html:k({settings:{...H,...O},uid:B?.uid,type:"React"})}}),E.includes(ea)&&e(D,{...L,isFilterByVariantEnabled:Y,gallery:ee,featureGallery:$,priorityFeatureImage:Q,onHandleClickImage:(e,t,a)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:a}),noDataChildren:es,children:er()}),"only-feature"===ea&&e(I,{gallery:$,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:!0}),noDataChildren:es,children:er()}),["one-col","two-col"].includes(ea)&&e(w,{gallery:ee,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t}),noDataChildren:es,children:er()}),eC&&e(b,{productImages:J?$:ee,builderPropUID:B?.uid,open:z,onHandleClose:()=>R(!1),imageRatio:i(O?.ftShape)}),c(S,!0)]})};export{V as default};
|