@gem-sdk/components 12.0.0-dev.146 → 12.0.0-dev.147
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/carousel-v3/components/root/common/helpers.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.liquid.js +40 -48
- package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.liquid.js +1 -1
- package/dist/esm/carousel-v3/components/root/common/helpers.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.liquid.js +30 -38
- package/dist/esm/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.liquid.js +4 -4
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@gem-sdk/core"),t=require("@gem-sdk/system");exports.getData=r=>{let o=["mobile","tablet","desktop"],{setting:
|
|
1
|
+
"use strict";var e=require("@gem-sdk/core"),t=require("@gem-sdk/system");exports.getData=r=>{let o=["mobile","tablet","desktop"],{setting:s,rootId:a,builderProps:i,styles:l,moveToIdx:n,isHiddenArrowWhenDisabled:p,renderByLayout:u,rootAttrs:c}=r,g=a??i?.uid,d=`gp-carousel-slider-${i?.uid}`,{enableAction:y={desktop:!0},navigationStyle:S,navigationEnable:f={desktop:!0}}=s??{},k=t.createStateOrContext({id:g,moveToIdx:n,isHiddenArrowWhenDisabled:p,setting:s,styles:l,renderByLayout:u,type:c?.type});return{loopConfig:(()=>{let t=s?.loop;return o.forEach(r=>{t={...t,[r]:!!e.getResponsiveValueByScreen(y)&&t?.[r]}}),t})(),stateData:JSON.stringify(k).replaceAll("'","'"),uniqueComponentId:g,arrowShowConfig:(()=>{let t=S;return o.forEach(r=>{t={...t,[r]:e.getResponsiveValueByScreen(f,r)?e.getResponsiveValueByScreen(t,r):"none"}}),t})(),sliderSelector:d}};
|
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),i=require("../../common/common.js"),a=require("../../common/productFeaturedImage.js"),t=require("../../../../../video/components/HTML5Embed.liquid.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),i=require("../../common/common.js"),a=require("../../common/productFeaturedImage.js"),t=require("../../../../../video/components/HTML5Embed.liquid.js"),r=require("../../../../../image/components/Modal3d.liquid.js"),s=require("../../../../../image/components/NextImage.liquid.js"),d=require("../../../../../image/components/Video.liquid.js"),u=require("../../../../helpers/function.js"),o=require("../../composables/getProductImagesStyles.js"),l=require("../../composables/getProductImagesClassName.js"),g=require("../../composables/getProductImagesAttr.js"),c=require("@gem-sdk/system"),n=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),m=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");exports.default=({builderPropUID:p,children:f,enableLazyLoadImage:y,...h})=>{let{featuredImageCarouselClasses:I,galleryItemClasses:q,featuredCarouselItemClasses:b}=l.getProductImagesClassName({...h,builderProps:{uid:p}}),{featuredImageCarouselStyle:v,featureImageStyle:M,featureImageCarouselOnlyOneImageStyle:_,featureImageOnlyOneImageStyle:w,featureImageCarouselItemStyle:$}=o.getProductImagesStyles(h),{featuredImageCarouselSettingAttrs:L}=g.getProductImagesAttr(h),S=i.getAspectRatio(h.ftShape),x=c.If("other"==h.hoverEffect,c.LiquidIf("product.media.size > 1","group-hover:gp-opacity-0")),j=()=>`
|
|
2
2
|
{% case featureMedia.media_type %}
|
|
3
3
|
{% when 'image' %}
|
|
4
4
|
${R()}
|
|
5
5
|
{% when 'external_video' %}
|
|
6
6
|
{% assign mediaSourceVideo = featureMedia | external_video_url %}
|
|
7
|
-
${
|
|
7
|
+
${z()}
|
|
8
8
|
{% when 'video' %}
|
|
9
9
|
{% assign mediaSourceVideo = featureMedia.sources.last.url %}
|
|
10
|
-
${
|
|
10
|
+
${P()}
|
|
11
11
|
{% when 'model' %}
|
|
12
|
-
${
|
|
12
|
+
${O()}
|
|
13
13
|
{% else %}
|
|
14
|
-
${
|
|
14
|
+
${k()}
|
|
15
15
|
{% endcase %}
|
|
16
|
-
`,
|
|
17
|
-
${
|
|
18
|
-
${
|
|
19
|
-
${
|
|
16
|
+
`,O=()=>r.default({src:c.LiquidIf("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:S}),z=()=>d.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:S}),P=()=>{let i=c.createStyle({...a.getVideoHeight(h?.ftLayout),...e.makeStyleResponsive("objf",h?.ftLayout)}),r=c.createStyle({...a.getVideoHeight(h?.ftLayout)});return t.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:r,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...i},className:"gp-invisible"})},R=()=>e.template`
|
|
17
|
+
${C(e.cls("gp-w-full gp-transition-opacity",x,"{{shouldHidden}}"))}
|
|
18
|
+
${c.If(h?.hoverEffect!=="none",`<div class="${e.cls("zoom-element !gp-max-w-none",a.getZoomImageClass())}">
|
|
19
|
+
${C("image-zoom",!0)}
|
|
20
20
|
</div>`," ")}
|
|
21
|
-
${
|
|
22
|
-
`,
|
|
21
|
+
${c.If(h?.hoverEffect=="zoom"&&h?.zoomType=="glasses",`<div class="${e.cls("zoom-lens-element",a.getZoomLenClass())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
|
|
22
|
+
`,C=(a,t)=>e.template`
|
|
23
23
|
{% assign src = featureMedia.src %}
|
|
24
|
-
${
|
|
24
|
+
${c.If(t&&"other"==h.hoverEffect,`{% assign media_length = product.media | size %}
|
|
25
25
|
{% assign other_image_index = ${h.otherImage} | plus: 0 %}
|
|
26
26
|
{% if other_image_index >= media_length %}
|
|
27
27
|
{% assign other_image_index = media_length | minus: 1 %}
|
|
28
28
|
{% endif %}
|
|
29
29
|
{% assign otherImage = product.media[other_image_index] %}
|
|
30
|
-
${
|
|
30
|
+
${c.LiquidIf("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
|
|
31
31
|
`)}
|
|
32
|
-
${s.default({srcIsLiquidCode:!0,src:
|
|
33
|
-
${s.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},priority:h?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:y})}`,T=i.getPaddingBottomByShapeSetting(h.ftShape),
|
|
34
|
-
${
|
|
32
|
+
${s.default({srcIsLiquidCode:!0,src:c.LiquidIf("src != null",i.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:c.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${i.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},priority:h?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${a??""}`,enableLazyLoadImage:y})}`,k=()=>e.template`
|
|
33
|
+
${s.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},priority:h?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:y})}`,T=i.getPaddingBottomByShapeSetting(h.ftShape),N=a.checkRenderFeaturedCarousel(h),W="gp-featured-image-wrapper",A=c.LiquidIf("product.media.size > 0",`{% assign largestRatio = 0 %}
|
|
34
|
+
${c.LiquidFor("featureMedia in product.media",`
|
|
35
35
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
36
36
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
37
37
|
{% assign ratio = height | divided_by: width %}
|
|
38
|
-
${
|
|
38
|
+
${c.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
|
|
39
39
|
`)}
|
|
40
|
-
${
|
|
40
|
+
${c.LiquidFor("featureMedia in product.media",`${c.LiquidIf("featureMedia.media_type == 'image'",`${c.LiquidFor("image in product.images",c.LiquidIf("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
|
|
41
41
|
|
|
42
|
-
${
|
|
42
|
+
${c.Liquid(`{% assign productImageWidth = 0 %}
|
|
43
43
|
{% case featureMedia.media_type %}
|
|
44
44
|
{% when 'image' %}
|
|
45
45
|
{% assign productImageWidth = featureMedia.width %}
|
|
46
46
|
{% else %}
|
|
47
47
|
{% assign productImageWidth = featureMedia.preview_image.width %}
|
|
48
48
|
{% endcase %}`)}
|
|
49
|
-
${
|
|
49
|
+
${m.default({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${q("gp-ft-image-item !gp-min-w-full !gp-max-w-full ")}`,parentId:`ft-${p}-{{section.id}}-{{product.id}}`,style:$,customStyle:{width:"{{productImageWidth}}px"},children:`
|
|
50
50
|
<div
|
|
51
|
-
class="gp-w-full gp-relative ${
|
|
52
|
-
style="${
|
|
51
|
+
class="gp-w-full gp-relative ${c.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
52
|
+
style="${u.getStyleOfObject(e.makeStyleResponsive("pb",T))} ${c.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
|
|
53
53
|
>
|
|
54
|
-
${
|
|
54
|
+
${j()}
|
|
55
55
|
</div>
|
|
56
56
|
`})}`)}
|
|
57
|
-
`,s.default({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:h?.preload,setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:y}));return
|
|
57
|
+
`,s.default({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:h?.preload,setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:y}));return c.Liquid(`
|
|
58
58
|
{% capture featureImageOnlyOne %}
|
|
59
|
-
${
|
|
59
|
+
${c.Liquid(`
|
|
60
60
|
{% assign featureMedia = variant.featured_media %}
|
|
61
61
|
{% unless featureMedia %}
|
|
62
62
|
{% assign featureMedia = product.featured_media %}
|
|
63
63
|
{% endunless %}
|
|
64
|
-
${
|
|
64
|
+
${c.LiquidIf("product.media.size > 1",(()=>{switch(h?.preDisplay){case"1st-images":return`
|
|
65
65
|
{% assign featureMedia = product.media.first %}
|
|
66
|
-
`;case"1st-3d-mode":return
|
|
66
|
+
`;case"1st-3d-mode":return c.LiquidFor("media in product.media",c.LiquidIf("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return c.LiquidFor("media in product.media",c.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
|
|
67
67
|
{% assign featureMedia = variant.featured_media %}
|
|
68
68
|
{% unless featureMedia %}
|
|
69
69
|
{% assign featureMedia = product.featured_media %}
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
74
74
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
75
75
|
{% assign ratio = height | divided_by: width %}
|
|
76
|
-
${
|
|
76
|
+
${c.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
|
|
77
77
|
{% assign productImageWidth = 0 %}
|
|
78
78
|
{% case featureMedia.media_type %}
|
|
79
79
|
{% when 'image' %}
|
|
@@ -81,46 +81,38 @@
|
|
|
81
81
|
{% else %}
|
|
82
82
|
{% assign productImageWidth = featureMedia.preview_image.width %}
|
|
83
83
|
{% endcase %}
|
|
84
|
-
${
|
|
84
|
+
${c.LiquidIf("featureMedia == null","{% assign productImageWidth = 1600 %}")}
|
|
85
85
|
<div
|
|
86
86
|
class='gp-feature-image-carousel gp-feature-image-only'
|
|
87
|
-
style="${
|
|
87
|
+
style="${u.getStyleOfObject(M)}"
|
|
88
88
|
>
|
|
89
89
|
<div
|
|
90
90
|
class="gp-relative"
|
|
91
|
-
style="${
|
|
91
|
+
style="${u.getStyleOfObject(w)}"
|
|
92
92
|
>
|
|
93
93
|
${f}
|
|
94
94
|
<div
|
|
95
95
|
type="gp-feature-image-only"
|
|
96
96
|
product-id="{{product.id}}"
|
|
97
97
|
product-media="{{product.media.size}}"
|
|
98
|
-
class="${
|
|
99
|
-
style="${
|
|
98
|
+
class="${b(W)}"
|
|
99
|
+
style="${u.getStyleOfObject(_)}"
|
|
100
100
|
>
|
|
101
101
|
<div
|
|
102
|
-
class="gp-w-full gp-relative ${
|
|
103
|
-
style="${
|
|
102
|
+
class="gp-w-full gp-relative ${c.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
103
|
+
style="${u.getStyleOfObject(e.makeStyleResponsive("pb",T))} ${c.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
|
|
104
104
|
>
|
|
105
|
-
${
|
|
105
|
+
${j()}
|
|
106
106
|
</div>
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
</div>
|
|
110
110
|
`)}
|
|
111
111
|
{% endcapture %}
|
|
112
|
-
${
|
|
113
|
-
${
|
|
114
|
-
|
|
115
|
-
{% assign featureMediaPosition = product.media.first.position %}
|
|
116
|
-
`;case"1st-3d-mode":return g.LiquidFor("media in product.media",g.LiquidIf("media.media_type == 'model'","{% assign featureMediaPosition = media.position %}{% break %}"));case"1st-video":return g.LiquidFor("media in product.media",g.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMediaPosition = media.position %}{% break %}"));default:return`
|
|
117
|
-
{% assign featureMediaPosition = variant.featured_media.position %}
|
|
118
|
-
{% unless featureMediaPosition %}
|
|
119
|
-
{% assign featureMediaPosition = product.featured_media.position %}
|
|
120
|
-
{% endunless %}
|
|
121
|
-
`}})()}
|
|
122
|
-
${m.default({builderProps:{uid:c},rootId:`ft-${c}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:N,rootClass:`${q}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}","feature-media-position":"{{ featureMediaPosition }}"},isHiddenArrowWhenDisabled:!0,setting:L,rootStyles:_,styles:b,style:{playSpeed:600},disableMarginAuto:!0,children:W,productBadgeLiquid:f||""})}
|
|
112
|
+
${c.LiquidIf("product.media.size > 1",`
|
|
113
|
+
${c.If(N,`
|
|
114
|
+
${n.default({builderProps:{uid:p},rootId:`ft-${p}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:W,rootClass:`${I}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:L,rootStyles:M,styles:v,style:{playSpeed:600},disableMarginAuto:!0,children:A,productBadgeLiquid:f||""})}
|
|
123
115
|
`," ")}
|
|
124
|
-
${
|
|
116
|
+
${c.If(!N,"{{ featureImageOnlyOne }}"," ")}
|
|
125
117
|
`,"{{ featureImageOnlyOne }}")}
|
|
126
118
|
`)};
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
</div>
|
|
43
43
|
`})}`,w=d.LiquidIf("product.media.size > 1",d.LiquidFor("media in product.media",`${d.LiquidIf("media.media_type == 'image'",d.LiquidFor("image in product.images",d.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
|
|
44
44
|
${d.LiquidIf("media.id == product.featured_media.id ",q(c?.borderActive?.border!=="none"?"active":""),q())}`));return e.template`
|
|
45
|
-
${p.default({builderProps:{uid:u},rootId:`${u}-{{product.id}}`,rootClass:`${C}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"
|
|
45
|
+
${p.default({builderProps:{uid:u},rootId:`${u}-{{product.id}}`,rootClass:`${C}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:(()=>{let e=o.getCarouselVerticalConfigByPosition(c.position),i=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${i.join(" ")}`})(),slidesClass:o.getMinHeightByPosition(c.position,c.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:y,rootStyles:{...(()=>{let i=(i,t,o)=>{let r=e.getResponsiveValueByScreen(t,o),s=e.getResponsiveValueByScreen(i,o),a="slider"===s&&("bottom-center"===r||"inside-bottom"===r),l=["left","right","inside-left","inside-right"].includes(r??"");return l||a},r=o.checkDisplayGalleryByWidth({shapeByLayout:L}),s={desktop:r.desktop&&i(c.type,c.position,"desktop"),tablet:r.tablet&&i(c.type,c.position,"tablet"),mobile:r.mobile&&i(c.type,c.position,"mobile")};return t.getDisplayStyle(e=>!s[e],"flex")})()},styles:v,disableMarginAuto:!0,children:w,renderByLayout:t.getGalleryCarouselRenderByLayout(c.position)})}
|
|
46
46
|
`};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getResponsiveValueByScreen as e}from"@gem-sdk/core";import{createStateOrContext as t}from"@gem-sdk/system";let o=o=>{let r=["mobile","tablet","desktop"],{setting:
|
|
1
|
+
import{getResponsiveValueByScreen as e}from"@gem-sdk/core";import{createStateOrContext as t}from"@gem-sdk/system";let o=o=>{let r=["mobile","tablet","desktop"],{setting:l,rootId:p,builderProps:a,styles:i,moveToIdx:s,isHiddenArrowWhenDisabled:d,renderByLayout:m,rootAttrs:n}=o,f=p??a?.uid,g=`gp-carousel-slider-${a?.uid}`,{enableAction:u={desktop:!0},navigationStyle:c,navigationEnable:k={desktop:!0}}=l??{},y=t({id:f,moveToIdx:s,isHiddenArrowWhenDisabled:d,setting:l,styles:i,renderByLayout:m,type:n?.type});return{loopConfig:(()=>{let t=l?.loop;return r.forEach(o=>{t={...t,[o]:!!e(u)&&t?.[o]}}),t})(),stateData:JSON.stringify(y).replaceAll("'","'"),uniqueComponentId:f,arrowShowConfig:(()=>{let t=c;return r.forEach(o=>{t={...t,[o]:e(k,o)?e(t,o):"none"}}),t})(),sliderSelector:g}};export{o as getData};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getZoomImageClass as o,getZoomLenClass as u,getVideoHeight as
|
|
1
|
+
import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getZoomImageClass as o,getZoomLenClass as u,getVideoHeight as l}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import p from"../../../../../image/components/Modal3d.liquid.js";import g from"../../../../../image/components/NextImage.liquid.js";import n from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as f}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as h}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as y}from"../../composables/getProductImagesAttr.js";import{If as M,LiquidIf as b,LiquidFor as _,Liquid as v,createStyle as w}from"@gem-sdk/system";import $ from"../../../../../carousel-v3/components/root/Carousel.liquid.js";import I from"../../../../../carousel-v3/components/item/CarouselItem.liquid.js";let x=({builderPropUID:x,children:q,enableLazyLoadImage:z,...j})=>{let{featuredImageCarouselClasses:S,galleryItemClasses:L,featuredCarouselItemClasses:P}=h({...j,builderProps:{uid:x}}),{featuredImageCarouselStyle:R,featureImageStyle:T,featureImageCarouselOnlyOneImageStyle:W,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:N}=f(j),{featuredImageCarouselSettingAttrs:k}=y(j),E=t(j.ftShape),O=M("other"==j.hoverEffect,b("product.media.size > 1","group-hover:gp-opacity-0")),A=()=>`
|
|
2
2
|
{% case featureMedia.media_type %}
|
|
3
3
|
{% when 'image' %}
|
|
4
4
|
${F()}
|
|
@@ -9,35 +9,35 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
|
|
|
9
9
|
{% assign mediaSourceVideo = featureMedia.sources.last.url %}
|
|
10
10
|
${H()}
|
|
11
11
|
{% when 'model' %}
|
|
12
|
-
${
|
|
12
|
+
${D()}
|
|
13
13
|
{% else %}
|
|
14
14
|
${G()}
|
|
15
15
|
{% endcase %}
|
|
16
|
-
`,
|
|
17
|
-
${B(a("gp-w-full gp-transition-opacity",
|
|
18
|
-
${M(
|
|
16
|
+
`,D=()=>p({src:b("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:E}),V=()=>n({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:E}),H=()=>{let a=w({...l(j?.ftLayout),...e("objf",j?.ftLayout)}),i=w({...l(j?.ftLayout)});return m({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:i,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...a},className:"gp-invisible"})},F=()=>i`
|
|
17
|
+
${B(a("gp-w-full gp-transition-opacity",O,"{{shouldHidden}}"))}
|
|
18
|
+
${M(j?.hoverEffect!=="none",`<div class="${a("zoom-element !gp-max-w-none",o())}">
|
|
19
19
|
${B("image-zoom",!0)}
|
|
20
20
|
</div>`," ")}
|
|
21
|
-
${M(
|
|
21
|
+
${M(j?.hoverEffect=="zoom"&&j?.zoomType=="glasses",`<div class="${a("zoom-lens-element",u())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
|
|
22
22
|
`,B=(e,a)=>i`
|
|
23
23
|
{% assign src = featureMedia.src %}
|
|
24
|
-
${M(a&&"other"==
|
|
25
|
-
{% assign other_image_index = ${
|
|
24
|
+
${M(a&&"other"==j.hoverEffect,`{% assign media_length = product.media | size %}
|
|
25
|
+
{% assign other_image_index = ${j.otherImage} | plus: 0 %}
|
|
26
26
|
{% if other_image_index >= media_length %}
|
|
27
27
|
{% assign other_image_index = media_length | minus: 1 %}
|
|
28
28
|
{% endif %}
|
|
29
29
|
{% assign otherImage = product.media[other_image_index] %}
|
|
30
|
-
${
|
|
30
|
+
${b("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
|
|
31
31
|
`)}
|
|
32
|
-
${
|
|
33
|
-
${
|
|
34
|
-
${
|
|
32
|
+
${g({srcIsLiquidCode:!0,src:b("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:b("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:j?.ftLayout,aspectRatio:E,qualityType:j?.qualityType,qualityPercent:j?.qualityPercent},priority:j?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e??""}`,enableLazyLoadImage:z})}`,G=()=>i`
|
|
33
|
+
${g({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:j?.ftLayout,aspectRatio:E,qualityType:j?.qualityType,qualityPercent:j?.qualityPercent},priority:j?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:z})}`,J=r(j.ftShape),K=d(j),Q="gp-featured-image-wrapper",U=b("product.media.size > 0",`{% assign largestRatio = 0 %}
|
|
34
|
+
${_("featureMedia in product.media",`
|
|
35
35
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
36
36
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
37
37
|
{% assign ratio = height | divided_by: width %}
|
|
38
|
-
${
|
|
38
|
+
${b("ratio > largestRatio","{% assign largestRatio = ratio %}")}
|
|
39
39
|
`)}
|
|
40
|
-
${
|
|
40
|
+
${_("featureMedia in product.media",`${b("featureMedia.media_type == 'image'",`${_("image in product.images",b("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
|
|
41
41
|
|
|
42
42
|
${v(`{% assign productImageWidth = 0 %}
|
|
43
43
|
{% case featureMedia.media_type %}
|
|
@@ -46,24 +46,24 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
|
|
|
46
46
|
{% else %}
|
|
47
47
|
{% assign productImageWidth = featureMedia.preview_image.width %}
|
|
48
48
|
{% endcase %}`)}
|
|
49
|
-
${I({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${
|
|
49
|
+
${I({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${L("gp-ft-image-item !gp-min-w-full !gp-max-w-full ")}`,parentId:`ft-${x}-{{section.id}}-{{product.id}}`,style:N,customStyle:{width:"{{productImageWidth}}px"},children:`
|
|
50
50
|
<div
|
|
51
|
-
class="gp-w-full gp-relative ${
|
|
52
|
-
style="${c(e("pb",J))} ${
|
|
51
|
+
class="gp-w-full gp-relative ${b("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
52
|
+
style="${c(e("pb",J))} ${b("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
|
|
53
53
|
>
|
|
54
|
-
${
|
|
54
|
+
${A()}
|
|
55
55
|
</div>
|
|
56
56
|
`})}`)}
|
|
57
|
-
`,
|
|
57
|
+
`,g({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:j?.preload,setting:{layout:j?.ftLayout,aspectRatio:E,qualityType:j?.qualityType,qualityPercent:j?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:z}));return v(`
|
|
58
58
|
{% capture featureImageOnlyOne %}
|
|
59
59
|
${v(`
|
|
60
60
|
{% assign featureMedia = variant.featured_media %}
|
|
61
61
|
{% unless featureMedia %}
|
|
62
62
|
{% assign featureMedia = product.featured_media %}
|
|
63
63
|
{% endunless %}
|
|
64
|
-
${
|
|
64
|
+
${b("product.media.size > 1",(()=>{switch(j?.preDisplay){case"1st-images":return`
|
|
65
65
|
{% assign featureMedia = product.media.first %}
|
|
66
|
-
`;case"1st-3d-mode":return
|
|
66
|
+
`;case"1st-3d-mode":return _("media in product.media",b("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return _("media in product.media",b("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
|
|
67
67
|
{% assign featureMedia = variant.featured_media %}
|
|
68
68
|
{% unless featureMedia %}
|
|
69
69
|
{% assign featureMedia = product.featured_media %}
|
|
@@ -73,7 +73,7 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
|
|
|
73
73
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
74
74
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
75
75
|
{% assign ratio = height | divided_by: width %}
|
|
76
|
-
${
|
|
76
|
+
${b("ratio > largestRatio","{% assign largestRatio = ratio %}")}
|
|
77
77
|
{% assign productImageWidth = 0 %}
|
|
78
78
|
{% case featureMedia.media_type %}
|
|
79
79
|
{% when 'image' %}
|
|
@@ -81,45 +81,37 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
|
|
|
81
81
|
{% else %}
|
|
82
82
|
{% assign productImageWidth = featureMedia.preview_image.width %}
|
|
83
83
|
{% endcase %}
|
|
84
|
-
${
|
|
84
|
+
${b("featureMedia == null","{% assign productImageWidth = 1600 %}")}
|
|
85
85
|
<div
|
|
86
86
|
class='gp-feature-image-carousel gp-feature-image-only'
|
|
87
87
|
style="${c(T)}"
|
|
88
88
|
>
|
|
89
89
|
<div
|
|
90
90
|
class="gp-relative"
|
|
91
|
-
style="${c(
|
|
91
|
+
style="${c(C)}"
|
|
92
92
|
>
|
|
93
93
|
${q}
|
|
94
94
|
<div
|
|
95
95
|
type="gp-feature-image-only"
|
|
96
96
|
product-id="{{product.id}}"
|
|
97
97
|
product-media="{{product.media.size}}"
|
|
98
|
-
class="${
|
|
98
|
+
class="${P(Q)}"
|
|
99
99
|
style="${c(W)}"
|
|
100
100
|
>
|
|
101
101
|
<div
|
|
102
|
-
class="gp-w-full gp-relative ${
|
|
103
|
-
style="${c(e("pb",J))} ${
|
|
102
|
+
class="gp-w-full gp-relative ${b("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
103
|
+
style="${c(e("pb",J))} ${b("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
|
|
104
104
|
>
|
|
105
|
-
${
|
|
105
|
+
${A()}
|
|
106
106
|
</div>
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
</div>
|
|
110
110
|
`)}
|
|
111
111
|
{% endcapture %}
|
|
112
|
-
${
|
|
112
|
+
${b("product.media.size > 1",`
|
|
113
113
|
${M(K,`
|
|
114
|
-
|
|
115
|
-
{% assign featureMediaPosition = product.media.first.position %}
|
|
116
|
-
`;case"1st-3d-mode":return b("media in product.media",_("media.media_type == 'model'","{% assign featureMediaPosition = media.position %}{% break %}"));case"1st-video":return b("media in product.media",_("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMediaPosition = media.position %}{% break %}"));default:return`
|
|
117
|
-
{% assign featureMediaPosition = variant.featured_media.position %}
|
|
118
|
-
{% unless featureMediaPosition %}
|
|
119
|
-
{% assign featureMediaPosition = product.featured_media.position %}
|
|
120
|
-
{% endunless %}
|
|
121
|
-
`}})()}
|
|
122
|
-
${$({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:Q,rootClass:`${j}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}","feature-media-position":"{{ featureMediaPosition }}"},isHiddenArrowWhenDisabled:!0,setting:N,rootStyles:T,styles:R,style:{playSpeed:600},disableMarginAuto:!0,children:U,productBadgeLiquid:q||""})}
|
|
114
|
+
${$({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:Q,rootClass:`${S}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:k,rootStyles:T,styles:R,style:{playSpeed:600},disableMarginAuto:!0,children:U,productBadgeLiquid:q||""})}
|
|
123
115
|
`," ")}
|
|
124
116
|
${M(!K,"{{ featureImageOnlyOne }}"," ")}
|
|
125
117
|
`,"{{ featureImageOnlyOne }}")}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{template as e,getResponsiveValueByScreen as
|
|
1
|
+
import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import i from"../../../../../image/components/NextImage.liquid.js";import{getGalleryCarouselRenderByLayout as o,getAspectRatio as r,getDisplayStyle as s,getSrcImage as a}from"../../common/common.js";import{getShapeByLayout as p,getMinHeightByPosition as l,getZoomDisplay as d,checkDisplayGalleryByWidth as m,getCarouselVerticalConfigByPosition as g}from"../../common/productGallery.js";import{getStyleOfObject as n}from"../../../../helpers/function.js";import{getProductImagesStyles as c}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as u}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as C}from"../../composables/getProductImagesAttr.js";import{LiquidIf as h,LiquidFor as y}from"@gem-sdk/system";import v from"../../../../../carousel-v3/components/root/Carousel.liquid.js";import b from"../../../../../carousel-v3/components/item/CarouselItem.liquid.js";let f=({builderPropUID:f,children:w,enableLazyLoadImage:L,...F})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:$}=u(F),{galleryCarouselSettingAttrs:I}=C(F),{galleryCarouselStyle:_,galleryCarouselItemStyle:k}=c(F),j=p({shape:F.shape,shapeForBottom:F.shapeForBottom,shapeFor1Col:F.shapeFor1Col,shapeFor2Col:F.shapeFor2Col,shapeForFtOnly:F.shapeForFtOnly,shapeForInsideBottom:F.shapeForInsideBottom,shapeForInside:F.shapeForInside},F.position),V=(t,o)=>e`${i({srcIsLiquidCode:!0,src:`${a("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",style:o,className:"!gp-rounded-none gp-w-full gp-h-full gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:L})}`,M=e=>`
|
|
2
2
|
${h("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
|
|
3
3
|
${h("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
|
|
4
4
|
${h("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
|
|
5
|
-
${
|
|
5
|
+
${b({id:"{{imageID}}",contentType:"productImage",className:`${$(`gp-gallery-image-item ${e??""}`)}`,parentId:`${f}-{{product.id}}`,builderAttrs:{"data-outline":e?"active":"deactive"},style:k,children:`
|
|
6
6
|
<div class="gp-w-full gp-relative gp-h-full"
|
|
7
7
|
|
|
8
8
|
>
|
|
@@ -42,5 +42,5 @@ import{template as e,getResponsiveValueByScreen as i}from"@gem-sdk/core";import
|
|
|
42
42
|
</div>
|
|
43
43
|
`})}`,B=h("product.media.size > 1",y("media in product.media",`${h("media.media_type == 'image'",y("image in product.images",h("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
|
|
44
44
|
${h("media.id == product.featured_media.id ",M(F?.borderActive?.border!=="none"?"active":""),M())}`));return e`
|
|
45
|
-
${v({builderProps:{uid:
|
|
46
|
-
`};export{
|
|
45
|
+
${v({builderProps:{uid:f},rootId:`${f}-{{product.id}}`,rootClass:`${x}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:(()=>{let e=g(F.position),t=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${t.join(" ")}`})(),slidesClass:l(F.position,F.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:I,rootStyles:{...(()=>{let e=(e,i,o)=>{let r=t(i,o),s=t(e,o),a="slider"===s&&("bottom-center"===r||"inside-bottom"===r),p=["left","right","inside-left","inside-right"].includes(r??"");return p||a},i=m({shapeByLayout:j}),o={desktop:i.desktop&&e(F.type,F.position,"desktop"),tablet:i.tablet&&e(F.type,F.position,"tablet"),mobile:i.mobile&&e(F.type,F.position,"mobile")};return s(e=>!o[e],"flex")})()},styles:_,disableMarginAuto:!0,children:B,renderByLayout:o(F.position)})}
|
|
46
|
+
`};export{f as default};
|