@gem-sdk/components 12.0.0-dev.117 → 12.0.0-dev.123
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/feature-gallery/FeatureImageWithGallery.liquid.js +29 -29
- package/dist/cjs/product/settings/product-image-v3/configs/setting-v2/ProductFeatureImage.js +1 -1
- package/dist/cjs/third-party/components/EasifyProductOptions.liquid.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.liquid.js +43 -43
- package/dist/esm/product/settings/product-image-v3/configs/setting-v2/ProductFeatureImage.js +1 -1
- package/dist/esm/third-party/components/EasifyProductOptions.liquid.js +4 -4
- package/package.json +2 -2
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const FeatureImageWithGallery=({builderPropUID:e,children:t,enableLazyLoadImage:i,...a})=>{let{featuredImageCarouselClasses:s,galleryItemClasses:r,featuredCarouselItemClasses:d}=getProductImagesClassName.getProductImagesClassName({...a,builderProps:{uid:e}}),{featuredImageCarouselStyle:u,featureImageStyle:o,featureImageCarouselOnlyOneImageStyle:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const FeatureImageWithGallery=({builderPropUID:e,children:t,enableLazyLoadImage:i,...a})=>{let{featuredImageCarouselClasses:s,galleryItemClasses:r,featuredCarouselItemClasses:d}=getProductImagesClassName.getProductImagesClassName({...a,builderProps:{uid:e}}),{featuredImageCarouselStyle:u,featureImageStyle:o,featureImageCarouselOnlyOneImageStyle:m,featureImageOnlyOneImageStyle:l,featureImageCarouselItemStyle:g}=getProductImagesStyles.getProductImagesStyles(a),{featuredImageCarouselSettingAttrs:c}=getProductImagesAttr.getProductImagesAttr(a),n=common.getAspectRatio(a.ftShape),p=system.If("other"==a.hoverEffect,system.LiquidIf("product.media.size > 1","group-hover:gp-opacity-0")),f=()=>`
|
|
2
2
|
{% case featureMedia.media_type %}
|
|
3
3
|
{% when 'image' %}
|
|
4
|
-
${
|
|
4
|
+
${q()}
|
|
5
5
|
{% when 'external_video' %}
|
|
6
6
|
{% assign mediaSourceVideo = featureMedia | external_video_url %}
|
|
7
|
-
${
|
|
7
|
+
${h()}
|
|
8
8
|
{% when 'video' %}
|
|
9
9
|
{% assign mediaSourceVideo = featureMedia.sources.last.url %}
|
|
10
|
-
${
|
|
10
|
+
${I()}
|
|
11
11
|
{% when 'model' %}
|
|
12
|
-
${
|
|
12
|
+
${y()}
|
|
13
13
|
{% else %}
|
|
14
|
-
${
|
|
14
|
+
${b()}
|
|
15
15
|
{% endcase %}
|
|
16
|
-
`,
|
|
17
|
-
${
|
|
16
|
+
`,y=()=>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}),h=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:n}),I=()=>{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.alt | escape}}"},style:{width:"100%","max-height":"100%",...e},className:"gp-invisible"})},q=()=>core.template`
|
|
17
|
+
${_(core.cls("gp-w-full gp-transition-opacity",p,"{{shouldHidden}}"))}
|
|
18
18
|
${system.If(a?.hoverEffect!=="none",`<div class="${core.cls("zoom-element !gp-max-w-none",productFeaturedImage.getZoomImageClass())}">
|
|
19
|
-
${
|
|
19
|
+
${_("image-zoom",!0)}
|
|
20
20
|
</div>`," ")}
|
|
21
21
|
${system.If(a?.hoverEffect=="zoom"&&a?.zoomType=="glasses",`<div class="${core.cls("zoom-lens-element",productFeaturedImage.getZoomLenClass())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
|
|
22
|
-
`,
|
|
22
|
+
`,_=(e,t)=>core.template`
|
|
23
23
|
{% assign src = featureMedia.src %}
|
|
24
24
|
${system.If(t&&"other"==a.hoverEffect,`{% assign media_length = product.media | size %}
|
|
25
25
|
{% assign other_image_index = ${a.otherImage} | plus: 0 %}
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
{% assign otherImage = product.media[other_image_index] %}
|
|
30
30
|
${system.LiquidIf("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
|
|
31
31
|
`)}
|
|
32
|
-
${NextImage_liquid.default({srcIsLiquidCode:!0,src:system.LiquidIf("src != null",common.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:system.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${common.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,
|
|
33
|
-
${NextImage_liquid.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:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,
|
|
32
|
+
${NextImage_liquid.default({srcIsLiquidCode:!0,src:system.LiquidIf("src != null",common.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:system.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${common.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,b=()=>core.template`
|
|
33
|
+
${NextImage_liquid.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:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.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:i})}`,M=common.getPaddingBottomByShapeSetting(a.ftShape),v=t=>`
|
|
34
34
|
${system.Liquid(`{% assign productImageWidth = 0 %}
|
|
35
35
|
{% case featureMedia.media_type %}
|
|
36
36
|
{% when 'image' %}
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
${CarouselItem_liquid.default({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${r(`gp-ft-image-item !gp-min-w-full !gp-max-w-full ${t??""}`)}`,parentId:`ft-${e}-{{section.id}}-{{product.id}}`,style:g,customStyle:{width:"{{productImageWidth}}px"},children:`
|
|
42
42
|
<div
|
|
43
43
|
class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
44
|
-
style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",
|
|
44
|
+
style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
|
|
45
45
|
>
|
|
46
|
-
${
|
|
46
|
+
${f()}
|
|
47
47
|
</div>
|
|
48
|
-
`})}
|
|
48
|
+
`})}`,$=productFeaturedImage.checkRenderFeaturedCarousel(a),w="gp-featured-image-wrapper",L=system.LiquidIf("product.media.size > 0",`{% assign largestRatio = 0 %}
|
|
49
49
|
${system.LiquidFor("featureMedia in product.media",`
|
|
50
50
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
51
51
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
@@ -53,22 +53,22 @@
|
|
|
53
53
|
${system.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
|
|
54
54
|
`)}
|
|
55
55
|
${system.LiquidFor("featureMedia in product.media",`${system.LiquidIf("featureMedia.media_type == 'image'",`${system.LiquidFor("image in product.images",system.LiquidIf("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
|
|
56
|
-
${
|
|
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})),
|
|
58
|
-
${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass
|
|
59
|
-
`,
|
|
56
|
+
${v()}`)}
|
|
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})),x=()=>`
|
|
58
|
+
${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:w,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:L,productBadgeLiquid:t||""})}
|
|
59
|
+
`,S=()=>{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
|
+
`}},P=()=>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",S())}
|
|
72
72
|
{% assign largestRatio = 0 %}
|
|
73
73
|
{% assign height = featureMedia.height | times: 1.0 %}
|
|
74
74
|
{% assign width = featureMedia.width | times: 1.0 %}
|
|
@@ -88,31 +88,31 @@
|
|
|
88
88
|
>
|
|
89
89
|
<div
|
|
90
90
|
class="gp-relative"
|
|
91
|
-
style="${_function.getStyleOfObject(
|
|
91
|
+
style="${_function.getStyleOfObject(l)}"
|
|
92
92
|
>
|
|
93
93
|
${t}
|
|
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="${d(
|
|
99
|
-
style="${_function.getStyleOfObject(
|
|
98
|
+
class="${d(w)}"
|
|
99
|
+
style="${_function.getStyleOfObject(m)}"
|
|
100
100
|
>
|
|
101
101
|
<div
|
|
102
102
|
class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
103
|
-
style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",
|
|
103
|
+
style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
|
|
104
104
|
>
|
|
105
|
-
${
|
|
105
|
+
${f()}
|
|
106
106
|
</div>
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
</div>
|
|
110
110
|
`);return system.Liquid(`
|
|
111
111
|
{% capture featureImageOnlyOne %}
|
|
112
|
-
${
|
|
112
|
+
${P()}
|
|
113
113
|
{% endcapture %}
|
|
114
114
|
${system.LiquidIf("product.media.size > 1",`
|
|
115
|
-
${system.If(
|
|
116
|
-
${system.If(
|
|
115
|
+
${system.If($,x()," ")}
|
|
116
|
+
${system.If(!$,"{{ featureImageOnlyOne }}"," ")}
|
|
117
117
|
`,"{{ featureImageOnlyOne }}")}
|
|
118
118
|
`)};exports.default=FeatureImageWithGallery;
|
package/dist/cjs/product/settings/product-image-v3/configs/setting-v2/ProductFeatureImage.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var animation=require("../../../../../carousel-v3/plugins/animation.js");const getDefaultResponsive=e=>({desktop:{default:e}}),productFeatureImageSetting=[{id:"hoverEffect",label:"Hover Effect",type:"select",hide:!0,hideOnMode:{mobileOnly:!0},options:[{title:"Zoom",value:"zoom"},{title:"Show other image",value:"other"}],default:"none"},{id:"zoomType",type:"option:value",label:"Zoom Type",hide:!0,default:"default",hideOnMode:{mobileOnly:!0},options:[{label:"Default",value:"default"},{label:"Glasses",value:"glasses"}]},{id:"zoom",type:"input:slider",label:"Zoom Value",min:100,max:200,step:10,default:150,units:["%"],showDefaultUnit:!0,useOnlyUnitInit:!0,isNumber:!0},{id:"otherImage",label:"Other image",type:"dropdown:input",isNumber:!0,isIndexValue:!0,displayOptions:[{label:"Image 1",value:1},{label:"Image 2",value:2},{label:"Image 3",value:3},{label:"Image 4",value:4},{label:"Last image",value:"Last image"}],default:
|
|
1
|
+
"use strict";var animation=require("../../../../../carousel-v3/plugins/animation.js");const getDefaultResponsive=e=>({desktop:{default:e}}),productFeatureImageSetting=[{id:"hoverEffect",label:"Hover Effect",type:"select",hide:!0,hideOnMode:{mobileOnly:!0},options:[{title:"Zoom",value:"zoom"},{title:"Show other image",value:"other"}],default:"none"},{id:"zoomType",type:"option:value",label:"Zoom Type",hide:!0,default:"default",hideOnMode:{mobileOnly:!0},options:[{label:"Default",value:"default"},{label:"Glasses",value:"glasses"}]},{id:"zoom",type:"input:slider",label:"Zoom Value",min:100,max:200,step:10,default:150,units:["%"],showDefaultUnit:!0,useOnlyUnitInit:!0,isNumber:!0},{id:"otherImage",label:"Other image",type:"dropdown:input",isNumber:!0,isIndexValue:!0,displayOptions:[{label:"Image 1",value:1},{label:"Image 2",value:2},{label:"Image 3",value:3},{label:"Image 4",value:4},{label:"Last image",value:"Last image"}],default:1},{id:"ftClickOpenLightBox",label:"Click Effect",type:"select",options:[{title:"Open gallery",value:"popup"},{title:"Open product",value:"product-link"}],devices:getDefaultResponsive("none")},{id:"ftClickOpenNewTab",type:"option:value",options:[{label:"Yes",value:!0},{label:"No",value:!1}],default:!1},{id:"ftNavigationPosition",label:"Navigation",type:"option:illustration",enableTooltip:!0,options:[{label:"No navigation",value:"none",type:"slide-control",hide:!0},{label:"Outside",value:"outside",type:"slide-control",svgName:"gp-slide-control-outside"},{label:"Inside",value:"inside",type:"slide-control",svgName:"gp-slide-control-inside"}],devices:getDefaultResponsive("none")},{id:"ftLoop",type:"toggle",devices:getDefaultResponsive(!0)},{id:"ftPauseOnHover",label:"Pause On Hover",type:"toggle",hide:!0,default:!0},{id:"ftAnimationSpeed",label:"Slide speed",type:"input:slider",useOnlyUnitInit:!0,min:100,max:5e3,step:50,units:["ms"],showDefaultUnit:!0,isNumber:!0,default:500},{id:"ftAnimationMode",label:"Animation",type:"select",default:animation.CAROUSEL_ANIMATION.EASE_OUT.value,options:[{label:"Ease in",value:animation.CAROUSEL_ANIMATION.EASE_IN.value},{label:"Ease out",value:animation.CAROUSEL_ANIMATION.EASE_OUT.value},{label:"Ease in out",value:animation.CAROUSEL_ANIMATION.EASE_IN_OUT.value}]},{id:"ftArrowIcon",type:"icon",hide:!0,label:"Custom Arrow",info:"Choose from list or paste any SVG icon",default:`<svg height="20" width="20" data-name="caret-right-regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508418455613473128">
|
|
2
2
|
<path fill="currentColor" strokeLinecap="round" strokeLinejoin="round" fill="currentColor" d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" /></svg>`},{id:"ftArrowIconColor",label:"Icon color",type:"color-picker-v2",default:"#121212"},{id:"ftArrowIconSize",label:"Number per show",type:"input:stepper",min:1,devices:{desktop:{default:16}}},{id:"ftDragToScroll",label:"Drag to scroll",type:"toggle",hide:!0,default:!0},{id:"ftArrowNavColor",label:"Nav. color",type:"color-picker-v2",default:"brand"},{id:"ftArrowNavSize",type:"size-setting",settingConfig:{width:{name:"Width",units:["px"],displayOptions:["auto"]},height:{name:"Height",units:["px"],displayOptions:["auto"]}},default:{width:"Auto",height:"Auto",padding:{top:"12px",bottom:"12px",left:"12px",right:"12px"},shapeLinked:!0,shape:"square",shapeValue:"1/1"},hiddenSettings:["gap","padding","proportion"]},{id:"ftArrowNavBorder",label:"Nav. border",type:"border",compoDefaultValue:{color:"line-3",borderType:"none",border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",isCustom:!1}},{id:"ftArrowNavRadius",label:"Nav. corner",type:"radius-preset",default:{btrr:"9999px",bblr:"9999px",bbrr:"9999px",btlr:"9999px",radiusType:"circle"}},{id:"ftArrowNavShadow",type:"shadow-v2"},{id:"ftDotStyle",label:"Dot style",type:"option:illustration",enableTooltip:!0,options:[{label:"None",value:"none",type:"carousel-dot",hide:!0},{label:"Inside",value:"inside",type:"carousel-dot",svgName:"gp-carousel-dot-inside"},{label:"Outside",value:"outside",type:"carousel-dot",svgName:"gp-carousel-dot-outside"}],devices:{desktop:{default:"none"}}},{id:"ftDotSize",label:"Dots size",type:"input:stepper",min:1,devices:{desktop:{default:16}}},{id:"ftDotGapToCarousel",label:"Gap to carousel",type:"input:slider",min:0,max:80,isNumber:!0,ignoreMax:!0,devices:{desktop:{default:16}}},{id:"ftDotColor",label:"Dot color",type:"color-picker-v2",devices:{desktop:{default:"#121212"}}},{id:"ftDotActiveColor",label:"Dot color active",type:"color-picker-v2",devices:{desktop:{default:"#FFFFFF"}}}],productSelectDisplaySetting=[{id:"typeDisplay",type:"select",options:[{title:"All images",value:"all-images"},{title:"Select manually",value:"select-manual"}],default:"all-images"},{id:"preDisplay",type:"select",label:"Pre-display",default:"1st-available-variant",options:[{title:"1st available variant",value:"1st-available-variant"},{title:"1st image",value:"1st-images"},{title:"1st video",value:"1st-video"},{title:"1st 3D model",value:"1st-3d-mode"}]}],productFeatureImageStyle=[{id:"ftShape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"square",shapeValue:"1/1",width:"100%",height:void 0,shapeLinked:!0}}},settingConfig:{width:{displayOptions:["full"]}},hiddenSettings:["padding","gap"]},{id:"ftLayout",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:getDefaultResponsive("cover")},{id:"ftCorner",type:"radius-preset",label:"Corner",default:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"},state:{hover:!0,normal:!0}}];exports.productFeatureImageSetting=productFeatureImageSetting,exports.productFeatureImageStyle=productFeatureImageStyle,exports.productSelectDisplaySetting=productSelectDisplaySetting;
|
|
@@ -1,37 +1,37 @@
|
|
|
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{
|
|
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{If as M,LiquidIf as b,LiquidFor as $,Liquid 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:z,...j})=>{let{featuredImageCarouselClasses:S,galleryItemClasses:L,featuredCarouselItemClasses:P}=h({...j,builderProps:{uid:x}}),{featuredImageCarouselStyle:R,featureImageStyle:W,featureImageCarouselOnlyOneImageStyle:T,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
|
+
${H()}
|
|
5
5
|
{% when 'external_video' %}
|
|
6
6
|
{% assign mediaSourceVideo = featureMedia | external_video_url %}
|
|
7
|
-
${
|
|
7
|
+
${V()}
|
|
8
8
|
{% when 'video' %}
|
|
9
9
|
{% assign mediaSourceVideo = featureMedia.sources.last.url %}
|
|
10
|
-
${
|
|
10
|
+
${F()}
|
|
11
11
|
{% when 'model' %}
|
|
12
|
-
${
|
|
12
|
+
${D()}
|
|
13
13
|
{% else %}
|
|
14
|
-
${
|
|
14
|
+
${B()}
|
|
15
15
|
{% endcase %}
|
|
16
|
-
`,
|
|
17
|
-
${
|
|
18
|
-
${
|
|
19
|
-
${
|
|
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}),F=()=>{let a=v({...o(j?.ftLayout),...e("objf",j?.ftLayout)}),i=v({...o(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"})},H=()=>a`
|
|
17
|
+
${G(i("gp-w-full gp-transition-opacity",O,"{{shouldHidden}}"))}
|
|
18
|
+
${M(j?.hoverEffect!=="none",`<div class="${i("zoom-element !gp-max-w-none",u())}">
|
|
19
|
+
${G("image-zoom",!0)}
|
|
20
20
|
</div>`," ")}
|
|
21
|
-
${
|
|
22
|
-
`,
|
|
21
|
+
${M(j?.hoverEffect=="zoom"&&j?.zoomType=="glasses",`<div class="${i("zoom-lens-element",l())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
|
|
22
|
+
`,G=(e,i)=>a`
|
|
23
23
|
{% assign src = featureMedia.src %}
|
|
24
|
-
${
|
|
25
|
-
{% assign other_image_index = ${
|
|
24
|
+
${M(i&&"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
|
-
${g({srcIsLiquidCode:!0,src:
|
|
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:
|
|
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})}`,B=()=>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: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=a=>`
|
|
34
|
+
${_(`{% assign productImageWidth = 0 %}
|
|
35
35
|
{% case featureMedia.media_type %}
|
|
36
36
|
{% when 'image' %}
|
|
37
37
|
{% assign productImageWidth = featureMedia.width %}
|
|
@@ -40,40 +40,40 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
40
40
|
{% endcase %}`)}
|
|
41
41
|
${I({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${L(`gp-ft-image-item !gp-min-w-full !gp-max-w-full ${a??""}`)}`,parentId:`ft-${x}-{{section.id}}-{{product.id}}`,style:N,customStyle:{width:"{{productImageWidth}}px"},children:`
|
|
42
42
|
<div
|
|
43
|
-
class="gp-w-full gp-relative ${
|
|
44
|
-
style="${c(e("pb",
|
|
43
|
+
class="gp-w-full gp-relative ${b("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
|
|
44
|
+
style="${c(e("pb",J))} ${b("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
|
|
45
45
|
>
|
|
46
|
-
${
|
|
46
|
+
${A()}
|
|
47
47
|
</div>
|
|
48
|
-
`})}`,
|
|
49
|
-
${
|
|
48
|
+
`})}`,Q=d(j),U="gp-featured-image-wrapper",X=b("product.media.size > 0",`{% assign largestRatio = 0 %}
|
|
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
|
+
${b("ratio > largestRatio","{% assign largestRatio = ratio %}")}
|
|
54
54
|
`)}
|
|
55
|
-
${
|
|
56
|
-
${
|
|
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:
|
|
58
|
-
${w({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:
|
|
59
|
-
`,
|
|
55
|
+
${$("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 = '' %}")}
|
|
56
|
+
${K()}`)}
|
|
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})),Y=()=>`
|
|
58
|
+
${w({builderProps:{uid:x},rootId:`ft-${x}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:U,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:X,productBadgeLiquid:q||""})}
|
|
59
|
+
`,Z=()=>{switch(j?.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",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`
|
|
62
62
|
{% assign featureMedia = variant.featured_media %}
|
|
63
63
|
{% unless featureMedia %}
|
|
64
64
|
{% assign featureMedia = product.featured_media %}
|
|
65
65
|
{% endunless %}
|
|
66
|
-
`}},
|
|
66
|
+
`}},ee=()=>_(`
|
|
67
67
|
{% assign featureMedia = variant.featured_media %}
|
|
68
68
|
{% unless featureMedia %}
|
|
69
69
|
{% assign featureMedia = product.featured_media %}
|
|
70
70
|
{% endunless %}
|
|
71
|
-
${
|
|
71
|
+
${b("product.media.size > 1",Z())}
|
|
72
72
|
{% assign largestRatio = 0 %}
|
|
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,7 +81,7 @@ import{makeStyleResponsive as e,template as a,cls 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(W)}"
|
|
@@ -95,24 +95,24 @@ import{makeStyleResponsive as e,template as a,cls as i}from"@gem-sdk/core";impor
|
|
|
95
95
|
type="gp-feature-image-only"
|
|
96
96
|
product-id="{{product.id}}"
|
|
97
97
|
product-media="{{product.media.size}}"
|
|
98
|
-
class="${P(
|
|
98
|
+
class="${P(U)}"
|
|
99
99
|
style="${c(T)}"
|
|
100
100
|
>
|
|
101
101
|
<div
|
|
102
|
-
class="gp-w-full gp-relative ${
|
|
103
|
-
style="${c(e("pb",
|
|
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
|
-
`);return
|
|
110
|
+
`);return _(`
|
|
111
111
|
{% capture featureImageOnlyOne %}
|
|
112
|
-
${
|
|
112
|
+
${ee()}
|
|
113
113
|
{% endcapture %}
|
|
114
|
-
${
|
|
115
|
-
${
|
|
116
|
-
${
|
|
114
|
+
${b("product.media.size > 1",`
|
|
115
|
+
${M(Q,Y()," ")}
|
|
116
|
+
${M(!Q,"{{ featureImageOnlyOne }}"," ")}
|
|
117
117
|
`,"{{ featureImageOnlyOne }}")}
|
|
118
118
|
`)};export{FeatureImageWithGallery as default};
|
package/dist/esm/product/settings/product-image-v3/configs/setting-v2/ProductFeatureImage.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{CAROUSEL_ANIMATION as e}from"../../../../../carousel-v3/plugins/animation.js";let getDefaultResponsive=e=>({desktop:{default:e}}),productFeatureImageSetting=[{id:"hoverEffect",label:"Hover Effect",type:"select",hide:!0,hideOnMode:{mobileOnly:!0},options:[{title:"Zoom",value:"zoom"},{title:"Show other image",value:"other"}],default:"none"},{id:"zoomType",type:"option:value",label:"Zoom Type",hide:!0,default:"default",hideOnMode:{mobileOnly:!0},options:[{label:"Default",value:"default"},{label:"Glasses",value:"glasses"}]},{id:"zoom",type:"input:slider",label:"Zoom Value",min:100,max:200,step:10,default:150,units:["%"],showDefaultUnit:!0,useOnlyUnitInit:!0,isNumber:!0},{id:"otherImage",label:"Other image",type:"dropdown:input",isNumber:!0,isIndexValue:!0,displayOptions:[{label:"Image 1",value:1},{label:"Image 2",value:2},{label:"Image 3",value:3},{label:"Image 4",value:4},{label:"Last image",value:"Last image"}],default:
|
|
1
|
+
import{CAROUSEL_ANIMATION as e}from"../../../../../carousel-v3/plugins/animation.js";let getDefaultResponsive=e=>({desktop:{default:e}}),productFeatureImageSetting=[{id:"hoverEffect",label:"Hover Effect",type:"select",hide:!0,hideOnMode:{mobileOnly:!0},options:[{title:"Zoom",value:"zoom"},{title:"Show other image",value:"other"}],default:"none"},{id:"zoomType",type:"option:value",label:"Zoom Type",hide:!0,default:"default",hideOnMode:{mobileOnly:!0},options:[{label:"Default",value:"default"},{label:"Glasses",value:"glasses"}]},{id:"zoom",type:"input:slider",label:"Zoom Value",min:100,max:200,step:10,default:150,units:["%"],showDefaultUnit:!0,useOnlyUnitInit:!0,isNumber:!0},{id:"otherImage",label:"Other image",type:"dropdown:input",isNumber:!0,isIndexValue:!0,displayOptions:[{label:"Image 1",value:1},{label:"Image 2",value:2},{label:"Image 3",value:3},{label:"Image 4",value:4},{label:"Last image",value:"Last image"}],default:1},{id:"ftClickOpenLightBox",label:"Click Effect",type:"select",options:[{title:"Open gallery",value:"popup"},{title:"Open product",value:"product-link"}],devices:getDefaultResponsive("none")},{id:"ftClickOpenNewTab",type:"option:value",options:[{label:"Yes",value:!0},{label:"No",value:!1}],default:!1},{id:"ftNavigationPosition",label:"Navigation",type:"option:illustration",enableTooltip:!0,options:[{label:"No navigation",value:"none",type:"slide-control",hide:!0},{label:"Outside",value:"outside",type:"slide-control",svgName:"gp-slide-control-outside"},{label:"Inside",value:"inside",type:"slide-control",svgName:"gp-slide-control-inside"}],devices:getDefaultResponsive("none")},{id:"ftLoop",type:"toggle",devices:getDefaultResponsive(!0)},{id:"ftPauseOnHover",label:"Pause On Hover",type:"toggle",hide:!0,default:!0},{id:"ftAnimationSpeed",label:"Slide speed",type:"input:slider",useOnlyUnitInit:!0,min:100,max:5e3,step:50,units:["ms"],showDefaultUnit:!0,isNumber:!0,default:500},{id:"ftAnimationMode",label:"Animation",type:"select",default:e.EASE_OUT.value,options:[{label:"Ease in",value:e.EASE_IN.value},{label:"Ease out",value:e.EASE_OUT.value},{label:"Ease in out",value:e.EASE_IN_OUT.value}]},{id:"ftArrowIcon",type:"icon",hide:!0,label:"Custom Arrow",info:"Choose from list or paste any SVG icon",default:`<svg height="20" width="20" data-name="caret-right-regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508418455613473128">
|
|
2
2
|
<path fill="currentColor" strokeLinecap="round" strokeLinejoin="round" fill="currentColor" d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" /></svg>`},{id:"ftArrowIconColor",label:"Icon color",type:"color-picker-v2",default:"#121212"},{id:"ftArrowIconSize",label:"Number per show",type:"input:stepper",min:1,devices:{desktop:{default:16}}},{id:"ftDragToScroll",label:"Drag to scroll",type:"toggle",hide:!0,default:!0},{id:"ftArrowNavColor",label:"Nav. color",type:"color-picker-v2",default:"brand"},{id:"ftArrowNavSize",type:"size-setting",settingConfig:{width:{name:"Width",units:["px"],displayOptions:["auto"]},height:{name:"Height",units:["px"],displayOptions:["auto"]}},default:{width:"Auto",height:"Auto",padding:{top:"12px",bottom:"12px",left:"12px",right:"12px"},shapeLinked:!0,shape:"square",shapeValue:"1/1"},hiddenSettings:["gap","padding","proportion"]},{id:"ftArrowNavBorder",label:"Nav. border",type:"border",compoDefaultValue:{color:"line-3",borderType:"none",border:"solid",borderWidth:"1px",width:"1px 1px 1px 1px",isCustom:!1}},{id:"ftArrowNavRadius",label:"Nav. corner",type:"radius-preset",default:{btrr:"9999px",bblr:"9999px",bbrr:"9999px",btlr:"9999px",radiusType:"circle"}},{id:"ftArrowNavShadow",type:"shadow-v2"},{id:"ftDotStyle",label:"Dot style",type:"option:illustration",enableTooltip:!0,options:[{label:"None",value:"none",type:"carousel-dot",hide:!0},{label:"Inside",value:"inside",type:"carousel-dot",svgName:"gp-carousel-dot-inside"},{label:"Outside",value:"outside",type:"carousel-dot",svgName:"gp-carousel-dot-outside"}],devices:{desktop:{default:"none"}}},{id:"ftDotSize",label:"Dots size",type:"input:stepper",min:1,devices:{desktop:{default:16}}},{id:"ftDotGapToCarousel",label:"Gap to carousel",type:"input:slider",min:0,max:80,isNumber:!0,ignoreMax:!0,devices:{desktop:{default:16}}},{id:"ftDotColor",label:"Dot color",type:"color-picker-v2",devices:{desktop:{default:"#121212"}}},{id:"ftDotActiveColor",label:"Dot color active",type:"color-picker-v2",devices:{desktop:{default:"#FFFFFF"}}}],productSelectDisplaySetting=[{id:"typeDisplay",type:"select",options:[{title:"All images",value:"all-images"},{title:"Select manually",value:"select-manual"}],default:"all-images"},{id:"preDisplay",type:"select",label:"Pre-display",default:"1st-available-variant",options:[{title:"1st available variant",value:"1st-available-variant"},{title:"1st image",value:"1st-images"},{title:"1st video",value:"1st-video"},{title:"1st 3D model",value:"1st-3d-mode"}]}],productFeatureImageStyle=[{id:"ftShape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"square",shapeValue:"1/1",width:"100%",height:void 0,shapeLinked:!0}}},settingConfig:{width:{displayOptions:["full"]}},hiddenSettings:["padding","gap"]},{id:"ftLayout",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill image",value:"cover",type:"image",svgName:"gp-image-cover"},{label:"Fit image",value:"contain",type:"image",svgName:"gp-image-contain"}],devices:getDefaultResponsive("cover")},{id:"ftCorner",type:"radius-preset",label:"Corner",default:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"},state:{hover:!0,normal:!0}}];export{productFeatureImageSetting,productFeatureImageStyle,productSelectDisplaySetting};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{template as s,makeStyleResponsive as t}from"@gem-sdk/core";let EasifyProductOptions=({setting:
|
|
1
|
+
import{template as s,makeStyleResponsive as t}from"@gem-sdk/core";let EasifyProductOptions=({setting:d,advanced:i})=>{let{align:o}=d??{};return s`
|
|
2
2
|
<div
|
|
3
|
-
class="${
|
|
4
|
-
style="${{...t("ta",
|
|
3
|
+
class="${i?.cssClass}"
|
|
4
|
+
style="${{...t("ta",o)}}"
|
|
5
5
|
>
|
|
6
|
-
<div class="easify-product-options"></div>
|
|
6
|
+
<div class="easify-product-options" product-id="{{product.id}}"></div>
|
|
7
7
|
</div>
|
|
8
8
|
`};export{EasifyProductOptions as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/components",
|
|
3
|
-
"version": "12.0.0-dev.
|
|
3
|
+
"version": "12.0.0-dev.123",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"i18n:extract": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/translate/extract-texts-to-locales.js && node ./scripts/translate/en-keys-usage.js"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "12.0.0-dev.
|
|
29
|
+
"@gem-sdk/core": "12.0.0-dev.122",
|
|
30
30
|
"@gem-sdk/styles": "12.0.0-dev.113",
|
|
31
31
|
"@gem-sdk/system": "12.0.0-dev.113",
|
|
32
32
|
"@types/react-transition-group": "^4.4.12",
|