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

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

post-carousel / src / blocks / taxonomy / dynamicCss.js

dynamicCss.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/taxonomy/dynamicCss.js

688 lines 19.6 KB

Raw Download Zip

1	import { boxCss, colorControls, objectToCssString, spacingGenerate, wrapInMediaQuery } from "../shared/helpFn";
2
3	const cacheCss = { desktop: "", mobile: "", tablet: "" };
4
5	const dynamicCss = (attributes, page = "frontend", currentDevice = "all") => {
6	const {
7	uniqueId,
8	layout,
9	height,
10	columns,
11	columnGap,
12	rowGap,
13	dividerBorderStyle,
14	dividerBg,
15	dividerWidth,
16	titleTypography,
17	titleMargin,
18	titleColor,
19	titleLineHeight,
20	titleLatterSpacing,
21	titleFontSize,
22	postCardBg,
23	postCardBorder,
24	postCardBorderWidth,
25	postCardBorderRadius,
26	postCardBoxShadowEnable,
27	postCardBoxShadow,
28	contentAreaMargin,
29	postCardPadding,
30	counterHeight,
31	counterWidth,
32	counterTypography,
33	counterLineHeight,
34	counterLatterSpacing,
35	counterFontSize,
36	counterColor,
37	counterCardBg,
38	counterBorderWidth,
39	counterBorder,
40	counterBorderRadius,
41	counterBoxShadowEnable,
42	counterBoxShadow,
43	postCardHoverBoxShadow,
44	postCardHoverBoxShadowEnable,
45	postCardHoverBorderRadius,
46	postCardHoverBorderWidth,
47	postCardHoverBorder,
48	counterHoverBoxShadow,
49	counterHoverBoxShadowEnable,
50	counterHoverBorderRadius,
51	counterHoverBorderWidth,
52	counterHoverBorder,
53	displayOverlyThum,
54	displayOverlyHoverThum,
55	contentHorizontalPosition,
56	excerptShow,
57	excerptMargin,
58	excerptLineHeight,
59	excerptLatterSpacing,
60	excerptFontSize,
61	excerptWordSpacing,
62	excerptTypography,
63	excerptColor,
64	taxonomyImageHeight,
65	taxonomyImageWidth,
66	imageSize,
67	imageOverlayCustom,
68	hoverOpacityEffect,
69	grayscaleMode,
70	grayscaleOnHover,
71	originalOnHover,
72	brightnessEffect,
73	blurEffect,
74	brightnessEffectHover,
75	blurEffectHover,
76	imageBorderRadius,
77	imageBorderWidth,
78	imageBorder,
79	imageBorderHover,
80	imageBorderWidthHover,
81	imageBorderRadiusHover,
82	counterMultiColorBg,
83	contentVerticalPosition,
84	contentAreaBg,
85	catRadius,
86	titleCounterGap,
87	dividerAlignment,
88	dividerThickness,
89	titleWordSpacing,
90	hideOnDesktop,
91	hideOnTablet,
92	hideOnMobile,
93	globalBreakPointData,
94	showHideDivider,
95	} = attributes;
96
97	const rangerCss = (attr, device = "Desktop") => {
98	const updateUnit = attr?.unit?.[device] ?? "";
99
100	return `${attr?.device?.[device]}${updateUnit}`;
101	};
102
103	const typographyCss = (attr) => {
104	return {
105	"font-family": attr.typography.family,
106	"font-weight": attr.typography.fontWeight,
107	"font-style": attr.typography.style,
108	"text-decoration": attr.typography.decoration,
109	"text-transform": attr.typography.transform,
110	};
111	};
112
113	const getJustifyContent = () => {
114	switch (layout) {
115	case "taxonomy-layout-two":
116	return "space-between";
117	case "taxonomy-layout-four":
118	case "taxonomy-layout-seven":
119	return "center";
120	case "taxonomy-layout-eight":
121	return "space-evenly";
122	default:
123	return "space-between";
124	}
125	};
126
127	const layoutSixMargin = (width, device) => {
128	return width.device?.[device].top;
129	};
130
131	function getBoxSpacingStyles(spacingObj, deviceType, property = "margin") {
132	if (!spacingObj?.device?.[deviceType] \|\| !spacingObj?.unit?.[deviceType]) {
133	return {};
134	}
135
136	const units = spacingObj.unit?.[deviceType];
137	const values = spacingObj.device?.[deviceType];
138
139	return {
140	[`${property}-top`]: `${values.top ?? 0}${units}`,
141	[`${property}-right`]: `${values.right ?? 0}${units}`,
142	[`${property}-bottom`]: `${values.bottom ?? 0}${units}`,
143	[`${property}-left`]: `${values.left ?? 0}${units}`,
144	};
145	}
146
147	const justifyContentValue = getJustifyContent(layout);
148
149	const taxonomyResponsiveCss = (deviceType) => {
150	const marginStyles = getBoxSpacingStyles(contentAreaMargin, deviceType, "margin");
151	const paddingStyles = getBoxSpacingStyles(postCardPadding, deviceType, "padding");
152
153	const titleMarginStyles = getBoxSpacingStyles(titleMargin, deviceType, "margin");
154
155	const excerptMarginStyles = getBoxSpacingStyles(excerptMargin, deviceType, "margin");
156
157	const getBorderStyles = () => {
158	const borderWidth = rangerCss(dividerThickness, deviceType);
159
160	switch (dividerBg.color.style) {
161	case "transparent":
162	return {
163	"border-bottom": `${borderWidth} ${dividerBorderStyle} transparent`,
164	};
165
166	case "gradient":
167	return {
168	"border-bottom": `${borderWidth} ${dividerBorderStyle} transparent`,
169	"border-image": `${colorControls(
170	dividerBg.color.style,
171	dividerBg.color.solidColor,
172	dividerBg.color.gradient
173	)} 1`,
174	};
175
176	default:
177	return {
178	"border-bottom": `${borderWidth} ${dividerBorderStyle} ${dividerBg.color.solidColor}`,
179	};
180	}
181	};
182
183	const allResponsiveCss = [
184	{
185	class: `#${uniqueId} .sp-smart-post-taxonomy-render`,
186	styles: {
187	"margin-left": "1px",
188	"box-sizing": "border-box",
189	display: [
190	"taxonomy-layout-one",
191	"taxonomy-layout-two",
192	"taxonomy-layout-three",
193	"taxonomy-layout-five",
194	"taxonomy-layout-six",
195	"taxonomy-layout-seven",
196	"taxonomy-layout-four",
197	"taxonomy-layout-eight",
198	].includes(layout)
199	? "grid"
200	: "flex",
201	"grid-template-columns": [
202	"taxonomy-layout-one",
203	"taxonomy-layout-two",
204	"taxonomy-layout-three",
205	"taxonomy-layout-four",
206	"taxonomy-layout-five",
207	"taxonomy-layout-six",
208	"taxonomy-layout-seven",
209	"taxonomy-layout-eight",
210	].includes(layout)
211	? `repeat(${columns?.device?.[deviceType]}, 1fr)`
212	: "none",
213
214	"column-gap": rangerCss(columnGap, deviceType),
215
216	"row-gap": rangerCss(rowGap, deviceType),
217
218	width: "100%",
219	"flex-direction": "column",
220	"justify-content": "center",
221	},
222	},
223
224	{
225	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info-overlay`,
226	styles: {
227	position: "relative",
228	width: "213.158px",
229	height: "142.105px",
230	"flex-shrink": "0",
231	"aspect-ratio": "213.16 / 142.11",
232	"background-size": "cover",
233	"background-position": "center",
234	"background-repeat": "no-repeat",
235	overflow: "hidden",
236	},
237	},
238	{
239	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info`,
240	styles: {
241	display: "flex",
242	width: layout !== "taxonomy-layout-six" && "inherit",
243	gap: layout === "taxonomy-layout-three" && rangerCss(titleCounterGap, deviceType),
244
245	height:
246	layout === "taxonomy-layout-five" \|\| layout === "taxonomy-layout-six"
247	? // \|\|layout === "taxonomy-layout-seven"
248	""
249	: rangerCss(height, deviceType),
250	"justify-content": [
251	"taxonomy-layout-four",
252	"taxonomy-layout-seven",
253	"taxonomy-layout-eight",
254	].includes(layout)
255	? contentHorizontalPosition
256	: justifyContentValue,
257	"align-items": ["taxonomy-layout-seven"].includes(layout) ? contentVerticalPosition : "center",
258
259	"margin-bottom": `-${layoutSixMargin(postCardBorderWidth, deviceType)}px`,
260	"margin-right": `-${layoutSixMargin(postCardBorderWidth, deviceType)}px`,
261	"box-sizing": "border-box",
262	"border-radius": spacingGenerate(postCardBorderRadius, deviceType),
263
264	"border-style": postCardBorder.style,
265	"border-color": postCardBorder.color,
266	"border-width": spacingGenerate(postCardBorderWidth, deviceType),
267
268	...(!displayOverlyThum && {
269	background: colorControls(
270	postCardBg.color.style,
271	postCardBg.color.solidColor,
272	postCardBg.color.gradient
273	),
274	}),
275	"box-shadow": boxCss(postCardBoxShadowEnable, deviceType, postCardBoxShadow, "color"),
276
277	...paddingStyles,
278
279	...(layout !== "taxonomy-layout-six" ? marginStyles : {}),
280	position: "relative",
281	transition: "all 0.8s ease-in-out",
282	},
283	},
284
285	{
286	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info-layout-one::after`,
287	styles: {
288	content: "''",
289	position: "absolute",
290	bottom: "0",
291	...(dividerAlignment === "center" && {
292	left: "50%",
293	transform: "translateX(-50%)",
294	}),
295	...(dividerAlignment === "left" && {
296	left: "0",
297	transform: "none",
298	}),
299	...(dividerAlignment === "right" && {
300	right: "0",
301	transform: "none",
302	}),
303	width: rangerCss(dividerWidth, deviceType),
304	...getBorderStyles(),
305
306	background: "none",
307	},
308	},
309
310	{
311	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover`,
312	styles: {
313	...(!displayOverlyHoverThum && {
314	background: colorControls(
315	postCardBg.hover.style,
316	postCardBg.hover.solidColor,
317	postCardBg.hover.gradient
318	),
319	}),
320
321	"z-index": "1",
322	"box-shadow": boxCss(postCardHoverBoxShadowEnable, deviceType, postCardHoverBoxShadow, "color"),
323
324	"margin-bottom": `-${layoutSixMargin(postCardHoverBorderWidth, deviceType)}px`,
325	"margin-right": `-${layoutSixMargin(postCardHoverBorderWidth, deviceType)}px`,
326	"box-sizing": "border-box",
327
328	// ...(layout !== "taxonomy-layout-one" && {
329	...((layout !== "taxonomy-layout-one" \|\| !showHideDivider) && {
330	"border-style": postCardHoverBorder.style,
331	"border-color": postCardHoverBorder.color,
332	"border-width": spacingGenerate(postCardHoverBorderWidth, deviceType),
333	"border-radius": spacingGenerate(postCardHoverBorderRadius, deviceType),
334	}),
335	},
336	},
337
338	{
339	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name`,
340	styles: {
341	color: titleColor?.color,
342
343	width:
344	// eslint-disable-next-line no-nested-ternary
345	layout === "taxonomy-layout-three"
346	? "80%"
347	: ["taxonomy-layout-five", "taxonomy-layout-six"].includes(layout)
348	? "100%"
349	: "",
350
351	"justify-content":
352	["taxonomy-layout-five", "taxonomy-layout-six"].includes(layout) && contentHorizontalPosition,
353
354	display: excerptShow ? "grid" : "flex",
355	"align-items": "center",
356	"margin-left": ["taxonomy-layout-three", "taxonomy-layout-one"].includes(layout) ? "0px" : "10px",
357	"margin-right": layout === "taxonomy-layout-three" ? "0px" : "10px",
358	margin: layout === "taxonomy-layout-three" && "unset",
359	height: layout === "taxonomy-layout-three" && rangerCss(height, deviceType),
360	...(["taxonomy-layout-eight", "taxonomy-layout-four"].includes(layout) && {
361	"justify-content": "center",
362
363	background: colorControls(
364	contentAreaBg.color.style,
365	contentAreaBg.color.solidColor,
366	contentAreaBg.color.gradient
367	),
368
369	"border-radius": spacingGenerate(catRadius, deviceType),
370	}),
371
372	padding: layout !== "taxonomy-layout-one" ? "10px 20px" : "",
373	},
374	},
375
376	{
377	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name div`,
378	styles: {
379	display: "flex",
380	"align-items": "center",
381	// 'justify-content': 'center',
382	},
383	},
384
385	{
386	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img`,
387	styles: {
388	width: imageSize === "custom" ? rangerCss(taxonomyImageWidth, deviceType) : "",
389	height: imageSize === "custom" ? rangerCss(taxonomyImageHeight, deviceType) : "",
390	},
391	},
392
393	{
394	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info .sp-smart-post-taxonomy-name .sps-taxonomy-title-name`,
395	styles: {
396	width: layout === "taxonomy-layout-three" ? "80%" : "",
397	"z-index": "2",
398
399	...typographyCss(titleTypography),
400	"font-size": rangerCss(titleFontSize, deviceType),
401	"line-height": titleLineHeight?.device?.[deviceType],
402	"letter-spacing": rangerCss(titleLatterSpacing),
403	"word-spacing": rangerCss(titleWordSpacing),
404	color: titleColor?.color,
405	...titleMarginStyles,
406	transition: "color 0.3s ease",
407	},
408	},
409
410	{
411	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover .sp-smart-post-taxonomy-name .sps-taxonomy-title-name`,
412	styles: {
413	color: titleColor?.hoverColor,
414	},
415	},
416	{
417	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover .sp-smart-post-taxonomy-name`,
418	styles: {
419	color: titleColor?.hoverColor,
420	},
421	},
422
423	...(layout === "taxonomy-layout-four"
424	? [
425	{
426	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count`,
427	styles: {
428	position: "absolute",
429	right: "-11px",
430	top: "-13px",
431	background: "#2F2F2F",
432	"border-radius": "50%",
433	padding: `${rangerCss(counterHeight, deviceType)} ${rangerCss(
434	counterWidth,
435	deviceType
436	)}`,
437	},
438	},
439	{
440	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name`,
441	styles: {
442	position: "relative",
443	"z-index": "1",
444	padding: "8px 14px",
445
446	margin: "0px 15px",
447	},
448	},
449	]
450	: [
451	{
452	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count`,
453	styles: {
454	display: layout === "taxonomy-layout-seven" ? "inline-table" : "flex",
455	padding: ![
456	"taxonomy-layout-eight",
457	"taxonomy-layout-five",
458	"taxonomy-layout-six",
459	].includes(layout)
460	? "8px 10px"
461	: "0px 0px 0px 5px",
462	"flex-direction": "column",
463	"justify-content": "center",
464	"align-items": "center",
465	gap: "8px",
466	"flex-shrink": "0",
467	background:
468	!counterMultiColorBg &&
469	colorControls(
470	counterCardBg.color.style,
471	counterCardBg.color.solidColor,
472	counterCardBg.color.gradient
473	),
474	color: "#ffebee",
475	width:
476	!["taxonomy-layout-eight", "taxonomy-layout-five", "taxonomy-layout-six"].includes(
477	layout
478	) && rangerCss(counterWidth, deviceType),
479	height:
480	!["taxonomy-layout-eight", "taxonomy-layout-five", "taxonomy-layout-six"].includes(
481	layout
482	) && rangerCss(counterHeight, deviceType),
483	"border-style": counterBorder.style,
484	"border-color": counterBorder.color,
485	"border-width": spacingGenerate(counterBorderWidth, deviceType),
486	"border-radius": spacingGenerate(counterBorderRadius, deviceType),
487	"box-shadow": boxCss(counterBoxShadowEnable, deviceType, counterBoxShadow, "color"),
488	"margin-right": ![
489	"taxonomy-layout-three",
490	"taxonomy-layout-eight",
491	"taxonomy-layout-five",
492	"taxonomy-layout-six",
493	"taxonomy-layout-one",
494	].includes(layout)
495	? "25px"
496	: "",
497	},
498	},
499	]),
500
501	{
502	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count:hover`,
503	styles: {
504	background: colorControls(
505	counterCardBg.hover.style,
506	counterCardBg.hover.solidColor,
507	counterCardBg.hover.gradient
508	),
509
510	"border-style": counterHoverBorder.style,
511	"border-color": counterHoverBorder.color,
512	"border-width": spacingGenerate(counterHoverBorderWidth, deviceType),
513	"border-radius": spacingGenerate(counterHoverBorderRadius, deviceType),
514
515	"box-shadow": boxCss(counterHoverBoxShadowEnable, deviceType, counterHoverBoxShadow, "color"),
516	},
517	},
518	{
519	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-count span`,
520	styles: {
521	color: counterColor?.color,
522	"text-align": "right",
523	...typographyCss(counterTypography),
524	"font-size": rangerCss(counterFontSize, deviceType),
525	"line-height": counterLineHeight?.device?.[deviceType],
526	"letter-spacing": rangerCss(counterLatterSpacing),
527	transition: "color 0.3s ease",
528	},
529	},
530
531	{
532	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-info:hover .sp-smart-post-taxonomy-count span`,
533	styles: {
534	color: counterColor?.hoverColor,
535	},
536	},
537
538	{
539	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six`,
540	styles: {
541	"flex-direction": "column",
542
543	...(layout === "taxonomy-layout-six" && {
544	"border-width": spacingGenerate(postCardBorderWidth, deviceType),
545	}),
546	},
547	},
548
549	{
550	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-taxonomy-no-results`,
551	styles: {
552	"text-align": "center",
553	color: "#666",
554	padding: "1rem",
555	"font-style": "italic",
556	},
557	},
558
559	{
560	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-taxonomy-name,.sp-smart-post-taxonomy-count`,
561	styles: {
562	position: "relative",
563	"z-index": "1",
564	},
565	},
566
567	{
568	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img-div`,
569	styles: {
570	height: "180px",
571	"align-self": "stretch",
572	position: "relative",
573	},
574	},
575
576	{
577	class: `#${uniqueId} .sp-smart-post-taxonomy-render .sp-smart-post-card .sp-smart-post-card-image.img-opacity img`,
578	styles: {
579	opacity: hoverOpacityEffect,
580	},
581	},
582
583	{
584	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img-div img`,
585	styles: {
586	width: imageSize !== "custom" ? "100%" : "",
587	height: imageSize !== "custom" ? "180px" : "",
588	"object-fit": "cover",
589	display: "block",
590	filter: `blur(${rangerCss(blurEffect, deviceType)}) brightness(${
591	brightnessEffect?.device?.[deviceType]
592	}) ${grayscaleMode === "grayscale" ? "grayscale(100%)" : "grayscale(0%)"}`,
593
594	"border-style": imageBorder.style,
595	"border-color": imageBorder.color,
596	"border-width": spacingGenerate(imageBorderWidth, deviceType),
597	"border-radius": spacingGenerate(imageBorderRadius, deviceType),
598	},
599	},
600
601	{
602	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-layout-five-six-img-div:hover img`,
603	styles: {
604	filter: `blur(${rangerCss(blurEffectHover, deviceType)}) brightness(${
605	brightnessEffectHover?.device?.[deviceType]
606	}) ${
607	// eslint-disable-next-line no-nested-ternary
608	grayscaleMode === "original" && grayscaleOnHover
609	? "grayscale(100%)"
610	: grayscaleMode === "grayscale" && !originalOnHover
611	? "grayscale(100%)"
612	: ""
613	}`,
614
615	"border-style": imageBorderHover.hoverStyle,
616	"border-color": imageBorderHover.hoverColor,
617	"border-width": spacingGenerate(imageBorderWidthHover, deviceType),
618	"border-radius": spacingGenerate(imageBorderRadiusHover, deviceType),
619	},
620	},
621
622	{
623	class: `#${uniqueId} .sp-smart-post-taxonomy-render .overlay-custom`,
624	styles: {
625	background: imageOverlayCustom,
626	},
627	},
628
629	{
630	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-excerpt`,
631	styles: {
632	...typographyCss(excerptTypography),
633	"font-size": rangerCss(excerptFontSize, deviceType),
634	"word-spacing": rangerCss(excerptWordSpacing),
635	"line-height": excerptLineHeight?.device?.[deviceType],
636	"letter-spacing": rangerCss(excerptLatterSpacing),
637	color: excerptColor?.color,
638	...excerptMarginStyles,
639	"z-index": "2",
640	},
641	},
642
643	{
644	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-excerpt:hover`,
645	styles: {
646	color: excerptColor?.hoverColor,
647	},
648	},
649	];
650
651	return allResponsiveCss;
652	};
653
654	const desktopCss = [
655	...taxonomyResponsiveCss("Desktop")
656	];
657	cacheCss.desktop = objectToCssString(desktopCss);
658
659	if ("Tablet" === currentDevice \|\| "all" === currentDevice) {
660	const tabletCss = [
661	...taxonomyResponsiveCss("Tablet")
662	];
663	cacheCss.tablet = wrapInMediaQuery(
664	objectToCssString(tabletCss),
665	`only screen and (max-width: ${globalBreakPointData?.tablet}px)`
666	);
667	}
668	if ("Mobile" === currentDevice \|\| "all" === currentDevice) {
669	const mobileCss = [
670	...taxonomyResponsiveCss("Mobile"),
671	{
672	class: `#${uniqueId} .sp-smart-post-taxonomy-render .taxonomy-hide-post-text`,
673	styles: {
674	display: "none",
675	},
676	}
677	];
678
679	cacheCss.mobile = wrapInMediaQuery(
680	objectToCssString(mobileCss),
681	`only screen and (max-width: ${globalBreakPointData?.mobile}px)`
682	);
683	}
684	return `${cacheCss.desktop} ${cacheCss.tablet} ${cacheCss.mobile}`;
685	};
686
687	export default dynamicCss;
688