@gem-sdk/pages 1.12.14 → 1.12.19
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.
|
@@ -5,12 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var core = require('@gem-sdk/core');
|
|
7
7
|
var react = require('react');
|
|
8
|
+
var getStorefrontApi = require('../../libs/get-storefront-api.js');
|
|
8
9
|
var googleFonts = require('../../libs/google-fonts.js');
|
|
9
10
|
var genCss = require('../../libs/helpers/gen-css.js');
|
|
10
|
-
var getStorefrontApi = require('../../libs/get-storefront-api.js');
|
|
11
|
-
var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
|
|
12
|
-
var normalize = require('../../libs/helpers/normalize.js');
|
|
13
11
|
var genFonts = require('../../libs/helpers/gen-fonts.js');
|
|
12
|
+
var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
|
|
14
13
|
|
|
15
14
|
const globalStyleId = 'global-style';
|
|
16
15
|
const globalFontId = 'google-font-builder';
|
|
@@ -20,6 +19,7 @@ const Toolbox = ()=>{
|
|
|
20
19
|
const provider = core.useShopStore((s)=>s.provider);
|
|
21
20
|
const changeStorefrontInfo = core.useShopStore((s)=>s.changeStorefrontInfo);
|
|
22
21
|
const initState = core.useBuilderPreviewStore((s)=>s.initState);
|
|
22
|
+
const state = core.useBuilderPreviewStore((s)=>s.state);
|
|
23
23
|
const initNormalizeState = core.useBuilderPreviewStore((s)=>s.forceChangeState);
|
|
24
24
|
const changeItemPropByKey = core.useBuilderPreviewStore((s)=>s.changeItemPropByKey);
|
|
25
25
|
const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
|
|
@@ -29,7 +29,14 @@ const Toolbox = ()=>{
|
|
|
29
29
|
const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
|
|
30
30
|
const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
|
|
31
31
|
const clearModal = core.useModalStore((s)=>s.clearModal);
|
|
32
|
-
const
|
|
32
|
+
const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
|
|
33
|
+
state
|
|
34
|
+
]);
|
|
35
|
+
const customFontUrl = react.useMemo(()=>{
|
|
36
|
+
return googleFonts.createFontUrl(fonts);
|
|
37
|
+
}, [
|
|
38
|
+
fonts
|
|
39
|
+
]);
|
|
33
40
|
// Revalidate all query with key match query/
|
|
34
41
|
const onRevalidateQuery = react.useCallback(()=>{
|
|
35
42
|
matchMutate(/query\//, {
|
|
@@ -100,24 +107,10 @@ const Toolbox = ()=>{
|
|
|
100
107
|
try {
|
|
101
108
|
const detail = e.detail;
|
|
102
109
|
if (detail.data) {
|
|
103
|
-
let dataBuilder = {};
|
|
104
110
|
if (detail.type === 'flat') {
|
|
105
111
|
initNormalizeState(detail.data);
|
|
106
|
-
dataBuilder = detail.data;
|
|
107
112
|
} else {
|
|
108
113
|
initState(detail.data);
|
|
109
|
-
dataBuilder = detail.data.reduceRight((prev, current)=>{
|
|
110
|
-
const item = normalize.normalizeBuilderData(current);
|
|
111
|
-
return {
|
|
112
|
-
...prev,
|
|
113
|
-
...item
|
|
114
|
-
};
|
|
115
|
-
}, {});
|
|
116
|
-
}
|
|
117
|
-
// Append link font to head
|
|
118
|
-
if (dataBuilder) {
|
|
119
|
-
const fonts = genFonts.getFontsFromDataBuilder(dataBuilder);
|
|
120
|
-
setFonts(fonts);
|
|
121
114
|
}
|
|
122
115
|
}
|
|
123
116
|
} catch {
|
|
@@ -161,21 +154,11 @@ const Toolbox = ()=>{
|
|
|
161
154
|
data: detail.propValue,
|
|
162
155
|
group: detail.group
|
|
163
156
|
});
|
|
164
|
-
// Check link google font to <head>
|
|
165
|
-
if (detail.propValue?.custom) {
|
|
166
|
-
const settings = {
|
|
167
|
-
[detail.propName]: detail.propValue
|
|
168
|
-
};
|
|
169
|
-
const currentFonts = JSON.parse(JSON.stringify(fonts));
|
|
170
|
-
genFonts.getFontFromGroupSetting(currentFonts, settings);
|
|
171
|
-
setFonts(currentFonts);
|
|
172
|
-
}
|
|
173
157
|
}
|
|
174
158
|
} catch {
|
|
175
159
|
//
|
|
176
160
|
}
|
|
177
|
-
},
|
|
178
|
-
[
|
|
161
|
+
}, [
|
|
179
162
|
changeItemPropByKey
|
|
180
163
|
]);
|
|
181
164
|
// Move entity
|
|
@@ -225,30 +208,24 @@ const Toolbox = ()=>{
|
|
|
225
208
|
changeLayoutSettings
|
|
226
209
|
]);
|
|
227
210
|
react.useEffect(()=>{
|
|
228
|
-
if (
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
|
|
235
|
-
if (googleFont) {
|
|
236
|
-
if (googleFont.getAttribute('href') !== fontUrl) {
|
|
237
|
-
googleFont.setAttribute('href', fontUrl);
|
|
238
|
-
}
|
|
239
|
-
} else {
|
|
240
|
-
const link = document.createElement('link');
|
|
241
|
-
link.className = fontElementSettingClassName;
|
|
242
|
-
link.dataset.font = encodeURI(font.family);
|
|
243
|
-
link.href = fontUrl;
|
|
244
|
-
link.rel = 'stylesheet';
|
|
245
|
-
document.head.appendChild(link);
|
|
246
|
-
}
|
|
211
|
+
if (customFontUrl) {
|
|
212
|
+
const fontId = 'google-font';
|
|
213
|
+
const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
|
|
214
|
+
if (googleFont) {
|
|
215
|
+
if (googleFont.getAttribute('href') !== customFontUrl) {
|
|
216
|
+
googleFont.setAttribute('href', customFontUrl);
|
|
247
217
|
}
|
|
248
|
-
}
|
|
218
|
+
} else {
|
|
219
|
+
const link = document.createElement('link');
|
|
220
|
+
link.className = fontElementSettingClassName;
|
|
221
|
+
link.dataset.font = fontId;
|
|
222
|
+
link.href = customFontUrl;
|
|
223
|
+
link.rel = 'stylesheet';
|
|
224
|
+
document.head.appendChild(link);
|
|
225
|
+
}
|
|
249
226
|
}
|
|
250
227
|
}, [
|
|
251
|
-
|
|
228
|
+
customFontUrl
|
|
252
229
|
]);
|
|
253
230
|
react.useEffect(()=>{
|
|
254
231
|
window.addEventListener('update-shop-info', onChangeShopInfo);
|
|
@@ -11,14 +11,34 @@ async function getFontForUA(url, UA) {
|
|
|
11
11
|
}
|
|
12
12
|
}).then((res)=>res.text());
|
|
13
13
|
}
|
|
14
|
+
const composeFonts = (fonts)=>{
|
|
15
|
+
const uniqFonts = fonts.filter((font, index, arr)=>{
|
|
16
|
+
return index === arr.findIndex((t)=>t.family === font.family);
|
|
17
|
+
});
|
|
18
|
+
return uniqFonts.map((font)=>{
|
|
19
|
+
const variants = fonts.filter((t)=>t.family === font.family).reduce((acc, t)=>{
|
|
20
|
+
return [
|
|
21
|
+
...acc,
|
|
22
|
+
...t.variants
|
|
23
|
+
];
|
|
24
|
+
}, []).filter((t, index, arr)=>{
|
|
25
|
+
return index === arr.findIndex((v)=>v === t);
|
|
26
|
+
});
|
|
27
|
+
return {
|
|
28
|
+
...font,
|
|
29
|
+
variants
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
};
|
|
14
33
|
const createFontUrl = (fonts, option)=>{
|
|
15
34
|
const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
|
|
16
35
|
if (!googleFonts.length) return;
|
|
17
36
|
const params = new URLSearchParams();
|
|
18
37
|
const display = option?.display || 'swap';
|
|
19
|
-
const
|
|
38
|
+
const uniqFonts = googleFonts.filter((font, index, arr)=>{
|
|
20
39
|
return index === arr.findIndex((t)=>t.family === font.family);
|
|
21
|
-
})
|
|
40
|
+
});
|
|
41
|
+
const family = composeFonts(uniqFonts).map((font)=>{
|
|
22
42
|
return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
|
|
23
43
|
}).join('|');
|
|
24
44
|
params.append('family', family);
|
|
@@ -75,6 +95,7 @@ async function getFontStyleFromPageTemplate(pageTemplate) {
|
|
|
75
95
|
return await Promise.all(fontStyle);
|
|
76
96
|
}
|
|
77
97
|
|
|
98
|
+
exports.composeFonts = composeFonts;
|
|
78
99
|
exports.createFontUrl = createFontUrl;
|
|
79
100
|
exports.getFontFromGlobalStyle = getFontFromGlobalStyle;
|
|
80
101
|
exports.getFontStyleFromPageTemplate = getFontStyleFromPageTemplate;
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
|
|
3
|
-
import { memo,
|
|
3
|
+
import { memo, useMemo, useCallback, useEffect } from 'react';
|
|
4
|
+
import { getStorefrontApi } from '../../libs/get-storefront-api.js';
|
|
4
5
|
import { createFontUrl } from '../../libs/google-fonts.js';
|
|
5
6
|
import { genCSS } from '../../libs/helpers/gen-css.js';
|
|
6
|
-
import {
|
|
7
|
+
import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
|
|
7
8
|
import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
|
|
8
|
-
import { normalizeBuilderData } from '../../libs/helpers/normalize.js';
|
|
9
|
-
import { getFontsFromDataBuilder, getFontFromGroupSetting } from '../../libs/helpers/gen-fonts.js';
|
|
10
9
|
|
|
11
10
|
const globalStyleId = 'global-style';
|
|
12
11
|
const globalFontId = 'google-font-builder';
|
|
@@ -16,6 +15,7 @@ const Toolbox = ()=>{
|
|
|
16
15
|
const provider = useShopStore((s)=>s.provider);
|
|
17
16
|
const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
|
|
18
17
|
const initState = useBuilderPreviewStore((s)=>s.initState);
|
|
18
|
+
const state = useBuilderPreviewStore((s)=>s.state);
|
|
19
19
|
const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
|
|
20
20
|
const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
|
|
21
21
|
const addItem = useBuilderPreviewStore((s)=>s.addItem);
|
|
@@ -25,7 +25,14 @@ const Toolbox = ()=>{
|
|
|
25
25
|
const changeSwatches = useShopStore((s)=>s.changeSwatches);
|
|
26
26
|
const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
|
|
27
27
|
const clearModal = useModalStore((s)=>s.clearModal);
|
|
28
|
-
const
|
|
28
|
+
const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
|
|
29
|
+
state
|
|
30
|
+
]);
|
|
31
|
+
const customFontUrl = useMemo(()=>{
|
|
32
|
+
return createFontUrl(fonts);
|
|
33
|
+
}, [
|
|
34
|
+
fonts
|
|
35
|
+
]);
|
|
29
36
|
// Revalidate all query with key match query/
|
|
30
37
|
const onRevalidateQuery = useCallback(()=>{
|
|
31
38
|
matchMutate(/query\//, {
|
|
@@ -96,24 +103,10 @@ const Toolbox = ()=>{
|
|
|
96
103
|
try {
|
|
97
104
|
const detail = e.detail;
|
|
98
105
|
if (detail.data) {
|
|
99
|
-
let dataBuilder = {};
|
|
100
106
|
if (detail.type === 'flat') {
|
|
101
107
|
initNormalizeState(detail.data);
|
|
102
|
-
dataBuilder = detail.data;
|
|
103
108
|
} else {
|
|
104
109
|
initState(detail.data);
|
|
105
|
-
dataBuilder = detail.data.reduceRight((prev, current)=>{
|
|
106
|
-
const item = normalizeBuilderData(current);
|
|
107
|
-
return {
|
|
108
|
-
...prev,
|
|
109
|
-
...item
|
|
110
|
-
};
|
|
111
|
-
}, {});
|
|
112
|
-
}
|
|
113
|
-
// Append link font to head
|
|
114
|
-
if (dataBuilder) {
|
|
115
|
-
const fonts = getFontsFromDataBuilder(dataBuilder);
|
|
116
|
-
setFonts(fonts);
|
|
117
110
|
}
|
|
118
111
|
}
|
|
119
112
|
} catch {
|
|
@@ -157,21 +150,11 @@ const Toolbox = ()=>{
|
|
|
157
150
|
data: detail.propValue,
|
|
158
151
|
group: detail.group
|
|
159
152
|
});
|
|
160
|
-
// Check link google font to <head>
|
|
161
|
-
if (detail.propValue?.custom) {
|
|
162
|
-
const settings = {
|
|
163
|
-
[detail.propName]: detail.propValue
|
|
164
|
-
};
|
|
165
|
-
const currentFonts = JSON.parse(JSON.stringify(fonts));
|
|
166
|
-
getFontFromGroupSetting(currentFonts, settings);
|
|
167
|
-
setFonts(currentFonts);
|
|
168
|
-
}
|
|
169
153
|
}
|
|
170
154
|
} catch {
|
|
171
155
|
//
|
|
172
156
|
}
|
|
173
|
-
},
|
|
174
|
-
[
|
|
157
|
+
}, [
|
|
175
158
|
changeItemPropByKey
|
|
176
159
|
]);
|
|
177
160
|
// Move entity
|
|
@@ -221,30 +204,24 @@ const Toolbox = ()=>{
|
|
|
221
204
|
changeLayoutSettings
|
|
222
205
|
]);
|
|
223
206
|
useEffect(()=>{
|
|
224
|
-
if (
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
|
|
231
|
-
if (googleFont) {
|
|
232
|
-
if (googleFont.getAttribute('href') !== fontUrl) {
|
|
233
|
-
googleFont.setAttribute('href', fontUrl);
|
|
234
|
-
}
|
|
235
|
-
} else {
|
|
236
|
-
const link = document.createElement('link');
|
|
237
|
-
link.className = fontElementSettingClassName;
|
|
238
|
-
link.dataset.font = encodeURI(font.family);
|
|
239
|
-
link.href = fontUrl;
|
|
240
|
-
link.rel = 'stylesheet';
|
|
241
|
-
document.head.appendChild(link);
|
|
242
|
-
}
|
|
207
|
+
if (customFontUrl) {
|
|
208
|
+
const fontId = 'google-font';
|
|
209
|
+
const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
|
|
210
|
+
if (googleFont) {
|
|
211
|
+
if (googleFont.getAttribute('href') !== customFontUrl) {
|
|
212
|
+
googleFont.setAttribute('href', customFontUrl);
|
|
243
213
|
}
|
|
244
|
-
}
|
|
214
|
+
} else {
|
|
215
|
+
const link = document.createElement('link');
|
|
216
|
+
link.className = fontElementSettingClassName;
|
|
217
|
+
link.dataset.font = fontId;
|
|
218
|
+
link.href = customFontUrl;
|
|
219
|
+
link.rel = 'stylesheet';
|
|
220
|
+
document.head.appendChild(link);
|
|
221
|
+
}
|
|
245
222
|
}
|
|
246
223
|
}, [
|
|
247
|
-
|
|
224
|
+
customFontUrl
|
|
248
225
|
]);
|
|
249
226
|
useEffect(()=>{
|
|
250
227
|
window.addEventListener('update-shop-info', onChangeShopInfo);
|
|
@@ -9,14 +9,34 @@ async function getFontForUA(url, UA) {
|
|
|
9
9
|
}
|
|
10
10
|
}).then((res)=>res.text());
|
|
11
11
|
}
|
|
12
|
+
const composeFonts = (fonts)=>{
|
|
13
|
+
const uniqFonts = fonts.filter((font, index, arr)=>{
|
|
14
|
+
return index === arr.findIndex((t)=>t.family === font.family);
|
|
15
|
+
});
|
|
16
|
+
return uniqFonts.map((font)=>{
|
|
17
|
+
const variants = fonts.filter((t)=>t.family === font.family).reduce((acc, t)=>{
|
|
18
|
+
return [
|
|
19
|
+
...acc,
|
|
20
|
+
...t.variants
|
|
21
|
+
];
|
|
22
|
+
}, []).filter((t, index, arr)=>{
|
|
23
|
+
return index === arr.findIndex((v)=>v === t);
|
|
24
|
+
});
|
|
25
|
+
return {
|
|
26
|
+
...font,
|
|
27
|
+
variants
|
|
28
|
+
};
|
|
29
|
+
});
|
|
30
|
+
};
|
|
12
31
|
const createFontUrl = (fonts, option)=>{
|
|
13
32
|
const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
|
|
14
33
|
if (!googleFonts.length) return;
|
|
15
34
|
const params = new URLSearchParams();
|
|
16
35
|
const display = option?.display || 'swap';
|
|
17
|
-
const
|
|
36
|
+
const uniqFonts = googleFonts.filter((font, index, arr)=>{
|
|
18
37
|
return index === arr.findIndex((t)=>t.family === font.family);
|
|
19
|
-
})
|
|
38
|
+
});
|
|
39
|
+
const family = composeFonts(uniqFonts).map((font)=>{
|
|
20
40
|
return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
|
|
21
41
|
}).join('|');
|
|
22
42
|
params.append('family', family);
|
|
@@ -73,4 +93,4 @@ async function getFontStyleFromPageTemplate(pageTemplate) {
|
|
|
73
93
|
return await Promise.all(fontStyle);
|
|
74
94
|
}
|
|
75
95
|
|
|
76
|
-
export { createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };
|
|
96
|
+
export { composeFonts, createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };
|