Block Animations, Motion & Scroll Effects – Ghost Kit / 3.7.0

Block Animations, Motion & Scroll Effects – Ghost Kit v3.7.0

ghostkit / gutenberg / utils / styles / index.js

index.js in Block Animations, Motion & Scroll Effects – Ghost Kit 3.7.0, at gutenberg/utils/styles/index.js

228 lines 5.3 KB

Raw Download Zip

1	// We can't use lodash merge, because it skip the specified undefined value
2	// which we use to reset styles.
3	import compactObject from '../compact-object';
4	import { maybeDecode, maybeEncode } from '../encode-decode';
5	import { getMediaSizes } from '../get-media-sizes';
6	import merge from '../merge';
7
8	/**
9	* Prepare and decode styles to work with.
10	*
11	* @param {Object} styles - styles object.
12	*
13	* @return {Object}
14	*/
15	export function prepareStyles(styles) {
16	return maybeDecode(styles);
17	}
18
19	/**
20	* Get style value by property name, selected device and optional selector.
21	*
22	* @param {Object} styles - styles object.
23	* @param {string} name - style property name.
24	* @param {string} device - responsive device.
25	* @param {string} selector - optional custom selector.
26	*
27	* @return {any}
28	*/
29	export function getStyle(styles, name, device = false, selector = false) {
30	let result;
31	let processStyles = prepareStyles(styles);
32
33	if (device) {
34	processStyles = processStyles?.[`media_${device}`];
35	}
36
37	if (selector) {
38	processStyles = processStyles?.[selector];
39	}
40
41	if (typeof processStyles?.[name] !== 'undefined') {
42	result = processStyles?.[name];
43	}
44
45	return result;
46	}
47
48	/**
49	* Check if style exists.
50	*
51	* @param {Object} styles - styles object.
52	* @param {string} name - style property name.
53	* @param {string} device - responsive device.
54	* @param {string} selector - optional custom selector.
55	*
56	* @return {boolean}
57	*/
58	export function hasStyle(styles, name, device = false, selector = false) {
59	return typeof getStyle(styles, name, device, selector) !== 'undefined';
60	}
61
62	/**
63	* Set new styles.
64	*
65	* @param {Object} styles - styles object.
66	* @param {string} name - style property name.
67	* @param newStyles
68	* @param {string} device - responsive device.
69	* @param {string} selector - optional custom selector.
70	*
71	* @return {boolean}
72	*/
73	export function getUpdatedStyles(
74	styles,
75	newStyles,
76	device = false,
77	selector = false
78	) {
79	let result;
80
81	if (selector) {
82	newStyles = { [selector]: newStyles };
83	}
84
85	if (device) {
86	result = {};
87	result[`media_${device}`] = newStyles;
88	} else {
89	result = newStyles;
90	}
91
92	// Add default properties to keep sorting.
93	result = merge(
94	{
95	media_xl: {},
96	media_lg: {},
97	media_md: {},
98	media_sm: {},
99	},
100	maybeDecode(styles),
101	result
102	);
103
104	const cleanResult = compactObject(result);
105
106	return maybeEncode(cleanResult);
107	}
108
109	/**
110	* Get object with styles to reset.
111	*
112	* @param {Array} resetProps - array with CSS props to reset.
113	* @param {boolean} withResponsive - reset responsive styles.
114	* @param {Selector} selectors - reset styles in custom selectors set.
115	*/
116	export function getStylesToReset(
117	resetProps,
118	withResponsive = false,
119	selectors = ['']
120	) {
121	const result = {};
122
123	selectors.forEach((selector) => {
124	if (selector) {
125	result[selector] = {};
126	}
127	});
128
129	['', ...(withResponsive ? Object.keys(getMediaSizes()) : [])].forEach(
130	(thisDevice) => {
131	if (thisDevice) {
132	result[`media_${thisDevice}`] = {};
133
134	selectors.forEach((selector) => {
135	if (selector) {
136	result[`media_${thisDevice}`][selector] = {};
137	}
138	});
139	}
140
141	resetProps.forEach((thisProp) => {
142	selectors.forEach((selector) => {
143	if (thisDevice) {
144	if (selector) {
145	result[`media_${thisDevice}`][selector][thisProp] =
146	undefined;
147	} else {
148	result[`media_${thisDevice}`][thisProp] = undefined;
149	}
150	} else if (selector) {
151	result[selector][thisProp] = undefined;
152	} else {
153	result[thisProp] = undefined;
154	}
155	});
156	});
157	}
158	);
159
160	return result;
161	}
162
163	/**
164	* Get object with styles of specific props.
165	*
166	* @param {Object} styles - styles object.
167	* @param {Array} findProps - array with CSS props to find.
168	* @param {boolean} withResponsive - reset responsive styles.
169	* @param {Selector} selectors - reset styles in custom selectors set.
170	*/
171	export function getSpecificPropsFromStyles(
172	styles,
173	findProps,
174	withResponsive = false,
175	selectors = ['']
176	) {
177	// Firs of all, prepare reset styles.
178	const result = getStylesToReset(findProps, withResponsive, selectors);
179
180	const decodedStyles = maybeDecode(styles \|\| {});
181
182	['', ...(withResponsive ? Object.keys(getMediaSizes()) : [])].forEach(
183	(thisDevice) => {
184	findProps.forEach((thisProp) => {
185	selectors.forEach((selector) => {
186	if (thisDevice) {
187	if (selector) {
188	if (
189	typeof decodedStyles?.[`media_${thisDevice}`]?.[
190	selector
191	]?.[thisProp] !== 'undefined'
192	) {
193	result[`media_${thisDevice}`][selector][
194	thisProp
195	] =
196	decodedStyles[`media_${thisDevice}`][
197	selector
198	][thisProp];
199	}
200	} else if (
201	typeof decodedStyles?.[`media_${thisDevice}`]?.[
202	thisProp
203	] !== 'undefined'
204	) {
205	result[`media_${thisDevice}`][thisProp] =
206	decodedStyles[`media_${thisDevice}`][thisProp];
207	}
208	} else if (selector) {
209	if (
210	typeof decodedStyles?.[selector]?.[thisProp] !==
211	'undefined'
212	) {
213	result[selector][thisProp] =
214	decodedStyles[selector][thisProp];
215	}
216	} else if (
217	typeof decodedStyles?.[thisProp] !== 'undefined'
218	) {
219	result[thisProp] = decodedStyles[thisProp];
220	}
221	});
222	});
223	}
224	);
225
226	return maybeEncode(result);
227	}
228