Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7

post-carousel / src / blocks / table-of-content / dynamicCss.js

dynamicCss.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/table-of-content/dynamicCss.js

347 lines 9.2 KB

Raw Download Zip

1	import {
2	boxCss,
3	colorControls,
4	objectToCssString,
5	rangerCss,
6	spacingGenerate,
7	wrapInMediaQuery,
8	} from "../shared/helpFn";
9
10	const dynamicCss = (attributes) => {
11	const {
12	uniqueId,
13	headingAlignment,
14	bottomGap,
15	headingLineHeight,
16	headingWordSpacing,
17	headingLetterSpacing,
18	headingFontSize,
19	headingTypography,
20	headingBg,
21	headingColor,
22	headingPadding,
23	headingBorderWidth,
24	headingBorder,
25	headingBorderRadius,
26	listTypography,
27	listFontSize,
28	listLetterSpacing,
29	listLineHeight,
30	listWordSpacing,
31	contentColor,
32	contentChildColor,
33	tocPadding,
34	tocBorderWidth,
35	tocBorder,
36	tocBg,
37	TOCBorderRadius,
38	tocBoxShadow,
39	tocBoxShadowEnable,
40	hierarchyDistance,
41	separatorStyle,
42	separatorThickness,
43	separator,
44	separatorColor,
45	tocAlignment,
46	collapsibleBg,
47	collapsibleBorderWidth,
48	collapsibleBorder,
49	collapsibleBorderRadius,
50	collapsiblePadding,
51	collapseLineHeight,
52	collapseWordSpacing,
53	collapseLetterSpacing,
54	collapseFontSize,
55	collapseTypography,
56	collapsibleColor,
57	preset,
58	itemBg,
59	activeLineColor,
60	stickyOffsetTop,
61	hideOnDesktop,
62	hideOnTablet,
63	hideOnMobile,
64	listHierarchy,
65	tocWidth,
66	} = attributes;
67
68	const getTypographyStyles = ({
69	typography,
70	fontSize,
71	fontSpacing,
72	lineHeight,
73	wordSpacing,
74	device = "Desktop",
75	}) => {
76	const { family, fontWeight, decoration, transform, style } = typography;
77	const typographyStyles = {
78	"font-family": family,
79	"font-weight": fontWeight,
80	"text-decoration": decoration,
81	"text-transform": transform,
82	"font-style": style,
83	};
84
85	const fontStyles = {};
86	const styleProperties = [
87	{ key: "font-size", source: fontSize },
88	{ key: "letter-spacing", source: fontSpacing },
89	{ key: "line-height", source: lineHeight },
90	{ key: "word-spacing", source: wordSpacing },
91	];
92	styleProperties.forEach(({ key, source }) => {
93	if (source?.device?.[device]) {
94	fontStyles[key] = source.device?.[device] + (source?.unit?.[device] \|\| "");
95	}
96	});
97	return device === "Desktop" ? { ...typographyStyles, ...fontStyles } : fontStyles;
98	};
99
100	const tocResponsiveCss = (deviceType) => {
101	const allResponsiveCss = [
102	{
103	class: `#${uniqueId}`,
104	styles: {
105	width: rangerCss(tocWidth, deviceType) + " !important",
106	},
107	},
108	{
109	class: `#${uniqueId}.sp-table-of-content-toc.sp-toc-position-sticky`,
110	styles: {
111	top: rangerCss(stickyOffsetTop, deviceType),
112	},
113	},
114	{
115	class: `#${uniqueId}.sp-table-of-content-toc.sp-toc-position-floating.sp-toc-floating-top-left, #${uniqueId}.sp-table-of-content-toc.sp-toc-position-floating.sp-toc-floating-top-right, #${uniqueId}.sp-table-of-content-toc.sp-toc-position-floating.sp-toc-floating-top-center`,
116	styles: {
117	top: rangerCss(stickyOffsetTop, deviceType),
118	},
119	},
120	{
121	class: `#${uniqueId} .sps-toc-list`,
122	styles: {
123	"text-align": tocAlignment,
124	},
125	},
126
127	{
128	class: `#${uniqueId} .sps-toc-style-romanAlphabeticMix .sps-toc-text`,
129	styles: {
130	"padding-left": !listHierarchy ? "20px" : "2px",
131	},
132	},
133
134	{
135	class: `#${uniqueId} .sps-toc-header`,
136	styles: {
137	"justify-content": headingAlignment,
138	},
139	},
140	{
141	class: `#${uniqueId} .sps-toc-wrapper`,
142	styles: {
143	background: colorControls(tocBg.color.style, tocBg.color.solidColor, tocBg.color.gradient),
144
145	padding: spacingGenerate(tocPadding, deviceType),
146	"border-radius": spacingGenerate(TOCBorderRadius, deviceType),
147
148	"border-style": tocBorder.style,
149	"border-color": tocBorder.color,
150	"border-width": spacingGenerate(tocBorderWidth, deviceType),
151
152	"box-shadow": boxCss(tocBoxShadowEnable, deviceType, tocBoxShadow, "color"),
153	},
154	},
155
156	{
157	class: `#${uniqueId} .sps-toc-main-toggle`,
158	styles: {
159	background: colorControls(
160	collapsibleBg.color.style,
161	collapsibleBg.color.solidColor,
162	collapsibleBg.color.gradient
163	),
164	"border-style": collapsibleBorder.style,
165	"border-color": collapsibleBorder.color,
166	"border-width": spacingGenerate(collapsibleBorderWidth, deviceType),
167	"border-radius": spacingGenerate(collapsibleBorderRadius, deviceType),
168	padding: spacingGenerate(collapsiblePadding, deviceType),
169	...getTypographyStyles({
170	typography: collapseTypography.typography,
171	fontSize: collapseFontSize,
172	fontSpacing: collapseLetterSpacing,
173	lineHeight: collapseLineHeight,
174	wordSpacing: collapseWordSpacing,
175	}),
176
177	color: collapsibleColor.color,
178	},
179	},
180	{
181	class: `#${uniqueId} .sps-toc-wrapper:hover`,
182	styles: {
183	background: colorControls(tocBg.hover.style, tocBg.hover.solidColor, tocBg.color.gradient),
184	},
185	},
186
187	{
188	class: `#${uniqueId} .sps-toc-header-row`,
189	styles: {
190	"margin-bottom": rangerCss(bottomGap, deviceType),
191	},
192	},
193	{
194	class: `#${uniqueId} .sps-toc-title`,
195	styles: {
196	...getTypographyStyles({
197	typography: headingTypography.typography,
198	fontSize: headingFontSize,
199	fontSpacing: headingLetterSpacing,
200	lineHeight: headingLineHeight,
201	wordSpacing: headingWordSpacing,
202	}),
203	color: headingColor.color,
204	background: colorControls(
205	headingBg.color.style,
206	headingBg.color.solidColor,
207	headingBg.color.gradient
208	),
209	"border-radius": spacingGenerate(headingBorderRadius, deviceType),
210
211	"border-style": headingBorder.style,
212	"border-color": headingBorder.color,
213	"border-width": spacingGenerate(headingBorderWidth, deviceType),
214	padding: spacingGenerate(headingPadding, deviceType),
215	},
216	},
217	{
218	class: `#${uniqueId} .sps-toc-title:hover`,
219	styles: {
220	color: headingColor.hoverColor,
221	background: colorControls(
222	headingBg.hover.style,
223	headingBg.hover.solidColor,
224	headingBg.hover.gradient
225	),
226	},
227	},
228
229	{
230	class: `#${uniqueId} .sps-toc-link, #${uniqueId} .sps-toc-copy`,
231	styles: {
232	...getTypographyStyles({
233	typography: listTypography.typography,
234	fontSize: listFontSize,
235	fontSpacing: listLetterSpacing,
236	lineHeight: listLineHeight,
237	wordSpacing: listWordSpacing,
238	}),
239	color: contentColor.color,
240	"margin-right": "5px",
241	},
242	},
243
244	{
245	class: ` #${uniqueId} .presetTwo .sps-toc-style-bullet .sps-toc-link-wrapper::before,
246	#${uniqueId} .presetFive .sps-toc-style-bullet .sps-toc-link-wrapper::before `,
247	styles: {
248	color: contentColor.color,
249	},
250	},
251	{
252	class: `#${uniqueId} .sps-toc-link:hover, #${uniqueId} .presetTwo .sps-toc-style-bullet .sps-toc-link-wrapper:hover::before,
253	#${uniqueId} .presetFive .sps-toc-style-bullet .sps-toc-link-wrapper:hover::before`,
254	styles: {
255	color: contentColor.hoverColor,
256	},
257	},
258
259	{
260	class: `#${uniqueId} .sps-toc-sublist .sps-toc-link, #${uniqueId} .presetTwo .sps-toc-style-bullet .sps-toc-sublist .sps-toc-link-wrapper::before,
261	#${uniqueId} .presetFive .sps-toc-style-bullet .sps-toc-sublist .sps-toc-link-wrapper::before`,
262	styles: {
263	color: contentChildColor.color,
264	},
265	},
266
267	{
268	class: `#${uniqueId} .sps-toc-sublist .sps-toc-link:hover,
269	#${uniqueId} .presetTwo .sps-toc-style-bullet .sps-toc-sublist .sps-toc-link-wrapper:hover::before,
270	#${uniqueId} .presetFive .sps-toc-style-bullet .sps-toc-sublist .sps-toc-link-wrapper:hover::before`,
271	styles: {
272	color: contentChildColor.hoverColor,
273	},
274	},
275
276	{
277	class: `#${uniqueId} .sps-toc-sublist`,
278	styles: {
279	"margin-left": `${hierarchyDistance.device?.[deviceType]}${hierarchyDistance.unit?.[deviceType]}`,
280	},
281	},
282
283	{
284	class: `#${uniqueId} .sps-toc-link-wrapper`,
285	styles: {
286	"border-bottom": separator ? `${separatorThickness}px ${separatorStyle} ${separatorColor}` : "",
287	// padding: `${cssDataCheck(gapBetweenListItems.device?.[deviceType], unit(gapBetweenListItems, deviceType))} 10px`,
288	"border-radius": separator ? "0px" : "4px",
289
290	// padding: spacingGenerate(gapBetweenListItems, [deviceType]),
291	},
292	},
293
294	{
295	class: `#${uniqueId} .sps-toc-selected-background`,
296	styles: {
297	background: ["presetTwo", "presetFive"].includes(preset)
298	? colorControls(itemBg.color.style, itemBg.color.solidColor, itemBg.color.gradient)
299	: "",
300	},
301	},
302
303	{
304	class: `#${uniqueId} .sps-toc-selected-background .sps-toc-link`,
305	styles: {
306	color: ["presetThree", "presetFour"].includes(preset) ? activeLineColor : "",
307	},
308	},
309
310	{
311	class: `#${uniqueId} .sps-toc-indicator`,
312	styles: {
313	"background-color": activeLineColor,
314	},
315	},
316
317	{
318	class: `#${uniqueId} .sps-toc-item:has(> .sps-toc-link-wrapper.sps-toc-selected-background)::marker `,
319	styles: {
320	color: ["presetThree", "presetFour"].includes(preset) ? activeLineColor : "",
321	},
322	},
323	];
324
325	return allResponsiveCss;
326	};
327
328	const desktopCss = [
329	...tocResponsiveCss("Desktop")
330	];
331	// Tablet CSS styles.
332	const tabletCss = [
333	...tocResponsiveCss("Tablet")
334	];
335
336	// Mobile CSS styles.
337	const mobileCss = [
338	...tocResponsiveCss("Mobile")
339	];
340
341	const tabletMediaQueryCss = wrapInMediaQuery(objectToCssString(tabletCss), "only screen and (max-width: 1023px)");
342	const mobileMediaQueryCss = wrapInMediaQuery(objectToCssString(mobileCss), "only screen and (max-width: 599px)");
343
344	return `${objectToCssString(desktopCss)} ${tabletMediaQueryCss} ${mobileMediaQueryCss}`;
345	};
346	export default dynamicCss;
347