@gem-sdk/components 17.0.0-dev.66 → 17.0.0-dev.68
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/components/gallery-grid/GalleryGrid.liquid.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),i=require("@gem-sdk/system"),a=require("../../../../../image/components/Modal3d.liquid.js"),t=require("../../../../../image/components/NextImage.liquid.js"),s=require("../../../../../image/components/Video.liquid.js"),
|
|
2
|
-
${t.default({srcIsLiquidCode:!0,src:`${
|
|
3
|
-
${i.If(
|
|
4
|
-
${t.default({srcIsLiquidCode:!0,src:`${
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),i=require("@gem-sdk/system"),a=require("../../../../../image/components/Modal3d.liquid.js"),t=require("../../../../../image/components/NextImage.liquid.js"),s=require("../../../../../image/components/Video.liquid.js"),d=require("../../../../../video/components/HTML5Embed.liquid.js"),o=require("../../../../helpers/function.js"),l=require("../../common/common.js"),r=require("../../common/productFeaturedImage.js"),m=require("../../common/productGallery.js"),g=require("../../composables/getProductImagesClassName.js"),p=require("../../composables/getProductImagesStyles.js");exports.default=({builderPropUID:u,wrapperStyle:c,children:n,enableLazyLoadImage:y,...f})=>{let{galleryItemClasses:h,galleryGridWrapperClasses:v}=g.getProductImagesClassName(f),{galleryGridStyles:C,galleryGridItemStyles:L}=p.getProductImagesStyles(f),q=m.getShapeByLayout({shape:f.shape,shapeForBottom:f.shapeForBottom,shapeFor1Col:f.shapeFor1Col,shapeFor2Col:f.shapeFor2Col,shapeForFtOnly:f.shapeForFtOnly,shapeForInsideBottom:f.shapeForInsideBottom,shapeForInside:f.shapeForInside},f.position),w=(i=!1)=>{let a={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(t=>{let s=e.getResponsiveValueByScreen(f?.position,t)||"",d="one-col"===s||"two-col"===s;a[t]=(i?!d:d)?"block":"none"}),e.makeStyleResponsive("d",a)},_=()=>w(),b=()=>w(!0),I=(a,s)=>e.template`
|
|
2
|
+
${t.default({srcIsLiquidCode:!0,src:`${l.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:a,style:s,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:y})}
|
|
3
|
+
${i.If(f?.galleryHoverEffect!=="none",`<div class="${e.cls("zoom-element !gp-max-w-none gp-w-full gp-h-full",r.getZoomImageClass())}">
|
|
4
|
+
${t.default({srcIsLiquidCode:!0,src:`${l.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:a,style:s,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:y})}
|
|
5
5
|
</div>`," ")}
|
|
6
|
-
${i.If(
|
|
6
|
+
${i.If(f?.galleryHoverEffect=="zoom"&&f?.galleryZoomType=="glasses",`<div class="${e.cls("zoom-lens-element",r.getZoomLenClass())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
|
|
7
7
|
</div>
|
|
8
8
|
`," ")}
|
|
9
|
-
`,$=()=>a.default({src:i.LiquidIf("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:
|
|
9
|
+
`,$=()=>a.default({src:i.LiquidIf("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:l.getAspectRatio(q)}),x=()=>s.default({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),S=()=>d.default({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),F=()=>e.template`
|
|
10
10
|
${i.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
|
|
11
11
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
12
12
|
<rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
|
|
20
20
|
</svg>
|
|
21
21
|
</div>`)}
|
|
22
|
-
${I({aspectRatio:
|
|
22
|
+
${I({aspectRatio:l.getAspectRatio(q),layout:f?.layout,qualityType:f?.qualityType,qualityPercent:f?.qualityPercent},{width:"100%",height:"100%"})}
|
|
23
23
|
|
|
24
24
|
<div class="gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-opacity gp-duration-100 group-hover:gp-opacity-100"
|
|
25
|
-
style="${
|
|
25
|
+
style="${o.getStyleOfObject(m.getZoomDisplay(f?.clickOpenLightBox))}" >
|
|
26
26
|
<svg
|
|
27
27
|
height="100%"
|
|
28
28
|
width="100%"
|
|
@@ -53,19 +53,21 @@
|
|
|
53
53
|
external-id="{{media.external_id}}"
|
|
54
54
|
grid-index="{{forloop.index}}"
|
|
55
55
|
data-outline="none"
|
|
56
|
-
class="${
|
|
57
|
-
style="${
|
|
56
|
+
class="${h(`gem-slider-item-${u}-{{product.id}} gp-gallery-image-item ${a??""} data-[outline=deactive]:after:!gp-border-transparent`)}"
|
|
57
|
+
style="${o.getStyleOfObject(L)}"
|
|
58
58
|
>
|
|
59
59
|
${i.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
|
|
60
60
|
|
|
61
61
|
${i.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video'","{% assign isVideo = true %}")}
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
${i.LiquidIf("media.media_type == 'model'","{% assign isModel = true %}")}
|
|
64
|
+
|
|
65
|
+
<div class="gp-w-full" style="${i.LiquidIf("media == null or media.media_type == 'image'","display: block !important;")} ${i.LiquidIf("isMedia",o.getStyleOfObject({...b()}))}">
|
|
66
|
+
${i.LiquidIf("media != null",F(),M())}
|
|
65
67
|
</div>
|
|
66
68
|
|
|
67
|
-
<div class="${i.LiquidIf("isMedia","gp-flex gp-justify-center gp-items-center")}"
|
|
68
|
-
style="${i.LiquidIf("isMedia",
|
|
69
|
+
<div class="${i.LiquidIf("isMedia","gp-flex gp-justify-center gp-items-center")} ${i.LiquidIf("isModel","gp-w-full")}"
|
|
70
|
+
style="${i.LiquidIf("isMedia",o.getStyleOfObject({...e.makeStyleResponsive("aspect",l.getAspectRatio(q))}))} ${o.getStyleOfObject({..._()})}"
|
|
69
71
|
>
|
|
70
72
|
{% case media.media_type %}
|
|
71
73
|
{% when 'external_video' %}
|
|
@@ -80,14 +82,15 @@
|
|
|
80
82
|
</div>
|
|
81
83
|
{% assign isVideo= false %}
|
|
82
84
|
{% assign isMedia= false %}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
+
{% assign isModel= false %}
|
|
86
|
+
</div>`,M=()=>e.template`
|
|
87
|
+
${t.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:{aspectRatio:l.getAspectRatio(q),layout:f?.layout,qualityType:f?.qualityType,qualityPercent:f?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:y})}`;return i.Liquid(`
|
|
85
88
|
<div type="grid-gallery"
|
|
86
89
|
class="${v}"
|
|
87
|
-
style="${
|
|
90
|
+
style="${o.getStyleOfObject(C)}}"
|
|
88
91
|
>
|
|
89
92
|
${i.LiquidFor("media in product.media",`${i.LiquidIf("media.media_type == 'image'",i.LiquidFor("image in product.images",i.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
|
|
90
|
-
${i.LiquidIf("media.id == product.featured_media.id ",j(
|
|
93
|
+
${i.LiquidIf("media.id == product.featured_media.id ",j(f?.borderActive?.border!=="none"?"active":""),j())}`)}
|
|
91
94
|
${i.LiquidIf("product.media.size > 0",n)}
|
|
92
95
|
${i.LiquidIf("product.media.size < 1",j())}
|
|
93
96
|
</div>`)};
|
package/dist/esm/product/components/product-images-v3/components/gallery-grid/GalleryGrid.liquid.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import n from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as g}from"../../../../helpers/function.js";import{getAspectRatio as c,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let _=({builderPropUID:_,wrapperStyle:$,children:b,enableLazyLoadImage:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:
|
|
1
|
+
import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import n from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as g}from"../../../../helpers/function.js";import{getAspectRatio as c,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let _=({builderPropUID:_,wrapperStyle:$,children:b,enableLazyLoadImage:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:M}=f(L),{galleryGridStyles:V,galleryGridItemStyles:q}=w(L),I=C({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),j=(i=!1)=>{let t={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(e=>{let o=a(L?.position,e)||"",s="one-col"===o||"two-col"===o;t[e]=(i?!s:s)?"block":"none"}),e("d",t)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
|
|
2
2
|
${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:a,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}
|
|
3
3
|
${r(L?.galleryHoverEffect!=="none",`<div class="${t("zoom-element !gp-max-w-none gp-w-full gp-h-full",h())}">
|
|
4
4
|
${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:a,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:x})}
|
|
@@ -6,7 +6,7 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
|
|
|
6
6
|
${r(L?.galleryHoverEffect=="zoom"&&L?.galleryZoomType=="glasses",`<div class="${t("zoom-lens-element",y())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
|
|
7
7
|
</div>
|
|
8
8
|
`," ")}
|
|
9
|
-
`,z=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:c(
|
|
9
|
+
`,z=()=>l({src:d("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:c(I)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>n({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),P=()=>i`
|
|
10
10
|
${d("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
|
|
11
11
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
12
12
|
<rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
|
|
@@ -19,7 +19,7 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
|
|
|
19
19
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
|
|
20
20
|
</svg>
|
|
21
21
|
</div>`)}
|
|
22
|
-
${Z({aspectRatio:c(
|
|
22
|
+
${Z({aspectRatio:c(I),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},{width:"100%",height:"100%"})}
|
|
23
23
|
|
|
24
24
|
<div class="gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-opacity gp-duration-100 group-hover:gp-opacity-100"
|
|
25
25
|
style="${g(v(L?.clickOpenLightBox))}" >
|
|
@@ -54,18 +54,20 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
|
|
|
54
54
|
grid-index="{{forloop.index}}"
|
|
55
55
|
data-outline="none"
|
|
56
56
|
class="${F(`gem-slider-item-${_}-{{product.id}} gp-gallery-image-item ${i??""} data-[outline=deactive]:after:!gp-border-transparent`)}"
|
|
57
|
-
style="${g(
|
|
57
|
+
style="${g(q)}"
|
|
58
58
|
>
|
|
59
59
|
${d("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
|
|
60
60
|
|
|
61
61
|
${d("media.media_type == 'external_video' or media.media_type == 'video'","{% assign isVideo = true %}")}
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
${d("media.media_type == 'model'","{% assign isModel = true %}")}
|
|
64
|
+
|
|
65
|
+
<div class="gp-w-full" style="${d("media == null or media.media_type == 'image'","display: block !important;")} ${d("isMedia",g({...S()}))}">
|
|
64
66
|
${d("media != null",P(),T())}
|
|
65
67
|
</div>
|
|
66
68
|
|
|
67
|
-
<div class="${d("isMedia","gp-flex gp-justify-center gp-items-center")}"
|
|
68
|
-
style="${d("isMedia",g({...e("aspect",c(
|
|
69
|
+
<div class="${d("isMedia","gp-flex gp-justify-center gp-items-center")} ${d("isModel","gp-w-full")}"
|
|
70
|
+
style="${d("isMedia",g({...e("aspect",c(I))}))} ${g({...k()})}"
|
|
69
71
|
>
|
|
70
72
|
{% case media.media_type %}
|
|
71
73
|
{% when 'external_video' %}
|
|
@@ -80,11 +82,12 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
|
|
|
80
82
|
</div>
|
|
81
83
|
{% assign isVideo= false %}
|
|
82
84
|
{% assign isMedia= false %}
|
|
85
|
+
{% assign isModel= false %}
|
|
83
86
|
</div>`,T=()=>i`
|
|
84
|
-
${m({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:{aspectRatio:c(
|
|
87
|
+
${m({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:{aspectRatio:c(I),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
|
|
85
88
|
<div type="grid-gallery"
|
|
86
|
-
class="${
|
|
87
|
-
style="${g(
|
|
89
|
+
class="${M}"
|
|
90
|
+
style="${g(V)}}"
|
|
88
91
|
>
|
|
89
92
|
${s("media in product.media",`${d("media.media_type == 'image'",s("image in product.images",d("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
|
|
90
93
|
${d("media.id == product.featured_media.id ",N(L?.borderActive?.border!=="none"?"active":""),N())}`)}
|