@gem-sdk/core 1.7.11 → 1.7.12
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.
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
var colors = require('./colors.js');
|
|
4
4
|
var makeStyle = require('./make-style.js');
|
|
5
5
|
|
|
6
|
-
const getStyleBackgroundByDevice = (background)=>{
|
|
6
|
+
const getStyleBackgroundByDevice = (background, options)=>{
|
|
7
7
|
if (!background) {
|
|
8
8
|
return {};
|
|
9
9
|
}
|
|
10
10
|
return {
|
|
11
11
|
...getStyleBgColor(background),
|
|
12
|
-
...getStyleBgImage(background),
|
|
12
|
+
...getStyleBgImage(background, options),
|
|
13
13
|
...getStyleBgPosition(background),
|
|
14
14
|
...getStyleBgSize(background),
|
|
15
15
|
...getStyleBgRepeat(background),
|
|
@@ -36,20 +36,21 @@ const getColor = (color)=>{
|
|
|
36
36
|
}
|
|
37
37
|
return `var(--g-c-${color})`;
|
|
38
38
|
};
|
|
39
|
-
const getStyleBgImage = (background)=>{
|
|
39
|
+
const getStyleBgImage = (background, options)=>{
|
|
40
40
|
const bgImage = {
|
|
41
41
|
// desktop:
|
|
42
42
|
// background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
|
|
43
43
|
// tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
|
|
44
44
|
// mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
|
|
45
|
-
desktop: getBgImageByDevice(background, 'desktop'),
|
|
46
|
-
tablet: getBgImageByDevice(background, 'tablet'),
|
|
47
|
-
mobile: getBgImageByDevice(background, 'mobile')
|
|
45
|
+
desktop: getBgImageByDevice(background, 'desktop', options),
|
|
46
|
+
tablet: getBgImageByDevice(background, 'tablet', options),
|
|
47
|
+
mobile: getBgImageByDevice(background, 'mobile', options)
|
|
48
48
|
};
|
|
49
49
|
return makeStyle.makeStyleResponsive('bgi', bgImage);
|
|
50
50
|
};
|
|
51
|
-
const getBgImageByDevice = (background, device)=>{
|
|
52
|
-
const
|
|
51
|
+
const getBgImageByDevice = (background, device, options)=>{
|
|
52
|
+
const backupFileKey = background?.[device]?.image?.backupFileKey;
|
|
53
|
+
const imageByDevice = options?.liquid && backupFileKey && `{{ "${backupFileKey}" | asset_url }}` || background?.[device]?.image?.src;
|
|
53
54
|
if (typeof imageByDevice === 'string') {
|
|
54
55
|
return `url(${imageByDevice})`;
|
|
55
56
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { isColor } from './colors.js';
|
|
2
2
|
import { makeStyleResponsive } from './make-style.js';
|
|
3
3
|
|
|
4
|
-
const getStyleBackgroundByDevice = (background)=>{
|
|
4
|
+
const getStyleBackgroundByDevice = (background, options)=>{
|
|
5
5
|
if (!background) {
|
|
6
6
|
return {};
|
|
7
7
|
}
|
|
8
8
|
return {
|
|
9
9
|
...getStyleBgColor(background),
|
|
10
|
-
...getStyleBgImage(background),
|
|
10
|
+
...getStyleBgImage(background, options),
|
|
11
11
|
...getStyleBgPosition(background),
|
|
12
12
|
...getStyleBgSize(background),
|
|
13
13
|
...getStyleBgRepeat(background),
|
|
@@ -34,20 +34,21 @@ const getColor = (color)=>{
|
|
|
34
34
|
}
|
|
35
35
|
return `var(--g-c-${color})`;
|
|
36
36
|
};
|
|
37
|
-
const getStyleBgImage = (background)=>{
|
|
37
|
+
const getStyleBgImage = (background, options)=>{
|
|
38
38
|
const bgImage = {
|
|
39
39
|
// desktop:
|
|
40
40
|
// background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
|
|
41
41
|
// tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
|
|
42
42
|
// mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
|
|
43
|
-
desktop: getBgImageByDevice(background, 'desktop'),
|
|
44
|
-
tablet: getBgImageByDevice(background, 'tablet'),
|
|
45
|
-
mobile: getBgImageByDevice(background, 'mobile')
|
|
43
|
+
desktop: getBgImageByDevice(background, 'desktop', options),
|
|
44
|
+
tablet: getBgImageByDevice(background, 'tablet', options),
|
|
45
|
+
mobile: getBgImageByDevice(background, 'mobile', options)
|
|
46
46
|
};
|
|
47
47
|
return makeStyleResponsive('bgi', bgImage);
|
|
48
48
|
};
|
|
49
|
-
const getBgImageByDevice = (background, device)=>{
|
|
50
|
-
const
|
|
49
|
+
const getBgImageByDevice = (background, device, options)=>{
|
|
50
|
+
const backupFileKey = background?.[device]?.image?.backupFileKey;
|
|
51
|
+
const imageByDevice = options?.liquid && backupFileKey && `{{ "${backupFileKey}" | asset_url }}` || background?.[device]?.image?.src;
|
|
51
52
|
if (typeof imageByDevice === 'string') {
|
|
52
53
|
return `url(${imageByDevice})`;
|
|
53
54
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -637,6 +637,7 @@ type Background = {
|
|
|
637
637
|
src?: string;
|
|
638
638
|
width?: number;
|
|
639
639
|
height?: number;
|
|
640
|
+
backupFileKey?: string;
|
|
640
641
|
};
|
|
641
642
|
size?: BgSize;
|
|
642
643
|
position?: BgPosition;
|
|
@@ -7324,7 +7325,10 @@ declare const validateEmail: (email: string) => boolean;
|
|
|
7324
7325
|
|
|
7325
7326
|
declare const optionLayoutStyle: (column?: ObjectDevices<string | number>) => React.CSSProperties;
|
|
7326
7327
|
|
|
7327
|
-
|
|
7328
|
+
type Options = {
|
|
7329
|
+
liquid?: boolean;
|
|
7330
|
+
};
|
|
7331
|
+
declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options) => {};
|
|
7328
7332
|
|
|
7329
7333
|
declare const genVariable: (variableName: string) => string;
|
|
7330
7334
|
|