@gem-sdk/components 2.1.13-staging.10 → 2.1.13-staging.11
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/collection/components/CollectionDescription.js +101 -7
- package/dist/cjs/collection/components/CollectionDescription.liquid.js +102 -9
- package/dist/cjs/collection/setting/CollectionDescription.js +128 -0
- package/dist/esm/collection/components/CollectionDescription.js +103 -9
- package/dist/esm/collection/components/CollectionDescription.liquid.js +103 -10
- package/dist/esm/collection/setting/CollectionDescription.js +128 -0
- package/dist/types/index.d.ts +11 -1
- package/package.json +1 -1
|
@@ -4,16 +4,110 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var core = require('@gem-sdk/core');
|
|
7
|
-
var
|
|
7
|
+
var React = require('react');
|
|
8
8
|
|
|
9
|
-
const CollectionDescription = ({ setting })=>{
|
|
9
|
+
const CollectionDescription = ({ setting, builderProps })=>{
|
|
10
|
+
const [open, setOpen] = React.useState(false);
|
|
11
|
+
const [isShowViewMore, allowShowViewMore] = React.useState(false);
|
|
12
|
+
const ref = React.useRef(null);
|
|
13
|
+
const currentDevice = core.useCurrentDevice();
|
|
10
14
|
const collection = core.useCollection();
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
const hasLineClamp = core.getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
|
|
16
|
+
const lineClamp = core.getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
|
|
17
|
+
const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
|
|
18
|
+
const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
|
|
19
|
+
React.useEffect(()=>{
|
|
20
|
+
const dom = ref.current;
|
|
21
|
+
setOpen(false);
|
|
22
|
+
if (dom && hasLineClamp && collection?.description) {
|
|
23
|
+
const value = lineClamp;
|
|
24
|
+
setTimeout(()=>{
|
|
25
|
+
const scrollHeight = dom?.scrollHeight ?? 0;
|
|
26
|
+
const clientHeight = dom?.clientHeight ?? 0;
|
|
27
|
+
const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
|
|
28
|
+
const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
|
|
29
|
+
const conditionCheckLine = core.isSafari() ? value && value < lineText : clientHeight < scrollHeight;
|
|
30
|
+
if (value && conditionCheckLine) {
|
|
31
|
+
allowShowViewMore(()=>true);
|
|
32
|
+
} else {
|
|
33
|
+
allowShowViewMore(()=>false);
|
|
34
|
+
}
|
|
35
|
+
}, 100);
|
|
16
36
|
}
|
|
37
|
+
}, [
|
|
38
|
+
hasLineClamp,
|
|
39
|
+
lineClamp,
|
|
40
|
+
collection?.description
|
|
41
|
+
]);
|
|
42
|
+
const css = `
|
|
43
|
+
.gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
|
|
44
|
+
display: inline !important;
|
|
45
|
+
}
|
|
46
|
+
.gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
|
|
47
|
+
content: "\\A";
|
|
48
|
+
white-space: pre;
|
|
49
|
+
}
|
|
50
|
+
.gp-p-description-text > table {
|
|
51
|
+
box-shadow: none;
|
|
52
|
+
}
|
|
53
|
+
`;
|
|
54
|
+
const hasDescription = collection?.description && collection.description?.trim() != '';
|
|
55
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
56
|
+
"data-id": builderProps?.uid,
|
|
57
|
+
children: [
|
|
58
|
+
!core.isSafari() && /*#__PURE__*/ jsxRuntime.jsx("style", {
|
|
59
|
+
children: css
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
62
|
+
ref: ref,
|
|
63
|
+
"data-gp-text": true,
|
|
64
|
+
className: core.cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', core.getGlobalColorClass('text', setting?.color)),
|
|
65
|
+
style: {
|
|
66
|
+
...core.getStyleShadow({
|
|
67
|
+
styleAppliedFor: 'text-shadow'
|
|
68
|
+
}),
|
|
69
|
+
...core.makeStyleResponsive('ta', setting?.textAlign),
|
|
70
|
+
...hasLineClamp && !open ? core.makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
|
|
71
|
+
...core.makeStyle({
|
|
72
|
+
tt: setting?.transform
|
|
73
|
+
}),
|
|
74
|
+
...appendTypoStyle
|
|
75
|
+
},
|
|
76
|
+
dangerouslySetInnerHTML: {
|
|
77
|
+
__html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
|
|
78
|
+
}
|
|
79
|
+
}),
|
|
80
|
+
hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxRuntime.jsxs("button", {
|
|
81
|
+
className: core.cls(appendTypoClass, core.getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
|
|
82
|
+
style: {
|
|
83
|
+
...core.makeStyleResponsive('ta', setting?.textAlign),
|
|
84
|
+
...core.makeStyle({
|
|
85
|
+
tt: setting?.transform
|
|
86
|
+
}),
|
|
87
|
+
...appendTypoStyle,
|
|
88
|
+
...core.getGlobalColorStyle(setting?.showMoreColor)
|
|
89
|
+
},
|
|
90
|
+
onClick: ()=>setOpen((prev)=>!prev),
|
|
91
|
+
children: [
|
|
92
|
+
!open ? setting?.viewMoreText : setting?.viewLessText,
|
|
93
|
+
setting?.enableViewMoreIcon && /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
94
|
+
className: "gp-ml-1 gp-inline-block",
|
|
95
|
+
height: "1em",
|
|
96
|
+
width: "1em",
|
|
97
|
+
viewBox: "0 0 22 12",
|
|
98
|
+
fill: "none",
|
|
99
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
100
|
+
children: !open ? /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
101
|
+
d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
|
|
102
|
+
fill: "currentColor"
|
|
103
|
+
}) : /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
104
|
+
d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
|
|
105
|
+
fill: "currentColor"
|
|
106
|
+
})
|
|
107
|
+
})
|
|
108
|
+
]
|
|
109
|
+
})
|
|
110
|
+
]
|
|
17
111
|
});
|
|
18
112
|
};
|
|
19
113
|
|
|
@@ -3,18 +3,111 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var core = require('@gem-sdk/core');
|
|
6
|
-
var
|
|
6
|
+
var helpers = require('../../helpers.js');
|
|
7
|
+
var common = require('../../product/components/ProductImages/common/common.js');
|
|
7
8
|
|
|
8
|
-
const CollectionDescription = ({ setting })=>{
|
|
9
|
+
const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
|
|
10
|
+
const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
|
|
11
|
+
const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
|
|
12
|
+
const defaultStyle = {
|
|
13
|
+
...core.getStyleShadow({
|
|
14
|
+
styleAppliedFor: 'text-shadow'
|
|
15
|
+
}),
|
|
16
|
+
...core.makeStyleResponsive('ta', setting?.textAlign),
|
|
17
|
+
...core.getGlobalColorStyle(setting?.color),
|
|
18
|
+
...core.makeStyle({
|
|
19
|
+
tt: setting?.transform
|
|
20
|
+
}),
|
|
21
|
+
...appendTypoStyle
|
|
22
|
+
};
|
|
23
|
+
const collapseStyle = {
|
|
24
|
+
...defaultStyle,
|
|
25
|
+
...core.makeStyleResponsive('line-clamp', core.makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
|
|
26
|
+
};
|
|
27
|
+
const getDisplayCollapse = ()=>{
|
|
28
|
+
return common.getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
|
|
29
|
+
};
|
|
30
|
+
const moreIcon = `<svg
|
|
31
|
+
class="gp-ml-1 gp-inline-block"
|
|
32
|
+
style="display: inline-block; margin-left: 1px;"
|
|
33
|
+
height="1em"
|
|
34
|
+
width="1em"
|
|
35
|
+
viewBox="0 0 22 12"
|
|
36
|
+
fill="none"
|
|
37
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
38
|
+
>
|
|
39
|
+
<path
|
|
40
|
+
d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
|
|
41
|
+
fill="currentColor"
|
|
42
|
+
/>
|
|
43
|
+
</svg>`;
|
|
44
|
+
const viewMoreTextTranslate = helpers.getDynamicSourceLocales({
|
|
45
|
+
val: setting?.viewMoreText,
|
|
46
|
+
uid: builderProps?.uid,
|
|
47
|
+
settingId: 'viewMoreText',
|
|
48
|
+
isLiquid: true,
|
|
49
|
+
pageContext,
|
|
50
|
+
translate: setting?.translate
|
|
51
|
+
});
|
|
52
|
+
const viewLessTextTranslate = helpers.getDynamicSourceLocales({
|
|
53
|
+
val: setting?.viewLessText,
|
|
54
|
+
uid: builderProps?.uid,
|
|
55
|
+
settingId: 'viewLessText',
|
|
56
|
+
isLiquid: true,
|
|
57
|
+
pageContext,
|
|
58
|
+
translate: setting?.translate
|
|
59
|
+
});
|
|
9
60
|
return core.template`
|
|
10
|
-
|
|
11
|
-
styles: setting,
|
|
61
|
+
<gp-collection-description data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
|
|
12
62
|
setting: {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
63
|
+
lineClamp: setting?.lineClamp,
|
|
64
|
+
hasLineClamp: setting?.hasLineClamp,
|
|
65
|
+
viewMoreText: viewMoreTextTranslate,
|
|
66
|
+
viewLessText: viewLessTextTranslate,
|
|
67
|
+
enableViewMoreIcon: setting?.enableViewMoreIcon
|
|
68
|
+
},
|
|
69
|
+
defaultStyle,
|
|
70
|
+
collapseStyle
|
|
71
|
+
}).replaceAll("'", ''')}'
|
|
72
|
+
view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
|
|
73
|
+
view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
|
|
74
|
+
>
|
|
75
|
+
<div></div>
|
|
76
|
+
<div
|
|
77
|
+
data-gp-text
|
|
78
|
+
class="${core.cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, core.getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
|
|
79
|
+
data-gp-text
|
|
80
|
+
style="${collapseStyle}"
|
|
81
|
+
>
|
|
82
|
+
{{collection.description}}
|
|
83
|
+
</div>
|
|
84
|
+
{% if collection.description != blank -%}
|
|
85
|
+
<button
|
|
86
|
+
type="button"
|
|
87
|
+
class="p-description-show-more ${core.cls(appendTypoClass, core.getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
|
|
88
|
+
style="${{
|
|
89
|
+
...core.makeStyle({
|
|
90
|
+
tt: setting?.transform
|
|
91
|
+
}),
|
|
92
|
+
...core.makeStyleResponsive('ta', setting?.textAlign),
|
|
93
|
+
...appendTypoStyle,
|
|
94
|
+
...core.getGlobalColorStyle(setting?.showMoreColor),
|
|
95
|
+
...getDisplayCollapse(),
|
|
96
|
+
position: 'absolute',
|
|
97
|
+
visibility: 'hidden'
|
|
98
|
+
}}"
|
|
99
|
+
>
|
|
100
|
+
${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
|
|
101
|
+
${setting?.enableViewMoreIcon ? moreIcon : ''}
|
|
102
|
+
</button>
|
|
103
|
+
{%- endif -%}
|
|
104
|
+
{% style %}
|
|
105
|
+
.p-description-wrapper.gp-p-description-text * {
|
|
106
|
+
color: inherit
|
|
107
|
+
}
|
|
108
|
+
{% endstyle %}
|
|
109
|
+
</gp-collection-description>
|
|
110
|
+
${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
|
|
18
111
|
`;
|
|
19
112
|
};
|
|
20
113
|
|
|
@@ -39,6 +39,59 @@ const config = {
|
|
|
39
39
|
}
|
|
40
40
|
]
|
|
41
41
|
},
|
|
42
|
+
{
|
|
43
|
+
id: 'hasLineClamp',
|
|
44
|
+
label: 'Enable View More',
|
|
45
|
+
type: 'toggle',
|
|
46
|
+
devices: {
|
|
47
|
+
desktop: {
|
|
48
|
+
default: true
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
id: 'lineClamp',
|
|
54
|
+
label: 'Maximum Row(s) To Show',
|
|
55
|
+
type: 'input:number',
|
|
56
|
+
min: 1,
|
|
57
|
+
hide: true,
|
|
58
|
+
devices: {
|
|
59
|
+
desktop: {
|
|
60
|
+
default: 12
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
id: 'viewMoreText',
|
|
66
|
+
label: 'View More Text',
|
|
67
|
+
type: 'input',
|
|
68
|
+
default: 'Show more',
|
|
69
|
+
hide: true
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
id: 'showMoreColor',
|
|
73
|
+
type: 'colorpicker',
|
|
74
|
+
default: 'text-1'
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: 'viewLessText',
|
|
78
|
+
label: 'View Less Text',
|
|
79
|
+
type: 'input',
|
|
80
|
+
default: 'Show less',
|
|
81
|
+
hide: true
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
id: 'enableViewMoreIcon',
|
|
85
|
+
label: 'Enable Icon',
|
|
86
|
+
type: 'toggle',
|
|
87
|
+
default: true,
|
|
88
|
+
hide: true
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
id: 'translate',
|
|
92
|
+
type: 'input',
|
|
93
|
+
default: 'viewLessText,viewMoreText'
|
|
94
|
+
},
|
|
42
95
|
{
|
|
43
96
|
id: 'textAlign',
|
|
44
97
|
label: 'Align',
|
|
@@ -74,11 +127,86 @@ const config = {
|
|
|
74
127
|
default: 'center'
|
|
75
128
|
}
|
|
76
129
|
}
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
id: 'color',
|
|
133
|
+
type: 'colorpicker',
|
|
134
|
+
default: 'text-1'
|
|
77
135
|
}
|
|
78
136
|
]
|
|
79
137
|
}
|
|
80
138
|
],
|
|
81
139
|
ui: [
|
|
140
|
+
{
|
|
141
|
+
type: 'group',
|
|
142
|
+
label: {
|
|
143
|
+
en: ''
|
|
144
|
+
},
|
|
145
|
+
controls: [
|
|
146
|
+
{
|
|
147
|
+
type: 'control',
|
|
148
|
+
label: {
|
|
149
|
+
en: 'Show more'
|
|
150
|
+
},
|
|
151
|
+
options: {
|
|
152
|
+
label: 'large'
|
|
153
|
+
},
|
|
154
|
+
setting: {
|
|
155
|
+
id: 'hasLineClamp'
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
type: 'control',
|
|
160
|
+
label: {
|
|
161
|
+
en: 'Text color'
|
|
162
|
+
},
|
|
163
|
+
setting: {
|
|
164
|
+
id: 'showMoreColor'
|
|
165
|
+
},
|
|
166
|
+
condition: 'hasLineClamp == true'
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
type: 'control',
|
|
170
|
+
label: {
|
|
171
|
+
en: 'Max lines'
|
|
172
|
+
},
|
|
173
|
+
setting: {
|
|
174
|
+
id: 'lineClamp'
|
|
175
|
+
},
|
|
176
|
+
condition: 'hasLineClamp == true'
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
type: 'control',
|
|
180
|
+
label: {
|
|
181
|
+
en: 'Show more label'
|
|
182
|
+
},
|
|
183
|
+
setting: {
|
|
184
|
+
id: 'viewMoreText'
|
|
185
|
+
},
|
|
186
|
+
condition: 'hasLineClamp == true'
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
type: 'control',
|
|
190
|
+
label: {
|
|
191
|
+
en: 'Show less label'
|
|
192
|
+
},
|
|
193
|
+
setting: {
|
|
194
|
+
id: 'viewLessText'
|
|
195
|
+
},
|
|
196
|
+
condition: 'hasLineClamp == true'
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
type: 'control',
|
|
200
|
+
label: {
|
|
201
|
+
en: 'Icon'
|
|
202
|
+
},
|
|
203
|
+
setting: {
|
|
204
|
+
id: 'enableViewMoreIcon'
|
|
205
|
+
},
|
|
206
|
+
condition: 'hasLineClamp == true'
|
|
207
|
+
}
|
|
208
|
+
]
|
|
209
|
+
},
|
|
82
210
|
{
|
|
83
211
|
label: {
|
|
84
212
|
en: 'Text'
|
|
@@ -1,15 +1,109 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useCollection } from '@gem-sdk/core';
|
|
3
|
-
import
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useCurrentDevice, useCollection, getResponsiveValueByScreen, composeTypographyClassName, composeTypographyStyle, isSafari, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
|
|
3
|
+
import { useState, useRef, useEffect } from 'react';
|
|
4
4
|
|
|
5
|
-
const CollectionDescription = ({ setting })=>{
|
|
5
|
+
const CollectionDescription = ({ setting, builderProps })=>{
|
|
6
|
+
const [open, setOpen] = useState(false);
|
|
7
|
+
const [isShowViewMore, allowShowViewMore] = useState(false);
|
|
8
|
+
const ref = useRef(null);
|
|
9
|
+
const currentDevice = useCurrentDevice();
|
|
6
10
|
const collection = useCollection();
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
|
|
12
|
+
const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
|
|
13
|
+
const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
|
|
14
|
+
const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
|
|
15
|
+
useEffect(()=>{
|
|
16
|
+
const dom = ref.current;
|
|
17
|
+
setOpen(false);
|
|
18
|
+
if (dom && hasLineClamp && collection?.description) {
|
|
19
|
+
const value = lineClamp;
|
|
20
|
+
setTimeout(()=>{
|
|
21
|
+
const scrollHeight = dom?.scrollHeight ?? 0;
|
|
22
|
+
const clientHeight = dom?.clientHeight ?? 0;
|
|
23
|
+
const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
|
|
24
|
+
const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
|
|
25
|
+
const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
|
|
26
|
+
if (value && conditionCheckLine) {
|
|
27
|
+
allowShowViewMore(()=>true);
|
|
28
|
+
} else {
|
|
29
|
+
allowShowViewMore(()=>false);
|
|
30
|
+
}
|
|
31
|
+
}, 100);
|
|
12
32
|
}
|
|
33
|
+
}, [
|
|
34
|
+
hasLineClamp,
|
|
35
|
+
lineClamp,
|
|
36
|
+
collection?.description
|
|
37
|
+
]);
|
|
38
|
+
const css = `
|
|
39
|
+
.gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
|
|
40
|
+
display: inline !important;
|
|
41
|
+
}
|
|
42
|
+
.gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
|
|
43
|
+
content: "\\A";
|
|
44
|
+
white-space: pre;
|
|
45
|
+
}
|
|
46
|
+
.gp-p-description-text > table {
|
|
47
|
+
box-shadow: none;
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
const hasDescription = collection?.description && collection.description?.trim() != '';
|
|
51
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
52
|
+
"data-id": builderProps?.uid,
|
|
53
|
+
children: [
|
|
54
|
+
!isSafari() && /*#__PURE__*/ jsx("style", {
|
|
55
|
+
children: css
|
|
56
|
+
}),
|
|
57
|
+
/*#__PURE__*/ jsx("div", {
|
|
58
|
+
ref: ref,
|
|
59
|
+
"data-gp-text": true,
|
|
60
|
+
className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
|
|
61
|
+
style: {
|
|
62
|
+
...getStyleShadow({
|
|
63
|
+
styleAppliedFor: 'text-shadow'
|
|
64
|
+
}),
|
|
65
|
+
...makeStyleResponsive('ta', setting?.textAlign),
|
|
66
|
+
...hasLineClamp && !open ? makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
|
|
67
|
+
...makeStyle({
|
|
68
|
+
tt: setting?.transform
|
|
69
|
+
}),
|
|
70
|
+
...appendTypoStyle
|
|
71
|
+
},
|
|
72
|
+
dangerouslySetInnerHTML: {
|
|
73
|
+
__html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
|
|
74
|
+
}
|
|
75
|
+
}),
|
|
76
|
+
hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
|
|
77
|
+
className: cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
|
|
78
|
+
style: {
|
|
79
|
+
...makeStyleResponsive('ta', setting?.textAlign),
|
|
80
|
+
...makeStyle({
|
|
81
|
+
tt: setting?.transform
|
|
82
|
+
}),
|
|
83
|
+
...appendTypoStyle,
|
|
84
|
+
...getGlobalColorStyle(setting?.showMoreColor)
|
|
85
|
+
},
|
|
86
|
+
onClick: ()=>setOpen((prev)=>!prev),
|
|
87
|
+
children: [
|
|
88
|
+
!open ? setting?.viewMoreText : setting?.viewLessText,
|
|
89
|
+
setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {
|
|
90
|
+
className: "gp-ml-1 gp-inline-block",
|
|
91
|
+
height: "1em",
|
|
92
|
+
width: "1em",
|
|
93
|
+
viewBox: "0 0 22 12",
|
|
94
|
+
fill: "none",
|
|
95
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
96
|
+
children: !open ? /*#__PURE__*/ jsx("path", {
|
|
97
|
+
d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
|
|
98
|
+
fill: "currentColor"
|
|
99
|
+
}) : /*#__PURE__*/ jsx("path", {
|
|
100
|
+
d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
|
|
101
|
+
fill: "currentColor"
|
|
102
|
+
})
|
|
103
|
+
})
|
|
104
|
+
]
|
|
105
|
+
})
|
|
106
|
+
]
|
|
13
107
|
});
|
|
14
108
|
};
|
|
15
109
|
|
|
@@ -1,16 +1,109 @@
|
|
|
1
|
-
import { template } from '@gem-sdk/core';
|
|
2
|
-
import
|
|
1
|
+
import { composeTypographyStyle, composeTypographyClassName, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
|
|
2
|
+
import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
|
|
3
|
+
import { getDisplayStyle } from '../../product/components/ProductImages/common/common.js';
|
|
3
4
|
|
|
4
|
-
const CollectionDescription = ({ setting })=>{
|
|
5
|
+
const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
|
|
6
|
+
const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
|
|
7
|
+
const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
|
|
8
|
+
const defaultStyle = {
|
|
9
|
+
...getStyleShadow({
|
|
10
|
+
styleAppliedFor: 'text-shadow'
|
|
11
|
+
}),
|
|
12
|
+
...makeStyleResponsive('ta', setting?.textAlign),
|
|
13
|
+
...getGlobalColorStyle(setting?.color),
|
|
14
|
+
...makeStyle({
|
|
15
|
+
tt: setting?.transform
|
|
16
|
+
}),
|
|
17
|
+
...appendTypoStyle
|
|
18
|
+
};
|
|
19
|
+
const collapseStyle = {
|
|
20
|
+
...defaultStyle,
|
|
21
|
+
...makeStyleResponsive('line-clamp', makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
|
|
22
|
+
};
|
|
23
|
+
const getDisplayCollapse = ()=>{
|
|
24
|
+
return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
|
|
25
|
+
};
|
|
26
|
+
const moreIcon = `<svg
|
|
27
|
+
class="gp-ml-1 gp-inline-block"
|
|
28
|
+
style="display: inline-block; margin-left: 1px;"
|
|
29
|
+
height="1em"
|
|
30
|
+
width="1em"
|
|
31
|
+
viewBox="0 0 22 12"
|
|
32
|
+
fill="none"
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
>
|
|
35
|
+
<path
|
|
36
|
+
d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
|
|
37
|
+
fill="currentColor"
|
|
38
|
+
/>
|
|
39
|
+
</svg>`;
|
|
40
|
+
const viewMoreTextTranslate = getDynamicSourceLocales({
|
|
41
|
+
val: setting?.viewMoreText,
|
|
42
|
+
uid: builderProps?.uid,
|
|
43
|
+
settingId: 'viewMoreText',
|
|
44
|
+
isLiquid: true,
|
|
45
|
+
pageContext,
|
|
46
|
+
translate: setting?.translate
|
|
47
|
+
});
|
|
48
|
+
const viewLessTextTranslate = getDynamicSourceLocales({
|
|
49
|
+
val: setting?.viewLessText,
|
|
50
|
+
uid: builderProps?.uid,
|
|
51
|
+
settingId: 'viewLessText',
|
|
52
|
+
isLiquid: true,
|
|
53
|
+
pageContext,
|
|
54
|
+
translate: setting?.translate
|
|
55
|
+
});
|
|
5
56
|
return template`
|
|
6
|
-
|
|
7
|
-
styles: setting,
|
|
57
|
+
<gp-collection-description data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
|
|
8
58
|
setting: {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
59
|
+
lineClamp: setting?.lineClamp,
|
|
60
|
+
hasLineClamp: setting?.hasLineClamp,
|
|
61
|
+
viewMoreText: viewMoreTextTranslate,
|
|
62
|
+
viewLessText: viewLessTextTranslate,
|
|
63
|
+
enableViewMoreIcon: setting?.enableViewMoreIcon
|
|
64
|
+
},
|
|
65
|
+
defaultStyle,
|
|
66
|
+
collapseStyle
|
|
67
|
+
}).replaceAll("'", ''')}'
|
|
68
|
+
view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
|
|
69
|
+
view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
|
|
70
|
+
>
|
|
71
|
+
<div></div>
|
|
72
|
+
<div
|
|
73
|
+
data-gp-text
|
|
74
|
+
class="${cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
|
|
75
|
+
data-gp-text
|
|
76
|
+
style="${collapseStyle}"
|
|
77
|
+
>
|
|
78
|
+
{{collection.description}}
|
|
79
|
+
</div>
|
|
80
|
+
{% if collection.description != blank -%}
|
|
81
|
+
<button
|
|
82
|
+
type="button"
|
|
83
|
+
class="p-description-show-more ${cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
|
|
84
|
+
style="${{
|
|
85
|
+
...makeStyle({
|
|
86
|
+
tt: setting?.transform
|
|
87
|
+
}),
|
|
88
|
+
...makeStyleResponsive('ta', setting?.textAlign),
|
|
89
|
+
...appendTypoStyle,
|
|
90
|
+
...getGlobalColorStyle(setting?.showMoreColor),
|
|
91
|
+
...getDisplayCollapse(),
|
|
92
|
+
position: 'absolute',
|
|
93
|
+
visibility: 'hidden'
|
|
94
|
+
}}"
|
|
95
|
+
>
|
|
96
|
+
${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
|
|
97
|
+
${setting?.enableViewMoreIcon ? moreIcon : ''}
|
|
98
|
+
</button>
|
|
99
|
+
{%- endif -%}
|
|
100
|
+
{% style %}
|
|
101
|
+
.p-description-wrapper.gp-p-description-text * {
|
|
102
|
+
color: inherit
|
|
103
|
+
}
|
|
104
|
+
{% endstyle %}
|
|
105
|
+
</gp-collection-description>
|
|
106
|
+
${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
|
|
14
107
|
`;
|
|
15
108
|
};
|
|
16
109
|
|
|
@@ -35,6 +35,59 @@ const config = {
|
|
|
35
35
|
}
|
|
36
36
|
]
|
|
37
37
|
},
|
|
38
|
+
{
|
|
39
|
+
id: 'hasLineClamp',
|
|
40
|
+
label: 'Enable View More',
|
|
41
|
+
type: 'toggle',
|
|
42
|
+
devices: {
|
|
43
|
+
desktop: {
|
|
44
|
+
default: true
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
id: 'lineClamp',
|
|
50
|
+
label: 'Maximum Row(s) To Show',
|
|
51
|
+
type: 'input:number',
|
|
52
|
+
min: 1,
|
|
53
|
+
hide: true,
|
|
54
|
+
devices: {
|
|
55
|
+
desktop: {
|
|
56
|
+
default: 12
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
id: 'viewMoreText',
|
|
62
|
+
label: 'View More Text',
|
|
63
|
+
type: 'input',
|
|
64
|
+
default: 'Show more',
|
|
65
|
+
hide: true
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
id: 'showMoreColor',
|
|
69
|
+
type: 'colorpicker',
|
|
70
|
+
default: 'text-1'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
id: 'viewLessText',
|
|
74
|
+
label: 'View Less Text',
|
|
75
|
+
type: 'input',
|
|
76
|
+
default: 'Show less',
|
|
77
|
+
hide: true
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
id: 'enableViewMoreIcon',
|
|
81
|
+
label: 'Enable Icon',
|
|
82
|
+
type: 'toggle',
|
|
83
|
+
default: true,
|
|
84
|
+
hide: true
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
id: 'translate',
|
|
88
|
+
type: 'input',
|
|
89
|
+
default: 'viewLessText,viewMoreText'
|
|
90
|
+
},
|
|
38
91
|
{
|
|
39
92
|
id: 'textAlign',
|
|
40
93
|
label: 'Align',
|
|
@@ -70,11 +123,86 @@ const config = {
|
|
|
70
123
|
default: 'center'
|
|
71
124
|
}
|
|
72
125
|
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
id: 'color',
|
|
129
|
+
type: 'colorpicker',
|
|
130
|
+
default: 'text-1'
|
|
73
131
|
}
|
|
74
132
|
]
|
|
75
133
|
}
|
|
76
134
|
],
|
|
77
135
|
ui: [
|
|
136
|
+
{
|
|
137
|
+
type: 'group',
|
|
138
|
+
label: {
|
|
139
|
+
en: ''
|
|
140
|
+
},
|
|
141
|
+
controls: [
|
|
142
|
+
{
|
|
143
|
+
type: 'control',
|
|
144
|
+
label: {
|
|
145
|
+
en: 'Show more'
|
|
146
|
+
},
|
|
147
|
+
options: {
|
|
148
|
+
label: 'large'
|
|
149
|
+
},
|
|
150
|
+
setting: {
|
|
151
|
+
id: 'hasLineClamp'
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
type: 'control',
|
|
156
|
+
label: {
|
|
157
|
+
en: 'Text color'
|
|
158
|
+
},
|
|
159
|
+
setting: {
|
|
160
|
+
id: 'showMoreColor'
|
|
161
|
+
},
|
|
162
|
+
condition: 'hasLineClamp == true'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
type: 'control',
|
|
166
|
+
label: {
|
|
167
|
+
en: 'Max lines'
|
|
168
|
+
},
|
|
169
|
+
setting: {
|
|
170
|
+
id: 'lineClamp'
|
|
171
|
+
},
|
|
172
|
+
condition: 'hasLineClamp == true'
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
type: 'control',
|
|
176
|
+
label: {
|
|
177
|
+
en: 'Show more label'
|
|
178
|
+
},
|
|
179
|
+
setting: {
|
|
180
|
+
id: 'viewMoreText'
|
|
181
|
+
},
|
|
182
|
+
condition: 'hasLineClamp == true'
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
type: 'control',
|
|
186
|
+
label: {
|
|
187
|
+
en: 'Show less label'
|
|
188
|
+
},
|
|
189
|
+
setting: {
|
|
190
|
+
id: 'viewLessText'
|
|
191
|
+
},
|
|
192
|
+
condition: 'hasLineClamp == true'
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
type: 'control',
|
|
196
|
+
label: {
|
|
197
|
+
en: 'Icon'
|
|
198
|
+
},
|
|
199
|
+
setting: {
|
|
200
|
+
id: 'enableViewMoreIcon'
|
|
201
|
+
},
|
|
202
|
+
condition: 'hasLineClamp == true'
|
|
203
|
+
}
|
|
204
|
+
]
|
|
205
|
+
},
|
|
78
206
|
{
|
|
79
207
|
label: {
|
|
80
208
|
en: 'Text'
|
package/dist/types/index.d.ts
CHANGED
|
@@ -667,7 +667,15 @@ type CollectionDescriptionProps = BaseProps<{
|
|
|
667
667
|
/**
|
|
668
668
|
* @deprecated please use transform inside `typo` instead
|
|
669
669
|
*/
|
|
670
|
+
color?: ColorValueType;
|
|
670
671
|
transform?: TransformProp;
|
|
672
|
+
showMoreColor?: ColorValueType;
|
|
673
|
+
hasLineClamp?: ObjectDevices<boolean>;
|
|
674
|
+
lineClamp?: ObjectDevices<number>;
|
|
675
|
+
viewMoreText?: string;
|
|
676
|
+
viewLessText?: string;
|
|
677
|
+
enableViewMoreIcon?: boolean;
|
|
678
|
+
translate?: string;
|
|
671
679
|
}>;
|
|
672
680
|
declare const CollectionDescription$1: React.FC<CollectionDescriptionProps>;
|
|
673
681
|
|
|
@@ -6558,7 +6566,9 @@ declare const CollectionToolbar: ({ setting, builderProps, pageContext }: Collec
|
|
|
6558
6566
|
|
|
6559
6567
|
declare const CollectionTitle: ({ setting }: CollectionTitleProps) => string;
|
|
6560
6568
|
|
|
6561
|
-
declare const CollectionDescription: ({ setting }: CollectionDescriptionProps
|
|
6569
|
+
declare const CollectionDescription: ({ setting, advanced, builderProps, pageContext, }: CollectionDescriptionProps & {
|
|
6570
|
+
pageContext?: PageContext | undefined;
|
|
6571
|
+
}) => string;
|
|
6562
6572
|
|
|
6563
6573
|
declare const CollectionPaginator: ({ setting, builderProps, pageContext }: CollectionPaginatorProps) => string;
|
|
6564
6574
|
|