ablocks / includes / classes / style-effects.php

style-effects.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.13.0, at includes/classes/style-effects.php

314 lines 7.8 KB

Raw Download Zip

1	<?php
2	namespace ABlocks\Classes;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit;
6	}
7
8	/**
9	* Repeatable effects -> CSS.
10	*
11	* Mirror of the compile half of `src/blocks/atomic-shared/effects.js`. Box
12	* shadow, transform, transition and the two filter props are stored as arrays
13	* of structured entries (CSS accepts several of each), so they compile by
14	* formatting every entry and joining with that effect's separator.
15	*
16	* The editor computes a style hash over compiled output, so these formatters
17	* must match the JS ones character for character. The parity harness asserts
18	* exactly that.
19	*/
20	class StyleEffects {
21
22	/** How each effect's entries are joined into one CSS value. */
23	const JOIN = [
24	'boxShadow' => ', ',
25	'textShadow' => ', ',
26	'transform' => ' ',
27	'transition' => ', ',
28	'filter' => ' ',
29	'backdropFilter' => ' ',
30	];
31
32	/** Filter type -> unit and default, mirroring FILTER_TYPES in the JS. */
33	const FILTERS = [
34	'blur' => [
35	'unit' => 'px',
36	'def' => 0
37	],
38	'brightness' => [
39	'unit' => '%',
40	'def' => 100
41	],
42	'contrast' => [
43	'unit' => '%',
44	'def' => 100
45	],
46	'saturate' => [
47	'unit' => '%',
48	'def' => 100
49	],
50	'grayscale' => [
51	'unit' => '%',
52	'def' => 0
53	],
54	'sepia' => [
55	'unit' => '%',
56	'def' => 0
57	],
58	'invert' => [
59	'unit' => '%',
60	'def' => 0
61	],
62	'hue-rotate' => [
63	'unit' => 'deg',
64	'def' => 0
65	],
66	'opacity' => [
67	'unit' => '%',
68	'def' => 100
69	],
70	];
71
72	/**
73	* Whether a prop is a repeatable effect list.
74	*
75	* @param string $prop Prop name.
76	* @return bool Whether it is an effect list.
77	*/
78	public static function is_effect( $prop ) {
79	return isset( self::JOIN[ $prop ] );
80	}
81
82	/**
83	* A numeric entry field, falling back when absent or unparseable.
84	*
85	* @param mixed $value Raw stored value.
86	* @param float $fallback Fallback.
87	* @return float\|int The number.
88	*/
89	private static function num( $value, $fallback = 0 ) {
90	if ( is_numeric( $value ) ) {
91	return $value + 0;
92	}
93	return $fallback;
94	}
95
96	/**
97	* Trim a float the way JS number-to-string does (1.0 -> "1").
98	*
99	* @param mixed $value Number to format.
100	* @return string Formatted number.
101	*/
102	private static function n( $value ) {
103	$value = (float) $value;
104	return ( floor( $value ) === $value ) ? (string) (int) $value : (string) $value;
105	}
106
107	/**
108	* One shadow entry -> its CSS fragment.
109	*
110	* @param array $e Shadow entry.
111	* @return string CSS.
112	*/
113	private static function shadow_css( $e ) {
114	$parts = [
115	self::n( self::num( $e['x'] ?? 0 ) ) . 'px',
116	self::n( self::num( $e['y'] ?? 0 ) ) . 'px',
117	self::n( self::num( $e['blur'] ?? 10, 10 ) ) . 'px',
118	self::n( self::num( $e['spread'] ?? 0 ) ) . 'px',
119	! empty( $e['color'] ) ? $e['color'] : 'rgba(0, 0, 0, 0.5)',
120	];
121	$prefix = ( isset( $e['position'] ) && 'inset' === $e['position'] ) ? 'inset ' : '';
122	return $prefix . implode( ' ', $parts );
123	}
124
125	/**
126	* One text-shadow entry -> its CSS fragment.
127	*
128	* `text-shadow` takes no spread and no inset, so it is its own entry shape
129	* rather than a reuse of the box-shadow one.
130	*
131	* @param array $e Text shadow entry.
132	* @return string CSS.
133	*/
134	private static function text_shadow_css( $e ) {
135	return implode(
136	' ',
137	[
138	self::n( self::num( $e['x'] ?? 0 ) ) . 'px',
139	self::n( self::num( $e['y'] ?? 0 ) ) . 'px',
140	self::n( self::num( $e['blur'] ?? 4, 4 ) ) . 'px',
141	! empty( $e['color'] ) ? $e['color'] : 'rgba(0, 0, 0, 0.5)',
142	]
143	);
144	}
145
146	/**
147	* One transform entry -> its CSS function(s).
148	*
149	* @param array $e Transform entry.
150	* @return string CSS.
151	*/
152	private static function transform_css( $e ) {
153	$type = isset( $e['type'] ) ? $e['type'] : 'move';
154	$x = self::num( $e['x'] ?? 0 );
155	$y = self::num( $e['y'] ?? 0 );
156	$z = self::num( $e['z'] ?? 0 );
157
158	switch ( $type ) {
159	case 'scale':
160	// Scale defaults to 1, not 0 — a stored 0 would collapse the element.
161	$sx = self::n( self::num( $e['x'] ?? 1, 1 ) );
162	// One value driving every axis, which is how Elementor's scale
163	// behaves until you unlink it.
164	if ( ! isset( $e['proportional'] ) \|\| false !== $e['proportional'] ) {
165	return sprintf( 'scale3d(%s, %s, 1)', $sx, $sx );
166	}
167	return sprintf(
168	'scale3d(%s, %s, %s)',
169	$sx,
170	self::n( self::num( $e['y'] ?? 1, 1 ) ),
171	self::n( self::num( $e['z'] ?? 1, 1 ) )
172	);
173
174	case 'rotate':
175	// One rotation PER AXIS. The previous single `rotate3d(x, y, z, a)`
176	// collapsed three independent angles into one rotation about a
177	// diagonal axis, so entering X=45 and Y=30 rotated about neither.
178	$parts = [];
179	if ( $x ) {
180	$parts[] = sprintf( 'rotateX(%sdeg)', self::n( $x ) );
181	}
182	if ( $y ) {
183	$parts[] = sprintf( 'rotateY(%sdeg)', self::n( $y ) );
184	}
185	if ( $z ) {
186	$parts[] = sprintf( 'rotateZ(%sdeg)', self::n( $z ) );
187	}
188	return implode( ' ', $parts );
189
190	case 'skew':
191	return sprintf( 'skew(%sdeg, %sdeg)', self::n( $x ), self::n( $y ) );
192
193	case 'flip':
194	$axis = ! empty( $e['axis'] ) ? $e['axis'] : 'x';
195	if ( 'xy' === $axis ) {
196	return 'scaleX(-1) scaleY(-1)';
197	}
198	return 'y' === $axis ? 'scaleY(-1)' : 'scaleX(-1)';
199
200	default:
201	// Z stays a px length — percentages are invalid on translateZ.
202	$unit = ! empty( $e['unit'] ) ? $e['unit'] : 'px';
203	return sprintf(
204	'translate3d(%s%s, %s%s, %spx)',
205	self::n( $x ),
206	$unit,
207	self::n( $y ),
208	$unit,
209	self::n( $z )
210	);
211	}//end switch
212	}
213
214	/**
215	* One transition entry -> its CSS fragment.
216	*
217	* @param array $e Transition entry.
218	* @return string CSS.
219	*/
220	private static function transition_css( $e ) {
221	$parts = [
222	! empty( $e['property'] ) ? $e['property'] : 'all',
223	self::n( self::num( $e['duration'] ?? 200, 200 ) ) . 'ms',
224	! empty( $e['easing'] ) ? $e['easing'] : 'ease',
225	];
226	$delay = self::num( $e['delay'] ?? 0 );
227	if ( $delay ) {
228	$parts[] = self::n( $delay ) . 'ms';
229	}
230	return implode( ' ', $parts );
231	}
232
233	/**
234	* One filter entry -> its CSS function.
235	*
236	* @param array $e Filter entry.
237	* @return string CSS.
238	*/
239	private static function filter_css( $e ) {
240	$type = isset( $e['type'], self::FILTERS[ $e['type'] ] ) ? $e['type'] : 'blur';
241	$meta = self::FILTERS[ $type ];
242	return sprintf(
243	'%s(%s%s)',
244	$type,
245	self::n( self::num( $e['value'] ?? $meta['def'], $meta['def'] ) ),
246	$meta['unit']
247	);
248	}
249
250	/**
251	* One entry -> its CSS fragment.
252	*
253	* @param string $prop Effect prop name.
254	* @param mixed $entry Stored entry.
255	* @return string CSS.
256	*/
257	private static function entry_css( $prop, $entry ) {
258	if ( ! is_array( $entry ) ) {
259	return '';
260	}
261	switch ( $prop ) {
262	case 'boxShadow':
263	return self::shadow_css( $entry );
264	case 'textShadow':
265	return self::text_shadow_css( $entry );
266	case 'transform':
267	return self::transform_css( $entry );
268	case 'transition':
269	return self::transition_css( $entry );
270	case 'filter':
271	case 'backdropFilter':
272	return self::filter_css( $entry );
273	}
274	return '';
275	}
276
277	/**
278	* A list of entries -> one CSS value, or '' when there is nothing to emit.
279	*
280	* @param string $prop Effect prop name.
281	* @param mixed $entries Stored entries.
282	* @return string The CSS value.
283	*/
284	public static function to_css( $prop, $entries ) {
285	if ( ! self::is_effect( $prop ) ) {
286	return '';
287	}
288
289	// These props used to hold a raw CSS string. Pass one through rather
290	// than dropping it silently, so anything authored before the repeater
291	// still renders.
292	if ( is_string( $entries ) ) {
293	return trim( $entries );
294	}
295
296	if ( ! is_array( $entries ) \|\| empty( $entries ) ) {
297	return '';
298	}
299
300	$out = [];
301	foreach ( $entries as $entry ) {
302	if ( is_array( $entry ) && ! empty( $entry['disabled'] ) ) {
303	continue;
304	}
305	$css = self::entry_css( $prop, $entry );
306	if ( '' !== $css ) {
307	$out[] = $css;
308	}
309	}
310
311	return empty( $out ) ? '' : implode( self::JOIN[ $prop ], $out );
312	}
313	}
314