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

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

ghostkit / gutenberg / utils / styles / index.js

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

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