@gem-sdk/components 8.0.0-dev.64 → 8.0.0-dev.65
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/image/common/helpers.js +2 -2
- package/dist/cjs/image/components/Image.liquid.js +7 -7
- package/dist/cjs/image/settings/configs/settings.js +1 -1
- package/dist/cjs/image-comparison/common/helpers.js +1 -1
- package/dist/cjs/image-comparison/components/ImageComparison.liquid.js +3 -3
- package/dist/cjs/image-comparison/components/Label.liquid.js +7 -7
- package/dist/cjs/image-comparison/index.js +1 -1
- package/dist/cjs/image-comparison/settings/configs/settings.js +1 -1
- package/dist/cjs/post-purchase/line/index.js +1 -1
- package/dist/cjs/video/common/helpers.js +1 -1
- package/dist/esm/image/common/helpers.js +2 -2
- package/dist/esm/image/components/Image.liquid.js +10 -10
- package/dist/esm/image/settings/configs/settings.js +1 -1
- package/dist/esm/image-comparison/common/helpers.js +1 -1
- package/dist/esm/image-comparison/components/ImageComparison.liquid.js +3 -3
- package/dist/esm/image-comparison/components/Label.liquid.js +7 -7
- package/dist/esm/image-comparison/index.js +1 -1
- package/dist/esm/image-comparison/settings/configs/settings.js +1 -1
- package/dist/esm/post-purchase/line/index.js +1 -1
- package/dist/esm/video/common/helpers.js +1 -1
- package/dist/types/index.d.ts +3 -2
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core");const overwriteDefaultRadius=e=>{let t={...e},r=!0;return t&&Object.keys(t??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let i=t[e]??{};"0px"!==i&&(r=!1)}}),r?core.getCornerCSSFromGlobal(t):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:i}=t??{},{customAspectRadio:a,shape:
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js");const overwriteDefaultRadius=e=>{let t={...e},r=!0;return t&&Object.keys(t??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let i=t[e]??{};"0px"!==i&&(r=!1)}}),r?core.getCornerCSSFromGlobal(t):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:i}=t??{},{customAspectRadio:a,shape:l}=e??{},o={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.desktop:i,custom:a}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.tablet:i,custom:a}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.mobile:i,custom:a})};return l?core.getAspectRatioGlobalSize(l):o},composeAspectRatio=({device:e,aspect:t,custom:r,auto:i})=>{let a=t?.[e];return"auto"===a?i?.height?`${i.width}/${i.height}`:void 0:"custom"===a?r?.[e]?.height?`${r?.[e]?.width}/${r?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:core.makeStyleResponsive("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:r,width:i,height:a})=>{if(e)return{};let l={};return core.DEVICES.forEach(e=>{let o=`--objf${"desktop"!==e?`-${e}`:""}`,s=r?.[o]||r?.["--objf"];if(t?.[e]==="auto"&&"contain"===s){l[e]="auto";return}l[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${i}/${a}`}),l},safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"""),shimmer=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
2
2
|
<defs>
|
|
3
3
|
<linearGradient id="g-${e}-${t}">
|
|
4
4
|
<stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
|
|
@@ -9,4 +9,4 @@
|
|
|
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:r}=e,i=e=>{let{isLiquid:i}=e??{},a=getImageSrc(t?.desktop,"desktop",!i)||r||FALLBACK_IMAGE,
|
|
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:r}=e,i=e=>{let{isLiquid:i}=e??{},a=getImageSrc(t?.desktop,"desktop",!i)||r||FALLBACK_IMAGE,l=getImageSrc(t?.tablet,"tablet",!i)||getImageSrc(t?.desktop,"tablet",!i)||r||FALLBACK_IMAGE,o=getImageSrc(t?.mobile,"mobile",!i)||getImageSrc(t?.tablet,"mobile",!i)||getImageSrc(t?.desktop,"mobile",!i)||r||FALLBACK_IMAGE;return{srcTablet:l,srcMobile:o,srcDesktop:a}};return{getDeviceSource:i}},getSettingTranslatedImageAndSeo=({setting:e,uid:t,pageContext:r})=>{let i=e?.translate?"true":void 0;if(!e||!i)return{};let a=core.cloneDeep(e);for(let e in a.srcSet){let l=a.srcSet[e];if(l&&l.src){let a=helpers.getDynamicSourceLocales({val:l.src,uid:t,settingId:`srcSet_${e}_src`,translate:i,pageContext:r});l.src=String(a)}}let l=helpers.getDynamicSourceLocales({val:a.alt,uid:t,settingId:"alt",translate:i,pageContext:r});a.alt=String(l);let o=helpers.getDynamicSourceLocales({val:a.title,uid:t,settingId:"title",translate:i,pageContext:r});return a.title=String(o),a},getSrcSet=(e,t,r)=>e?getSrcSetLiquid(e,t):getSrcSetLink(r),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let r=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${r}' | file_url }} 768w, {{ '${r}' | file_url }} 1024w, {{ '${r}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${r}' | file_img_url: '768x' }} 768w, {{ '${r}' | file_img_url: '1024x' }} 1024w, {{ '${r}' | 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,r)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let i=e?.backupFilePath??e?.src??"";if(r)i=e?.src||"";else if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(i=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):i=`{{ "${t}" | asset_url }}`}if(t&&i?.includes("cdn.shopify"))switch(t){case"tablet":i=i?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":i=i?.replace(regexReplaceEndDot,"_768x.")}return i},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let r=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return r&&r!=e?r:e};function resizeImage(e,t){let r=e.match(/\.webp/g)?.length,i=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(r)return i;let a=replaceRegexLastMatch({str:i,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}const replaceRegexLastMatch=e=>{let t=e.str,r=e.str.match(e.reg)?.length;if(r){let i,a=1;for(;null!==(i=e.reg.exec(e.str));){if(a===r){let r=e.reg.lastIndex,a=r-i[0].length;e.isAdd&&(e.newString="_"+e.newString+i),t=t.slice(0,a)+e.newString+t.slice(r,t.length)}a++}}return t},getItemWidth=(e,t)=>{let r=getCurrentDevice(),i=t?.[r]||"auto";if(!i||"auto"===i||i.includes("%"))return e;let a=Number(i.replace("px",""));return a>e?e:Number(i.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:r,qualityType:i,qualityPercent:a}=e,l=getCurrentDevice(),o=getItemWidth(t,r),s=core.getResponsiveValueByScreen(i,l,"finest"),g=core.getResponsiveValueByScreen(a,l,100);switch(s){case"finest":default:return"auto";case"high":return Math.round(1.5*o)||1;case"medium":return Math.round(o)||1;case"custom":return Math.round(o*(Number(g)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),o=getWidthOfImageListSetting(t),s=getWidthOfListImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:o,width:s,qualityType:r,qualityPercent:i})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),o=getWidthOfFeatureImageSetting(t),s=getWidthOfFeatureImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:o,width:s,qualityType:r,qualityPercent:i})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:r,width:i,qualityType:a,qualityPercent:l}=e,o=getCurrentDevice(),s=t.querySelector("img");if(s){let e=getImageWidthFollowByQuality({itemWidthParam:i,imageWidthSetting:r,qualityType:a,qualityPercent:l}),t=s.getAttribute("base-src");if(!t)return;let g=getImageSrcByQuality(e,t),c=getImageSrcSet(t,g,o);s.setAttribute("srcset",c)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,r)=>`${"mobile"===r&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===r&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===r&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";exports.FALLBACK_IMAGE=FALLBACK_IMAGE,exports.IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",exports.NEXT_IMAGE_CONFIG=NEXT_IMAGE_CONFIG,exports.composeAspectRatio=composeAspectRatio,exports.createBlurDataURL=createBlurDataURL,exports.getAdaptiveImageData=getAdaptiveImageData,exports.getAspectRatio=getAspectRatio,exports.getAspectRatioNextImage=getAspectRatioNextImage,exports.getCurrentDevice=getCurrentDevice,exports.getImageSrc=getImageSrc,exports.getImageWidthFollowByQuality=getImageWidthFollowByQuality,exports.getNewBackupFileKey=getNewBackupFileKey,exports.getResponsiveObjectFit=getResponsiveObjectFit,exports.getSettingTranslatedImageAndSeo=getSettingTranslatedImageAndSeo,exports.getSrcSet=getSrcSet,exports.handleSetSrcForFeatureProductImage=handleSetSrcForFeatureProductImage,exports.handleSetSrcForProductImageList=handleSetSrcForProductImageList,exports.isCannotResizeImage=isCannotResizeImage,exports.overwriteDefaultRadius=overwriteDefaultRadius,exports.regexReplaceEndDot=regexReplaceEndDot,exports.replaceBackupFileKeyFileContent=replaceBackupFileKeyFileContent,exports.resizeImage=resizeImage,exports.safeStringify=safeStringify,exports.shimmer=shimmer,exports.toBase64=toBase64;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers=require("../../helpers.js"),AdaptiveImage_liquid=require("./AdaptiveImage.liquid.js"),NextImage_liquid=require("./NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js");const Image=({style:e,styles:s,setting:t,advanced:a,className:r,pageContext:l,builderAttrs:i,builderProps:m})=>{let{imageLink:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),AdaptiveImage_liquid=require("./AdaptiveImage.liquid.js"),NextImage_liquid=require("./NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../common/helpers.js");const Image=({style:e,styles:s,setting:t,advanced:a,className:r,pageContext:l,builderAttrs:i,builderProps:m})=>{let g=helpers.getSettingTranslatedImageAndSeo({setting:t,uid:m?.uid,pageContext:l}),{imageLink:d,isAdaptive:u,enableImageLink:y}=g??{},{enableLazyLoadImage:c}=l??{},{Wrapper:p,urlData:n}=helpers$1.getLinkData({defaultWrap:"div",setting:d,enableImageLink:y,isLiquid:!0}),o=system.createStyle(styles.getWrapperStyles(s)),q=system.createStyle(styles.getImageStyles(s,m)),I=system.createStyle(styles.getContainerStyles(e,s)),A=system.createClass(classes.getWrapperClasses()),$=system.createClass(classes.getImageClasses(r,s)),C=system.createClass(classes.getContainerClasses(m?.uid,a?.cssClass,s?.shape)),v=system.createAttr(attrs.getContainerAttrs(i,m?.uid)),j=attrs.getLinkWrapperAttrs({urlData:n,imageLink:d,title:g?.title,isLiquid:!0}),S=attrs.getAdaptiveImageAttrs({styles:s,setting:g,isLiquid:!0}),h=attrs.getNextImageAttrs({styles:s,setting:g}),f=attrs.getImageLiquidAttrs({pageContext:l,enableLazyLoadImage:c}),x=()=>system.If(u,AdaptiveImage_liquid.default({...f,...S,style:q,className:$}),NextImage_liquid.default({...f,...h,style:q,className:$})),L=()=>x();return core.template`
|
|
2
2
|
<div
|
|
3
3
|
role="presentation"
|
|
4
4
|
${{...v}}
|
|
5
|
-
style="${
|
|
5
|
+
style="${I}"
|
|
6
6
|
class="${C}"
|
|
7
7
|
>
|
|
8
|
-
<${
|
|
9
|
-
${
|
|
8
|
+
<${p}
|
|
9
|
+
${j}
|
|
10
10
|
style="${o}"
|
|
11
|
-
class="${
|
|
11
|
+
class="${A}"
|
|
12
12
|
>
|
|
13
|
-
${
|
|
14
|
-
</${
|
|
13
|
+
${L()}
|
|
14
|
+
</${p}>
|
|
15
15
|
</div>
|
|
16
16
|
`};exports.default=Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const ImageSettings=[{id:"setting",controls:[{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:{en:"Style"},itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{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:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",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:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];exports.ImageSettings=ImageSettings;
|
|
1
|
+
"use strict";const ImageSettings=[{id:"setting",controls:[{id:"translate",type:"input",default:[{id:"srcSet",fields:["src"]},{id:"alt"},{id:"title"}]},{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:{en:"Style"},itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{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:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",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:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];exports.ImageSettings=ImageSettings;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core"),helpers=require("../../image/common/helpers.js");const getAspectRatioData=({styles:
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),helpers$1=require("../../image/common/helpers.js"),helpers=require("../../helpers.js");const getAspectRatioData=({styles:e,leftImage:t,rightImage:o})=>{let a=(t?.width??0)/(t?.height??1),i=(o?.width??0)/(o?.height??1),s=a<=i?`${t?.width??0}/${t?.height??1}`:`${o?.width??0}/${o?.height??1}`,r=a<=i?t:o,l=composeResponsiveAspectRatio({aspect:e?.aspectRatio,auto:r,custom:e?.customAspectRadio,defaultRatio:s});return{defaultRatio:s,responsiveAspectRatio:l}},composeResponsiveAspectRatio=({aspect:e,auto:t,custom:o,defaultRatio:a})=>({desktop:helpers$1.composeAspectRatio({device:"desktop",aspect:e,auto:t,custom:o})??a,tablet:helpers$1.composeAspectRatio({device:"tablet",aspect:e,auto:t,custom:o}),mobile:helpers$1.composeAspectRatio({device:"mobile",aspect:e,auto:t,custom:o})}),composeLabelPosition=({input:e,isHorizontal:t})=>{let{device:o,positionHoz:a,positionVer:i}=e,s=t?core.getResponsiveValueByScreen(a,o,"hoz-center"):core.getResponsiveValueByScreen(i,o,"ver-center"),r={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"}})[s]??r},getLabelPosition=({position:e,labelPositionHoz:t,labelPositionVer:o,isHorizontal:a})=>({desktop:composeLabelPosition({input:{device:"desktop",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"],tablet:composeLabelPosition({input:{device:"tablet",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"],mobile:composeLabelPosition({input:{device:"mobile",positionHoz:t,positionVer:o},isHorizontal:a})?.[e??"topLeft"]}),generateTranslateByDevices=({isHorizontal:e,labelPositionHoz:t,labelPositionVer:o})=>{let a=e?t:o,i={desktop:a?.desktop??"hoz-center",tablet:a?.tablet??a?.desktop??"hoz-center",mobile:a?.mobile??a?.tablet??a?.desktop??"hoz-center"},s={desktop:"translateX(0) translateY(0)",tablet:"translateX(0) translateY(0)",mobile:"translateX(0) translateY(0)"};for(let t in i){let o=i?.[t];o.includes("center")?s[t]=e?"translateX(0) translateY(-50%)":"translateX(-50%) translateY(0)":s[t]="translateX(0) translateY(0)"}return s},getSliderPositionPercentage=e=>{let t="string"==typeof e?parseInt(e??0):e;return(t??50)/100},FLEX_ALIGN={left:"start",center:"center",right:"end",justify:"start"},getData=e=>{let{handle:t=null,hover:o=!1,handleSize:a=40,leftImageAlt:i="",leftImageTitle:s="",leftImageCss:r={},leftImageLabel:l=null,rightImageAlt:n="",rightImageTitle:p="",rightImageCss:g={},rightImageLabel:c=null,sliderLineWidth:u=2,sliderLineColor:m="#ffffff",sliderPositionPercentage:h=.5,vertical:d=!1,componentUid:S="",styles:b={},leftImage:L,rightImage:f,enableLabel:y=!1,qualityType:R,qualityPercent:v}=e,x=!d,I=y&&!!l,P=y&&!!c,A=(L?.width??0)<(f?.width??0)?{...L}:{...f},$=e=>{let{isLiquid:t}=e??{};return t?helpers$1.getImageSrc(L):L?.src??""},C=e=>{let{isLiquid:t}=e??{};return t?helpers$1.getImageSrc(f):f?.src??""},{responsiveAspectRatio:D,defaultRatio:k}=getAspectRatioData({leftImage:L,rightImage:f,styles:b});return{styles:b,handle:t,hover:o,handleSize:a,leftImageAlt:i,leftImageTitle:s,leftImageCss:r,leftImageLabel:l,rightImageAlt:n,rightImageTitle:p,rightImageCss:g,rightImageLabel:c,sliderLineWidth:u,sliderLineColor:m,sliderPositionPercentage:h,vertical:d,componentUid:S,tempImage:A,aspectRatio:D,defaultRatio:k,isHorizontal:x,hasLeftLabel:I,hasRightLabel:P,qualityType:R,qualityPercent:v,getLeftImageSrc:$,getRightImageSrc:C}},getImageClipStyle=e=>{let{isHorizontal:t,containerWidth:o,containerHeight:a,sliderPosition:i,type:s}=e,r=t?o*i:a*i;return"left"===s?{clip:t?`rect(auto, ${r}px, auto, auto)`:`rect(auto, auto, ${r}px, auto)`}:{clip:t?`rect(auto, auto, auto, ${r}px)`:`rect(${r}px, auto, auto, auto)`}},getSliderPositionStyle=e=>{let{isHorizontal:t,containerWidth:o,containerHeight:a,sliderPosition:i,handleSize:s}=e,r=t?o*i:a*i,l=s/2;return{[t?"top":"left"]:0,[t?"left":"top"]:`${r-l}px`}},getLabelContainerStyles=e=>({...getImageClipStyle(e)}),getReactStyles=e=>({sliderPosition:getSliderPositionStyle(e),leftImageClip:getImageClipStyle({...e,type:"left"}),rightImageClip:getImageClipStyle({...e,type:"right"}),leftLabelContainer:getLabelContainerStyles({...e,type:"left"}),rightLabelContainer:getLabelContainerStyles({...e,type:"right"})}),getSettingTranslatedImageComparisonAndSeo=({setting:e,uid:t,pageContext:o})=>{let a=e?.translate?"true":void 0;if(!e||!a)return{};let i=core.cloneDeep(e);for(let e of["Left","Right"]){let s=`image${e}`,r=i[s];if(r?.src){let e=helpers.getDynamicSourceLocales({val:r.src,uid:t,settingId:`${s}_src`,translate:a,pageContext:o});i[s].src=String(e)}let l=`alt${e}`,n=helpers.getDynamicSourceLocales({val:i[l],uid:t,settingId:l,translate:a,pageContext:o});i[l]=String(n);let p=`title${e}`,g=helpers.getDynamicSourceLocales({val:i[p],uid:t,settingId:p,translate:a,pageContext:o});i[p]=String(g)}return i};exports.FLEX_ALIGN=FLEX_ALIGN,exports.composeLabelPosition=composeLabelPosition,exports.composeResponsiveAspectRatio=composeResponsiveAspectRatio,exports.generateTranslateByDevices=generateTranslateByDevices,exports.getAspectRatioData=getAspectRatioData,exports.getData=getData,exports.getImageClipStyle=getImageClipStyle,exports.getLabelContainerStyles=getLabelContainerStyles,exports.getLabelPosition=getLabelPosition,exports.getReactStyles=getReactStyles,exports.getSettingTranslatedImageComparisonAndSeo=getSettingTranslatedImageComparisonAndSeo,exports.getSliderPositionPercentage=getSliderPositionPercentage,exports.getSliderPositionStyle=getSliderPositionStyle;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),CompareImage_liquid=require("./CompareImage.liquid.js");const ImageComparison=({setting:e,styles:
|
|
2
|
-
<div class="${
|
|
3
|
-
${CompareImage_liquid.default({...
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),CompareImage_liquid=require("./CompareImage.liquid.js");const ImageComparison=({setting:e,styles:a,builderProps:r,advanced:t,pageContext:s,...i})=>{let l=helpers.getSettingTranslatedImageComparisonAndSeo({setting:e,uid:r?.uid,pageContext:s}),{imageLeft:m,altLeft:o,titleLeft:g,imageRight:d,altRight:n,titleRight:p,direction:c,defaultPercentage:u,leftImageLabel:I,rightImageLabel:y,sliderLineWidth:C,hoverToSlide:h,enableLabel:q,preload:f,translate:b,qualityType:v,qualityPercent:P,enableSEOLeft:S,enableSEORight:j}=l??{},A=system.createClass(classes.getImageComparisonWrapperClasses()),L=system.createStyle(classes.getImageComparisonWrapperStyles());return core.template`
|
|
2
|
+
<div class="${A}" style="${L}">
|
|
3
|
+
${CompareImage_liquid.default({...i,styles:a,preload:f,advanced:t,leftImage:m,leftImageAlt:S?o:"",leftImageTitle:S?g:"",rightImage:d,rightImageAlt:j?n:"",rightImageTitle:j?p:"",leftImageLabel:I??"Before",rightImageLabel:y??"After",sliderLineWidth:C,sliderPositionPercentage:helpers.getSliderPositionPercentage(u),vertical:"vertical"===c,hover:h,enableLabel:q,qualityType:v,qualityPercent:P,componentUid:r?.uid??"",builderData:r?.builderData,translate:b})}
|
|
4
4
|
</div>
|
|
5
5
|
`};exports.default=ImageComparison;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),styles=require("../common/styles.js");const Label=({uid:e,label:s,styles:t,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),styles=require("../common/styles.js");const Label=({uid:e,label:s,styles:t,positionId:l,pageContext:r,translateLabel:a,childrenStyle:i,childrenClass:o,containerStyle:c,containerClass:u})=>{let d=styles.getLabelCustomCss(t,e??""),p=helpers.getDynamicSourceLocales({uid:e,translate:"true",val:s,pageContext:r,settingId:a,isCapitalize:t?.typo?.attrs?.transform==="capitalize"});return core.template`
|
|
2
2
|
<div
|
|
3
|
-
id="image-comparison-${
|
|
4
|
-
style="${
|
|
5
|
-
class="${
|
|
3
|
+
id="image-comparison-${l}-label-${e}"
|
|
4
|
+
style="${c}"
|
|
5
|
+
class="${u}"
|
|
6
6
|
>
|
|
7
|
-
<style>${
|
|
8
|
-
<div class="${
|
|
9
|
-
${
|
|
7
|
+
<style>${d}</style>
|
|
8
|
+
<div class="${o}" style="${i}">
|
|
9
|
+
${p}
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
`};exports.default=Label;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("./components/Label.js");var ImageComparison$1=require("./settings/ImageComparison.js");const imageComparisonSetting={ImageComparison:ImageComparison$1.default};exports.imageComparisonSetting=imageComparisonSetting;
|
|
1
|
+
"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("next/link"),require("./components/Label.js");var ImageComparison$1=require("./settings/ImageComparison.js");const imageComparisonSetting={ImageComparison:ImageComparison$1.default};exports.imageComparisonSetting=imageComparisonSetting;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"
|
|
1
|
+
"use strict";const ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"rightImageLabel",label:"Second Description",type:"input",default:"After"},{id:"enableSEOLeft",type:"toggle",default:!1},{id:"enableSEORight",type:"toggle",default:!1},{id:"seo",type:"group",label:"SEO",controls:[{id:"seoTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"altLeft",label:"First image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"altRight",label:"Second image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"titleLeft",label:"First image title",info:"Show title when hover to first image",type:"input",placeholder:"E.g: iphone compare",default:"Title"},{id:"titleRight",label:"Second image title",info:"Show title when hover to second image",type:"input",placeholder:"E.g: iphone compare",default:"Title"}]},{id:"translate",type:"input",default:[{id:"altLeft"},{id:"altRight"},{id:"titleLeft"},{id:"titleRight"},{id:"rightImageLabel"},{id:"leftImageLabel"},{id:"imageLeft",fields:["src"]},{id:"imageRight",fields:["src"]}]}]},{id:"style",controls:[{id:"label-settings",type:"group",label:"Label",controls:[{id:"labelPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}}},{id:"labelBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"rgba(0, 0, 0, 0.60)"}}},{id:"labelPositionHoz",label:"Position",type:"option:value",devices:{desktop:{default:"hoz-center"}},options:[{label:"Top",value:"top",iconName:"gp-justify-content-top"},{label:"Center",value:"hoz-center",iconName:"gp-justify-content-center"},{label:"Bottom",value:"bottom",iconName:"gp-justify-content-bottom"}]},{id:"labelPositionVer",label:"Position",type:"option:value",devices:{desktop:{default:"ver-center"}},options:[{label:"Left",value:"left",iconName:"gp-justify-content-left"},{label:"Center",value:"ver-center",iconName:"gp-justify-content-middle"},{label:"Right",value:"right",iconName:"gp-justify-content-right"}]},{id:"labelTextColor",type:"colorpicker",label:"Text Color",default:"#FFFFFF"},{id:"labelBorder",type:"border-v2",devices:{desktop:{default:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-1",isCustom:!0}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"labelRounded",type:"corner-v2",devices:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"labelShadow",type:"shadow-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}}]},{id:"size-settings",type:"group",label:"Size",controls:[{id:"aspectRatio",type:"select",label:"Aspect Ratio",options:[{label:"Original",value:"auto"},{label:"1:1",value:"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:"customAspectRadio",type:"ratio",min:1,devices:{desktop:{default:{width:"1",height:"1"}}},hide:!0},{id:"imageScale",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:{desktop:{default:"cover"}}},{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",type:"input:unit",emptyOnClear:!0,placeholder:"Auto",min:0,units:["px","%"],hide:!0,devices:{desktop:{default:"100%"}}}]},{id:"typo",type:"typography-combo",default:{type:"paragraph-2"},ignoreReRender:!0,compoDefaultValue:{attrs:{color:"#FFFFFF"}},hiddenSetting:{textAlign:!0}},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}}]}];exports.ImageComparisonSettings=ImageComparisonSettings;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("./types.js");var PostPurchaseLine$1=require("./settings/PostPurchaseLine.js");const postPurchaseLineSetting={PostPurchaseLine:PostPurchaseLine$1.default};exports.postPurchaseLineSetting=postPurchaseLineSetting;
|
|
1
|
+
"use strict";require("react/jsx-runtime"),require("@gem-sdk/system"),require("@gem-sdk/core"),require("react"),require("next/link"),require("./types.js");var PostPurchaseLine$1=require("./settings/PostPurchaseLine.js");const postPurchaseLineSetting={PostPurchaseLine:PostPurchaseLine$1.default};exports.postPurchaseLineSetting=postPurchaseLineSetting;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core");const getAspectRatioSettings=(e,t)=>{let o={desktop:e?.desktop?.width,tablet:e?.tablet?.width,mobile:e?.mobile?.width},s={desktop:e?.desktop?.height,tablet:e?.tablet?.height,mobile:e?.mobile?.height},i={desktop:t?.desktop==="custom"?`${core.getResponsiveValueByScreen(o,"desktop")}/${core.getResponsiveValueByScreen(s,"desktop")}`:t?.desktop==="cover"?"unset":t?.desktop,tablet:t?.tablet==="custom"?`${core.getResponsiveValueByScreen(o,"tablet")}/${core.getResponsiveValueByScreen(s,"tablet")}`:t?.tablet==="cover"?"unset":t?.tablet,mobile:t?.mobile==="custom"?`${core.getResponsiveValueByScreen(o,"mobile")}/${core.getResponsiveValueByScreen(s,"mobile")}`:t?.mobile==="cover"?"unset":t?.mobile};return i},getYoutubeParams=e=>{let{id:t,params:o,muted:s,webp:i,controls:
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core");require("react/jsx-runtime"),require("react"),require("next/link");const getAspectRatioSettings=(e,t)=>{let o={desktop:e?.desktop?.width,tablet:e?.tablet?.width,mobile:e?.mobile?.width},s={desktop:e?.desktop?.height,tablet:e?.tablet?.height,mobile:e?.mobile?.height},i={desktop:t?.desktop==="custom"?`${core.getResponsiveValueByScreen(o,"desktop")}/${core.getResponsiveValueByScreen(s,"desktop")}`:t?.desktop==="cover"?"unset":t?.desktop,tablet:t?.tablet==="custom"?`${core.getResponsiveValueByScreen(o,"tablet")}/${core.getResponsiveValueByScreen(s,"tablet")}`:t?.tablet==="cover"?"unset":t?.tablet,mobile:t?.mobile==="custom"?`${core.getResponsiveValueByScreen(o,"mobile")}/${core.getResponsiveValueByScreen(s,"mobile")}`:t?.mobile==="cover"?"unset":t?.mobile};return i},getYoutubeParams=e=>{let{id:t,params:o,muted:s,webp:i,controls:r,adNetwork:a,autoplay:p,lazy:l}=e,m=encodeURIComponent(t),u="hqdefault",d=`${o}`||"",n=s?"&mute=1":"",b=i?"webp":"jpg",c=i?"vi_webp":"vi",g=e.thumbnail||`https://i.ytimg.com/${c}/${m}/${u}.${b}`,v=e.noCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",V=`${v}/embed/${m}?autoplay=${!!l||p}&state=1${n}${d}&controls=${r?1:0}`,h=a||!1;return{videoId:m,posterImp:u,paramsImp:d,mutedImp:n,format:b,vi:c,posterUrl:g,ytUrl:v,iframeSrc:V,adNetworkImp:h}},getVimeoParams=e=>{let{id:t,autoplay:o,muted:s,controls:i,loop:r,lazy:a}=e,p=encodeURIComponent(t),l=`?&autoplay=${a?1:o?1:0}&muted=${s?1:0}&loop=${r?1:0}&controls=${i}&autopause=false`,m=`https://player.vimeo.com/video/${p}${l}`;return{videoId:p,params:l,iframeSrc:m}},makeStyleResponsiveRatio=(e,t)=>({[`--${e}`]:t?.desktop,[`--${e}-tablet`]:t?.tablet,[`--${e}-mobile`]:t?.mobile}),fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",youtubeVideoRegex=/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|shorts\/)|youtu\.be\/)([^"&?/\s]{11})/i,vimeoVideoRegex=/^(?:http:\/\/|https:\/\/)vimeo\.com\/[\w/]+(?:\?.*)?$/im,getYoutubeVideoId=e=>{let t=e.match(youtubeVideoRegex);return t?.[1]??void 0},getVimeoVideoId=e=>{let t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/,o=e.match(t);return o?.[3]},parseTimeVideo=e=>{let t=e.split(":",2);return t.length<=1?parseInt(t[0]||"0"):60*parseInt(t[0]||"0")+parseInt(t[1]||"0")},covertStrParamsToObj=e=>{let t=e.split("&");return t.shift(),t.reduce((e,t)=>{let[o,s]=t.split("=");return"loop"!==o?{...e,[o]:s}:e},{})},isSettingLoop=e=>e.includes("loop=1");exports.covertStrParamsToObj=covertStrParamsToObj,exports.fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",exports.getAspectRatioSettings=getAspectRatioSettings,exports.getVimeoParams=getVimeoParams,exports.getVimeoVideoId=getVimeoVideoId,exports.getYoutubeParams=getYoutubeParams,exports.getYoutubeVideoId=getYoutubeVideoId,exports.isSettingLoop=isSettingLoop,exports.makeStyleResponsiveRatio=makeStyleResponsiveRatio,exports.parseTimeVideo=parseTimeVideo,exports.vimeoVideoRegex=vimeoVideoRegex,exports.youtubeVideoRegex=youtubeVideoRegex;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{cloneDeep as e,getCornerCSSFromGlobal as t,getAspectRatioGlobalSize as i,makeStyleResponsive as r,DEVICES as a,getResponsiveValueByScreen as l}from"@gem-sdk/core";import{getDynamicSourceLocales as g}from"../../helpers.js";let overwriteDefaultRadius=e=>{let i={...e},r=!0;return i&&Object.keys(i??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let t=i[e]??{};"0px"!==t&&(r=!1)}}),r?t(i):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:a}=t??{},{customAspectRadio:l,shape:g}=e??{},s={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.desktop:a,custom:l}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.tablet:a,custom:l}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.mobile:a,custom:l})};return g?i(g):s},composeAspectRatio=({device:e,aspect:t,custom:i,auto:r})=>{let a=t?.[e];return"auto"===a?r?.height?`${r.width}/${r.height}`:void 0:"custom"===a?i?.[e]?.height?`${i?.[e]?.width}/${i?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:r("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:i,width:r,height:l})=>{if(e)return{};let g={};return a.forEach(e=>{let a=`--objf${"desktop"!==e?`-${e}`:""}`,s=i?.[a]||i?.["--objf"];if(t?.[e]==="auto"&&"contain"===s){g[e]="auto";return}g[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${r}/${l}`}),g},safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"""),shimmer=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
2
2
|
<defs>
|
|
3
3
|
<linearGradient id="g-${e}-${t}">
|
|
4
4
|
<stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
|
|
@@ -9,4 +9,4 @@ import{getCornerCSSFromGlobal as e,getAspectRatioGlobalSize as t,makeStyleRespon
|
|
|
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}},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:
|
|
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{};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,16 +1,16 @@
|
|
|
1
|
-
import{template as s}from"@gem-sdk/core";import{createStyle as e,createClass as t,createAttr as i,If as m}from"@gem-sdk/system";import{getLinkData as
|
|
1
|
+
import{template as s}from"@gem-sdk/core";import{createStyle as e,createClass as t,createAttr as i,If as m}from"@gem-sdk/system";import{getLinkData as o}from"../../helpers.js";import r from"./AdaptiveImage.liquid.js";import l from"./NextImage.liquid.js";import{getWrapperStyles as a,getImageStyles as p,getContainerStyles as d}from"../common/styles.js";import{getWrapperClasses as u,getImageClasses as c,getContainerClasses as f}from"../common/classes.js";import{getContainerAttrs as n,getAdaptiveImageAttrs as g,getNextImageAttrs as $,getLinkWrapperAttrs as j,getImageLiquidAttrs as y}from"../common/attrs.js";import{getSettingTranslatedImageAndSeo as q}from"../common/helpers.js";let Image=({style:v,styles:I,setting:h,advanced:L,className:N,pageContext:k,builderAttrs:x,builderProps:W})=>{let A=q({setting:h,uid:W?.uid,pageContext:k}),{imageLink:C,isAdaptive:b,enableImageLink:w}=A??{},{enableLazyLoadImage:z}=k??{},{Wrapper:B,urlData:D}=o({defaultWrap:"div",setting:C,enableImageLink:w,isLiquid:!0}),E=e(a(I)),F=e(p(I,W)),G=e(d(v,I)),H=t(u()),J=t(c(N,I)),K=t(f(W?.uid,L?.cssClass,I?.shape)),M=i(n(x,W?.uid)),O=j({urlData:D,imageLink:C,title:A?.title,isLiquid:!0}),P=g({styles:I,setting:A,isLiquid:!0}),Q=$({styles:I,setting:A}),R=y({pageContext:k,enableLazyLoadImage:z}),S=()=>m(b,r({...R,...P,style:F,className:J}),l({...R,...Q,style:F,className:J})),T=()=>S();return s`
|
|
2
2
|
<div
|
|
3
3
|
role="presentation"
|
|
4
|
-
${{...
|
|
5
|
-
style="${
|
|
6
|
-
class="${
|
|
4
|
+
${{...M}}
|
|
5
|
+
style="${G}"
|
|
6
|
+
class="${K}"
|
|
7
7
|
>
|
|
8
|
-
<${
|
|
9
|
-
${
|
|
10
|
-
style="${
|
|
11
|
-
class="${
|
|
8
|
+
<${B}
|
|
9
|
+
${O}
|
|
10
|
+
style="${E}"
|
|
11
|
+
class="${H}"
|
|
12
12
|
>
|
|
13
|
-
${
|
|
14
|
-
</${
|
|
13
|
+
${T()}
|
|
14
|
+
</${B}>
|
|
15
15
|
</div>
|
|
16
16
|
`};export{Image as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
let ImageSettings=[{id:"setting",controls:[{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:{en:"Style"},itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{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:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",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:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];export{ImageSettings};
|
|
1
|
+
let ImageSettings=[{id:"setting",controls:[{id:"translate",type:"input",default:[{id:"srcSet",fields:["src"]},{id:"alt"},{id:"title"}]},{id:"imageStyle",label:"Style",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,popoverLabel:{en:"Style"},itemPerRow:2,itemSpacing:"large",options:[{label:"Rectangle",value:"rectangle",iconName:"gp-image-rectangle-style"},{label:"Circle",value:"circle",iconName:"gp-image-circle-style"}],default:"rectangle"},{id:"image-info",label:"Image",type:"group",controls:[{id:"image",type:"image-select",label:"Pick Image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}},{id:"srcSet",type:"image-select",hide:!0,dynamicSource:!0,devices:{desktop:{default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_demo.jpg",width:2237,height:1678}}}},{id:"isAdaptive",type:"toggle",label:"Adaptive",default:!0,hideOnMode:{mobileOnly:!0}}]},{id:"enableImageLink",type:"toggle",default:!1,compoDefaultValue:!1},{id:"imageLink",type:"pick-link",label:"Pick Link",default:{type:"open-page",link:"",target:"_self"},hiddenOptions:{"stay-on-page":!0}},{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:"optimize",type:"group",label:"Optimize",hiddenWithGemPages:!0,controls:[{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],showDefaultUnit:!0,min:100,max:400,step:50,useOnlyUnitInit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"priority",type:"toggle",label:"Preload",default:!1}]},{id:"isNotLazyload",type:"toggle",default:!1}]},{id:"style",controls:[{id:"shape",type:"size-setting",label:"",devices:{desktop:{default:{shape:"original",shapeLinked:!0,width:"1200px"}}},settingConfig:{width:{displayOptions:["full"]},height:{displayOptions:["full"],units:["px","%"]}},hiddenSettings:["padding","gap"]},{id:"objectFit",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:{desktop:{default:"cover"}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}},{id:"behavior-state",type:"behavior-state",label:"Behavior State",controls:[{id:"borderImg",type:"border",label:"Border",default:{normal:{borderType:"none",border:"none",width:"1px 1px 1px 1px",borderWidth:"1px",color:"#000000",isCustom:!1}},state:{hover:!0,normal:!0}},{id:"opacity",label:"Overlay Opacity",type:"input:slider",min:0,max:100,step:1,units:["%"],useOnlyUnitInit:!0,default:{normal:0},state:{normal:!0,hover:!0}},{id:"opacityColor",label:"Overlay Color",type:"colorpicker",default:{normal:"#242424"},state:{normal:!0,hover:!0}},{id:"hasBoxShadowImg",type:"toggle",label:"Enable Image Shadow",default:{normal:!1},state:{normal:!0,hover:!0}},{id:"boxShadowImg",type:"boxShadow",label:"Image Shadow",hideOnState:{normal:!0,hover:!0},default:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45}},state:{normal:!0,hover:!0}}]},{id:"wrapperBorder",type:"border",label:"Border",default:{borderType:"none",border:"none",width:"1px 1px 1px 1px",position:"all",borderWidth:"1px",color:"#000000",isCustom:!0}},{id:"borderRadius",type:"radius-preset",label:"Corner",default:{radiusType:"none"},compoDefaultValue:{bblr:"20px",btrr:"20px",bbrr:"20px",btlr:"20px",radiusType:"rounded"}},{id:"hasActiveShadow",type:"toggle",label:"Enable Button Shadow",default:!1},{id:"shadow",type:"shadow-v2",label:"Button Shadow",default:{type:"none",distance:"10px",blur:"12px",spread:"10px",color:"rgba(18, 18, 18, 0.77)",angle:40}}]}];export{ImageSettings};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getResponsiveValueByScreen as
|
|
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{};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};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{template as e}from"@gem-sdk/core";import{createClass as t,createStyle as
|
|
2
|
-
<div class="${
|
|
3
|
-
${
|
|
1
|
+
import{template as e}from"@gem-sdk/core";import{createClass as t,createStyle as i}from"@gem-sdk/system";import{getImageComparisonWrapperClasses as r,getImageComparisonWrapperStyles as a}from"../common/classes.js";import{getSettingTranslatedImageComparisonAndSeo as m,getSliderPositionPercentage as l}from"../common/helpers.js";import o from"./CompareImage.liquid.js";let ImageComparison=({setting:s,styles:g,builderProps:d,advanced:n,pageContext:p,...f})=>{let I=m({setting:s,uid:d?.uid,pageContext:p}),{imageLeft:c,altLeft:u,titleLeft:h,imageRight:b,altRight:v,titleRight:y,direction:C,defaultPercentage:L,leftImageLabel:j,rightImageLabel:q,sliderLineWidth:A,hoverToSlide:P,enableLabel:T,preload:$,translate:k,qualityType:x,qualityPercent:D,enableSEOLeft:B,enableSEORight:U}=I??{},W=t(r()),w=i(a());return e`
|
|
2
|
+
<div class="${W}" style="${w}">
|
|
3
|
+
${o({...f,styles:g,preload:$,advanced:n,leftImage:c,leftImageAlt:B?u:"",leftImageTitle:B?h:"",rightImage:b,rightImageAlt:U?v:"",rightImageTitle:U?y:"",leftImageLabel:j??"Before",rightImageLabel:q??"After",sliderLineWidth:A,sliderPositionPercentage:l(L),vertical:"vertical"===C,hover:P,enableLabel:T,qualityType:x,qualityPercent:D,componentUid:d?.uid??"",builderData:d?.builderData,translate:k})}
|
|
4
4
|
</div>
|
|
5
5
|
`};export{ImageComparison as default};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import{template as
|
|
1
|
+
import{template as t}from"@gem-sdk/core";import{getDynamicSourceLocales as e}from"../../helpers.js";import{getLabelCustomCss as s}from"../common/styles.js";let Label=({uid:l,label:a,styles:i,positionId:r,pageContext:o,translateLabel:m,childrenStyle:d,childrenClass:p,containerStyle:$,containerClass:c})=>{let n=s(i,l??""),y=e({uid:l,translate:"true",val:a,pageContext:o,settingId:m,isCapitalize:i?.typo?.attrs?.transform==="capitalize"});return t`
|
|
2
2
|
<div
|
|
3
|
-
id="image-comparison-${
|
|
4
|
-
style="${
|
|
5
|
-
class="${
|
|
3
|
+
id="image-comparison-${r}-label-${l}"
|
|
4
|
+
style="${$}"
|
|
5
|
+
class="${c}"
|
|
6
6
|
>
|
|
7
|
-
<style>${
|
|
8
|
-
<div class="${
|
|
9
|
-
${
|
|
7
|
+
<style>${n}</style>
|
|
8
|
+
<div class="${p}" style="${d}">
|
|
9
|
+
${y}
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
12
|
`};export{Label as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"react/jsx-runtime";import"@gem-sdk/system";import"@gem-sdk/core";import"react";import"./components/Label.js";import m from"./settings/ImageComparison.js";let imageComparisonSetting={ImageComparison:m};export{imageComparisonSetting};
|
|
1
|
+
import"react/jsx-runtime";import"@gem-sdk/system";import"@gem-sdk/core";import"react";import"next/link";import"./components/Label.js";import m from"./settings/ImageComparison.js";let imageComparisonSetting={ImageComparison:m};export{imageComparisonSetting};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
let ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"
|
|
1
|
+
let ImageComparisonSettings=[{id:"setting",controls:[{id:"imageTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"imageLeft",label:"Left image",type:"group",controls:[{id:"imageLeft",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_before.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"imageRight",label:"Right Image",type:"group",controls:[{id:"imageRight",type:"image",default:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/image_compare_after.png",width:900,height:600},hiddenSetting:{seo:!0,optimizeLCP:!0}}]},{id:"preload",type:"toggle",label:"Preload",default:!1},{id:"qualityType",type:"select",label:"Quality",devices:{desktop:{default:"high"}},options:[{title:"Finest",value:"finest"},{title:"High",value:"high"},{title:"Medium",value:"medium"},{title:"Custom",value:"custom",tooltip:"You can choose it for advanced page loading optimization."}]},{id:"qualityPercent",type:"input:slider",label:"",units:["%"],min:100,max:400,step:50,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,devices:{desktop:{default:100}}},{id:"direction",label:"Layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",options:[{label:"Horizontal",value:"horizontal",iconName:"gp-image-comparison-horizontal"},{label:"Vertical",value:"vertical",iconName:"gp-image-comparison-vertical"}],default:"horizontal"},{id:"slider-settings",type:"group",label:"Slider",controls:[{id:"hoverToSlide",type:"select",options:[{label:"Drag to move",value:!1},{label:"Hover to move",value:!0}],label:"Behavior",default:!1},{id:"defaultPercentage",label:"Default ratio",type:"input:slider",useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0,units:["%"],hide:!0,min:1,max:100,default:50}]},{id:"enableLabel",type:"toggle",default:!1},{id:"leftImageLabel",label:"First Description",type:"input",default:"Before"},{id:"rightImageLabel",label:"Second Description",type:"input",default:"After"},{id:"enableSEOLeft",type:"toggle",default:!1},{id:"enableSEORight",type:"toggle",default:!1},{id:"seo",type:"group",label:"SEO",controls:[{id:"seoTab",label:"",type:"option:value",options:[{label:"First",value:"left"},{label:"Second",value:"right"}],default:"left"},{id:"altLeft",label:"First image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"altRight",label:"Second image alt text",type:"textarea",minHeight:76,autoHeight:!0,placeholder:"E.g: image of an iphone",default:"Describes the appearance of the image"},{id:"titleLeft",label:"First image title",info:"Show title when hover to first image",type:"input",placeholder:"E.g: iphone compare",default:"Title"},{id:"titleRight",label:"Second image title",info:"Show title when hover to second image",type:"input",placeholder:"E.g: iphone compare",default:"Title"}]},{id:"translate",type:"input",default:[{id:"altLeft"},{id:"altRight"},{id:"titleLeft"},{id:"titleRight"},{id:"rightImageLabel"},{id:"leftImageLabel"},{id:"imageLeft",fields:["src"]},{id:"imageRight",fields:["src"]}]}]},{id:"style",controls:[{id:"label-settings",type:"group",label:"Label",controls:[{id:"labelPadding",type:"padding-v2",devices:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}},compoDefaultValue:{desktop:{default:{top:"4px",left:"4px",bottom:"4px",right:"4px",linked:!0}}}},{id:"labelBackgroundColor",type:"color-picker-v2",devices:{desktop:{default:"rgba(0, 0, 0, 0.60)"}}},{id:"labelPositionHoz",label:"Position",type:"option:value",devices:{desktop:{default:"hoz-center"}},options:[{label:"Top",value:"top",iconName:"gp-justify-content-top"},{label:"Center",value:"hoz-center",iconName:"gp-justify-content-center"},{label:"Bottom",value:"bottom",iconName:"gp-justify-content-bottom"}]},{id:"labelPositionVer",label:"Position",type:"option:value",devices:{desktop:{default:"ver-center"}},options:[{label:"Left",value:"left",iconName:"gp-justify-content-left"},{label:"Center",value:"ver-center",iconName:"gp-justify-content-middle"},{label:"Right",value:"right",iconName:"gp-justify-content-right"}]},{id:"labelTextColor",type:"colorpicker",label:"Text Color",default:"#FFFFFF"},{id:"labelBorder",type:"border-v2",devices:{desktop:{default:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"line-1",isCustom:!0}}},compoDefaultValue:{desktop:{default:{border:"solid",color:"line-1",width:"1px",borderWidth:"1px"}}}},{id:"labelRounded",type:"corner-v2",devices:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}},compoDefaultValue:{desktop:{default:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}}}},{id:"labelShadow",type:"shadow-v2",devices:{desktop:{}},compoDefaultValue:{desktop:{default:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}}}]},{id:"size-settings",type:"group",label:"Size",controls:[{id:"aspectRatio",type:"select",label:"Aspect Ratio",options:[{label:"Original",value:"auto"},{label:"1:1",value:"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:"customAspectRadio",type:"ratio",min:1,devices:{desktop:{default:{width:"1",height:"1"}}},hide:!0},{id:"imageScale",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:{desktop:{default:"cover"}}},{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",type:"input:unit",emptyOnClear:!0,placeholder:"Auto",min:0,units:["px","%"],hide:!0,devices:{desktop:{default:"100%"}}}]},{id:"typo",type:"typography-combo",default:{type:"paragraph-2"},ignoreReRender:!0,compoDefaultValue:{attrs:{color:"#FFFFFF"}},hiddenSetting:{textAlign:!0}},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{id:"align",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}}]}];export{ImageComparisonSettings};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"react/jsx-runtime";import"@gem-sdk/system";import"@gem-sdk/core";import"./types.js";import t from"./settings/PostPurchaseLine.js";let postPurchaseLineSetting={PostPurchaseLine:t};export{postPurchaseLineSetting};
|
|
1
|
+
import"react/jsx-runtime";import"@gem-sdk/system";import"@gem-sdk/core";import"react";import"next/link";import"./types.js";import t from"./settings/PostPurchaseLine.js";let postPurchaseLineSetting={PostPurchaseLine:t};export{postPurchaseLineSetting};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getResponsiveValueByScreen as e}from"@gem-sdk/core";let getAspectRatioSettings=(t,o)=>{let i={desktop:t?.desktop?.width,tablet:t?.tablet?.width,mobile:t?.mobile?.width},s={desktop:t?.desktop?.height,tablet:t?.tablet?.height,mobile:t?.mobile?.height},
|
|
1
|
+
import{getResponsiveValueByScreen as e}from"@gem-sdk/core";import"react/jsx-runtime";import"react";import"next/link";let getAspectRatioSettings=(t,o)=>{let i={desktop:t?.desktop?.width,tablet:t?.tablet?.width,mobile:t?.mobile?.width},s={desktop:t?.desktop?.height,tablet:t?.tablet?.height,mobile:t?.mobile?.height},m={desktop:o?.desktop==="custom"?`${e(i,"desktop")}/${e(s,"desktop")}`:o?.desktop==="cover"?"unset":o?.desktop,tablet:o?.tablet==="custom"?`${e(i,"tablet")}/${e(s,"tablet")}`:o?.tablet==="cover"?"unset":o?.tablet,mobile:o?.mobile==="custom"?`${e(i,"mobile")}/${e(s,"mobile")}`:o?.mobile==="cover"?"unset":o?.mobile};return m},getYoutubeParams=e=>{let{id:t,params:o,muted:i,webp:s,controls:m,adNetwork:l,autoplay:a,lazy:p}=e,r=encodeURIComponent(t),d="hqdefault",u=`${o}`||"",b=i?"&mute=1":"",n=s?"webp":"jpg",c=s?"vi_webp":"vi",g=e.thumbnail||`https://i.ytimg.com/${c}/${r}/${d}.${n}`,$=e.noCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",h=`${$}/embed/${r}?autoplay=${!!p||a}&state=1${b}${u}&controls=${m?1:0}`,v=l||!1;return{videoId:r,posterImp:d,paramsImp:u,mutedImp:b,format:n,vi:c,posterUrl:g,ytUrl:$,iframeSrc:h,adNetworkImp:v}},getVimeoParams=e=>{let{id:t,autoplay:o,muted:i,controls:s,loop:m,lazy:l}=e,a=encodeURIComponent(t),p=`?&autoplay=${l?1:o?1:0}&muted=${i?1:0}&loop=${m?1:0}&controls=${s}&autopause=false`,r=`https://player.vimeo.com/video/${a}${p}`;return{videoId:a,params:p,iframeSrc:r}},makeStyleResponsiveRatio=(e,t)=>({[`--${e}`]:t?.desktop,[`--${e}-tablet`]:t?.tablet,[`--${e}-mobile`]:t?.mobile}),fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",youtubeVideoRegex=/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|shorts\/)|youtu\.be\/)([^"&?/\s]{11})/i,vimeoVideoRegex=/^(?:http:\/\/|https:\/\/)vimeo\.com\/[\w/]+(?:\?.*)?$/im,getYoutubeVideoId=e=>{let t=e.match(youtubeVideoRegex);return t?.[1]??void 0},getVimeoVideoId=e=>{let t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/,o=e.match(t);return o?.[3]},parseTimeVideo=e=>{let t=e.split(":",2);return t.length<=1?parseInt(t[0]||"0"):60*parseInt(t[0]||"0")+parseInt(t[1]||"0")},covertStrParamsToObj=e=>{let t=e.split("&");return t.shift(),t.reduce((e,t)=>{let[o,i]=t.split("=");return"loop"!==o?{...e,[o]:i}:e},{})},isSettingLoop=e=>e.includes("loop=1");export{covertStrParamsToObj,fallbackImageVideoUrl,getAspectRatioSettings,getVimeoParams,getVimeoVideoId,getYoutubeParams,getYoutubeVideoId,isSettingLoop,makeStyleResponsiveRatio,parseTimeVideo,vimeoVideoRegex,youtubeVideoRegex};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -281,6 +281,7 @@ type ImageSettingProps$1 = {
|
|
|
281
281
|
srcSet?: ObjectDevices<BaseImageData>;
|
|
282
282
|
qualityPercent?: ObjectDevices<number>;
|
|
283
283
|
qualityType?: ObjectDevices<QualityType$3>;
|
|
284
|
+
translate?: TranslateElement$1[];
|
|
284
285
|
};
|
|
285
286
|
type QualityType$3 = 'finest' | 'high' | 'medium' | 'custom';
|
|
286
287
|
type ImageProps = BasePropsWrap<ImageSettingProps$1, ImageStyleProps$1> & {
|
|
@@ -2209,7 +2210,7 @@ type ImageComparisonSettingProps = {
|
|
|
2209
2210
|
defaultPercentage?: number;
|
|
2210
2211
|
leftImageLabel?: string;
|
|
2211
2212
|
rightImageLabel?: string;
|
|
2212
|
-
translate?:
|
|
2213
|
+
translate?: TranslateElement$1[];
|
|
2213
2214
|
sliderLineWidth?: number;
|
|
2214
2215
|
hoverToSlide?: boolean;
|
|
2215
2216
|
imageTab?: ImageTab;
|
|
@@ -6671,7 +6672,7 @@ declare const IconListV2: (props: IconListProps) => string;
|
|
|
6671
6672
|
|
|
6672
6673
|
declare const Image: ({ style, styles, setting, advanced, className, pageContext, builderAttrs, builderProps, }: ImageLiquidProps) => string;
|
|
6673
6674
|
|
|
6674
|
-
declare const ImageComparison: ({ setting, styles, builderProps, advanced, ...props }: ImageComparisonProps) => string;
|
|
6675
|
+
declare const ImageComparison: ({ setting, styles, builderProps, advanced, pageContext, ...props }: ImageComparisonProps) => string;
|
|
6675
6676
|
|
|
6676
6677
|
declare const Line: (props: LineProps) => string;
|
|
6677
6678
|
|