@gem-sdk/components 8.0.0-dev.19 → 8.0.0-dev.20
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.
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
{% else %}
|
|
14
14
|
${_()}
|
|
15
15
|
{% endcase %}
|
|
16
|
-
`,f=()=>Modal3d_liquid.default({src:system.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:n}),y=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:n}),h=()=>{let e=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout),...core.makeStyleResponsive("objf",a?.ftLayout)}),t=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout)});return HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:t,style:{width:"100%","max-height":"100%",...e},className:"gp-invisible"})},I=()=>core.template`
|
|
16
|
+
`,f=()=>Modal3d_liquid.default({src:system.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:n}),y=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:n}),h=()=>{let e=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout),...core.makeStyleResponsive("objf",a?.ftLayout)}),t=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout)});return HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:t,poster:{altText:"{{featureMedia.preview_image.alt}}"},style:{width:"100%","max-height":"100%",...e},className:"gp-invisible"})},I=()=>core.template`
|
|
17
17
|
${q(core.cls("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==a.hoverEffect},"{{shouldHidden}}"))}
|
|
18
18
|
${system.If(a?.hoverEffect!=="none",`<div class="${core.cls("zoom-element !gp-max-w-none",productFeaturedImage.getZoomImageClass())}">
|
|
19
19
|
${q("image-zoom",!0)}
|
|
@@ -56,19 +56,19 @@
|
|
|
56
56
|
${M()}`)}
|
|
57
57
|
`,NextImage_liquid.default({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:a?.preload,setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:i})),L=()=>`
|
|
58
58
|
${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:$,rootClass:`${s}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:c,rootStyles:o,styles:u,style:{playSpeed:600},disableMarginAuto:!0,children:w,productBadgeLiquid:t||""})}
|
|
59
|
-
`,
|
|
59
|
+
`,x=()=>{switch(a?.preDisplay){case"1st-images":return`
|
|
60
60
|
{% assign featureMedia = product.media.first %}
|
|
61
61
|
`;case"1st-3d-mode":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
|
|
62
62
|
{% assign featureMedia = variant.featured_media %}
|
|
63
63
|
{% unless featureMedia %}
|
|
64
64
|
{% assign featureMedia = product.featured_media %}
|
|
65
65
|
{% endunless %}
|
|
66
|
-
`}},
|
|
66
|
+
`}},S=()=>system.Liquid(`
|
|
67
67
|
{% assign featureMedia = variant.featured_media %}
|
|
68
68
|
{% unless featureMedia %}
|
|
69
69
|
{% assign featureMedia = product.featured_media %}
|
|
70
70
|
{% endunless %}
|
|
71
|
-
${system.LiquidIf("product.media.size > 1",
|
|
71
|
+
${system.LiquidIf("product.media.size > 1",x())}
|
|
72
72
|
{% assign largestRatio = 0 %}
|
|
73
73
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
74
74
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
</div>
|
|
110
110
|
`);return system.Liquid(`
|
|
111
111
|
{% capture featureImageOnlyOne %}
|
|
112
|
-
${
|
|
112
|
+
${S()}
|
|
113
113
|
{% endcapture %}
|
|
114
114
|
${system.LiquidIf("product.media.size > 1",`
|
|
115
115
|
${system.If(v,L()," ")}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getVideoHeight as o,getZoomImageClass as u,getZoomLenClass as l}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import
|
|
1
|
+
import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getVideoHeight as o,getZoomImageClass as u,getZoomLenClass 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{LiquidIf as M,LiquidFor as _,Liquid as b,If as $,createStyle as v}from"@gem-sdk/system";import w from"../../../../../carousel-v3/components/root/Carousel.liquid.js";import I from"../../../../../carousel-v3/components/item/CarouselItem.liquid.js";let FeatureImageWithGallery=({builderPropUID:x,children:q,enableLazyLoadImage:j,...z})=>{let{featuredImageCarouselClasses:S,galleryItemClasses:L,featuredCarouselItemClasses:P}=h({...z,builderProps:{uid:x}}),{featuredImageCarouselStyle:R,featureImageStyle:W,featureImageCarouselOnlyOneImageStyle:T,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:N}=f(z),{featuredImageCarouselSettingAttrs:k}=y(z),E=t(z.ftShape),O=()=>`
|
|
2
2
|
{% case featureMedia.media_type %}
|
|
3
3
|
{% when 'image' %}
|
|
4
4
|
${F()}
|
|
@@ -13,15 +13,15 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
13
13
|
{% else %}
|
|
14
14
|
${G()}
|
|
15
15
|
{% endcase %}
|
|
16
|
-
`,A=()=>
|
|
16
|
+
`,A=()=>p({src:M("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}),D=()=>n({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:E}),V=()=>{let a=v({...o(z?.ftLayout),...e("objf",z?.ftLayout)}),i=v({...o(z?.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.preview_image.alt}}"},style:{width:"100%","max-height":"100%",...a},className:"gp-invisible"})},F=()=>a`
|
|
17
17
|
${H(i("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==z.hoverEffect},"{{shouldHidden}}"))}
|
|
18
|
-
${
|
|
18
|
+
${$(z?.hoverEffect!=="none",`<div class="${i("zoom-element !gp-max-w-none",u())}">
|
|
19
19
|
${H("image-zoom",!0)}
|
|
20
20
|
</div>`," ")}
|
|
21
|
-
${
|
|
21
|
+
${$(z?.hoverEffect=="zoom"&&z?.zoomType=="glasses",`<div class="${i("zoom-lens-element",l())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
|
|
22
22
|
`,H=(e,i)=>a`
|
|
23
23
|
{% assign src = featureMedia.src %}
|
|
24
|
-
${
|
|
24
|
+
${$(i&&"other"==z.hoverEffect,`{% assign media_length = product.media | size %}
|
|
25
25
|
{% assign other_image_index = ${z.otherImage} | plus: 0 %}
|
|
26
26
|
{% if other_image_index >= media_length %}
|
|
27
27
|
{% assign other_image_index = media_length | minus: 1 %}
|
|
@@ -29,9 +29,9 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
29
29
|
{% assign otherImage = product.media[other_image_index] %}
|
|
30
30
|
${M("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
|
|
31
31
|
`)}
|
|
32
|
-
${
|
|
33
|
-
${
|
|
34
|
-
${
|
|
32
|
+
${g({srcIsLiquidCode:!0,src:M("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:M("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:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},priority:z?.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:j})}`,G=()=>a`
|
|
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:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},priority:z?.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:j})}`,B=r(z.ftShape),J=a=>`
|
|
34
|
+
${b(`{% assign productImageWidth = 0 %}
|
|
35
35
|
{% case featureMedia.media_type %}
|
|
36
36
|
{% when 'image' %}
|
|
37
37
|
{% assign productImageWidth = featureMedia.width %}
|
|
@@ -46,24 +46,24 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
46
46
|
${O()}
|
|
47
47
|
</div>
|
|
48
48
|
`})}`,K=d(z),Q="gp-featured-image-wrapper",U=M("product.media.size > 0",`{% assign largestRatio = 0 %}
|
|
49
|
-
${
|
|
49
|
+
${_("featureMedia in product.media",`
|
|
50
50
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
51
51
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
52
52
|
{% assign ratio = height | divided_by: width %}
|
|
53
53
|
${M("ratio > largestRatio","{% assign largestRatio = ratio %}")}
|
|
54
54
|
`)}
|
|
55
|
-
${
|
|
55
|
+
${_("featureMedia in product.media",`${M("featureMedia.media_type == 'image'",`${_("image in product.images",M("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
|
|
56
56
|
${J()}`)}
|
|
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:z?.preload,setting:{layout:z?.ftLayout,aspectRatio:E,qualityType:z?.qualityType,qualityPercent:z?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:j})),X=()=>`
|
|
58
58
|
${w({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:W,styles:R,style:{playSpeed:600},disableMarginAuto:!0,children:U,productBadgeLiquid:q||""})}
|
|
59
59
|
`,Y=()=>{switch(z?.preDisplay){case"1st-images":return`
|
|
60
60
|
{% assign featureMedia = product.media.first %}
|
|
61
|
-
`;case"1st-3d-mode":return
|
|
61
|
+
`;case"1st-3d-mode":return _("media in product.media",M("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return _("media in product.media",M("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
|
|
62
62
|
{% assign featureMedia = variant.featured_media %}
|
|
63
63
|
{% unless featureMedia %}
|
|
64
64
|
{% assign featureMedia = product.featured_media %}
|
|
65
65
|
{% endunless %}
|
|
66
|
-
`}},Z=()
|
|
66
|
+
`}},Z=()=>b(`
|
|
67
67
|
{% assign featureMedia = variant.featured_media %}
|
|
68
68
|
{% unless featureMedia %}
|
|
69
69
|
{% assign featureMedia = product.featured_media %}
|
|
@@ -88,7 +88,7 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
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
|
|
@@ -96,7 +96,7 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
96
96
|
product-id="{{product.id}}"
|
|
97
97
|
product-media="{{product.media.size}}"
|
|
98
98
|
class="${P(Q)}"
|
|
99
|
-
style="${c(
|
|
99
|
+
style="${c(T)}"
|
|
100
100
|
>
|
|
101
101
|
<div
|
|
102
102
|
class="gp-w-full gp-relative ${M("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
@@ -107,12 +107,12 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
</div>
|
|
110
|
-
`);return
|
|
110
|
+
`);return b(`
|
|
111
111
|
{% capture featureImageOnlyOne %}
|
|
112
112
|
${Z()}
|
|
113
113
|
{% endcapture %}
|
|
114
114
|
${M("product.media.size > 1",`
|
|
115
|
-
${
|
|
116
|
-
${
|
|
115
|
+
${$(K,X()," ")}
|
|
116
|
+
${$(!K,"{{ featureImageOnlyOne }}"," ")}
|
|
117
117
|
`,"{{ featureImageOnlyOne }}")}
|
|
118
118
|
`)};export{FeatureImageWithGallery as default};
|