@gem-sdk/pages 1.25.5 → 1.25.13
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.
|
@@ -12,8 +12,6 @@ var genFonts = require('../../libs/helpers/gen-fonts.js');
|
|
|
12
12
|
var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
|
|
13
13
|
|
|
14
14
|
const globalStyleId = 'global-style';
|
|
15
|
-
const globalFontId = 'google-font-builder';
|
|
16
|
-
const fontElementSettingClassName = 'google-font-element';
|
|
17
15
|
const Toolbox = ()=>{
|
|
18
16
|
const matchMutate = core.useMatchMutate();
|
|
19
17
|
const provider = core.useShopStore((s)=>s.provider);
|
|
@@ -37,11 +35,62 @@ const Toolbox = ()=>{
|
|
|
37
35
|
const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
|
|
38
36
|
state
|
|
39
37
|
]);
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
38
|
+
const setFontsToHead = (className, fonts)=>{
|
|
39
|
+
// clear fonts
|
|
40
|
+
if (!fonts?.length) {
|
|
41
|
+
const googleFonts = document.querySelectorAll(`.${className}`);
|
|
42
|
+
googleFonts.forEach((googleFont)=>{
|
|
43
|
+
googleFont.remove();
|
|
44
|
+
});
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
// clear fonts not use
|
|
48
|
+
const googleFonts$1 = document.querySelectorAll(`.${className}`);
|
|
49
|
+
googleFonts$1.forEach((googleFont)=>{
|
|
50
|
+
const fontName = googleFont.getAttribute('data-font');
|
|
51
|
+
const variantName = googleFont.getAttribute('data-font-variant');
|
|
52
|
+
if (!fontName || !variantName) {
|
|
53
|
+
googleFont.remove();
|
|
54
|
+
} else {
|
|
55
|
+
const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
|
|
56
|
+
if (!isUse) {
|
|
57
|
+
googleFont.remove();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
// append new fonts
|
|
62
|
+
for (const font of fonts){
|
|
63
|
+
if (font.type !== 'custom') {
|
|
64
|
+
if (font.variants?.length) {
|
|
65
|
+
for (const variant of font.variants){
|
|
66
|
+
const cloneFont = JSON.parse(JSON.stringify(font));
|
|
67
|
+
cloneFont.variants = [
|
|
68
|
+
variant
|
|
69
|
+
]; // set single variant. Fix error reload font when change href other variant
|
|
70
|
+
const fontName = cloneFont.family;
|
|
71
|
+
const variantName = variant;
|
|
72
|
+
const url = googleFonts.createFontUrl([
|
|
73
|
+
cloneFont
|
|
74
|
+
]);
|
|
75
|
+
if (url) {
|
|
76
|
+
const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
|
|
77
|
+
if (googleFont) {
|
|
78
|
+
continue;
|
|
79
|
+
} else {
|
|
80
|
+
const link = document.createElement('link');
|
|
81
|
+
link.className = className;
|
|
82
|
+
link.dataset.font = fontName;
|
|
83
|
+
link.dataset.fontVariant = variantName;
|
|
84
|
+
link.href = url;
|
|
85
|
+
link.rel = 'stylesheet';
|
|
86
|
+
document.head.appendChild(link);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
};
|
|
45
94
|
// Revalidate all query with key match query/
|
|
46
95
|
const onRevalidateQuery = react.useCallback(()=>{
|
|
47
96
|
matchMutate(/query\//, {
|
|
@@ -77,22 +126,8 @@ const Toolbox = ()=>{
|
|
|
77
126
|
}
|
|
78
127
|
return item;
|
|
79
128
|
});
|
|
80
|
-
const fontUrl = googleFonts.createFontUrl(font);
|
|
81
129
|
const globalStyle = document.getElementById(globalStyleId);
|
|
82
|
-
|
|
83
|
-
if (fontUrl) {
|
|
84
|
-
if (googleFont) {
|
|
85
|
-
if (googleFont.getAttribute('href') !== fontUrl) {
|
|
86
|
-
googleFont.setAttribute('href', fontUrl);
|
|
87
|
-
}
|
|
88
|
-
} else {
|
|
89
|
-
const link = document.createElement('link');
|
|
90
|
-
link.id = globalFontId;
|
|
91
|
-
link.href = fontUrl;
|
|
92
|
-
link.rel = 'stylesheet';
|
|
93
|
-
document.head.appendChild(link);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
130
|
+
setFontsToHead('google-font-builder', font);
|
|
96
131
|
if (globalStyle) {
|
|
97
132
|
globalStyle.innerHTML = themeStyle;
|
|
98
133
|
} else {
|
|
@@ -254,24 +289,11 @@ const Toolbox = ()=>{
|
|
|
254
289
|
setDynamicCollection
|
|
255
290
|
]);
|
|
256
291
|
react.useEffect(()=>{
|
|
257
|
-
if (
|
|
258
|
-
|
|
259
|
-
const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
|
|
260
|
-
if (googleFont) {
|
|
261
|
-
if (googleFont.getAttribute('href') !== customFontUrl) {
|
|
262
|
-
googleFont.setAttribute('href', customFontUrl);
|
|
263
|
-
}
|
|
264
|
-
} else {
|
|
265
|
-
const link = document.createElement('link');
|
|
266
|
-
link.className = fontElementSettingClassName;
|
|
267
|
-
link.dataset.font = fontId;
|
|
268
|
-
link.href = customFontUrl;
|
|
269
|
-
link.rel = 'stylesheet';
|
|
270
|
-
document.head.appendChild(link);
|
|
271
|
-
}
|
|
292
|
+
if (fonts) {
|
|
293
|
+
setFontsToHead('google-font-element', fonts);
|
|
272
294
|
}
|
|
273
295
|
}, [
|
|
274
|
-
|
|
296
|
+
fonts
|
|
275
297
|
]);
|
|
276
298
|
react.useEffect(()=>{
|
|
277
299
|
window.addEventListener('update-shop-info', onChangeShopInfo);
|
|
@@ -36,11 +36,17 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
36
36
|
if (isFontFamily) {
|
|
37
37
|
isFontFamily.variants.push(customFontWeight);
|
|
38
38
|
} else {
|
|
39
|
+
const fontVariants = [
|
|
40
|
+
customFontWeight
|
|
41
|
+
];
|
|
42
|
+
if (customFontWeight !== '700') {
|
|
43
|
+
if (variants.includes('700')) {
|
|
44
|
+
fontVariants.push('700'); // Auto add 700 for bold in editor inline
|
|
45
|
+
}
|
|
46
|
+
}
|
|
39
47
|
fonts.push({
|
|
40
48
|
family: customFontFamily,
|
|
41
|
-
variants:
|
|
42
|
-
customFontWeight
|
|
43
|
-
],
|
|
49
|
+
variants: fontVariants,
|
|
44
50
|
subsets: [],
|
|
45
51
|
type: 'google'
|
|
46
52
|
});
|
|
@@ -8,8 +8,6 @@ import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
|
|
|
8
8
|
import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
|
|
9
9
|
|
|
10
10
|
const globalStyleId = 'global-style';
|
|
11
|
-
const globalFontId = 'google-font-builder';
|
|
12
|
-
const fontElementSettingClassName = 'google-font-element';
|
|
13
11
|
const Toolbox = ()=>{
|
|
14
12
|
const matchMutate = useMatchMutate();
|
|
15
13
|
const provider = useShopStore((s)=>s.provider);
|
|
@@ -33,11 +31,62 @@ const Toolbox = ()=>{
|
|
|
33
31
|
const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
|
|
34
32
|
state
|
|
35
33
|
]);
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
const setFontsToHead = (className, fonts)=>{
|
|
35
|
+
// clear fonts
|
|
36
|
+
if (!fonts?.length) {
|
|
37
|
+
const googleFonts = document.querySelectorAll(`.${className}`);
|
|
38
|
+
googleFonts.forEach((googleFont)=>{
|
|
39
|
+
googleFont.remove();
|
|
40
|
+
});
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
// clear fonts not use
|
|
44
|
+
const googleFonts = document.querySelectorAll(`.${className}`);
|
|
45
|
+
googleFonts.forEach((googleFont)=>{
|
|
46
|
+
const fontName = googleFont.getAttribute('data-font');
|
|
47
|
+
const variantName = googleFont.getAttribute('data-font-variant');
|
|
48
|
+
if (!fontName || !variantName) {
|
|
49
|
+
googleFont.remove();
|
|
50
|
+
} else {
|
|
51
|
+
const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
|
|
52
|
+
if (!isUse) {
|
|
53
|
+
googleFont.remove();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
// append new fonts
|
|
58
|
+
for (const font of fonts){
|
|
59
|
+
if (font.type !== 'custom') {
|
|
60
|
+
if (font.variants?.length) {
|
|
61
|
+
for (const variant of font.variants){
|
|
62
|
+
const cloneFont = JSON.parse(JSON.stringify(font));
|
|
63
|
+
cloneFont.variants = [
|
|
64
|
+
variant
|
|
65
|
+
]; // set single variant. Fix error reload font when change href other variant
|
|
66
|
+
const fontName = cloneFont.family;
|
|
67
|
+
const variantName = variant;
|
|
68
|
+
const url = createFontUrl([
|
|
69
|
+
cloneFont
|
|
70
|
+
]);
|
|
71
|
+
if (url) {
|
|
72
|
+
const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
|
|
73
|
+
if (googleFont) {
|
|
74
|
+
continue;
|
|
75
|
+
} else {
|
|
76
|
+
const link = document.createElement('link');
|
|
77
|
+
link.className = className;
|
|
78
|
+
link.dataset.font = fontName;
|
|
79
|
+
link.dataset.fontVariant = variantName;
|
|
80
|
+
link.href = url;
|
|
81
|
+
link.rel = 'stylesheet';
|
|
82
|
+
document.head.appendChild(link);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
};
|
|
41
90
|
// Revalidate all query with key match query/
|
|
42
91
|
const onRevalidateQuery = useCallback(()=>{
|
|
43
92
|
matchMutate(/query\//, {
|
|
@@ -73,22 +122,8 @@ const Toolbox = ()=>{
|
|
|
73
122
|
}
|
|
74
123
|
return item;
|
|
75
124
|
});
|
|
76
|
-
const fontUrl = createFontUrl(font);
|
|
77
125
|
const globalStyle = document.getElementById(globalStyleId);
|
|
78
|
-
|
|
79
|
-
if (fontUrl) {
|
|
80
|
-
if (googleFont) {
|
|
81
|
-
if (googleFont.getAttribute('href') !== fontUrl) {
|
|
82
|
-
googleFont.setAttribute('href', fontUrl);
|
|
83
|
-
}
|
|
84
|
-
} else {
|
|
85
|
-
const link = document.createElement('link');
|
|
86
|
-
link.id = globalFontId;
|
|
87
|
-
link.href = fontUrl;
|
|
88
|
-
link.rel = 'stylesheet';
|
|
89
|
-
document.head.appendChild(link);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
126
|
+
setFontsToHead('google-font-builder', font);
|
|
92
127
|
if (globalStyle) {
|
|
93
128
|
globalStyle.innerHTML = themeStyle;
|
|
94
129
|
} else {
|
|
@@ -250,24 +285,11 @@ const Toolbox = ()=>{
|
|
|
250
285
|
setDynamicCollection
|
|
251
286
|
]);
|
|
252
287
|
useEffect(()=>{
|
|
253
|
-
if (
|
|
254
|
-
|
|
255
|
-
const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
|
|
256
|
-
if (googleFont) {
|
|
257
|
-
if (googleFont.getAttribute('href') !== customFontUrl) {
|
|
258
|
-
googleFont.setAttribute('href', customFontUrl);
|
|
259
|
-
}
|
|
260
|
-
} else {
|
|
261
|
-
const link = document.createElement('link');
|
|
262
|
-
link.className = fontElementSettingClassName;
|
|
263
|
-
link.dataset.font = fontId;
|
|
264
|
-
link.href = customFontUrl;
|
|
265
|
-
link.rel = 'stylesheet';
|
|
266
|
-
document.head.appendChild(link);
|
|
267
|
-
}
|
|
288
|
+
if (fonts) {
|
|
289
|
+
setFontsToHead('google-font-element', fonts);
|
|
268
290
|
}
|
|
269
291
|
}, [
|
|
270
|
-
|
|
292
|
+
fonts
|
|
271
293
|
]);
|
|
272
294
|
useEffect(()=>{
|
|
273
295
|
window.addEventListener('update-shop-info', onChangeShopInfo);
|
|
@@ -34,11 +34,17 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
|
34
34
|
if (isFontFamily) {
|
|
35
35
|
isFontFamily.variants.push(customFontWeight);
|
|
36
36
|
} else {
|
|
37
|
+
const fontVariants = [
|
|
38
|
+
customFontWeight
|
|
39
|
+
];
|
|
40
|
+
if (customFontWeight !== '700') {
|
|
41
|
+
if (variants.includes('700')) {
|
|
42
|
+
fontVariants.push('700'); // Auto add 700 for bold in editor inline
|
|
43
|
+
}
|
|
44
|
+
}
|
|
37
45
|
fonts.push({
|
|
38
46
|
family: customFontFamily,
|
|
39
|
-
variants:
|
|
40
|
-
customFontWeight
|
|
41
|
-
],
|
|
47
|
+
variants: fontVariants,
|
|
42
48
|
subsets: [],
|
|
43
49
|
type: 'google'
|
|
44
50
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.25.
|
|
3
|
+
"version": "1.25.13",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"next-seo": "^6.0.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@gem-sdk/core": "1.25.
|
|
28
|
+
"@gem-sdk/core": "1.25.11",
|
|
29
29
|
"@gem-sdk/plugin-cookie-bar": "1.25.0",
|
|
30
30
|
"@gem-sdk/plugin-quick-view": "1.25.0",
|
|
31
31
|
"@gem-sdk/plugin-sticky-add-to-cart": "1.25.0"
|