@gem-sdk/components 19.0.0-staging.56 → 19.0.0-staging.58
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/common/common.js +1 -1
- package/dist/cjs/product/components/product-images-v3/common/getBorderActiveCss.js +3 -2
- package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js +1 -1
- package/dist/cjs/product/components/product-images-v3/hooks/useGalleryCarousel.js +1 -1
- package/dist/esm/product/components/product-images-v3/common/common.js +1 -1
- package/dist/esm/product/components/product-images-v3/common/getBorderActiveCss.js +1 -0
- package/dist/esm/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js +1 -1
- package/dist/esm/product/components/product-images-v3/hooks/useGalleryCarousel.js +1 -1
- package/package.json +1 -1
|
@@ -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,9 +1,10 @@
|
|
|
1
|
-
"use strict";var e=require("@gem-sdk/core");exports.getBorderActiveCss=({settings:t,uid:i,type:r})=>{let
|
|
2
|
-
${
|
|
1
|
+
"use strict";var e=require("@gem-sdk/core");exports.getBorderActiveCss=({settings:t,uid:i,type:r})=>{let o="Liquid"===r?`.gem-slider-item-${i}-{{product.id}}.gp-gallery-image-item::after, .gem-slider-item-gp-gallery-${i}-{{product.id}}.gp-gallery-image-item.gem-slider-item-active::after`:`.gem-slider-item-active.gem-slider-item-${i}.gp-gallery-image-item::after`;return`
|
|
2
|
+
${o} {
|
|
3
3
|
content: "";
|
|
4
4
|
height: 100%;
|
|
5
5
|
width: 100%;
|
|
6
6
|
position: absolute;
|
|
7
|
+
box-sizing: border-box;
|
|
7
8
|
z-index: 999;
|
|
8
9
|
top: 0;
|
|
9
10
|
left: 0;
|
package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),s=require("../../common/common.js"),r=require("../../common/productGallery.js"),a=require("../../composables/getProductImagesClassName.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),s=require("../../common/common.js"),r=require("../../common/productGallery.js"),a=require("../../composables/getProductImagesClassName.js"),i=require("../../composables/getProductImagesStyles.js"),o=require("../../composables/getProductImagesAttr.js"),l=require("../../common/productFeaturedImage.js"),u=require("../child/MediaIcon.js"),c=require("../lightbox/ButtonOpenLightBox.js"),d=require("../../../../../image/components/NextImage.js"),n=require("../../../../../carousel-v3/components/root/Carousel.js"),m=require("../../../../../carousel-v3/components/item/CarouselItem.js"),g=require("../../hooks/useGalleryCarousel.js"),p=require("@gem-sdk/system");exports.default=y=>{let{builderPropUID:j,productImages:h,onSwiperReady:q,activeIndexFormFeatureImage:I,onClickFeatureArrow:C,builderPropsClass:x,arrow:b,priorityFeatureImage:P,...f}=y,v=t.useCurrentDevice(),{galleryItemClasses:T}=a.getProductImagesClassName(f),{galleryCarouselSettingAttrs:w}=o.getProductImagesAttr(f),{galleryCarouselStyle:k,galleryCarouselItemStyle:A}=i.getProductImagesStyles(f),{moveToIdx:M,isDisplay:N,shapeByLayout:S,isEnableBorderActive:F,isShowButtonLightbox:G,filteredProductImages:H,handleClickCarouselItem:R,safeMoveToIdx:$,setSliderReady:B}=g.useGalleryCarousel(y);return e.jsx(e.Fragment,{children:N&&e.jsx(n.default,{parentClass:x,rootClass:x,setting:w,styles:k,slidesClass:r.getEditorMinHeightClass(v,f.position,f.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:$,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&B(!0)},onSwiperReady:q,children:H?.map((t,r)=>{let a=l.isFeatureMedia(t.contentType)?t.previewImage:t.src;return e.jsxs(m.default,{contentType:"productImage",className:T(`gp-gallery-image-item gem-slider-item-${j} ${r===M&&F?"gem-slider-item-active":""}`),onClickItem:()=>R(t?.id),style:A,"data-id":t?.id,children:[e.jsx(d.default,{draggable:"false",src:a,width:t?.width,height:t?.height,alt:t?.alt,setting:{aspectRatio:s.getAspectRatio(S),layout:f?.layout,qualityPercent:f?.qualityPercent,qualityType:f?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e.jsx(u.default,{contentType:t?.contentType||""}),p.If(G,e.jsx(c.default,{}))]},t?.id)})})})};
|
|
@@ -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");exports.useGalleryCarousel=
|
|
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||""),I=e.useEditorMode(),[S,q]=t.useState(0),v=t.useRef(),[C,b]=t.useState(S),[E,T]=t.useState(!1),{filteredProductImages:V}=r.useFilterImagesByVariant({productImages:l,displayByVariant:m?.displayByVariant,variantSelect:m?.variantSelect});t.useEffect(()=>{g(p||"")},[p]),t.useEffect(()=>{v.current&&clearTimeout(v.current),B&&(v.current=setTimeout(()=>{q(c||0),g("")}))},[c]),t.useEffect(()=>{if(y){let e=V?.findIndex(e=>e.id===y.id);q(a(e)),g("")}},[y,V]),t.useEffect(()=>{let e=V?.findIndex(e=>e.id===f?.id);q(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"===I)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,I]);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(S)},80)),()=>{e&&clearTimeout(e)}},[S,V,E]),{moveToIdx:S,isDisplay:R,shapeByLayout:k,isEnableBorderActive:G,isShowButtonLightbox:L,filteredProductImages:V,handleClickCarouselItem:e=>{n&&n(e||"",x)},setSliderReady:T,safeMoveToIdx:C}};
|
|
@@ -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};
|
package/dist/esm/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{getAspectRatio as s}from"../../common/common.js";import{getEditorMinHeightClass as m}from"../../common/productGallery.js";import{getProductImagesClassName as i}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as a}from"../../composables/getProductImagesStyles.js";import{getProductImagesAttr as l}from"../../composables/getProductImagesAttr.js";import{isFeatureMedia as n}from"../../common/productFeaturedImage.js";import c from"../child/MediaIcon.js";import p from"../lightbox/ButtonOpenLightBox.js";import d from"../../../../../image/components/NextImage.js";import u from"../../../../../carousel-v3/components/root/Carousel.js";import g from"../../../../../carousel-v3/components/item/CarouselItem.js";import{useGalleryCarousel as y}from"../../hooks/useGalleryCarousel.js";import{If as h}from"@gem-sdk/system";let f=f=>{let{builderPropUID:j,productImages:C,onSwiperReady:I,activeIndexFormFeatureImage:b,onClickFeatureArrow:P,builderPropsClass:T,arrow:
|
|
1
|
+
import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r}from"@gem-sdk/core";import{getAspectRatio as s}from"../../common/common.js";import{getEditorMinHeightClass as m}from"../../common/productGallery.js";import{getProductImagesClassName as i}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as a}from"../../composables/getProductImagesStyles.js";import{getProductImagesAttr as l}from"../../composables/getProductImagesAttr.js";import{isFeatureMedia as n}from"../../common/productFeaturedImage.js";import c from"../child/MediaIcon.js";import p from"../lightbox/ButtonOpenLightBox.js";import d from"../../../../../image/components/NextImage.js";import u from"../../../../../carousel-v3/components/root/Carousel.js";import g from"../../../../../carousel-v3/components/item/CarouselItem.js";import{useGalleryCarousel as y}from"../../hooks/useGalleryCarousel.js";import{If as h}from"@gem-sdk/system";let f=f=>{let{builderPropUID:j,productImages:C,onSwiperReady:I,activeIndexFormFeatureImage:b,onClickFeatureArrow:P,builderPropsClass:T,arrow:v,priorityFeatureImage:w,...x}=f,k=r(),{galleryItemClasses:q}=i(x),{galleryCarouselSettingAttrs:N}=l(x),{galleryCarouselStyle:A,galleryCarouselItemStyle:G}=a(x),{moveToIdx:S,isDisplay:$,shapeByLayout:B,isEnableBorderActive:H,isShowButtonLightbox:L,filteredProductImages:M,handleClickCarouselItem:R,safeMoveToIdx:D,setSliderReady:E}=y(f);return e(o,{children:$&&e(u,{parentClass:T,rootClass:T,setting:N,styles:A,slidesClass:m(k,x.position,x.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:D,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&E(!0)},onSwiperReady:I,children:M?.map((o,r)=>{let m=n(o.contentType)?o.previewImage:o.src;return t(g,{contentType:"productImage",className:q(`gp-gallery-image-item gem-slider-item-${j} ${r===S&&H?"gem-slider-item-active":""}`),onClickItem:()=>R(o?.id),style:G,"data-id":o?.id,children:[e(d,{draggable:"false",src:m,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(B),layout:x?.layout,qualityPercent:x?.qualityPercent,qualityType:x?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e(c,{contentType:o?.contentType||""}),h(L,e(p,{}))]},o?.id)})})})};export{f 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=
|
|
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,...v}=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:v?.displayByVariant,variantSelect:v?.variantSelect});s(()=>{x(I||"")},[I]),s(()=>{S.current&&clearTimeout(S.current),O&&(S.current=setTimeout(()=>{P(f||0),x("")}))},[f]),s(()=>{if(q){let e=w?.findIndex(e=>e.id===q.id);P(u(e)),x("")}},[q,w]),s(()=>{let e=w?.findIndex(e=>e.id===b?.id);P(u(e)),x("")},[b,w]);let z=l(()=>d({shape:v.shape,shapeForBottom:v.shapeForBottom,shapeFor1Col:v.shapeFor1Col,shapeFor2Col:v.shapeFor2Col,shapeForFtOnly:v.shapeForFtOnly,shapeForInsideBottom:v.shapeForInsideBottom,shapeForInside:v.shapeForInside},v.position),[v.shape,v.shapeForBottom,v.shapeFor1Col,v.shapeFor2Col,v.shapeForFtOnly,v.position,v.shapeForInsideBottom,v.shapeForInside]),R=n(()=>{m({builderPropUID:F,shapeByLayout:z,qualityType:v.qualityType,qualityPercent:v.qualityPercent})},[z,v.qualityPercent,v.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(v.clickOpenLightBox,T),D=l(()=>{let e=c({shapeByLayout:z});return o(e,T)},[z,T]),E=l(()=>v?.borderActive?.border!=="none",[v?.borderActive?.border]),H=o(v?.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};
|