@gem-sdk/components 19.0.0-staging.57 → 19.0.0-staging.59
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.
- package/dist/cjs/product/components/product-images-v3/ProductImageV3.js +2 -2
- package/dist/cjs/product/components/product-images-v3/common/common.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js +1 -1
- package/dist/cjs/product/components/product-images-v3/hooks/useGalleryCarousel.js +1 -1
- package/dist/cjs/product/components/product-images-v3/hooks/useProductGalleryGrid.js +1 -1
- package/dist/esm/product/components/product-images-v3/ProductImageV3.js +2 -2
- package/dist/esm/product/components/product-images-v3/common/common.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js +1 -1
- package/dist/esm/product/components/product-images-v3/hooks/useGalleryCarousel.js +1 -1
- package/dist/esm/product/components/product-images-v3/hooks/useProductGalleryGrid.js +1 -1
- package/package.json +1 -1
|
@@ -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"),C=require("./components/lightbox/ProductImagesLightBox.js"),r=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),
|
|
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"),C=require("./components/lightbox/ProductImagesLightBox.js"),r=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?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:
|
|
26
|
+
`,{t:J}=a.useI18nStore(),X=e.jsx(r.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(C.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
|
-
"use strict";var e=require("@gem-sdk/core");const t=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},o=t=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{let
|
|
1
|
+
"use strict";var e=require("@gem-sdk/core");const t=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},o=t=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{let i=e.getResponsiveValueByScreen(t,r)?.shapeValue;if(i)o={...o,[r]:i};else{let i=e.getResponsiveValueByScreen(t,r)?.shape;switch(i){case"square":o={...o,[r]:"1/1"};break;case"vertical":o={...o,[r]:"3/4"};break;case"horizontal":o={...o,[r]:"4/3"};break;case"original":o={...o,[r]:""}}}}),e.makeAspectRatio(o)},r=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},i=e=>{let t=e.match(/\d+/g);return t?t[0]:e},l=["only-feature","one-col","two-col"];exports.checkAddOverFlowClass=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",i=e?.["--btlr"]||"0px",l=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==i||"0px"!==l},exports.convertSpacing=e=>{if(!e)return{desktop:5};let o=t(e.desktop,5),r=t(e.tablet,o),i=t(e.mobile,r);return{desktop:o,tablet:r,mobile:i}},exports.convertSpacingForIndisdeLayout=r,exports.convertUnitToNumber=t,exports.getAspectRatio=o,exports.getConditionRenderGalleryImages=(t,o)=>{let r=!0,i=!1;return["desktop","mobile","tablet"].forEach(l=>{let s=e.getResponsiveValueByScreen(t,l),n=e.getResponsiveValueByScreen(o,l);s&&"only-feature"!==s&&(r=!1),(["two-col","one-col"].includes(s)||"images"===n)&&(i=!0)}),{isOnlyFeatureAllDevices:r,isRenderGalleryGrid:i}},exports.getDisplayStyle=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},exports.getFeatureGalleryComponentKey=(t,o,r)=>{let i=e.getResponsiveValueByScreen(t?.ftShape,o)?.shape==="original",l=i?e.getResponsiveValueByScreen(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),l,o,r].join("|")},exports.getGalleryCarouselShouldInitByLayout=t=>{let o={};return e.DEVICES.forEach(r=>{let i=e.getResponsiveValueByScreen(t,r);o[r]=null==i||!l.includes(i)}),o},exports.getPaddingBottomByShapeSetting=t=>{let r=o(t),l={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(o=>{let s=e.getResponsiveValueByScreen(t,o),n=s?.height,a=s?.width||"",p=i(n||""),u=a.toString().match(/px/g)?i(a):a;if(n&&a&&!isNaN(Number(p))&&!isNaN(Number(u))){l={...l,[o]:`${Number(p)/Number(u)*100}%`};return}if(n&&!isNaN(Number(p))){l={...l,[o]:n};return}let c=r?.[o]!=="auto"&&r?.[o]?r?.[o]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";l={...l,[o]:`calc((${c})*100%)`}}),l},exports.getSrcImage=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,exports.getStyleGridLayout=t=>{let o={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let r=!1;e.DEVICES.forEach(i=>{let l=e.getResponsiveValueByScreen(t.position,i),s=e.getResponsiveValueByScreen(t.ratioLayout,i),n=e.getResponsiveValueByScreen(t.ratioLayoutRight,i),a="desktop"===i?"--gtc":`--gtc-${i}`,p="desktop"===i?"--gtr":`--gtr-${i}`,u="left"===l?s:n,c=["left","right"].includes(l||"");c&&u?(r=!0,Object.assign(o={...o,[a]:`minmax(0, ${u[0]}fr) minmax(0, ${u[1]}fr)`},{[p]:"fit-content(0)"})):r&&Object.assign(o,{[p]:"unset"})})}return o},exports.getStyleGridOrderForFeature=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(r=>{let i=e.getResponsiveValueByScreen(t.position,r),l="desktop"===r?"--o":`--o-${r}`;o={...o,[l]:"left"===i?"1":"0"}}),o},exports.getStyleGridOrderForGallery=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(r=>{let i=e.getResponsiveValueByScreen(t.position,r),l="desktop"===r?"--o":`--o-${r}`;o={...o,[l]:"left"===i?"0":"1"}}),o},exports.getStyleInsideLayout=(t,o,i)=>{let l={},s={},n={},a={},p={},u={};return["desktop","mobile","tablet"].forEach(c=>{let d=e.getResponsiveValueByScreen(t,c),g=e.getResponsiveValueByScreen(o,c)?.width,m=e.getResponsiveValueByScreen(i,c);if(l={...l,[c]:["inside-bottom","inside-left","inside-right"].includes(d)?"absolute":"static"},["inside-bottom"].includes(d)){let e=r(m);g=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(d)&&(g="100%"),n={...n,[c]:"inside-bottom"===d?`${m}`:"auto"},a={...a,[c]:["inside-left","inside-right"].includes(d)?`${m}`:"auto"},u={...u,[c]:["inside-bottom","inside-left"].includes(d)?`${m}`:"auto"},p={...p,[c]:"inside-right"===d?`${m}`:"auto"},s={...s,[c]:g}}),{...e.makeStyleResponsive("pos",l),...e.makeStyleResponsive("w",e.removeNullUndefined(s)),...e.makeStyleResponsive("bottom",e.removeNullUndefined(n)),...e.makeStyleResponsive("top",e.removeNullUndefined(a)),...e.makeStyleResponsive("left",e.removeNullUndefined(u)),...e.makeStyleResponsive("right",e.removeNullUndefined(p))}},exports.getTypeWidthDevice=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},exports.setDefaultWhenUndefineSetting=e=>({...e,setting:{...e.setting}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("@gem-sdk/core"),r=require("../../common/hoverAction.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("@gem-sdk/core"),r=require("../../common/hoverAction.js"),o=require("../../composables/getProductImagesStyles.js"),a=require("../../composables/getProductImagesClassName.js"),l=require("../../composables/getProductImagesAttr.js"),u=require("@gem-sdk/system"),i=require("../../common/styles.js"),n=require("../../../../../carousel-v3/components/root/Carousel.js"),d=require("../../../../../carousel-v3/components/item/CarouselItem.js"),c=require("./ProductFeaturedImageOnly.js"),m=require("../../hooks/useProductFeaturedImageCarousel.js");const g=t.forwardRef((g,p)=>{let{productImages:h,imgRef:v,onHandleClick:f,onClickArrow:j,onHandleLoaded:y,onHandleUpdateActiveIndex:I,swiperUpdateTrigger:x,builderPropUID:C,builderPropsClass:M,parentUid:q,enableThumbsLink:S=!0,...w}=g,P=t.useRef(null),{ref:b,imageActive:O,imageActiveIndex:R,imageShowWhenHover:k,enableOpenLightBox:A,filteredProductImages:H,isRenderFeatureCarousel:N,genRandomKey:B,getAspectRatioFinal:F,emitUpdateActiveIndex:W}=m.useProductFeaturedImageCarousel(g);t.useImperativeHandle(p,()=>({getSwiper:()=>P.current?.getSwiper()||null}));let D=s.useCurrentDevice(),{galleryItemClasses:L,featureImageOnlyOneImageClasses:T}=a.getProductImagesClassName(w),{featuredImageCarouselStyle:_,featureImageCarouselItemStyle:V}=o.getProductImagesStyles(w),$=u.createStyle({...i.getFeaturedImageOnlyOneImageStyle({setting:w,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:z}=l.getProductImagesAttr(w);return e.jsx("div",{ref:b,"data-slot":"children",className:"product-feature-image",children:N?e.jsx(n.default,{ref:P,parentClass:M,elmRef:v,setting:z,styles:_,builderProps:{uid:C},isHiddenArrowWhenDisabled:!0,onLoaded:e=>y&&y(e),onChangeActive:e=>W(e),onClickArrow:()=>j&&j(B()),moveToIdx:R,disableMarginAuto:!0,thumbsSwiper:S?`#gp-carousel-${C}-carousel`:void 0,onHandleChangeSlideByInteraction:e=>{let t=H?.length??0;f(H?.[e>=t?0:e]?.id??"",A)},children:H?.map(t=>e.jsx(d.default,{contentType:"productImage",className:L("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=s.getResponsiveValueByScreen(w?.ftClickOpenLightBox,D);"none"!==e&&f(t?.id??"",A)},style:{...V,aspectRatio:F()?.[D]},onMouseMove:e=>r.handleMouseMove(e,w),onMouseOut:e=>r.handleMouseOut(e),children:e.jsx(c.default,{image:t,imageShowWhenHover:k,setting:w,aspectRatio:F()})},t?.id))}):e.jsx("div",{ref:v,className:"gp-flex gp-w-full",style:{...s.makeStyleResponsive("jc",w?.align)},"data-id":C,children:e.jsx("div",{"aria-hidden":"true",className:T,style:$,onMouseMove:e=>r.handleMouseMove(e,w),onMouseOut:e=>r.handleMouseOut(e),onBlur:()=>void 0,onClick:()=>{f(O?.id??"",A)},children:e.jsx(c.default,{image:O,imageShowWhenHover:k,setting:w,aspectRatio:F(O)})})})})});var p=t.memo(g);exports.default=p;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),t=require("react"),i=require("../gallery-carousel/GalleryCarousel.js"),l=require("../child/ProductGalleryGrid.js"),s=require("../child/ProductFeaturedImageCarousel.js"),u=require("../../composables/getProductImagesStyles.js"),d=require("../../composables/getProductImagesClassName.js"),a=require("../../hooks/useFeatureImageWithGallery.js"),n=require("../../common/common.js");exports.default=o=>{let{setting:c,styles:m,builderProps:g,gallery:p,featureGallery:f,onHandleClickImage:I,priorityFeatureImage:h,children:b,noDataChildren:v,isFilterByVariantEnabled:y}=o,{isEditMode:C}=r.useRenderMode(),x=t.useRef(null),j=r.useCurrentDevice(),P=t.useRef(p);P.current=p;let F=t.useRef(f??p);F.current=f??p;let k=t.useRef(null);t.useEffect(()=>()=>{k.current?.(),k.current=null},[]);let q=t.useCallback((e,r)=>{if(e.destroyed||r.destroyed)return;let t=F.current[e.realIndex]?.id;if(void 0===t)return;let i=P.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let s=l?.getBoundingClientRect(),u=r.el?.getBoundingClientRect();if(!s||!u){r.slideTo(i);return}let d=r.params?.direction==="vertical"?s.top>=u.top-1&&s.bottom<=u.bottom+1:s.left>=u.left-1&&s.right<=u.right+1;d||r.slideTo(i)},[]),R=t.useCallback(e=>{if(!x.current)return;let r=x.current.getSwiper();if(r&&e){if(k.current?.(),k.current=null,y){let t=()=>q(r,e);r.on("slideChange",t),k.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[y,q]),w={...c,...m},{isShowCarousel:G,featureImageHeight:H,featureWrapperImage:N,onClickFeatureArrow:D,activeIndexFromFeatureImage:L,setOnClickFeatureArrow:S,onHandleLoadedFeatureImage:U,setActiveIndexFromFeatureImage:$}=a.useFeatureImageWithGallery(o),A=t.useMemo(()=>{if(void 0===L)return;let e=(f??p)[L]?.id;if(void 0===e)return;let r=p.findIndex(r=>r?.id===e);return r>-1?r:void 0},[L,f,p]);if(p?.[0]?.id==="noImageError"&&C)return e.jsx(e.Fragment,{children:v});let{ftImageGalleryClasses:E,imageGalleryWrapperClasses:M}=d.getProductImagesClassName(o),{wrapperFeaturedImageStyle:T,featureImageStyle:B,galleryImageStyle:W}=u.getProductImagesStyles(w,{gallery:p,featureImageHeight:H}),_=`${n.getFeatureGalleryComponentKey(w,j,G)}|${y?"variant-filtered":"all-media"}`;return e.jsxs("div",{className:r.cls("gp-grid gp-w-full gp-relative"),style:T,children:[e.jsxs("div",{className:E,style:B,children:[b,e.jsx(s.default,{ref:x,imgRef:N,productImages:f??p,enableThumbsLink:!y,...w,onHandleClick:(e,r)=>I(e||"",r,!0),onHandleLoaded:U,onHandleUpdateActiveIndex:$,onClickArrow:e=>S(e),builderPropUID:g?.uid,builderPropsClass:`gp-product-images-feature-${g?.uid}`})]}),p.length>(y?0:1)&&e.jsx("div",{className:M,style:W,children:G?e.jsx(i.default,{productImages:p,position:w?.position,...w,builderPropUID:g?.uid,onHandleClick:(e,r)=>I(e||"",r),onSwiperReady:R,activeIndexFormFeatureImage:A,priorityFeatureImage:h,onClickFeatureArrow:D,builderPropsClass:`gp-product-images-gallery-${g?.uid}`}):e.jsx(l.default,{productImages:p,...w,builderPropUID:g?.uid,onHandleClick:(e,r)=>I(e||"",r),activeIndexFromFeatureImage:A,isHiddenInteraction:!0})})]},_)};
|
package/dist/cjs/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),s=require("../child/ProductFeaturedImageCarousel.js"),t=require("../../composables/getProductImagesClassName.js"),a=require("../../composables/getProductImagesStyles.js");exports.default=
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),s=require("../child/ProductFeaturedImageCarousel.js"),t=require("../../composables/getProductImagesClassName.js"),a=require("../../composables/getProductImagesStyles.js");exports.default=u=>{let{isEditMode:d}=r.useRenderMode(),{setting:l,styles:o,gallery:i,builderProps:c,noDataChildren:g,onHandleClickImage:m,children:n}=u,p={...l,...o};if(i?.[0]?.id==="noImageError"&&d)return e.jsx(e.Fragment,{children:g});let{featureImageOnlyOneImageClasses:j}=t.getProductImagesClassName(p),{featureImageStyle:I}=a.getProductImagesStyles(p);return e.jsxs("div",{className:j,style:I,children:[e.jsx(s.default,{productImages:i,...p,onHandleClick:(e,r)=>{m(e||"",r)},builderPropUID:c?.uid,builderPropsClass:`gp-product-images-gallery-${c?.uid}`}),n]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@gem-sdk/core"),t=require("react"),r=require("./useFilterImagesByVariant.js"),s=require("../../../../image/common/helpers.js"),o=require("../common/productGallery.js");const a=e=>void 0!==e&&e>=0?e:0;exports.useGalleryCarousel=i=>{let{builderPropUID:u,productImages:l,onHandleClick:n,activeIndexFormFeatureImage:c,onClickFeatureArrow:p,builderPropsClass:d,arrow:h,priorityFeatureImage:y,...m}=i,F=e.useCurrentDevice(),f=e.useFeaturedImageGlobal(),[B,g]=t.useState(p||""),
|
|
1
|
+
"use strict";var e=require("@gem-sdk/core"),t=require("react"),r=require("./useFilterImagesByVariant.js"),s=require("../../../../image/common/helpers.js"),o=require("../common/productGallery.js");const a=e=>void 0!==e&&e>=0?e:0;exports.useGalleryCarousel=i=>{let{builderPropUID:u,productImages:l,onHandleClick:n,activeIndexFormFeatureImage:c,onClickFeatureArrow:p,builderPropsClass:d,arrow:h,priorityFeatureImage:y,...m}=i,F=e.useCurrentDevice(),f=e.useFeaturedImageGlobal(),[B,g]=t.useState(p||""),v=e.useEditorMode(),[I,S]=t.useState(0),q=t.useRef(),[C,b]=t.useState(I),[E,T]=t.useState(!1),{filteredProductImages:V}=r.useFilterImagesByVariant({productImages:l,displayByVariant:m?.displayByVariant,variantSelect:m?.variantSelect});t.useEffect(()=>{g(p||"")},[p]),t.useEffect(()=>{q.current&&clearTimeout(q.current),B&&(q.current=setTimeout(()=>{void 0!==c&&S(c),g("")}))},[c]),t.useEffect(()=>{if(y){let e=V?.findIndex(e=>e.id===y.id);S(a(e)),g("")}},[y,V]),t.useEffect(()=>{let e=V?.findIndex(e=>e.id===f?.id);S(a(e)),g("")},[f,V]);let k=t.useMemo(()=>o.getShapeByLayout({shape:m.shape,shapeForBottom:m.shapeForBottom,shapeFor1Col:m.shapeFor1Col,shapeFor2Col:m.shapeFor2Col,shapeForFtOnly:m.shapeForFtOnly,shapeForInsideBottom:m.shapeForInsideBottom,shapeForInside:m.shapeForInside},m.position),[m.shape,m.shapeForBottom,m.shapeFor1Col,m.shapeFor2Col,m.shapeForFtOnly,m.position,m.shapeForInsideBottom,m.shapeForInside]),O=t.useCallback(()=>{s.handleSetSrcForProductImageList({builderPropUID:u,shapeByLayout:k,qualityType:m.qualityType,qualityPercent:m.qualityPercent})},[k,m.qualityPercent,m.qualityType,u]);t.useEffect(()=>{if("edit"===v)return;let e=document?.querySelector(`.gem-slider-item-${u} .product-list-image`);if(!e)return;O();let t=new ResizeObserver(()=>{O()});return t?.observe(e,{}),()=>{t?.disconnect()}},[O,u,v]);let x=e.getResponsiveValueByScreen(m.clickOpenLightBox,F),R=t.useMemo(()=>{let t=o.checkDisplayGalleryByWidth({shapeByLayout:k});return e.getResponsiveValueByScreen(t,F)},[k,F]),G=t.useMemo(()=>m?.borderActive?.border!=="none",[m?.borderActive?.border]),L=e.getResponsiveValueByScreen(m?.clickOpenLightBox,F);return t.useEffect(()=>{let e;return V&&V.length>0&&E&&(e=setTimeout(()=>{b(I)},80)),()=>{e&&clearTimeout(e)}},[I,V,E]),{moveToIdx:I,isDisplay:R,shapeByLayout:k,isEnableBorderActive:G,isShowButtonLightbox:L,filteredProductImages:V,handleClickCarouselItem:e=>{n&&n(e||"",x)},setSliderReady:T,safeMoveToIdx:C}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@gem-sdk/core"),r=require("react"),t=require("../common/productGallery.js"),a=require("./useFilterImagesByVariant.js"),s=require("../../../../image/common/helpers.js");exports.useProductGalleryGrid=o=>{let{builderPropUID:i,productImages:l,activeIndexFromFeatureImage:n,children:u,isHiddenInteraction:c,...p}=o,y=e.useCurrentDevice(),d=e.useFeaturedImageGlobal(),[h,F]=r.useState(0),m=e.useEditorMode(),{filteredProductImages:B}=a.useFilterImagesByVariant({productImages:l,displayByVariant:p?.displayByVariant,variantSelect:p?.variantSelect}),g=t.getShapeByLayout({shape:p.shape,shapeForBottom:p.shapeForBottom,shapeFor1Col:p.shapeFor1Col,shapeFor2Col:p.shapeFor2Col,shapeForFtOnly:p.shapeForFtOnly,shapeForInsideBottom:p.shapeForInsideBottom,shapeForInside:p.shapeForInside},p.position),q=e.getResponsiveValueByScreen(p.clickOpenLightBox,y),
|
|
1
|
+
"use strict";var e=require("@gem-sdk/core"),r=require("react"),t=require("../common/productGallery.js"),a=require("./useFilterImagesByVariant.js"),s=require("../../../../image/common/helpers.js");exports.useProductGalleryGrid=o=>{let{builderPropUID:i,productImages:l,activeIndexFromFeatureImage:n,children:u,isHiddenInteraction:c,...p}=o,y=e.useCurrentDevice(),d=e.useFeaturedImageGlobal(),[h,F]=r.useState(0),m=e.useEditorMode(),{filteredProductImages:B}=a.useFilterImagesByVariant({productImages:l,displayByVariant:p?.displayByVariant,variantSelect:p?.variantSelect}),g=t.getShapeByLayout({shape:p.shape,shapeForBottom:p.shapeForBottom,shapeFor1Col:p.shapeFor1Col,shapeFor2Col:p.shapeFor2Col,shapeForFtOnly:p.shapeForFtOnly,shapeForInsideBottom:p.shapeForInsideBottom,shapeForInside:p.shapeForInside},p.position),q=e.getResponsiveValueByScreen(p.clickOpenLightBox,y),v=t.checkDisplayGalleryByWidth({shapeByLayout:g}),f=e.getResponsiveValueByScreen(v,y),I=p?.borderActive?.border!=="none",S=r.useCallback(()=>{s.handleSetSrcForProductImageList({builderPropUID:i,shapeByLayout:g,qualityType:p.qualityType,qualityPercent:p.qualityPercent})},[g,p.qualityPercent,p.qualityType,i]);return r.useEffect(()=>{void 0!==n&&F(n)},[n]),r.useEffect(()=>{let e=B?.findIndex(e=>e.id===d?.id);F(e&&e>0?e:0)},[d,B]),r.useEffect(()=>{if("edit"===m)return;let e=document?.querySelector(".grid-gallery");if(!e)return;S();let r=new ResizeObserver(()=>{S()});return r?.observe(e,{}),()=>{r?.disconnect()}},[S,i,m]),{isDisplay:f,shapeByLayout:g,imageActiveIndex:h,enableOpenLightBox:q,isEnableBorderActive:I,filteredProductImages:B}};
|
|
@@ -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 C,useCurrentDevice as o,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,useProductStore as s,getResponsiveValueByScreen as p,useI18nStore 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 C,useCurrentDevice as o,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 g,useState as f,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=g(()=>a(V),[V]),{redirectProductShopifyLink:x}=l(),{setting:H,styles:O,builderProps:B,builderAttrs:j,style:F,children:S}=L,A=C(),P=o(),T=r(),{isChangeSelectedOption:G}=n(),_=d(),N=s(e=>e.setProductFeaturedImage),[z,R]=f(!1),[J,U]=f(!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=g(()=>H?.typeDisplay==="all-images"&&!G,[G,H?.typeDisplay]),Q=g(()=>{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=g(()=>H?.filterByVariant==="selected_variant",[H?.filterByVariant]),$=g(()=>{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=g(()=>{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),C=i===l||i.includes(l);return"all-variants"===i||C});return i?.length>0?i:$},[T?.selectedOptions,Y,$]),et=g(()=>$.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[$]),ea=g(()=>p(O?.position,P),[P,O?.position]),ei=({imageID:e,enableOpenLightBox:t,isClickFromFeatureImage:a=!1})=>{eC(e),t&&(U(a),el())},el=()=>{R(!0)},eC=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?ee[0]:void 0,a=void 0!==e?$[e]??A?.featuredImage:t;a&&N(a)},[T,et,$,ee,A?.featuredImage,N,K,Y]);let eo=g(()=>{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:
|
|
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()}),eo&&e(b,{productImages:J?$:ee,builderPropUID:B?.uid,open:z,onHandleClose:()=>R(!1),imageRatio:i(O?.ftShape)}),c(S,!0)]})};export{V as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as i,removeNullUndefined as l}from"@gem-sdk/core";let r=(e,t,o)
|
|
1
|
+
import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as i,removeNullUndefined as l}from"@gem-sdk/core";let r=(t,o,i)=>{let l=e(t?.ftShape,o)?.shape==="original",r=l?e(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),r,o,i].join("|")},a=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,i=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:i}},n=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},s=e=>{if(!e)return{desktop:5};let t=n(e.desktop,5),o=n(e.tablet,t),i=n(e.mobile,o);return{desktop:t,tablet:o,mobile:i}},u=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(i=>{o={...o,[`--d${"desktop"===i?"":`-${i}`}`]:`${e(i)?"none":t}`}}),o},d=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",i=e?.["--bbrr"]||"0px",l=e?.["--btlr"]||"0px",r=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==i||"0px"!==l||"0px"!==r},c=o=>{let i={};return["desktop","mobile","tablet"].forEach(t=>{let l=e(o,t)?.shapeValue;if(l)i={...i,[t]:l};else{let l=e(o,t)?.shape;switch(l){case"square":i={...i,[t]:"1/1"};break;case"vertical":i={...i,[t]:"3/4"};break;case"horizontal":i={...i,[t]:"4/3"};break;case"original":i={...i,[t]:""}}}}),t(i)},b=t=>{let i={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let l=!1;o.forEach(o=>{let r=e(t.position,o),a=e(t.ratioLayout,o),n=e(t.ratioLayoutRight,o),s="desktop"===o?"--gtc":`--gtc-${o}`,u="desktop"===o?"--gtr":`--gtr-${o}`,d="left"===r?a:n,c=["left","right"].includes(r||"");c&&d?(l=!0,Object.assign(i={...i,[s]:`minmax(0, ${d[0]}fr) minmax(0, ${d[1]}fr)`},{[u]:"fit-content(0)"})):l&&Object.assign(i,{[u]:"unset"})})}return i},m=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t.position,i),r="desktop"===i?"--o":`--o-${i}`;o={...o,[r]:"left"===l?"1":"0"}}),o},p=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t.position,i),r="desktop"===i?"--o":`--o-${i}`;o={...o,[r]:"left"===l?"0":"1"}}),o},g=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,f=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},h=(t,o,r)=>{let a={},n={},s={},u={},d={},c={};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t,i),b=e(o,i)?.width,m=e(r,i);if(a={...a,[i]:["inside-bottom","inside-left","inside-right"].includes(l)?"absolute":"static"},["inside-bottom"].includes(l)){let e=f(m);b=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(l)&&(b="100%"),s={...s,[i]:"inside-bottom"===l?`${m}`:"auto"},u={...u,[i]:["inside-left","inside-right"].includes(l)?`${m}`:"auto"},c={...c,[i]:["inside-bottom","inside-left"].includes(l)?`${m}`:"auto"},d={...d,[i]:"inside-right"===l?`${m}`:"auto"},n={...n,[i]:b}}),{...i("pos",a),...i("w",l(n)),...i("bottom",l(s)),...i("top",l(u)),...i("left",l(c)),...i("right",l(d))}},y=(t,o)=>{let i=!0,l=!1;return["desktop","mobile","tablet"].forEach(r=>{let a=e(t,r),n=e(o,r);a&&"only-feature"!==a&&(i=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(l=!0)}),{isOnlyFeatureAllDevices:i,isRenderGalleryGrid:l}},k=e=>({...e,setting:{...e.setting}}),$=e=>{let t=e.match(/\d+/g);return t?t[0]:e},N=t=>{let o=c(t),i={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(l=>{let r=e(t,l),a=r?.height,n=r?.width||"",s=$(a||""),u=n.toString().match(/px/g)?$(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(u))){i={...i,[l]:`${Number(s)/Number(u)*100}%`};return}if(a&&!isNaN(Number(s))){i={...i,[l]:a};return}let d=o?.[l]!=="auto"&&o?.[l]?o?.[l]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";i={...i,[l]:`calc((${d})*100%)`}}),i},x=["only-feature","one-col","two-col"],S=t=>{let i={};return o.forEach(o=>{let l=e(t,o);i[o]=null==l||!x.includes(l)}),i};export{d as checkAddOverFlowClass,s as convertSpacing,f as convertSpacingForIndisdeLayout,n as convertUnitToNumber,c as getAspectRatio,y as getConditionRenderGalleryImages,u as getDisplayStyle,r as getFeatureGalleryComponentKey,S as getGalleryCarouselShouldInitByLayout,N as getPaddingBottomByShapeSetting,g as getSrcImage,b as getStyleGridLayout,m as getStyleGridOrderForFeature,p as getStyleGridOrderForGallery,h as getStyleInsideLayout,a as getTypeWidthDevice,k as setDefaultWhenUndefineSetting};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as t,useRef as r,useImperativeHandle as s}from"react";import{useCurrentDevice as a,getResponsiveValueByScreen as i,makeStyleResponsive as m}from"@gem-sdk/core";import{handleMouseOut as l,handleMouseMove as n}from"../../common/hoverAction.js";import{getProductImagesStyles as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as t,useRef as r,useImperativeHandle as s}from"react";import{useCurrentDevice as a,getResponsiveValueByScreen as i,makeStyleResponsive as m}from"@gem-sdk/core";import{handleMouseOut as l,handleMouseMove as n}from"../../common/hoverAction.js";import{getProductImagesStyles as d}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as c}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as u}from"../../composables/getProductImagesAttr.js";import{createStyle as p}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as g}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import v from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as C}from"../../hooks/useProductFeaturedImageCarousel.js";let j=t((o,t)=>{let{productImages:j,imgRef:I,onHandleClick:w,onClickArrow:y,onHandleLoaded:b,onHandleUpdateActiveIndex:k,swiperUpdateTrigger:M,builderPropUID:P,builderPropsClass:S,parentUid:x,enableThumbsLink:A=!0,...H}=o,N=r(null),{ref:R,imageActive:O,imageActiveIndex:B,imageShowWhenHover:F,enableOpenLightBox:W,filteredProductImages:L,isRenderFeatureCarousel:T,genRandomKey:D,getAspectRatioFinal:$,emitUpdateActiveIndex:q}=C(o);s(t,()=>({getSwiper:()=>N.current?.getSwiper()||null}));let z=a(),{galleryItemClasses:E,featureImageOnlyOneImageClasses:G}=c(H),{featuredImageCarouselStyle:J,featureImageCarouselItemStyle:K}=d(H),Q=p({...g({setting:H,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:U}=u(H);return e("div",{ref:R,"data-slot":"children",className:"product-feature-image",children:T?e(f,{ref:N,parentClass:S,elmRef:I,setting:U,styles:J,builderProps:{uid:P},isHiddenArrowWhenDisabled:!0,onLoaded:e=>b&&b(e),onChangeActive:e=>q(e),onClickArrow:()=>y&&y(D()),moveToIdx:B,disableMarginAuto:!0,thumbsSwiper:A?`#gp-carousel-${P}-carousel`:void 0,onHandleChangeSlideByInteraction:e=>{let o=L?.length??0;w(L?.[e>=o?0:e]?.id??"",W)},children:L?.map(o=>e(h,{contentType:"productImage",className:E("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=i(H?.ftClickOpenLightBox,z);"none"!==e&&w(o?.id??"",W)},style:{...K,aspectRatio:$()?.[z]},onMouseMove:e=>n(e,H),onMouseOut:e=>l(e),children:e(v,{image:o,imageShowWhenHover:F,setting:H,aspectRatio:$()})},o?.id))}):e("div",{ref:I,className:"gp-flex gp-w-full",style:{...m("jc",H?.align)},"data-id":P,children:e("div",{"aria-hidden":"true",className:G,style:Q,onMouseMove:e=>n(e,H),onMouseOut:e=>l(e),onBlur:()=>void 0,onClick:()=>{w(O?.id??"",W)},children:e(v,{image:O,imageShowWhenHover:F,setting:H,aspectRatio:$(O)})})})})});var I=o(j);export{I as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as r,jsxs as
|
|
1
|
+
import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as l,cls as o}from"@gem-sdk/core";import{useRef as d,useEffect as a,useCallback as s,useMemo as n}from"react";import u from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import c from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as p}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as g}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as f}from"../../hooks/useFeatureImageWithGallery.js";import{getFeatureGalleryComponentKey as I}from"../../common/common.js";let h=h=>{let{setting:b,styles:v,builderProps:y,gallery:C,featureGallery:x,onHandleClickImage:F,priorityFeatureImage:P,children:j,noDataChildren:k,isFilterByVariantEnabled:w}=h,{isEditMode:H}=i(),G=d(null),L=l(),N=d(C);N.current=C;let R=d(x??C);R.current=x??C;let U=d(null);a(()=>()=>{U.current?.(),U.current=null},[]);let $=s((e,r)=>{if(e.destroyed||r.destroyed)return;let t=R.current[e.realIndex]?.id;if(void 0===t)return;let i=N.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let o=l?.getBoundingClientRect(),d=r.el?.getBoundingClientRect();if(!o||!d){r.slideTo(i);return}let a=r.params?.direction==="vertical"?o.top>=d.top-1&&o.bottom<=d.bottom+1:o.left>=d.left-1&&o.right<=d.right+1;a||r.slideTo(i)},[]),A=s(e=>{if(!G.current)return;let r=G.current.getSwiper();if(r&&e){if(U.current?.(),U.current=null,w){let t=()=>$(r,e);r.on("slideChange",t),U.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[w,$]),D={...b,...v},{isShowCarousel:S,featureImageHeight:T,featureWrapperImage:B,onClickFeatureArrow:E,activeIndexFromFeatureImage:W,setOnClickFeatureArrow:q,onHandleLoadedFeatureImage:z,setActiveIndexFromFeatureImage:J}=f(h),K=n(()=>{if(void 0===W)return;let e=(x??C)[W]?.id;if(void 0===e)return;let r=C.findIndex(r=>r?.id===e);return r>-1?r:void 0},[W,x,C]);if(C?.[0]?.id==="noImageError"&&H)return e(r,{children:k});let{ftImageGalleryClasses:M,imageGalleryWrapperClasses:O}=g(h),{wrapperFeaturedImageStyle:Q,featureImageStyle:V,galleryImageStyle:X}=p(D,{gallery:C,featureImageHeight:T}),Y=`${I(D,L,S)}|${w?"variant-filtered":"all-media"}`;return t("div",{className:o("gp-grid gp-w-full gp-relative"),style:Q,children:[t("div",{className:M,style:V,children:[j,e(c,{ref:G,imgRef:B,productImages:x??C,enableThumbsLink:!w,...D,onHandleClick:(e,r)=>F(e||"",r,!0),onHandleLoaded:z,onHandleUpdateActiveIndex:J,onClickArrow:e=>q(e),builderPropUID:y?.uid,builderPropsClass:`gp-product-images-feature-${y?.uid}`})]}),C.length>(w?0:1)&&e("div",{className:O,style:X,children:S?e(u,{productImages:C,position:D?.position,...D,builderPropUID:y?.uid,onHandleClick:(e,r)=>F(e||"",r),onSwiperReady:A,activeIndexFormFeatureImage:K,priorityFeatureImage:P,onClickFeatureArrow:E,builderPropsClass:`gp-product-images-gallery-${y?.uid}`}):e(m,{productImages:C,...D,builderPropUID:y?.uid,onHandleClick:(e,r)=>F(e||"",r),activeIndexFromFeatureImage:K,isHiddenInteraction:!0})})]},Y)};export{h as default};
|
package/dist/esm/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,Fragment as r,jsxs as
|
|
2
|
+
import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{useRenderMode as t}from"@gem-sdk/core";import s from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesClassName as m}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as a}from"../../composables/getProductImagesStyles.js";let l=l=>{let{isEditMode:d}=t(),{setting:i,styles:u,gallery:c,builderProps:p,noDataChildren:g,onHandleClickImage:n,children:f}=l,I={...i,...u};if(c?.[0]?.id==="noImageError"&&d)return e(r,{children:g});let{featureImageOnlyOneImageClasses:P}=m(I),{featureImageStyle:b}=a(I);return o("div",{className:P,style:b,children:[e(s,{productImages:c,...I,onHandleClick:(e,r)=>{n(e||"",r)},builderPropUID:p?.uid,builderPropsClass:`gp-product-images-gallery-${p?.uid}`}),f]})};export{l as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as t,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{useState as i,useRef as a,useEffect as s,useMemo as l,useCallback as n}from"react";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";import{getShapeByLayout as d,checkDisplayGalleryByWidth as c}from"../common/productGallery.js";let u=e=>void 0!==e&&e>=0?e:0,h=h=>{let{builderPropUID:F,productImages:y,onHandleClick:B,activeIndexFormFeatureImage:f,onClickFeatureArrow:I,builderPropsClass:C,arrow:g,priorityFeatureImage:q
|
|
1
|
+
import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as t,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{useState as i,useRef as a,useEffect as s,useMemo as l,useCallback as n}from"react";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";import{getShapeByLayout as d,checkDisplayGalleryByWidth as c}from"../common/productGallery.js";let u=e=>void 0!==e&&e>=0?e:0,h=h=>{let{builderPropUID:F,productImages:y,onHandleClick:B,activeIndexFormFeatureImage:f,onClickFeatureArrow:I,builderPropsClass:C,arrow:g,priorityFeatureImage:v,...q}=h,T=e(),b=r(),[O,x]=i(I||""),k=t(),[j,P]=i(0),S=a(),[V,A]=i(j),[G,L]=i(!1),{filteredProductImages:w}=p({productImages:y,displayByVariant:q?.displayByVariant,variantSelect:q?.variantSelect});s(()=>{x(I||"")},[I]),s(()=>{S.current&&clearTimeout(S.current),O&&(S.current=setTimeout(()=>{void 0!==f&&P(f),x("")}))},[f]),s(()=>{if(v){let e=w?.findIndex(e=>e.id===v.id);P(u(e)),x("")}},[v,w]),s(()=>{let e=w?.findIndex(e=>e.id===b?.id);P(u(e)),x("")},[b,w]);let z=l(()=>d({shape:q.shape,shapeForBottom:q.shapeForBottom,shapeFor1Col:q.shapeFor1Col,shapeFor2Col:q.shapeFor2Col,shapeForFtOnly:q.shapeForFtOnly,shapeForInsideBottom:q.shapeForInsideBottom,shapeForInside:q.shapeForInside},q.position),[q.shape,q.shapeForBottom,q.shapeFor1Col,q.shapeFor2Col,q.shapeForFtOnly,q.position,q.shapeForInsideBottom,q.shapeForInside]),R=n(()=>{m({builderPropUID:F,shapeByLayout:z,qualityType:q.qualityType,qualityPercent:q.qualityPercent})},[z,q.qualityPercent,q.qualityType,F]);s(()=>{if("edit"===k)return;let e=document?.querySelector(`.gem-slider-item-${F} .product-list-image`);if(!e)return;R();let r=new ResizeObserver(()=>{R()});return r?.observe(e,{}),()=>{r?.disconnect()}},[R,F,k]);let $=o(q.clickOpenLightBox,T),D=l(()=>{let e=c({shapeByLayout:z});return o(e,T)},[z,T]),E=l(()=>q?.borderActive?.border!=="none",[q?.borderActive?.border]),H=o(q?.clickOpenLightBox,T);return s(()=>{let e;return w&&w.length>0&&G&&(e=setTimeout(()=>{A(j)},80)),()=>{e&&clearTimeout(e)}},[j,w,G]),{moveToIdx:j,isDisplay:D,shapeByLayout:z,isEnableBorderActive:E,isShowButtonLightbox:H,filteredProductImages:w,handleClickCarouselItem:e=>{B&&B(e||"",$)},setSliderReady:L,safeMoveToIdx:V}};export{h as useGalleryCarousel};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as o,getResponsiveValueByScreen as t}from"@gem-sdk/core";import{useState as i,useCallback as a,useEffect as s}from"react";import{getShapeByLayout as l,checkDisplayGalleryByWidth as n}from"../common/productGallery.js";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";let d=d=>{let{builderPropUID:y,productImages:c,activeIndexFromFeatureImage:h,children:u,isHiddenInteraction:F,...f}=d,B=e(),q=r(),[g,
|
|
1
|
+
import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as o,getResponsiveValueByScreen as t}from"@gem-sdk/core";import{useState as i,useCallback as a,useEffect as s}from"react";import{getShapeByLayout as l,checkDisplayGalleryByWidth as n}from"../common/productGallery.js";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as m}from"../../../../image/common/helpers.js";let d=d=>{let{builderPropUID:y,productImages:c,activeIndexFromFeatureImage:h,children:u,isHiddenInteraction:F,...f}=d,B=e(),q=r(),[g,v]=i(0),I=o(),{filteredProductImages:b}=p({productImages:c,displayByVariant:f?.displayByVariant,variantSelect:f?.variantSelect}),C=l({shape:f.shape,shapeForBottom:f.shapeForBottom,shapeFor1Col:f.shapeFor1Col,shapeFor2Col:f.shapeFor2Col,shapeForFtOnly:f.shapeForFtOnly,shapeForInsideBottom:f.shapeForInsideBottom,shapeForInside:f.shapeForInside},f.position),O=t(f.clickOpenLightBox,B),P=n({shapeByLayout:C}),j=t(P,B),x=f?.borderActive?.border!=="none",G=a(()=>{m({builderPropUID:y,shapeByLayout:C,qualityType:f.qualityType,qualityPercent:f.qualityPercent})},[C,f.qualityPercent,f.qualityType,y]);return s(()=>{void 0!==h&&v(h)},[h]),s(()=>{let e=b?.findIndex(e=>e.id===q?.id);v(e&&e>0?e:0)},[q,b]),s(()=>{if("edit"===I)return;let e=document?.querySelector(".grid-gallery");if(!e)return;G();let r=new ResizeObserver(()=>{G()});return r?.observe(e,{}),()=>{r?.disconnect()}},[G,y,I]),{isDisplay:j,shapeByLayout:C,imageActiveIndex:g,enableOpenLightBox:O,isEnableBorderActive:x,filteredProductImages:b}};export{d as useProductGalleryGrid};
|