@gem-sdk/components 8.0.0-dev.76 → 8.0.0-dev.78
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/grid/components/row/Row.liquid.js +1 -1
- package/dist/cjs/helpers.js +1 -1
- package/dist/cjs/hero-banner/components/HeroBanner.liquid.js +10 -10
- package/dist/cjs/hero-banner/components/HeroBannerItem.liquid.js +9 -9
- package/dist/cjs/hero-banner/settings/configs/settings.js +1 -1
- package/dist/cjs/image/common/helpers.js +1 -1
- package/dist/cjs/image-comparison/common/helpers.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/text/common/helpers.js +1 -1
- package/dist/cjs/video/common/helpers.js +1 -1
- package/dist/cjs/video/components/LiteVimeoEmbed.liquid.js +11 -11
- package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js +10 -10
- package/dist/cjs/video/components/Video.liquid.js +3 -3
- package/dist/cjs/video/settings/configs/settings.js +1 -1
- package/dist/esm/grid/components/row/Row.liquid.js +13 -13
- package/dist/esm/helpers.js +1 -1
- package/dist/esm/hero-banner/components/HeroBanner.liquid.js +12 -12
- package/dist/esm/hero-banner/components/HeroBannerItem.liquid.js +10 -10
- package/dist/esm/hero-banner/settings/configs/settings.js +1 -1
- package/dist/esm/image/common/helpers.js +1 -1
- package/dist/esm/image-comparison/common/helpers.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/text/common/helpers.js +1 -1
- package/dist/esm/video/common/helpers.js +1 -1
- package/dist/esm/video/components/LiteVimeoEmbed.liquid.js +11 -11
- package/dist/esm/video/components/LiteYouTubeEmbed.liquid.js +10 -10
- package/dist/esm/video/components/Video.liquid.js +3 -3
- package/dist/esm/video/settings/configs/settings.js +1 -1
- package/dist/types/index.d.ts +11 -4
- package/package.json +2 -2
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js");const LiteVimeoEmbed=e=>{let{title:s,id:t,lazy:l,aspectRatio:a,autoplay:r,muted:i,thumbnailLink:m,poster:c}=e,{iframeSrc:
|
|
2
|
-
<gp-lite-vimeo-embed gp-data='${JSON.stringify(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js");const LiteVimeoEmbed=e=>{let{title:s,id:t,lazy:l,aspectRatio:a,autoplay:r,muted:i,thumbnailLink:m,poster:c,translatedVideoUrl:o}=e,{iframeSrc:p}=helpers$1.getVimeoParams(e),d=!l,g=e.thumbnail,y=system.createStateOrContext({id:t,thumbnail:m,lazy:l,iframeSrc:p,title:s,autoplay:r,muted:i,style:e?.vimeoStyleIframe||"",translatedVideoUrl:o}),n=system.createStyle({...styles.getIframeVimeoStyle(a)}),u=system.createStyle({...styles.getArticleVimeoStyle(a,"")}),f=system.createClass({...classes.getArticleVimeoClasses(g,a)}),h=system.createClass({...classes.getImageVimeoClasses(d)}),$=system.createClass({...classes.getButtonVimeoClasses(d)}),b=system.createClass({...classes.getIframeVimeoClasses()});return core.template`
|
|
2
|
+
<gp-lite-vimeo-embed gp-data='${JSON.stringify(y)}'>
|
|
3
3
|
<article
|
|
4
4
|
aria-hidden
|
|
5
|
-
class="${
|
|
5
|
+
class="${f}"
|
|
6
6
|
data-title="${s}"
|
|
7
|
-
style="${
|
|
7
|
+
style="${u}"
|
|
8
8
|
>
|
|
9
|
-
${NextImage_liquid.default({src:
|
|
10
|
-
${system.If(!
|
|
11
|
-
<button type="button" class="${
|
|
9
|
+
${NextImage_liquid.default({src:g,alt:c?.altText,title:c?.imageTitle,className:h,isDisableAspectStyle:!0,enableLazyLoadImage:!0,priority:c?.preload,height:c?.height,width:c?.width})}
|
|
10
|
+
${system.If(!d,core.template`
|
|
11
|
+
<button type="button" class="${$}" aria-label="Play">
|
|
12
12
|
<svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
|
|
13
13
|
<path
|
|
14
14
|
fill="currentColor"
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
18
|
</button>`)}
|
|
19
|
-
${system.If(
|
|
19
|
+
${system.If(d,core.template`
|
|
20
20
|
<iframe
|
|
21
|
-
style="${
|
|
21
|
+
style="${n}"
|
|
22
22
|
title="${s}"
|
|
23
23
|
frameborder="0"
|
|
24
24
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
|
25
25
|
allowfullscreen
|
|
26
|
-
src="${
|
|
27
|
-
class="${
|
|
26
|
+
src="${p}"
|
|
27
|
+
class="${b}"
|
|
28
28
|
></iframe>`)}
|
|
29
29
|
</article>
|
|
30
30
|
</gp-lite-vimeo-embed>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js");const LiteYouTubeEmbed=e=>{let{style:s,iframeClass:t,wrapperClass:a,title:l,poster:r}=e,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js");const LiteYouTubeEmbed=e=>{let{style:s,iframeClass:t,wrapperClass:a,title:l,poster:r,translatedVideoUrl:i}=e,o=`gp-video-${e.uid}`,{posterUrl:c,iframeSrc:u}=helpers$1.getYoutubeParams(e),d=r?.preload,m=system.createStateOrContext({lazy:e.lazy,style:s,title:l,iframeSrc:u,translatedVideoUrl:i}),p=!e.lazy,y=system.createClass({...classes.getButtonYoutubeClasses(p)}),g=system.createClass({...classes.getImageYoutubeClasses()}),b=system.createClass({...classes.getArticleYoutubeClasses(d||!1,a)}),n=system.createClass({...classes.getIframeYoutubeClasses(t)}),f=system.createStyle({...styles.getIframeYoutubeStyle(s)}),$=system.createStyle({...styles.getArticleYoutubeStyle(s,c)}),h=()=>core.template`
|
|
2
2
|
<iframe
|
|
3
3
|
id="player-wrapper-${e.uid}"
|
|
4
|
-
class="${
|
|
5
|
-
style="${
|
|
4
|
+
class="${n}"
|
|
5
|
+
style="${f}"
|
|
6
6
|
title="${l}"
|
|
7
7
|
frameborder="0"
|
|
8
8
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
|
9
9
|
allowfullscreen
|
|
10
|
-
src="${
|
|
10
|
+
src="${u}"
|
|
11
11
|
></iframe>
|
|
12
12
|
`;return core.template`
|
|
13
|
-
<gp-lite-youtube-embed gp-data='${JSON.stringify(
|
|
13
|
+
<gp-lite-youtube-embed gp-data='${JSON.stringify(m)}'>
|
|
14
14
|
<article
|
|
15
15
|
aria-hidden
|
|
16
|
-
class="${
|
|
16
|
+
class="${b}"
|
|
17
17
|
data-title="${l}"
|
|
18
|
-
style="${
|
|
18
|
+
style="${$}"
|
|
19
19
|
>
|
|
20
|
-
${NextImage_liquid.default({id:
|
|
21
|
-
<button type="button" aria-label="Play" class="${
|
|
20
|
+
${NextImage_liquid.default({id:o,src:c,alt:r?.altText,title:r?.imageTitle,priority:r?.preload,enableLazyLoadImage:!0,className:g,isDisableAspectStyle:!0,isNotLazyload:r?.preload})}
|
|
21
|
+
<button type="button" aria-label="Play" class="${y}">
|
|
22
22
|
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
|
|
23
23
|
<path
|
|
24
24
|
d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
|
|
28
28
|
</svg>
|
|
29
29
|
</button>
|
|
30
|
-
${system.If(
|
|
30
|
+
${system.If(p,h())}
|
|
31
31
|
</article>
|
|
32
32
|
</gp-lite-youtube-embed>
|
|
33
33
|
${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),HTML5Embed_liquid=require("./HTML5Embed.liquid.js"),LiteVimeoEmbed_liquid=require("./LiteVimeoEmbed.liquid.js"),LiteYouTubeEmbed_liquid=require("./LiteYouTubeEmbed.liquid.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers$1=require("../../image/common/helpers.js");const Video=({className:e,setting:t,style:s,builderAttrs:l,builderProps:i,advanced:a})=>{let r=helpers.getSettingTranslatedVideoAndThumbnail(t,i?.uid),{youtubeUrl:d="",vimeoUrl:o="",html5Url:u,autoplay:m=!1,loopVideo:c=!1,controls:y=!1,mute:n,poster:p,startTime:g,endTime:b,lazy:q,type:h}=r??{},{youtubeUrlTranslated:V,vimeoUrlTranslated:f}=r,I=helpers$1.getImageSrc(p),{cssClass:S}=a??{},k=helpers.getAspectRatioSettings(r?.ratioOptions,r?.aspectRatio),L=system.createAttr({...attrs.getAttr({uid:i?.uid||""})}),T=system.createStyle({...styles.getStyle(r,s)}),_=system.createStyle({...styles.getYoutubeStyle(k)}),j=system.createStyle({...styles.getVimeoStyle(k)}),v=system.createStyle({...styles.getHtml5Style(k)}),$=system.createStyle({...styles.getFallBackImageStyle(t?.aspectRatio)}),x=system.createClass({...classes.getFallbackImageClasses()}),E=system.createClass({...classes.getClasses({className:e,builderProps:i,isInstantLP:!1,advancedCssClass:S})}),N=()=>{switch(h){case"youtube":{let e=helpers.getYoutubeVideoId(d),t=core.hasTranslatedLiquid(V);if((!helpers.youtubeVideoRegex.test(d)||!e)&&!t)return NextImage_liquid.default({src:helpers.fallbackImageVideoUrl,alt:"Fallback video",className:x,style:$});let s="";return c&&(s+=`&loop=1&playlist=${e}`),g&&(s+=`&start=${helpers.parseTimeVideo(g)}`),b&&(s+=`&end=${helpers.parseTimeVideo(b)}`),LiteYouTubeEmbed_liquid.default({uid:i?.uid,id:e??"",translatedVideoUrl:t?V:"",autoplay:m,title:"Video",controls:y,params:s,adNetwork:!1,noCookie:!0,muted:!n,thumbnail:I,lazy:q??!0,preload:p?.preload,poster:p,style:_})}case"vimeo":{let e=helpers.getVimeoVideoId(o),t=core.hasTranslatedLiquid(f);if((!helpers.vimeoVideoRegex.test(o)||!e)&&!t)return NextImage_liquid.default({src:helpers.fallbackImageVideoUrl,alt:"Fallback video",className:x,style:$});return LiteVimeoEmbed_liquid.default({muted:!n,loop:c,controls:y,thumbnail:I,thumbnailLink:p?.src,autoplay:m,lazy:q??!0,id:e??"",translatedVideoUrl:t?f:"",title:"Video",aspectRatio:k,poster:p,vimeoStyleIframe:j})}case"html5":if(!u)return NextImage_liquid.default({src:helpers.fallbackImageVideoUrl,alt:"Fallback video",className:x,style:$});return HTML5Embed_liquid.default({uid:i?.uid,muted:!n,loop:c,controls:y,autoplay:m,src:u,thumbnail:I,title:"Video",poster:p,lazy:q??!0,isVideoComponent:!0,style:v})}};return core.template`
|
|
2
2
|
<div
|
|
3
|
-
${{...l}} ${{...
|
|
4
|
-
${
|
|
3
|
+
${{...l}} ${{...L}} class="${E}" style="${T}">
|
|
4
|
+
${N()}
|
|
5
5
|
</div>
|
|
6
6
|
`};exports.default=Video;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var helpers=require("../../../helpers.js");const VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=drIt4RH_kyQ",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify. <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];exports.VideoSettings=VideoSettings;
|
|
1
|
+
"use strict";var helpers=require("../../../helpers.js");const VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=drIt4RH_kyQ",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify. <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"translate",type:"input",default:[{id:"youtubeUrl"},{id:"vimeoUrl"},{id:"html5Url"},{id:"poster",fields:["src"]}]},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];exports.VideoSettings=VideoSettings;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import{template as e,WrapRenderChildren as o,RenderChildren as
|
|
2
|
-
${
|
|
1
|
+
import{template as e,WrapRenderChildren as o,RenderChildren as r,RenderIf as s,hasTranslatedLiquid as t,isLocalEnv as i,baseAssetURL as l}from"@gem-sdk/core";import{getBackgroundTranslated as a,getSettingPreloadData as m}from"../../../helpers.js";import p from"../../../video/components/HTML5Embed.liquid.js";import{createClass as d,If as n}from"@gem-sdk/system";import{getYoutubeVideoId as c}from"../../../video/common/helpers.js";import u from"../../../video/components/LiteYouTubeEmbed.liquid.js";import{getAttr as $}from"./common/attrs.js";import{getClass as f}from"./common/classes.js";import{getRowStyle as g}from"./common/styles.js";import{getData as y,checkHasBackgroundVideo as k,isRenderHtmlVideo as v,isRenderYoutubeVideo as j}from"./common/helpers.js";import{getResponsiveSetting as b}from"../../../hero-banner/common/helpers.js";let Row=h=>{let{styles:w,setting:C,rawChildren:E,builderProps:S}=h,{isSection:q}=C??{},{background:L}=w??{},P=q?"section":"div",V=a({background:L,uid:S?.uid,translate:w?.translate,pageContext:h.pageContext}),{stateData:x}=y(h),{rowStyle:z,backgroundBoxStyle:A,embedVideoStyle:N,sectionStyle:R}=g({rowProps:h,type:"Liquid",translatedBackground:V}),{rowAttr:T}=$(h),{rowClass:_,backgroundBoxClass:G,backgroundBoxInnerClass:I,sectionClass:M,wrapperYoutubeClasses:O,iframeYoutubeClasses:B}=f(h),H=d({[_]:!0}),U=()=>{if(!k(L))return;let e=b(L||{});if(v(L))return p({uid:S?.uid,muted:!0,loop:e.desktop?.loop,controls:!1,autoplay:!0,src:"",title:"Video",className:"gp-relative",style:N});if(j(L)){let o=e?.desktop?.video??"",r=c(o)||"",s=t(o),i=`&loop=false&playlist=${r}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return u({uid:S?.uid,id:r,autoplay:!0,title:"Video",translatedVideoUrl:s?o:"",controls:!1,params:i,adNetwork:!1,noCookie:!0,muted:!0,lazy:e?.desktop?.lazyLoad??!0,preload:!0,style:N,wrapperClass:O,iframeClass:B})}},Y=()=>{if(k(L))return e`
|
|
2
|
+
${s(i,`<script ${m('class="gps-link" delay',"src")}="{{ 'gp-row-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${m('class="gps-link" delay',"src")}="${l}/assets-v2/gp-row-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
|
|
3
3
|
`},D=e`
|
|
4
|
-
<gp-row gp-data='${x}' ${{...T}} class="${
|
|
5
|
-
${
|
|
6
|
-
<div class="${
|
|
7
|
-
<div class="${
|
|
4
|
+
<gp-row gp-data='${x}' ${{...T}} class="${H}" style="${z()}">
|
|
5
|
+
${n(!!U(),e`
|
|
6
|
+
<div class="${G}" style="${A}">
|
|
7
|
+
<div class="${I}">${U()}</div>
|
|
8
8
|
</div>
|
|
9
9
|
`)}
|
|
10
10
|
|
|
11
|
-
${o({uid:
|
|
11
|
+
${o({uid:S?.uid||"",customProps:E?.[0].customProps},E?.map(e=>{if(e)return r({...e,order:C?.order,layout:C?.layout,justifyContent:C?.verticalAlign})}))}
|
|
12
12
|
|
|
13
13
|
${Y()}
|
|
14
14
|
</gp-row>
|
|
15
15
|
`;return e`
|
|
16
|
-
${
|
|
16
|
+
${s(!!w?.preloadBgImage,`${s(!!L?.desktop?.image?.src,`<link rel="preload" href="${L?.desktop?.image?.src}" as="image" />`)}${s(!!L?.tablet?.image?.src,`<link rel="preload" href="${L?.tablet?.image?.src}" as="image" />`)}${s(!!L?.mobile?.image?.src,`<link rel="preload" href="${L?.mobile?.image?.src}" as="image" />`)}`)}
|
|
17
17
|
|
|
18
|
-
${
|
|
18
|
+
${s(!!q,"{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}")}
|
|
19
19
|
|
|
20
|
-
${
|
|
21
|
-
<${
|
|
22
|
-
class="${
|
|
20
|
+
${n(q,e`
|
|
21
|
+
<${P}
|
|
22
|
+
class="${M} ${q?m("gps-lazy"):""}"
|
|
23
23
|
style="${R}"
|
|
24
24
|
>
|
|
25
25
|
${D}
|
|
26
|
-
</${
|
|
26
|
+
</${P}>
|
|
27
27
|
`,e`${D}`)}
|
|
28
28
|
`};export{Row as default};
|
package/dist/esm/helpers.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{DEVICES as e,globalEvent as t,cloneDeep as r}from"@gem-sdk/core";import i from"./link/components/Link.js";let REGEX_PAGE_TYPE=new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart|policies)\/?/i),isShopifyDomain=(e,t)=>{let r=new RegExp(/^https?:\/\//i);return e&&!r.test(t)&®EX_PAGE_TYPE.test(t)},getLinkArticle=(e,t)=>"scroll-to"==e?t?.link:"{{article.url}}",isTransparentColor=e=>!!e&&(e.startsWith("#")?isHexTransparent(e):e.startsWith("rgb")?isTransparentRGBA(e):"transparent"==e),isTransparentRGBA=e=>{let t=e.replace(/\s/g,"").match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i)?.map(Number).filter(e=>!isNaN(e))??[0,0,0,1];return 0===t[t.length-1]},isHexTransparent=e=>{let t=!1,r=e.slice(e.startsWith("#")?1:0);3===r.length?r=[...r].map(e=>e+e).join(""):8===r.length&&(t=!0);let i=parseInt(r,16),
|
|
1
|
+
import{DEVICES as e,globalEvent as t,cloneDeep as r}from"@gem-sdk/core";import i from"./link/components/Link.js";import{isSupportTranslatedText as l}from"./text/common/helpers.js";let REGEX_PAGE_TYPE=new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart|policies)\/?/i),isShopifyDomain=(e,t)=>{let r=new RegExp(/^https?:\/\//i);return e&&!r.test(t)&®EX_PAGE_TYPE.test(t)},getLinkArticle=(e,t)=>"scroll-to"==e?t?.link:"{{article.url}}",isTransparentColor=e=>!!e&&(e.startsWith("#")?isHexTransparent(e):e.startsWith("rgb")?isTransparentRGBA(e):"transparent"==e),isTransparentRGBA=e=>{let t=e.replace(/\s/g,"").match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i)?.map(Number).filter(e=>!isNaN(e))??[0,0,0,1];return 0===t[t.length-1]},isHexTransparent=e=>{let t=!1,r=e.slice(e.startsWith("#")?1:0);3===r.length?r=[...r].map(e=>e+e).join(""):8===r.length&&(t=!0);let i=parseInt(r,16),l=t?255&i:void 0;return 0===l||!!l},youtubeShortsRegex=/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/shorts\/([^"&?/\s]{11})$/i,getDynamicSourceLocales=({val:e,uid:t,settingId:r,isLiquid:i,pageContext:n,isCapitalize:a,defaultVal:o="",translate:s,isReplaceLocationOrigin:c,isReplaceMaxSize:g,isReplaceInventoryQuantity:p})=>{let u=new RegExp(/\{\{.*?\}\}|\{%.*?%\}/).test(e?.toString()??""),f=n?.isTranslateWithLocale?1e3:5e3,d=l(s)||s&&s?.length>0;if(!d||!e?.toString().trim()||e.toString().length>f||u||n?.isPreviewing)return e??o;let h=`g${t}_${r}`,m=`section.settings.${h}`;return(n?.isTranslateWithLocale&&(m=`'sections.${n.sectionName}.${h}_html' | t`),c&&(m+=" | replace: '$locationOrigin', locationOrigin"),g&&(m+=" | replace: '$max_size', '10MB'"),p&&(m+=" | replace: '<$quantity$>', inventory_quantity | replace: '<$quantity$>', inventory_quantity"),a&&(m=`${m} | downcase`),i)?m:`{{ ${m} }}`},getStaticLocale=(e,t)=>`{{ 'gempages.${e}.${t}' | t }}`,getSettingPreloadData=(e,t)=>`{% if section.settings.section_preload == "false" %}${e} ${t?`{% else %}${t}`:""}{% endif %}`,getHttpUrl=e=>e?e.match(/^https?:\/\//i)?e:`http://${e}`:"";function normalizeMailto(e){if(e.startsWith("mailto:")){let[t,r]=e.split("?");if(r){let i=r.replace(/\+/g,"%20");e=`${t}?${i}`}}return e}let getInsertLinkData=(e,t,r)=>{let l=["#","mailto:","tel:"],n=["product.url"],a=t?.link!==void 0&&""!==t.link,o=t?.link??"",s="/"===o,c=new RegExp(/^(?:https?:\/\/)?[\w.-]+\.[a-z]{2,}/i),g=a&&c.test(o);g&&(o=getHttpUrl(o)),a&&o.toLowerCase().startsWith("mailto:")&&o.includes("+")&&(o=normalizeMailto(o));let p=()=>!!(l.find(e=>o.startsWith(e))||n.find(e=>o.includes(e))),u=g||isShopifyDomain(a,o)||p()||s||isLinkedToSalesPage(t?.type);(isShopifyDomain(a,o)||s)&&(o=t?.isTranslate?"$locationOrigin"+o:"{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}"+o);let f=u?t?.isLiquid?"a":i:e,d={href:o,target:t?.target,...t?.noFollow&&{rel:"nofollow"}},h=u?d:a?{...d,type:r}:{type:r};return{Wrap:f,urlData:h,shouldRenderLink:u}},isLinkedToSalesPage=e=>"go-to-sales-page"===e,checkIsScrollToTop=e=>e?.type==="scroll-to"&&e?.link==="#scroll-to-top",checkIsOpenPopup=e=>e?.type==="open-popup"&&e?.link?.startsWith("#el-"),getLinkData=({setting:e,htmlType:t,defaultWrap:r,isLiquid:l=!1,enableImageLink:n=!1})=>{let a=["product.url"],o=["#","mailto:","tel:"],s=e?.link??"",c="/"===s,g=e?.link!==void 0&&""!==e.link,p=new RegExp(/^https?:\/\//i),u=g&&p.test(s);g&&s.toLowerCase().startsWith("mailto:")&&s.includes("+")&&(s=normalizeMailto(s));let f=()=>!!(a.find(e=>s.includes(e))||o.find(e=>s.startsWith(e))),d=n&&(u||isShopifyDomain(g,s)||f()||c||isLinkedToSalesPage(e?.type)),h=s;l&&(isShopifyDomain(g,s)||c)&&(h=e?.isTranslate?"$locationOrigin"+s:"{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}"+s);let m=d?l?"a":i:r,y={href:h,target:e?.target,...e?.noFollow&&{rel:"nofollow"}},S=d?y:g?{...y,type:t}:{type:t};return{Wrapper:m,urlData:S,shouldRenderLink:d}},replaceLinkData=(e,t)=>{let r=/<a\s[^>]*>.*?<\/a>/;if(e&&r.test(e)){let r;let i=/<a\s+(?:[^>]*?\s+)?href=["']([^"']*)["'](?:\s+[^>]*?)?(?:target=["']([^"']*)["'])?.*?>.*?<\/a>/gi,l=e.toString();for(;null!==(r=i.exec(l));){let e=r[1],{urlData:i}=getInsertLinkData("",{link:e,isTranslate:t});l=l.replace(r[0],r[0].replace(/(href=['"])([^'"]*)(['"])/i,`$1${i.href}$3`))}return l}return e};function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}function filterTruthyObject(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}let getDisplayStyle=(t,r)=>{let i={};return e.forEach(e=>{i={...i,[`--d${"desktop"===e?"":`-${e}`}`]:`${t(e)?"none":r}`}}),i},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let r="string"==typeof e?e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em",""):t;return isNaN(Number(r))?t:Number(r)},getAllHrefFromString=e=>{let t;if(!e)return[];let r=/href="([^"]*)"/g,i=[];for(;null!==(t=r.exec(e));)t[1]&&i.push(t[1]);return i},replaceAllHrefFromString=(e,t)=>{let r;if(!e)return"";let i=/href="([^"]*)"/g,l=0;for(;null!==(r=i.exec(e));)r[1]&&(e=e.replace(r[1],t[l]??""),l++);return e};function isEmptyObject(e){return 0===Object.keys(e).length&&"object"==typeof e}let handleClickLink=(e,r)=>{if("edit"!==r){if(checkIsScrollToTop(e)){window.scrollTo({top:0,behavior:"smooth"});return}if(checkIsOpenPopup(e)){let r=e?.link?.replace("#el-","#");t.dispatch("onOpenDialog",{popupUId:r});return}e?.link?.startsWith("#")&&t.dispatch("onOpenDialog",{popupUId:e?.link})}},hasTranslateIdInSetting=(e,t)=>!!t&&0!==t.length&&t.some(t=>t.id===e),getSeoTranslated=(e,t,i)=>{if(!e||!i||!t||"string"==typeof t&&(!t.includes("alt")||!t.includes("title"))||Array.isArray(t)&&!hasTranslateIdInSetting("alt",t)&&!hasTranslateIdInSetting("title",t))return e;let l=r(e);return e.alt&&(l.alt=getDynamicSourceLocales({val:e.alt,settingId:"alt",translate:"true",uid:i}).toString()),e.title&&(l.title=getDynamicSourceLocales({val:e.title,settingId:"title",translate:"true",uid:i}).toString()),l},getBackgroundTranslated=({background:e,translate:t,uid:i,pageContext:l,isTranslateVideo:n=!0})=>{if(!e)return{};if("string"==typeof t||!hasTranslateIdInSetting("background",t)||!i)return e;let a=r(e);for(let e in a){let t=a[e];if(t){if(t.image?.src){let r=getDynamicSourceLocales({val:t.image.src,uid:i,settingId:`background_${e}_image_src`,translate:"true",pageContext:l});t.image.src=String(r)}if(n){if("youtube"===t.videoType&&t.video){let r=getDynamicSourceLocales({val:t.video,uid:i,settingId:`background_${e}_video`,translate:"true",pageContext:l});t.video=String(r)}if("html5"===t.videoType&&t.videoHtml5){let r=getDynamicSourceLocales({val:t.videoHtml5,uid:i,settingId:`background_${e}_videoHtml5`,translate:"true",pageContext:l});t.videoHtml5=String(r)}}}}return a},safeSvgIcon=e=>e?e.replace(/\s*(\r\n|\n|\r)\s*/g,"").replace(/\\/g,"\\\\").replace(/"/g,'\\"'):"";export{REGEX_PAGE_TYPE,checkIsOpenPopup,checkIsScrollToTop,convertUnitToNumber,filterTruthyObject,filterTruthyStyles,getAllHrefFromString,getBackgroundTranslated,getDisplayStyle,getDynamicSourceLocales,getInsertLinkData,getLinkArticle,getLinkData,getSeoTranslated,getSettingPreloadData,getStaticLocale,handleClickLink,hasTranslateIdInSetting,isEmptyObject,isHexTransparent,isLinkedToSalesPage,isShopifyDomain,isTransparentColor,isTransparentRGBA,normalizeMailto,replaceAllHrefFromString,replaceLinkData,safeSvgIcon,youtubeShortsRegex};
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import e from"./HeroBannerItem.liquid.js";import{getAttr as
|
|
1
|
+
import e from"./HeroBannerItem.liquid.js";import{getAttr as t,getAttrLink as r}from"../common/attrs.js";import{getStyle as a}from"../common/styles.js";import{getClasses as o,getLinkClasses as s}from"../common/classes.js";import{createStateOrContext as i,createAttr as n,createStyle as l,createClass as d,If as c}from"@gem-sdk/system";import{template as m,dataStringify as p,RenderIf as f,isLocalEnv as u,baseAssetURL as h}from"@gem-sdk/core";import{getSeoTranslated as g,getBackgroundTranslated as v,getInsertLinkData as $,getSettingPreloadData as b}from"../../helpers.js";import{getResponsiveSetting as j,getBannerLink as k}from"../common/helpers.js";let HeroBanner=E=>{let{builderAttrs:y,builderProps:P,setting:S,styles:C,style:x,children:B,advanced:H,pageContext:N}=E,{enableLazyLoadImage:O}=N??{},{enableLink:R}=S??{},T=g(S??{},C?.translate,P?.uid);S&&(S.alt=T.alt,S.title=T.title);let _=v({background:C?.background,uid:P?.uid,translate:C?.translate,pageContext:N,isTranslateVideo:!0}),w=k(S),{cssClass:z}=H??{},{urlData:A}=$("",w),D=i({background:j(_||{}),uid:P?.uid,enableParallax:Number(S?.speedParallax||0)>0,speedParallax:Number(S?.speedParallax)||0,hoverEffect:C?.hoverEffect,hoverEffectScale:C?.hoverEffectScale,layout:S?.layout,contentPosition1Col:C?.contentPosition1Col,contentPosition2Col:C?.contentPosition2Col,aspectRatio:S?.aspectRatio,sizeSetting:j(C?.sizeSetting||{}),videoObjectFit:j(C?.videoObjectFit||{}),target:w?.target??"_self",href:A?.href??"",linkType:w?.type??"",hoverEffectDuration:C?.hoverEffectDuration}),F=!!w?.link&&R,G=n({...t({uid:P?.uid||""})}),I=n(r()),V=l({...a(C,S,x)}),q=d({...o({setting:S,builderProps:P,advancedCssClass:z})}),M=d({...s()}),J=()=>e({setting:S,translatedBackground:_,styles:C,children:B,enableLazyLoadImage:O,rawChildren:E.rawChildren,builderProps:P});return m`
|
|
2
2
|
<gp-hero-banner
|
|
3
|
-
${{...
|
|
4
|
-
${{...
|
|
5
|
-
class="${
|
|
6
|
-
style="${
|
|
7
|
-
gp-data='${p(
|
|
3
|
+
${{...y}}
|
|
4
|
+
${{...G}}
|
|
5
|
+
class="${q}"
|
|
6
|
+
style="${V}"
|
|
7
|
+
gp-data='${p(D)}'
|
|
8
8
|
>
|
|
9
|
-
${
|
|
10
|
-
${
|
|
9
|
+
${c(!F,J())}
|
|
10
|
+
${c(F,m`
|
|
11
11
|
<div
|
|
12
|
-
${{...
|
|
12
|
+
${{...I}}
|
|
13
13
|
aria-hidden="true"
|
|
14
|
-
class="${
|
|
14
|
+
class="${M}"
|
|
15
15
|
>
|
|
16
|
-
${
|
|
16
|
+
${J()}
|
|
17
17
|
</div>`)}
|
|
18
18
|
</gp-hero-banner>
|
|
19
|
-
${f(
|
|
19
|
+
${f(u,`<script ${b('class="gps-link" delay',"src")}="{{ 'gp-hero-banner-v2-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${b('class="gps-link" delay',"src")}="${h}/assets-v2/gp-hero-banner-v2-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
|
|
20
20
|
`)}
|
|
21
21
|
`};export{HeroBanner as default};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import{template as e,getAspectRatioGlobalSize as o,DEVICES as s,getResponsiveValueByScreen as t}from"@gem-sdk/core";import
|
|
2
|
-
<div class="${
|
|
1
|
+
import{template as e,getAspectRatioGlobalSize as o,DEVICES as s,getResponsiveValueByScreen as t,hasTranslatedLiquid as i}from"@gem-sdk/core";import r from"../../grid/components/row/Row.liquid.js";import{createStyle as m,createClass as l,If as a}from"@gem-sdk/system";import d from"../../image/components/AdaptiveImage.liquid.js";import p from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as n,getOverlayStyle as c,getRowStyle as u,getAdaptiveStyle as f,getBackgroundStyle as y,getContainBackgroundStyle as v,getYoutubeIframeStyle as j,getHtml5VideoStyle as $}from"../common/styles.js";import{getContainerClasses as g,getOverlayClasses as b,getRowClasses as h,getAdaptivePictureClasses as w,getAdaptiveClasses as k,getBackgroundClasses as N,getContainBackgroundClasses as q,getHtml5VideoClasses as H,getWrapperYoutubeClasses as C,getIframeYoutubeClasses as I,getLazyBackgroundClasses as z}from"../common/classes.js";import{getAspectRatio as A,getYoutubeAspectRatio as B,getBackgroundImageHeroBanner as L,horizontalAlign as T,getWidth as V,getBgImage as x,fallbackImg as E,getEnableBgImageByDevice as R,showVideoType as S,getResponsiveSetting as D}from"../common/helpers.js";import{getImageSrc as M}from"../../image/common/helpers.js";import O from"../../image/components/NextImage.liquid.js";import U from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as W,youtubeVideoRegex as Y}from"../../video/common/helpers.js";import{isRenderHtmlVideo as F}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as G}from"../../image/constants.js";let HeroBannerItem=J=>{let{enableLazyLoadImage:K=!0,translatedBackground:P,setting:Q,styles:X,children:Z,builderProps:_,rawChildren:ee}=J,{layout:eo,verticalAlign:es,enableParallax:et,alt:ei,title:er,preload:em}=Q??{},{background:el,overlayColor:ea,verticalGutter:ed,sizeSetting:ep,contentWidth:en,hoverEffect:ec,contentPosition1Col:eu,contentPosition2Col:ef,videoObjectFit:ey}=X??{},ev=!em&&K,ej=A(ep,el),e$=B(el,ey,ej),eg=D(P||{}),eb=eg.desktop,eh=m({...n(X)}),ew=l({...g(Q,X)}),ek=m({...c(X)}),eN=l({...b(X)}),eq=m({...u(X)}),eH=l({...h(X,Q)}),eC=m({...f(X)}),eI=l({...w()}),ez=l({...k()}),eA=l({...N(ec,ev)}),eB=m({...L(P,ev,!1),...y(X,et,"")}),eL=l({...q()}),eT=m({...v(X)}),eV=l({...H(!1)}),ex=m({...j(e$,ey)}),eE=l({...C()}),eR=m({...$(ej,ey)}),eS=l({...I()}),eD=e=>l({...z(e)}),eM=()=>{if(!em)return s.map(e=>a(R(e,P),O({src:M(t(x(P),e),e),alt:ei,title:er,className:eD(e),isDisableAspectStyle:!0,enableLazyLoadImage:K}))).join("")},eO=()=>{if(!S(el))return;if(F(el))return p({uid:_?.uid,muted:!0,loop:eb?.loop,controls:!1,autoplay:!0,src:eb?.videoHtml5||"",title:"Video",style:eR,className:eV});let e=eb?.video??"",o=W(e),s=`&loop=false&playlist=${o}&showinfo=0&rel=0&fs=0&enablejsapi=1`,t=i(e);if(eb?.type==="video"&&eb?.videoType==="youtube"&&o&&Y.test(e)||t)return U({uid:_?.uid,id:o??"",translatedVideoUrl:t?e:"",isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:s,adNetwork:!1,noCookie:!0,muted:!0,lazy:eb?.lazyLoad??!0,preload:!0,style:ex,wrapperClass:eE,iframeClass:eS})};return e`
|
|
2
|
+
<div class="${ew}" style="${eh}">
|
|
3
3
|
<div
|
|
4
|
-
class="${
|
|
5
|
-
style="${
|
|
4
|
+
class="${eL}"
|
|
5
|
+
style="${eT}"
|
|
6
6
|
>
|
|
7
|
-
<div class="${
|
|
8
|
-
${
|
|
9
|
-
${
|
|
7
|
+
<div class="${eA}" style="${eB}">
|
|
8
|
+
${eM()}
|
|
9
|
+
${eO()}
|
|
10
10
|
</div>
|
|
11
|
-
${
|
|
11
|
+
${a(!!ea,e`<div aria-label="Overlay" class="${eN}" style="${ek}"> </div>`)}
|
|
12
12
|
</div>
|
|
13
|
-
${
|
|
14
|
-
${
|
|
13
|
+
${r({className:eH,style:eq,setting:{layout:eo,horizontalAlign:T(eo,eu,ef),verticalAlign:es},styles:{verticalGutter:ed,width:V(en),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:Z,rawChildren:ee})}
|
|
14
|
+
${d({pictureClass:eI,srcSet:x(P),className:ez,...em&&G,aspectRatio:o(ep),style:eC,alt:ei,title:er,enableLazyLoadImage:K,fallbackImg:E})}
|
|
15
15
|
</div>
|
|
16
16
|
`};export{HeroBannerItem as default};
|
|
@@ -143,4 +143,4 @@ let SettingsV2=[{id:"setting",controls:[{id:"layout",type:"layout-banner",device
|
|
|
143
143
|
d="M4.39584 15.625C3.36031 15.625 2.52084 14.7855 2.52084 13.75V12.5C2.52084 11.4645 3.36031 10.625 4.39584 10.625H14.3958C15.4314 10.625 16.2708 11.4645 16.2708 12.5V13.75C16.2708 14.7855 15.4314 15.625 14.3958 15.625H4.39584ZM3.77084 13.75C3.77084 14.0952 4.05066 14.375 4.39584 14.375H14.3958C14.741 14.375 15.0208 14.0952 15.0208 13.75V12.5C15.0208 12.1548 14.741 11.875 14.3958 11.875H4.39584C4.05066 11.875 3.77084 12.1548 3.77084 12.5V13.75Z"
|
|
144
144
|
fill="currentColor"
|
|
145
145
|
/>
|
|
146
|
-
</svg> `,tooltip:"Align right"}],devices:{desktop:{default:"center"}}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Cover",value:"cover"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"},mobile:{default:"auto"}}},{id:"contentBanner",type:"banner",message:"The background image should be taller than the Hero Banner",closable:!0}]},{id:"style",controls:[{id:"sizeSetting",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",widthHeightLinked:!1,width:"100%",shapeVideo:"16/9",enableVideoShape:!1}},mobile:{default:{shape:"custom",width:"100%",shapeVideo:"custom",enableVideoShape:!1}}},settingConfig:{width:{displayOptions:["full","default"],name:"Width"},height:{displayOptions:["fit-content","fit-screen"],name:"Height"},shape:{displayOptions:["original","custom"],displayVideoOptions:["1/1","3/2","4/3","16/9","21/9","2/3","3/4","9/16","custom"],name:"Frame",shapeTitleConfig:{original:"As banner source"}}},hiddenSettings:["padding","gap"]},{id:"videoObjectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill video",value:"cover",type:"image",svgName:"gp-video-cover"},{label:"Fit video",value:"contain",type:"image",svgName:"gp-video-contain"}],devices:{desktop:{default:"cover"}}},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,showRatioVideo:!0,showDeviceControl:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"",videoHtml5:"",videoType:"youtube",loop:!0,lazyLoad:!1}}},compoDefaultValue:{desktop:{default:{type:"image",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"https://youtu.be/KOxfzBp72uk",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0,lazyLoad:!1}}}},{id:"hoverEffect",type:"toggle",default:!1},{id:"hoverEffectScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:5,default:"120%",showDefaultUnit:!0},{id:"hoverEffectDuration",label:"Zoom Time",type:"input:unit",units:["s"],min:0,default:.5,inputType:"number",placeholder:"",disableAutoValue:!0,showDefaultUnit:!0},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:void 0}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition1Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"contentPosition2Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"wrapperWidth",type:"input:unit-width",label:"Width",placeholder:"Auto",min:0,units:["px","%"],devices:{desktop:{default:void 0},tablet:{default:void 0},mobile:{default:void 0}}},{id:"contentWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,devices:{desktop:{default:"default"},tablet:{default:"default"},mobile:{default:"default"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},{id:"verticalGutter",type:"input:unit",units:["px"],min:0,label:"Spacing",devices:{desktop:{default:"32px"}}},{id:"overlayEnable",type:"toggle",default:!1},{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0},compoDefaultValue:{normal:"20%",hover:"20%"},showDefaultUnit:!0},{id:"overlayColor",label:"Color",type:"color-picker-v2",state:{normal:!0,hover:!0}},{id:"borderBg",type:"border-v2",label:"Border",compoDefaultValue:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"}},{id:"cornerBg",type:"corner-v2",label:"Corner",default:{radiusType:"none"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadowBg",type:"shadow-v2",label:"Button Shadow",compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}},{id:"contentPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}}}]}];export{SettingsV2};
|
|
146
|
+
</svg> `,tooltip:"Align right"}],devices:{desktop:{default:"center"}}},{id:"seo",type:"group",label:"SEO",controls:[{id:"alt",label:"Alt Text",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: Classic white crewneck t-shirt with minimalist design",default:void 0},{id:"title",label:"Image title",info:"Show title when hover to image",type:"textarea",minHeight:56,autoHeight:!0,placeholder:"E.g: White t-shirt",default:void 0}]},{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Cover",value:"cover"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"},mobile:{default:"auto"}}},{id:"contentBanner",type:"banner",message:"The background image should be taller than the Hero Banner",closable:!0}]},{id:"style",controls:[{id:"sizeSetting",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",widthHeightLinked:!1,width:"100%",shapeVideo:"16/9",enableVideoShape:!1}},mobile:{default:{shape:"custom",width:"100%",shapeVideo:"custom",enableVideoShape:!1}}},settingConfig:{width:{displayOptions:["full","default"],name:"Width"},height:{displayOptions:["fit-content","fit-screen"],name:"Height"},shape:{displayOptions:["original","custom"],displayVideoOptions:["1/1","3/2","4/3","16/9","21/9","2/3","3/4","9/16","custom"],name:"Frame",shapeTitleConfig:{original:"As banner source"}}},hiddenSettings:["padding","gap"]},{id:"videoObjectFit",type:"option:illustration",enableTooltip:!0,label:"Image scale",options:[{label:"Fill video",value:"cover",type:"image",svgName:"gp-video-cover"},{label:"Fit video",value:"contain",type:"image",svgName:"gp-video-contain"}],devices:{desktop:{default:"cover"}}},{id:"translate",type:"input",default:[{id:"background",fields:["image.src","video","videoHtml5"]},{id:"alt"},{id:"title"}]},{id:"background",type:"background-media",ignoreReRender:!0,showVideo:!0,showRatioVideo:!0,showDeviceControl:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"",videoHtml5:"",videoType:"youtube",loop:!0,lazyLoad:!1}}},compoDefaultValue:{desktop:{default:{type:"image",color:"bg-2",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1920,height:900},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll",video:"https://youtu.be/KOxfzBp72uk",videoHtml5:"https://cdn.shopify.com/videos/c/o/v/92a407d4e0c94a288eb54cac18c387dc.mp4",videoType:"youtube",loop:!0,lazyLoad:!1}}}},{id:"hoverEffect",type:"toggle",default:!1},{id:"hoverEffectScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:5,default:"120%",showDefaultUnit:!0},{id:"hoverEffectDuration",label:"Zoom Time",type:"input:unit",units:["s"],min:0,default:.5,inputType:"number",placeholder:"",disableAutoValue:!0,showDefaultUnit:!0},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:void 0}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition1Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"contentPosition2Col",label:"Content Position",type:"option:value",options:[{label:"Top",value:"top",iconName:"gp-align-top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical"},{label:"Bottom",value:"bottom",iconName:"gp-align-bottom"},{label:"Space between",value:"space-between",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"center"}}},{id:"wrapperWidth",type:"input:unit-width",label:"Width",placeholder:"Auto",min:0,units:["px","%"],devices:{desktop:{default:void 0},tablet:{default:void 0},mobile:{default:void 0}}},{id:"contentWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,devices:{desktop:{default:"default"},tablet:{default:"default"},mobile:{default:"default"}},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"default",showValue:!0}]},{id:"verticalGutter",type:"input:unit",units:["px"],min:0,label:"Spacing",devices:{desktop:{default:"32px"}}},{id:"overlayEnable",type:"toggle",default:!1},{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0},compoDefaultValue:{normal:"20%",hover:"20%"},showDefaultUnit:!0},{id:"overlayColor",label:"Color",type:"color-picker-v2",state:{normal:!0,hover:!0}},{id:"borderBg",type:"border-v2",label:"Border",compoDefaultValue:{border:"solid",color:"line-3",width:"1px",borderWidth:"1px"}},{id:"cornerBg",type:"corner-v2",label:"Corner",default:{radiusType:"none"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadowBg",type:"shadow-v2",label:"Button Shadow",compoDefaultValue:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}},{id:"contentPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"16px",bottom:"4px",right:"16px",linked:!1}},mobile:{default:{top:"16px",left:"16px",bottom:"16px",right:"16px",linked:!1}}}}]}];export{SettingsV2};
|
|
@@ -9,4 +9,4 @@ import{cloneDeep as e,getCornerCSSFromGlobal as t,getAspectRatioGlobalSize as i,
|
|
|
9
9
|
<rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
|
|
10
10
|
<rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
|
|
11
11
|
<animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite" />
|
|
12
|
-
</svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:i}=e,r=e=>{let{isLiquid:r}=e??{},a=getImageSrc(t?.desktop,"desktop",!r)||i||FALLBACK_IMAGE,l=getImageSrc(t?.tablet,"tablet",!r)||getImageSrc(t?.desktop,"tablet",!r)||i||FALLBACK_IMAGE,g=getImageSrc(t?.mobile,"mobile",!r)||getImageSrc(t?.tablet,"mobile",!r)||getImageSrc(t?.desktop,"mobile",!r)||i||FALLBACK_IMAGE;return{srcTablet:l,srcMobile:g,srcDesktop:a}};return{getDeviceSource:r}},getSettingTranslatedImageAndSeo=({setting:t,uid:i,pageContext:r})=>{let a=t?.translate?"true":void 0;if(!t||!a)return
|
|
12
|
+
</svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:i}=e,r=e=>{let{isLiquid:r}=e??{},a=getImageSrc(t?.desktop,"desktop",!r)||i||FALLBACK_IMAGE,l=getImageSrc(t?.tablet,"tablet",!r)||getImageSrc(t?.desktop,"tablet",!r)||i||FALLBACK_IMAGE,g=getImageSrc(t?.mobile,"mobile",!r)||getImageSrc(t?.tablet,"mobile",!r)||getImageSrc(t?.desktop,"mobile",!r)||i||FALLBACK_IMAGE;return{srcTablet:l,srcMobile:g,srcDesktop:a}};return{getDeviceSource:r}},getSettingTranslatedImageAndSeo=({setting:t,uid:i,pageContext:r})=>{let a=t?.translate?"true":void 0;if(!t||!a)return t;let l=e(t);for(let e in l.srcSet){let t=l.srcSet[e];if(t&&t.src){let l=g({val:t.src,uid:i,settingId:`srcSet_${e}_src`,translate:a,pageContext:r});t.src=String(l)}}let s=g({val:l.alt,uid:i,settingId:"alt",translate:a,pageContext:r});l.alt=String(s);let o=g({val:l.title,uid:i,settingId:"title",translate:a,pageContext:r});return l.title=String(o),l},getSrcSet=(e,t,i)=>e?getSrcSetLiquid(e,t):getSrcSetLink(i),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let i=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${i}' | file_url }} 768w, {{ '${i}' | file_url }} 1024w, {{ '${i}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${i}' | file_img_url: '768x' }} 768w, {{ '${i}' | file_img_url: '1024x' }} 1024w, {{ '${i}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},getSrcSetLink=e=>e,getImageSrc=(e,t,i)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let r=e?.backupFilePath??e?.src??"";if(i)r=e?.src||"";else if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(r=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):r=`{{ "${t}" | asset_url }}`}if(t&&r?.includes("cdn.shopify"))switch(t){case"tablet":r=r?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":r=r?.replace(regexReplaceEndDot,"_768x.")}return r},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let i=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return i&&i!=e?i:e};function resizeImage(e,t){let i=e.match(/\.webp/g)?.length,r=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(i)return r;let a=replaceRegexLastMatch({str:r,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}let replaceRegexLastMatch=e=>{let t=e.str,i=e.str.match(e.reg)?.length;if(i){let r,a=1;for(;null!==(r=e.reg.exec(e.str));){if(a===i){let i=e.reg.lastIndex,a=i-r[0].length;e.isAdd&&(e.newString="_"+e.newString+r),t=t.slice(0,a)+e.newString+t.slice(i,t.length)}a++}}return t},getItemWidth=(e,t)=>{let i=getCurrentDevice(),r=t?.[i]||"auto";if(!r||"auto"===r||r.includes("%"))return e;let a=Number(r.replace("px",""));return a>e?e:Number(r.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:i,qualityType:r,qualityPercent:a}=e,g=getCurrentDevice(),s=getItemWidth(t,i),o=l(r,g,"finest"),n=l(a,g,100);switch(o){case"finest":default:return"auto";case"high":return Math.round(1.5*s)||1;case"medium":return Math.round(s)||1;case"custom":return Math.round(s*(Number(n)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return a.forEach(i=>{let r=l(e,i)?.width||"100%";t[i]=r}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return a.forEach(i=>{let r=l(e,i)?.width||"100%";t[i]=r}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:i,qualityPercent:r,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),g=getWidthOfImageListSetting(t),s=getWidthOfListImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:g,width:s,qualityType:i,qualityPercent:r})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:i,qualityPercent:r,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),g=getWidthOfFeatureImageSetting(t),s=getWidthOfFeatureImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:g,width:s,qualityType:i,qualityPercent:r})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:i,width:r,qualityType:a,qualityPercent:l}=e,g=getCurrentDevice(),s=t.querySelector("img");if(s){let e=getImageWidthFollowByQuality({itemWidthParam:r,imageWidthSetting:i,qualityType:a,qualityPercent:l}),t=s.getAttribute("base-src");if(!t)return;let o=getImageSrcByQuality(e,t),n=getImageSrcSet(t,o,g);s.setAttribute("srcset",n)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,i)=>`${"mobile"===i&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===i&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===i&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";export{FALLBACK_IMAGE,IMAGE_PLACEHOLDER,NEXT_IMAGE_CONFIG,composeAspectRatio,createBlurDataURL,getAdaptiveImageData,getAspectRatio,getAspectRatioNextImage,getCurrentDevice,getImageSrc,getImageWidthFollowByQuality,getNewBackupFileKey,getResponsiveObjectFit,getSettingTranslatedImageAndSeo,getSrcSet,handleSetSrcForFeatureProductImage,handleSetSrcForProductImageList,isCannotResizeImage,overwriteDefaultRadius,regexReplaceEndDot,replaceBackupFileKeyFileContent,resizeImage,safeStringify,shimmer,toBase64};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cloneDeep as t,getResponsiveValueByScreen as e}from"@gem-sdk/core";import{getImageSrc as o,composeAspectRatio as a}from"../../image/common/helpers.js";import{getDynamicSourceLocales as i}from"../../helpers.js";let getAspectRatioData=({styles:t,leftImage:e,rightImage:o})=>{let a=(e?.width??0)/(e?.height??1),i=(o?.width??0)/(o?.height??1),l=a<=i?`${e?.width??0}/${e?.height??1}`:`${o?.width??0}/${o?.height??1}`,r=a<=i?e:o,s=composeResponsiveAspectRatio({aspect:t?.aspectRatio,auto:r,custom:t?.customAspectRadio,defaultRatio:l});return{defaultRatio:l,responsiveAspectRatio:s}},composeResponsiveAspectRatio=({aspect:t,auto:e,custom:o,defaultRatio:i})=>({desktop:a({device:"desktop",aspect:t,auto:e,custom:o})??i,tablet:a({device:"tablet",aspect:t,auto:e,custom:o}),mobile:a({device:"mobile",aspect:t,auto:e,custom:o})}),composeLabelPosition=({input:t,isHorizontal:o})=>{let{device:a,positionHoz:i,positionVer:l}=t,r=o?e(i,a,"hoz-center"):e(l,a,"ver-center"),s={topLeft:"50%",bottomRight:"auto"};return({"hoz-center":{topLeft:"50%",bottomRight:"auto"},top:{topLeft:"8px",bottomRight:"auto"},bottom:{topLeft:"auto",bottomRight:"8px"},"ver-center":{topLeft:"50%",bottomRight:"auto"},left:{topLeft:"8px",bottomRight:"auto"},right:{topLeft:"auto",bottomRight:"8px"}})[r]??s},getLabelPosition=({position:t,labelPositionHoz:e,labelPositionVer:o,isHorizontal:a})=>({desktop:composeLabelPosition({input:{device:"desktop",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"],tablet:composeLabelPosition({input:{device:"tablet",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"],mobile:composeLabelPosition({input:{device:"mobile",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"]}),generateTranslateByDevices=({isHorizontal:t,labelPositionHoz:e,labelPositionVer:o})=>{let a=t?e:o,i={desktop:a?.desktop??"hoz-center",tablet:a?.tablet??a?.desktop??"hoz-center",mobile:a?.mobile??a?.tablet??a?.desktop??"hoz-center"},l={desktop:"translateX(0) translateY(0)",tablet:"translateX(0) translateY(0)",mobile:"translateX(0) translateY(0)"};for(let e in i){let o=i?.[e];o.includes("center")?l[e]=t?"translateX(0) translateY(-50%)":"translateX(-50%) translateY(0)":l[e]="translateX(0) translateY(0)"}return l},getSliderPositionPercentage=t=>{let e="string"==typeof t?parseInt(t??0):t;return(e??50)/100},FLEX_ALIGN={left:"start",center:"center",right:"end",justify:"start"},getData=t=>{let{handle:e=null,hover:a=!1,handleSize:i=40,leftImageAlt:l="",leftImageTitle:r="",leftImageCss:s={},leftImageLabel:n=null,rightImageAlt:p="",rightImageTitle:g="",rightImageCss:c={},rightImageLabel:m=null,sliderLineWidth:u=2,sliderLineColor:d="#ffffff",sliderPositionPercentage:f=.5,vertical:b=!1,componentUid:h="",styles:L={},leftImage:S,rightImage:R,enableLabel:y=!1,qualityType:v,qualityPercent:C}=t,I=!b,P=y&&!!n,$=y&&!!m,A=(S?.width??0)<(R?.width??0)?{...S}:{...R},k=t=>{let{isLiquid:e}=t??{};return e?o(S):S?.src??""},x=t=>{let{isLiquid:e}=t??{};return e?o(R):R?.src??""},{responsiveAspectRatio:z,defaultRatio:X}=getAspectRatioData({leftImage:S,rightImage:R,styles:L});return{styles:L,handle:e,hover:a,handleSize:i,leftImageAlt:l,leftImageTitle:r,leftImageCss:s,leftImageLabel:n,rightImageAlt:p,rightImageTitle:g,rightImageCss:c,rightImageLabel:m,sliderLineWidth:u,sliderLineColor:d,sliderPositionPercentage:f,vertical:b,componentUid:h,tempImage:A,aspectRatio:z,defaultRatio:X,isHorizontal:I,hasLeftLabel:P,hasRightLabel:$,qualityType:v,qualityPercent:C,getLeftImageSrc:k,getRightImageSrc:x}},getImageClipStyle=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:a,sliderPosition:i,type:l}=t,r=e?o*i:a*i;return"left"===l?{clip:e?`rect(auto, ${r}px, auto, auto)`:`rect(auto, auto, ${r}px, auto)`}:{clip:e?`rect(auto, auto, auto, ${r}px)`:`rect(${r}px, auto, auto, auto)`}},getSliderPositionStyle=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:a,sliderPosition:i,handleSize:l}=t,r=e?o*i:a*i,s=l/2;return{[e?"top":"left"]:0,[e?"left":"top"]:`${r-s}px`}},getLabelContainerStyles=t=>({...getImageClipStyle(t)}),getReactStyles=t=>({sliderPosition:getSliderPositionStyle(t),leftImageClip:getImageClipStyle({...t,type:"left"}),rightImageClip:getImageClipStyle({...t,type:"right"}),leftLabelContainer:getLabelContainerStyles({...t,type:"left"}),rightLabelContainer:getLabelContainerStyles({...t,type:"right"})}),getSettingTranslatedImageComparisonAndSeo=({setting:e,uid:o,pageContext:a})=>{let l=e?.translate?"true":void 0;if(!e||!l)return
|
|
1
|
+
import{cloneDeep as t,getResponsiveValueByScreen as e}from"@gem-sdk/core";import{getImageSrc as o,composeAspectRatio as a}from"../../image/common/helpers.js";import{getDynamicSourceLocales as i}from"../../helpers.js";let getAspectRatioData=({styles:t,leftImage:e,rightImage:o})=>{let a=(e?.width??0)/(e?.height??1),i=(o?.width??0)/(o?.height??1),l=a<=i?`${e?.width??0}/${e?.height??1}`:`${o?.width??0}/${o?.height??1}`,r=a<=i?e:o,s=composeResponsiveAspectRatio({aspect:t?.aspectRatio,auto:r,custom:t?.customAspectRadio,defaultRatio:l});return{defaultRatio:l,responsiveAspectRatio:s}},composeResponsiveAspectRatio=({aspect:t,auto:e,custom:o,defaultRatio:i})=>({desktop:a({device:"desktop",aspect:t,auto:e,custom:o})??i,tablet:a({device:"tablet",aspect:t,auto:e,custom:o}),mobile:a({device:"mobile",aspect:t,auto:e,custom:o})}),composeLabelPosition=({input:t,isHorizontal:o})=>{let{device:a,positionHoz:i,positionVer:l}=t,r=o?e(i,a,"hoz-center"):e(l,a,"ver-center"),s={topLeft:"50%",bottomRight:"auto"};return({"hoz-center":{topLeft:"50%",bottomRight:"auto"},top:{topLeft:"8px",bottomRight:"auto"},bottom:{topLeft:"auto",bottomRight:"8px"},"ver-center":{topLeft:"50%",bottomRight:"auto"},left:{topLeft:"8px",bottomRight:"auto"},right:{topLeft:"auto",bottomRight:"8px"}})[r]??s},getLabelPosition=({position:t,labelPositionHoz:e,labelPositionVer:o,isHorizontal:a})=>({desktop:composeLabelPosition({input:{device:"desktop",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"],tablet:composeLabelPosition({input:{device:"tablet",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"],mobile:composeLabelPosition({input:{device:"mobile",positionHoz:e,positionVer:o},isHorizontal:a})?.[t??"topLeft"]}),generateTranslateByDevices=({isHorizontal:t,labelPositionHoz:e,labelPositionVer:o})=>{let a=t?e:o,i={desktop:a?.desktop??"hoz-center",tablet:a?.tablet??a?.desktop??"hoz-center",mobile:a?.mobile??a?.tablet??a?.desktop??"hoz-center"},l={desktop:"translateX(0) translateY(0)",tablet:"translateX(0) translateY(0)",mobile:"translateX(0) translateY(0)"};for(let e in i){let o=i?.[e];o.includes("center")?l[e]=t?"translateX(0) translateY(-50%)":"translateX(-50%) translateY(0)":l[e]="translateX(0) translateY(0)"}return l},getSliderPositionPercentage=t=>{let e="string"==typeof t?parseInt(t??0):t;return(e??50)/100},FLEX_ALIGN={left:"start",center:"center",right:"end",justify:"start"},getData=t=>{let{handle:e=null,hover:a=!1,handleSize:i=40,leftImageAlt:l="",leftImageTitle:r="",leftImageCss:s={},leftImageLabel:n=null,rightImageAlt:p="",rightImageTitle:g="",rightImageCss:c={},rightImageLabel:m=null,sliderLineWidth:u=2,sliderLineColor:d="#ffffff",sliderPositionPercentage:f=.5,vertical:b=!1,componentUid:h="",styles:L={},leftImage:S,rightImage:R,enableLabel:y=!1,qualityType:v,qualityPercent:C}=t,I=!b,P=y&&!!n,$=y&&!!m,A=(S?.width??0)<(R?.width??0)?{...S}:{...R},k=t=>{let{isLiquid:e}=t??{};return e?o(S):S?.src??""},x=t=>{let{isLiquid:e}=t??{};return e?o(R):R?.src??""},{responsiveAspectRatio:z,defaultRatio:X}=getAspectRatioData({leftImage:S,rightImage:R,styles:L});return{styles:L,handle:e,hover:a,handleSize:i,leftImageAlt:l,leftImageTitle:r,leftImageCss:s,leftImageLabel:n,rightImageAlt:p,rightImageTitle:g,rightImageCss:c,rightImageLabel:m,sliderLineWidth:u,sliderLineColor:d,sliderPositionPercentage:f,vertical:b,componentUid:h,tempImage:A,aspectRatio:z,defaultRatio:X,isHorizontal:I,hasLeftLabel:P,hasRightLabel:$,qualityType:v,qualityPercent:C,getLeftImageSrc:k,getRightImageSrc:x}},getImageClipStyle=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:a,sliderPosition:i,type:l}=t,r=e?o*i:a*i;return"left"===l?{clip:e?`rect(auto, ${r}px, auto, auto)`:`rect(auto, auto, ${r}px, auto)`}:{clip:e?`rect(auto, auto, auto, ${r}px)`:`rect(${r}px, auto, auto, auto)`}},getSliderPositionStyle=t=>{let{isHorizontal:e,containerWidth:o,containerHeight:a,sliderPosition:i,handleSize:l}=t,r=e?o*i:a*i,s=l/2;return{[e?"top":"left"]:0,[e?"left":"top"]:`${r-s}px`}},getLabelContainerStyles=t=>({...getImageClipStyle(t)}),getReactStyles=t=>({sliderPosition:getSliderPositionStyle(t),leftImageClip:getImageClipStyle({...t,type:"left"}),rightImageClip:getImageClipStyle({...t,type:"right"}),leftLabelContainer:getLabelContainerStyles({...t,type:"left"}),rightLabelContainer:getLabelContainerStyles({...t,type:"right"})}),getSettingTranslatedImageComparisonAndSeo=({setting:e,uid:o,pageContext:a})=>{let l=e?.translate?"true":void 0;if(!e||!l)return e;let r=t(e);for(let t of["Left","Right"]){let e=`image${t}`,s=r[e];if(s?.src){let t=i({val:s.src,uid:o,settingId:`${e}_src`,translate:l,pageContext:a});r[e].src=String(t)}let n=`alt${t}`,p=i({val:r[n],uid:o,settingId:n,translate:l,pageContext:a});r[n]=String(p);let g=`title${t}`,c=i({val:r[g],uid:o,settingId:g,translate:l,pageContext:a});r[g]=String(c)}return r};export{FLEX_ALIGN,composeLabelPosition,composeResponsiveAspectRatio,generateTranslateByDevices,getAspectRatioData,getData,getImageClipStyle,getLabelContainerStyles,getLabelPosition,getReactStyles,getSettingTranslatedImageComparisonAndSeo,getSliderPositionPercentage,getSliderPositionStyle};
|