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 / button / dynamicCss.js

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

546 lines 14.1 KB

Raw Download Zip

1	import { objectToCssString, wrapInMediaQuery, boxCss, spacingGenerate, generateLayeredShadows } from "../shared/helpFn";
2
3	const cacheCss = { desktop: "", mobile: "", tablet: "" };
4
5	// eslint-disable-next-line no-unused-vars
6	const dynamicCss = (attributes, page = "frontend", currentDevice = "all") => {
7	const {
8	uniqueId,
9	buttonLabelTypography,
10	buttonLabelFontSize,
11	buttonLabelLineHeight,
12	buttonLabelLatterSpacing,
13	buttonLabelColor,
14	iconGap,
15	iconPosition,
16	buttonBgColor,
17	buttonBorderRadius,
18	buttonBorder,
19	buttonBorderWidth,
20	buttonBoxShadowEnable,
21	buttonBoxShadow,
22	buttonHoverBorderRadius,
23	buttonHoverBoxShadow,
24	buttonHoverBoxShadowEnable,
25	buttonPadding,
26	buttonStyle,
27	hoverEffects,
28	shadowColor,
29	buttonGradientBg,
30	buttonGradientHoverBg,
31	buttonBorderGradient,
32	buttonBorderGradientRadiusHover,
33	buttonHoverBorder,
34	buttonHoverBorderWidth,
35	buttonLabelWordSpacing,
36	buttonBorderGradientWidthHover,
37	hideOnDesktop,
38	hideOnTablet,
39	hideOnMobile,
40	smartBtnIconColor,
41	smartBtnIconSize,
42	globalBreakPointData,
43	buttonBorderGradientHover,
44	} = attributes;
45
46	const rangerCss = (attr, device = "Desktop") => {
47	const unit = attr?.unit?.[device] \|\| "";
48	return `${attr.device?.[device]}${unit}`;
49	};
50
51	function resolveColor(color) {
52	if (color.startsWith("var(")) {
53	// Extract variable name
54	const varName = color.match(/var\((--[^)]+)\)/)?.[1];
55	if (varName) {
56	// Get the computed value from :root
57	const computedValue = getComputedStyle(document.documentElement).getPropertyValue(varName);
58	if (computedValue) {
59	return computedValue.trim();
60	}
61	}
62	}
63	return color;
64	}
65	const resolvedColor = resolveColor(shadowColor);
66
67	const typographyCss = (attr) => {
68	return {
69	"font-family": attr.typography.family,
70	"font-weight": attr.typography.fontWeight,
71	"font-style": attr.typography.style,
72	"text-decoration": attr.typography.decoration,
73	"text-transform": attr.typography.transform,
74	};
75	};
76
77	// Button Css.
78	const buttonCSS = () => {
79	return [
80	{
81	class: `#${uniqueId} .sp-smart-post-btn`,
82	styles: {
83	color: buttonLabelColor?.color,
84	"background-color": buttonBgColor?.color,
85	},
86	},
87	{
88	class: `#${uniqueId} .sp-smart-post-btn:hover, #${uniqueId} .sp-smart-post-btn.btn-ghost:hover`,
89	styles: {
90	background: buttonBgColor?.hoverColor,
91	},
92	},
93	];
94	};
95	const buttonHoverEffectCss = () => {
96	let flipStyles;
97	if (hoverEffects === "flip") {
98	flipStyles = [];
99	} else {
100	flipStyles = [
101	{
102	class: `#${uniqueId} .sp-smart-post-btn`,
103	styles: {
104	"border-style": buttonBorder.style,
105	"border-color": buttonBorder?.color,
106	},
107	},
108	{
109	class: `#${uniqueId} .sp-smart-post-btn:hover`,
110	styles: {
111	"border-style": buttonBorderGradient.style,
112	"border-color": buttonBorderGradient?.color,
113	},
114	},
115	{
116	class: `#${uniqueId} .sp-smart-post-btn:hover, #${uniqueId} .sp-smart-post-btn.btn-ghost:hover`,
117	styles: {
118	"border-style": buttonHoverBorder.style,
119	"border-color": buttonHoverBorder?.color,
120	},
121	},
122	{
123	class: `#${uniqueId} .sp-smart-post-btn.btn-gradient:hover`,
124	styles: {
125	"border-style": buttonBorderGradientHover.style,
126	"border-color": buttonBorderGradientHover?.color,
127	},
128	},
129	{
130	class: `#${uniqueId} .sp-smart-post-btn.btn-gradient.drawOutline:hover`,
131	styles: {
132	"border-style": "none",
133	},
134	},
135	];
136	}
137
138	return flipStyles;
139	};
140
141	// Button Label Css.
142	const buttonLabelCSS = () => {
143	return [
144	{
145	class: `#${uniqueId} .sp-smart-post-btn .button-label .front , #${uniqueId} .sp-smart-post-btn .button-label .back`,
146	styles: {
147	display: "flex",
148	"flex-direction": `${iconPosition === "top" \|\| iconPosition === "bottom" ? "column" : "row"}`,
149	"z-index": "999",
150	},
151	},
152	{
153	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip .button-label`,
154	styles: {
155	width: "100%",
156	},
157	},
158
159	{
160	class: `#${uniqueId} .sp-smart-post-btn .sp-rich-text.sp-btn-label`,
161	styles: {
162	...typographyCss(buttonLabelTypography),
163	"z-index": "999",
164	},
165	},
166	{
167	class: `#${uniqueId} .sp-smart-post-btn:not(.neoFollow, .drawOutline):hover .sp-rich-text.sp-btn-label`,
168	styles: {
169	color: buttonLabelColor.hoverColor,
170	},
171	},
172	];
173	};
174
175	// Button icons
176	const buttonIconCss = () => {
177	return [
178	{
179	class: `#${uniqueId} .sp-smart-post-btn .icon `,
180	styles: {
181	order: `${iconPosition === "right" \|\| iconPosition === "bottom" ? "1" : "0"}`,
182	"z-index": "999",
183	},
184	},
185
186	{
187	class: `#${uniqueId} .sp-smart-post-btn .icon i svg`,
188	styles: {
189	fill: smartBtnIconColor?.color,
190	},
191	},
192	{
193	class: `#${uniqueId} .sp-smart-post-btn:hover .icon i svg`,
194	styles: {
195	fill: smartBtnIconColor.hover,
196	},
197	},
198	];
199	};
200
201	const buttonDefaultHoverEffect = () => {
202	return [
203	{
204	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost`,
205	styles: {
206	background: buttonBgColor?.color ? buttonBgColor?.color : "transparent",
207	},
208	},
209
210	{
211	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost.slideRight:before`,
212	styles: {
213	background: buttonBgColor.hoverColor,
214	},
215	},
216	{
217	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost.slideSkew:before`,
218	styles: {
219	background: buttonBgColor.hoverColor,
220	},
221	},
222	{
223	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost.slideTop:before`,
224	styles: {
225	background: buttonBgColor.hoverColor,
226	},
227	},
228	{
229	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost.neoFollow:hover `,
230	styles: {
231	color: buttonLabelColor?.color,
232	background: "transparent",
233	"box-shadow": `8px 8px 0px 0px ${buttonBgColor.hoverColor}`,
234	},
235	},
236	{
237	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost.drawOutline `,
238	styles: {
239	color: buttonLabelColor?.color,
240	"border-style": "none !important",
241	"border-radius": spacingGenerate(buttonBorderRadius),
242	background: `conic-gradient(${buttonBgColor.hoverColor} 0deg, ${buttonBgColor.hoverColor} calc(var(--angle) * 1deg), transparent calc(var(--angle) * 1deg))`,
243	},
244	},
245	{
246	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost.drawOutline::before `,
247	styles: {
248	border: "none",
249	"border-radius": spacingGenerate(buttonBorderRadius),
250	},
251	},
252	{
253	class: `#${uniqueId} .sp-smart-post-btn.btn-ghost.drawOutline::after `,
254	styles: {
255	border: "none",
256	"border-radius": spacingGenerate(buttonBorderRadius),
257	"background-color": buttonBgColor?.color,
258	},
259	},
260	{
261	class: `#${uniqueId} .sp-smart-post-btn.btn-gradient`,
262	styles: {
263	background: buttonGradientBg,
264	overflow: "hidden",
265	transition: "background 0.3s",
266	},
267	},
268	{
269	class: `#${uniqueId} .sp-smart-post-btn.btn-gradient:before`,
270	styles: {
271	content: "''",
272	position: "absolute",
273	top: "0",
274	left: "0",
275	width: "100%",
276	height: "100%",
277	opacity: "0",
278	"z-index": "2",
279	background: buttonGradientHoverBg,
280	transition: "opacity .3s",
281	},
282	},
283	{
284	class: `#${uniqueId} .sp-smart-post-btn.btn-gradient:hover:before`,
285	styles: {
286	content: "''",
287	position: "absolute",
288	top: "0",
289	left: "0",
290	width: "100%",
291	height: "100%",
292	opacity: "1",
293	"z-index": "2",
294	background: buttonGradientHoverBg,
295	},
296	},
297	{
298	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip:hover `,
299	styles: {
300	"background-color": "transparent",
301	},
302	},
303
304	{
305	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip .button-label .back`,
306	styles: {
307	opacity: "1",
308	color: buttonLabelColor.hoverColor,
309	"background-color": buttonBgColor.hoverColor,
310	"border-style": buttonHoverBorder.style,
311	"border-color": buttonHoverBorder?.color,
312	display: "flex",
313	"justify-content": "center",
314	"align-items": "center",
315	},
316	},
317	{
318	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip:hover .button-label .back`,
319	styles: {
320	opacity: "1",
321	transform: "translateY(0%) rotateX(0deg)",
322	},
323	},
324
325	{
326	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip .button-label .front`,
327	styles: {
328	opacity: "1",
329	color: buttonLabelColor?.color,
330	"border-style": buttonBorder.style,
331	"border-color": buttonBorder?.color,
332	"background-color": buttonBgColor?.color,
333	width: "100%",
334	display: "flex",
335	"justify-content": "center",
336	"align-items": "center",
337	},
338	},
339
340	{
341	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip:hover .button-label .front`,
342	styles: {
343	opacity: "1",
344	transform: "translateY(50%) rotateX(90deg)",
345	},
346	},
347
348	{
349	class: `#${uniqueId} .sp-smart-post-btn.btn-default.gradShadow:hover`,
350	styles: {
351	"border-radius": spacingGenerate(buttonHoverBorderRadius),
352	},
353	},
354
355	{
356	class: `#${uniqueId} .sp-smart-post-btn.btn-default.gradShadow:hover::before, #${uniqueId} .sp-smart-post-btn.btn-default.gradShadow:hover::after`,
357	styles: {
358	"border-radius": spacingGenerate(buttonHoverBorderRadius),
359	},
360	},
361	{
362	class: `#${uniqueId} .sp-smart-post-btn.btn-default.raiseShadow:hover`,
363	styles: {
364	"box-shadow": `0 0.6em 0.5em -0.4em ${shadowColor}`,
365	transform: "translateY(-0.25em)",
366	},
367	},
368	{
369	class: `#${uniqueId} .sp-smart-post-btn.btn-default.gradShadow:after`,
370	styles: {
371	background: buttonBgColor?.color,
372	},
373	},
374	{
375	class: `#${uniqueId} .sp-smart-post-btn.btn-default.gradShadow:hover::after`,
376	styles: {
377	background: buttonBgColor.hoverColor,
378	},
379	},
380	{
381	class: `#${uniqueId} .sp-smart-post-btn.btn-default.gradShadow:active:after`,
382	styles: {
383	background: "transparent",
384	},
385	},
386	{
387	class: `#${uniqueId} .sp-smart-post-btn.btn-default.multiLayers:hover`,
388	styles: {
389	background: buttonBgColor.hoverColor,
390	"box-shadow": generateLayeredShadows(resolvedColor),
391	},
392	},
393	];
394	};
395
396	const responsiveCss = (deviceType) => {
397	const notFlipEffects =
398	hoverEffects !== "flip"
399	? [
400	{
401	class: `#${uniqueId} .sp-smart-post-btn`,
402	styles: {
403	padding: `${spacingGenerate(buttonPadding, deviceType)}`,
404	"border-width": `${spacingGenerate(buttonBorderWidth, deviceType)}`,
405	},
406	},
407	{
408	class: `#${uniqueId} .sp-smart-post-btn:hover`,
409	styles: {
410	"border-width": `${spacingGenerate(buttonHoverBorderWidth, deviceType)}`,
411	},
412	},
413	{
414	class: `#${uniqueId} .sp-smart-post-btn.btn-gradient:hover`,
415	styles: {
416	"border-width": `${spacingGenerate(buttonBorderGradientWidthHover, deviceType)}`,
417	},
418	},
419	]
420	: [];
421	return [
422	...notFlipEffects,
423	{
424	class: `#${uniqueId} .sp-smart-post-btn`,
425	styles: {
426	"border-radius": `${
427	["gradShadow", "flip"].includes(hoverEffects)
428	? ""
429	: spacingGenerate(buttonBorderRadius, deviceType)
430	}`,
431	"box-shadow": `${
432	["raiseShadow", "gradShadow", "neoFollow", "flip", "multiLayers"].includes(hoverEffects) \|\|
433	buttonStyle === "gradient"
434	? ""
435	: boxCss(buttonBoxShadowEnable, deviceType, buttonBoxShadow, "color")
436	}`,
437	},
438	},
439	{
440	class: `#${uniqueId} .sp-smart-post-btn:hover`,
441	styles: {
442	"border-radius": spacingGenerate(buttonHoverBorderRadius, deviceType),
443	},
444	},
445	// {
446	// class: `#${uniqueId} .sp-smart-post-btn.btn-gradient:hover`,
447	// styles: {
448	// "border-radius": spacingGenerate(buttonHoverBorderWidth, deviceType),
449	// },
450	// },
451	{
452	class: `#${uniqueId} .sp-smart-post-btn:hover`,
453	styles: {
454	"border-radius": `${
455	buttonStyle === "gradient"
456	? spacingGenerate(buttonBorderGradientRadiusHover, deviceType)
457	: spacingGenerate(buttonHoverBorderRadius, deviceType)
458	}`,
459
460	"box-shadow": `${
461	hoverEffects === "gradShadow" \|\|
462	hoverEffects === "flip" \|\|
463	hoverEffects === "neoFollow" \|\|
464	buttonStyle === "gradient"
465	? ""
466	: boxCss(buttonHoverBoxShadowEnable, deviceType, buttonHoverBoxShadow, "color")
467	}`,
468	},
469	},
470
471	{
472	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip .button-label .front`,
473	styles: {
474	"border-width": spacingGenerate(buttonBorderWidth, deviceType),
475	padding: spacingGenerate(buttonPadding, deviceType),
476	},
477	},
478	{
479	class: `#${uniqueId} .sp-smart-post-btn.btn-default.flip .button-label .back`,
480	styles: {
481	"border-width": spacingGenerate(buttonHoverBorderWidth, deviceType),
482	padding: spacingGenerate(buttonPadding, deviceType),
483	},
484	},
485	{
486	class: `#${uniqueId} .sp-smart-post-btn .sp-rich-text.sp-btn-label`,
487	styles: {
488	"font-size": rangerCss(buttonLabelFontSize, deviceType),
489	"line-height": buttonLabelLineHeight.device?.[deviceType],
490	"letter-spacing": rangerCss(buttonLabelLatterSpacing, deviceType),
491	"word-spacing": rangerCss(buttonLabelWordSpacing, deviceType),
492	},
493	},
494	{
495	class: `#${uniqueId} .sp-smart-post-btn .icon i svg`,
496	styles: {
497	width: rangerCss(smartBtnIconSize, deviceType),
498	height: rangerCss(smartBtnIconSize, deviceType),
499	},
500	},
501	{
502	class: `#${uniqueId} .sp-smart-post-btn .button-label .front , #${uniqueId} .sp-smart-post-btn .button-label .back`,
503	styles: {
504	gap: rangerCss(iconGap, deviceType),
505	},
506	},
507	];
508	};
509
510	const desktopCss = [
511	...responsiveCss("Desktop"),
512	...buttonCSS(),
513	...buttonLabelCSS(),
514	...buttonIconCss(),
515	...buttonDefaultHoverEffect(),
516	...buttonHoverEffectCss()
517	];
518
519	cacheCss.desktop = objectToCssString(desktopCss);
520
521	if ("Tablet" === currentDevice \|\| "all" === currentDevice) {
522	// Tablet CSS styles.
523	const tabletCss = [
524	...responsiveCss("Tablet")
525	];
526	cacheCss.tablet = wrapInMediaQuery(
527	objectToCssString(tabletCss),
528	`only screen and (max-width: ${globalBreakPointData?.tablet}px)`
529	);
530	}
531	if ("Mobile" === currentDevice \|\| "all" === currentDevice) {
532	// Mobile CSS styles.
533	const mobileCss = [
534	...responsiveCss("Mobile")
535	];
536	cacheCss.mobile = wrapInMediaQuery(
537	objectToCssString(mobileCss),
538	`only screen and (max-width: ${globalBreakPointData?.mobile}px)`
539	);
540	}
541
542	return `${cacheCss.desktop} ${cacheCss.tablet} ${cacheCss.mobile}`;
543	};
544
545	export default dynamicCss;
546