sliderberg / shared / src / components / utils / styling-helpers.ts

styling-helpers.ts in Slider Block by Sliderberg – WordPress Slider & Carousel Plugin for Gutenberg 1.2.3, at shared/src/components/utils/styling-helpers.ts

237 lines 5.5 KB

Raw Download Zip

1	/**
2	* Styling helper utilities for shared components
3	*/
4
5	import { omitBy, isUndefined, trim, isEmpty } from "lodash";
6
7	interface BorderRadius {
8	topLeft?: string \| number;
9	topRight?: string \| number;
10	bottomLeft?: string \| number;
11	bottomRight?: string \| number;
12	}
13
14	interface Border {
15	[key: string]: {
16	width?: string;
17	style?: string;
18	color?: string;
19	};
20	}
21
22	interface Shadow {
23	preset?: string;
24	shadow?: string;
25	horizontal?: number;
26	vertical?: number;
27	blur?: number;
28	spread?: number;
29	color?: string;
30	inset?: boolean;
31	}
32
33	/**
34	* Check if border radius values are mixed (single string value)
35	*
36	* @param values - Border radius values
37	* @returns True if values are mixed (string), false otherwise
38	*/
39	export function hasMixedValues(
40	values: Record<string, any> \| string = {}
41	): boolean {
42	return typeof values === "string";
43	}
44
45	/**
46	* Split border radius value into individual corners
47	* If value is a string, applies same value to all corners
48	*
49	* @param value - Border radius value (string or object)
50	* @returns Object with topLeft, topRight, bottomLeft, bottomRight values
51	*/
52	export function splitBorderRadius(value: string \| BorderRadius): BorderRadius {
53	const isValueMixed = hasMixedValues(value);
54	const splittedBorderRadius: BorderRadius = {
55	topLeft: value,
56	topRight: value,
57	bottomLeft: value,
58	bottomRight: value,
59	};
60	return isValueMixed ? splittedBorderRadius : (value as BorderRadius);
61	}
62
63	function hasSplitBorders(border: Record<string, any> = {}): boolean {
64	const sides = ["top", "right", "bottom", "left"];
65
66	for (const side in border) {
67	if (sides.includes(side)) {
68	return true;
69	}
70	}
71
72	return false;
73	}
74
75	/**
76	* Checks if given value is a spacing preset.
77	*
78	* @param value Value to check
79	* @return Return true if value is string in format var:preset\|spacing\|.
80	*/
81	export function isValueSpacingPreset(value: string \| undefined): boolean {
82	if (!value?.includes) {
83	return false;
84	}
85	return value === "0" \|\| value.includes("var:preset\|spacing\|");
86	}
87
88	/**
89	* Converts a spacing preset into a custom value.
90	*
91	* @param value Value to convert.
92	* @return CSS var string for given spacing preset value.
93	*/
94	export function getSpacingPresetCssVar(
95	value: string \| undefined
96	): string \| undefined {
97	if (!value) {
98	return;
99	}
100
101	const slug = value.match(/var:preset\\|spacing\\|(.+)/);
102
103	if (!slug) {
104	return value;
105	}
106
107	return `var(--wp--preset--spacing--${slug[1]})`;
108	}
109
110	/**
111	* Generates CSS box-shadow value from shadow object.
112	*
113	* @param shadow Shadow object with settings
114	* @return CSS box-shadow value
115	*/
116	export function getBoxShadowCss(shadow: Shadow): string \| undefined {
117	if (isEmpty(shadow)) {
118	return undefined;
119	}
120
121	// Handle preset shadows with direct shadow values
122	if (shadow.preset && shadow.preset !== "custom" && shadow.shadow) {
123	return shadow.shadow;
124	}
125
126	if (shadow.preset && shadow.preset !== "custom" && !shadow.color) {
127	return undefined;
128	}
129
130	const {
131	horizontal = 0,
132	vertical = 0,
133	blur = 0,
134	spread = 0,
135	color = "rgba(0, 0, 0, 0.2)",
136	inset = false,
137	} = shadow;
138
139	return `${
140	inset ? "inset " : ""
141	}${horizontal}px ${vertical}px ${blur}px ${spread}px ${color}`;
142	}
143
144	export function getSpacingCss(
145	object: Record<string, any>
146	): Record<string, any> {
147	let css: Record<string, any> = {};
148	if (!object) {
149	return css;
150	}
151	for (const [key, value] of Object.entries(object)) {
152	if (isValueSpacingPreset(value)) {
153	css[key] = getSpacingPresetCssVar(value);
154	} else {
155	css[key] = value;
156	}
157	}
158	return css;
159	}
160
161	/**
162	* Function that's help you to generate splitted or non splitted border CSS.
163	* @param object border attributes
164	* @return A css object
165	*/
166	export const getBorderCSS = (
167	object: Record<string, any>
168	): Record<string, any> => {
169	let css: Record<string, any> = {};
170
171	if (!hasSplitBorders(object)) {
172	css["top"] = object;
173	css["right"] = object;
174	css["bottom"] = object;
175	css["left"] = object;
176	return css;
177	}
178	return object;
179	};
180
181	export function getSingleSideBorderValue(
182	border: Record<string, any>,
183	side: string
184	): string {
185	const hasWidth = !isEmpty(border[side]?.width);
186	return `${border[side]?.width ?? ""} ${
187	hasWidth && isEmpty(border[side]?.style)
188	? "solid"
189	: border[side]?.style ?? ""
190	} ${hasWidth && isEmpty(border[side]?.color) ? "" : border[side]?.color}`;
191	}
192
193	export function getBorderVariablesCss(
194	border: Record<string, any>,
195	slug: string
196	): Record<string, string> {
197	const borderInFourDimension = getBorderCSS(border);
198	const borderSides = ["top", "right", "bottom", "left"];
199	let borders: Record<string, string> = {};
200	for (let i = 0; i < borderSides.length; i++) {
201	const side = borderSides[i];
202	const sideProperty = `--sliderberg-${slug}-border-${side}`;
203	const sideValue = getSingleSideBorderValue(borderInFourDimension, side);
204	borders[sideProperty] = sideValue;
205	}
206
207	return borders;
208	}
209
210	export function generateStyles(
211	styles: Record<string, any>
212	): Record<string, any> {
213	return omitBy(
214	styles,
215	(value: any) =>
216	value === false \|\|
217	isEmpty(value) \|\|
218	isUndefined(value) \|\|
219	trim(value) === "" \|\|
220	trim(value) === "undefined undefined undefined"
221	);
222	}
223
224	export function getBackgroundColorVar(
225	attributes: Record<string, any>,
226	bgColorAttrKey: string,
227	gradientAttrKey: string
228	): string {
229	if (!isEmpty(attributes[bgColorAttrKey])) {
230	return attributes[bgColorAttrKey];
231	} else if (!isEmpty(attributes[gradientAttrKey])) {
232	return attributes[gradientAttrKey];
233	} else {
234	return "";
235	}
236	}
237