@gem-sdk/components 3.0.0-pre-production.5 → 3.0.0-pre-production.6

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.
Files changed (7) hide show
  1. package/dist/cjs/banner/components/hero-banner/index.js +9 -7
  2. package/dist/cjs/banner/components/hero-banner/index.liquid.js +5 -4
  3. package/dist/cjs/banner/components/hero-banner/utils/index.js +29 -0
  4. package/dist/esm/banner/components/hero-banner/index.js +9 -7
  5. package/dist/esm/banner/components/hero-banner/index.liquid.js +5 -4
  6. package/dist/esm/banner/components/hero-banner/utils/index.js +30 -2
  7. package/package.json +2 -2
package/dist/cjs/banner/components/hero-banner/index.js CHANGED
@@ -173,14 +173,15 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
173
173
  };
174
174
  const getBgImageByScreen = (device)=>{
175
175
  if (!background) return '';
176
- const gradientColor = background?.[device]?.color ? `, ${background[device]?.color}` : '';
177
- if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
178
- return `${core.getBgImageByDevice(background, device) || ''}${gradientColor}`;
176
+ const backgroundByDevice = core.getResponsiveValueByScreen(background, device);
177
+ const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice.color}` : '';
178
+ if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
179
+ return `${index.getBgImageByDevice(background, device) || ''}${gradientColor}`;
179
180
  }
180
- if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
181
- return `${background?.[device]?.color}`;
181
+ if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
182
+ return `${backgroundByDevice.color}`;
182
183
  }
183
- return core.getBgImageByDevice(background, device, {
184
+ return index.getBgImageByDevice(background, device, {
184
185
  ignoreBgAttachment: true
185
186
  });
186
187
  };
@@ -301,7 +302,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
301
302
  }),
302
303
  ...core.getStyleBackgroundByDevice(background, {
303
304
  ignoreBgAttachment: true,
304
- ignoreBackgroundImage: true
305
+ ignoreBackgroundImage: true,
306
+ ignoreBackgroundColor: backgroundResponsive[currentDevice]?.type === 'video'
305
307
  }),
306
308
  position: attachment === 'fixed' ? 'fixed' : 'absolute',
307
309
  '--duration': `${hoverEffectDuration ?? 0}s`,
package/dist/cjs/banner/components/hero-banner/index.liquid.js CHANGED
@@ -140,13 +140,14 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
140
140
  const enableLazyLoad = !setting?.preload && pageContext?.enableLazyLoadImage;
141
141
  const getBgImageByScreen = (device)=>{
142
142
  if (!background) return '';
143
+ const backgroundByDevice = core.getResponsiveValueByScreen(background, device);
143
144
  const imageUrl = enableLazyLoad ? `url(${imagePlaceholder[device]})` : `url(${getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, device), device)})`;
144
- const gradientColor = background?.[device]?.color ? `, ${background?.[device]?.color}` : '';
145
- if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
145
+ const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice?.color}` : '';
146
+ if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
146
147
  return `${imageUrl}${gradientColor}`;
147
148
  }
148
- if (background?.[device]?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
149
- return `${background?.[device]?.color}`;
149
+ if (backgroundByDevice?.color?.includes(core.GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
150
+ return `${backgroundByDevice?.color}`;
150
151
  }
151
152
  if (bgiEnableByDevice[device]) return imageUrl;
152
153
  return 'url()';
package/dist/cjs/banner/components/hero-banner/utils/index.js CHANGED
@@ -106,7 +106,36 @@ const getClipPath = (borderWidth, borderRadius)=>{
106
106
  const bl = calcRounderClipPath(parseInt(bblr ?? '0'), bbw, blw);
107
107
  return `inset(0 0 0 round ${tl}px ${tr}px ${br}px ${bl}px)`;
108
108
  };
109
+ const getBgImageByDevice = (background, device, options)=>{
110
+ const backgroundByDevice = core.getResponsiveValueByScreen(background, device);
111
+ const isBgVideo = backgroundByDevice?.type === 'video';
112
+ if (isBgVideo) return;
113
+ if (backgroundByDevice?.type === 'color') return 'url()'; // To prevent overriding background image from upper device
114
+ const backupFileKey = backgroundByDevice?.image?.backupFileKey;
115
+ const storage = backgroundByDevice?.image?.storage;
116
+ let imageByDevice = backgroundByDevice?.image?.src;
117
+ let newBackupFilekey = backupFileKey;
118
+ const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
119
+ /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
120
+ if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
121
+ newBackupFilekey = shopifyHandleName;
122
+ }
123
+ if (storage === 'FILE_CONTENT') {
124
+ if (options?.liquid && newBackupFilekey) {
125
+ imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
126
+ }
127
+ }
128
+ if (storage === 'THEME' || !storage) {
129
+ if (options?.liquid && newBackupFilekey) {
130
+ imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
131
+ }
132
+ }
133
+ if (typeof imageByDevice === 'string') {
134
+ return `url(${imageByDevice})`;
135
+ }
136
+ };
109
137
 
138
+ exports.getBgImageByDevice = getBgImageByDevice;
110
139
  exports.getClipPath = getClipPath;
111
140
  exports.getPercentageVisible = getPercentageVisible;
112
141
  exports.getStyleHeroBannerBg = getStyleHeroBannerBg;
package/dist/esm/banner/components/hero-banner/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getStyleShadow, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, GRADIENT_BGR_KEY, getBgImageByDevice } from '@gem-sdk/core';
2
+ import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getStyleShadow, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, GRADIENT_BGR_KEY } from '@gem-sdk/core';
3
3
  import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
4
4
  import Row from '../../../grid/components/Row.js';
5
5
  import Link from '../../../link/components/Link.js';
@@ -12,7 +12,7 @@ import HTML5Embed from '../../../video/components/HTML5Embed.js';
12
12
  import useIntersectionObserver from './hooks/useIntersectionObserver.js';
13
13
  import AnimationManager from './parallax/AnimationManager.js';
14
14
  import { useTranslateValue } from './hooks/useTranslateValue.js';
15
- import { getClipPath, isScaleImage } from './utils/index.js';
15
+ import { getClipPath, getBgImageByDevice, isScaleImage } from './utils/index.js';
16
16
  import useAspectRatioSettings from './hooks/useAspectRatioSettings.js';
17
17
  import { createBlurDataURL } from '../../../image/components/helpers.js';
18
18
 
@@ -169,12 +169,13 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
169
169
  };
170
170
  const getBgImageByScreen = (device)=>{
171
171
  if (!background) return '';
172
- const gradientColor = background?.[device]?.color ? `, ${background[device]?.color}` : '';
173
- if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
172
+ const backgroundByDevice = getResponsiveValueByScreen(background, device);
173
+ const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice.color}` : '';
174
+ if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
174
175
  return `${getBgImageByDevice(background, device) || ''}${gradientColor}`;
175
176
  }
176
- if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
177
- return `${background?.[device]?.color}`;
177
+ if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
178
+ return `${backgroundByDevice.color}`;
178
179
  }
179
180
  return getBgImageByDevice(background, device, {
180
181
  ignoreBgAttachment: true
@@ -297,7 +298,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
297
298
  }),
298
299
  ...getStyleBackgroundByDevice(background, {
299
300
  ignoreBgAttachment: true,
300
- ignoreBackgroundImage: true
301
+ ignoreBackgroundImage: true,
302
+ ignoreBackgroundColor: backgroundResponsive[currentDevice]?.type === 'video'
301
303
  }),
302
304
  position: attachment === 'fixed' ? 'fixed' : 'absolute',
303
305
  '--duration': `${hoverEffectDuration ?? 0}s`,
package/dist/esm/banner/components/hero-banner/index.liquid.js CHANGED
@@ -136,13 +136,14 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
136
136
  const enableLazyLoad = !setting?.preload && pageContext?.enableLazyLoadImage;
137
137
  const getBgImageByScreen = (device)=>{
138
138
  if (!background) return '';
139
+ const backgroundByDevice = getResponsiveValueByScreen(background, device);
139
140
  const imageUrl = enableLazyLoad ? `url(${imagePlaceholder[device]})` : `url(${getImageSrc(getResponsiveValueByScreen(srcSet, device), device)})`;
140
- const gradientColor = background?.[device]?.color ? `, ${background?.[device]?.color}` : '';
141
- if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
141
+ const gradientColor = backgroundByDevice?.color ? `, ${backgroundByDevice?.color}` : '';
142
+ if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && bgiEnableByDevice[device]) {
142
143
  return `${imageUrl}${gradientColor}`;
143
144
  }
144
- if (background?.[device]?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
145
- return `${background?.[device]?.color}`;
145
+ if (backgroundByDevice?.color?.includes(GRADIENT_BGR_KEY) && !bgiEnableByDevice[device]) {
146
+ return `${backgroundByDevice?.color}`;
146
147
  }
147
148
  if (bgiEnableByDevice[device]) return imageUrl;
148
149
  return 'url()';
package/dist/esm/banner/components/hero-banner/utils/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { makeStyleResponsive } from '@gem-sdk/core';
1
+ import { getResponsiveValueByScreen, makeStyleResponsive } from '@gem-sdk/core';
2
2
 
3
3
  const getPercentageVisible = (boundingClientRect, windowHeight)=>{
4
4
  const { top, height } = boundingClientRect;
@@ -104,5 +104,33 @@ const getClipPath = (borderWidth, borderRadius)=>{
104
104
  const bl = calcRounderClipPath(parseInt(bblr ?? '0'), bbw, blw);
105
105
  return `inset(0 0 0 round ${tl}px ${tr}px ${br}px ${bl}px)`;
106
106
  };
107
+ const getBgImageByDevice = (background, device, options)=>{
108
+ const backgroundByDevice = getResponsiveValueByScreen(background, device);
109
+ const isBgVideo = backgroundByDevice?.type === 'video';
110
+ if (isBgVideo) return;
111
+ if (backgroundByDevice?.type === 'color') return 'url()'; // To prevent overriding background image from upper device
112
+ const backupFileKey = backgroundByDevice?.image?.backupFileKey;
113
+ const storage = backgroundByDevice?.image?.storage;
114
+ let imageByDevice = backgroundByDevice?.image?.src;
115
+ let newBackupFilekey = backupFileKey;
116
+ const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
117
+ /\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];
118
+ if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
119
+ newBackupFilekey = shopifyHandleName;
120
+ }
121
+ if (storage === 'FILE_CONTENT') {
122
+ if (options?.liquid && newBackupFilekey) {
123
+ imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
124
+ }
125
+ }
126
+ if (storage === 'THEME' || !storage) {
127
+ if (options?.liquid && newBackupFilekey) {
128
+ imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
129
+ }
130
+ }
131
+ if (typeof imageByDevice === 'string') {
132
+ return `url(${imageByDevice})`;
133
+ }
134
+ };
107
135
 
108
- export { getClipPath, getPercentageVisible, getStyleHeroBannerBg, isScaleImage };
136
+ export { getBgImageByDevice, getClipPath, getPercentageVisible, getStyleHeroBannerBg, isScaleImage };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "3.0.0-pre-production.5",
3
+ "version": "3.0.0-pre-production.6",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
21
21
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
22
22
  },
23
23
  "devDependencies": {
24
- "@gem-sdk/core": "3.0.0-pre-production.3",
24
+ "@gem-sdk/core": "3.0.0-pre-production.6",
25
25
  "@gem-sdk/styles": "3.0.0-pre-production.1",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },