← All changes | modules/atomic-widgets/styles/styles-renderer.php +21 -75 4.1.5 → 3.26.4 View file →

		@@ -2,54 +2,39 @@
2	2
3	3	namespace Elementor\Modules\AtomicWidgets\Styles;
4	4
5	5	use Elementor\Core\Utils\Collection;
6		-use Elementor\Modules\AtomicWidgets\Module;
7		-use Elementor\Plugin;
8		-use Elementor\Utils;
9		-use Elementor\Modules\AtomicWidgets\PropsResolver\Render_Props_Resolver;
	6	+use Elementor\Modules\AtomicWidgets\PropsResolver\Props_Resolver;
10	7
11	8	class Styles_Renderer {
12		- const DEFAULT_SELECTOR_PREFIX = '.elementor';
13		-
14	9	/**
15		- * @var array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}>
	10	+ * @var array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}> $breakpoints
16	11	*/
17	12	private array $breakpoints;
18	13
19		- private $on_prop_transform;
20		-
21		- private string $selector_prefix;
22		-
23	14	/**
24		- * @param array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}> $breakpoints
25		- * @param string $selector_prefix
	15	+ * Styles_Renderer constructor.
	16	+ *
	17	+ * @param array{
	18	+ * breakpoints: array<string, array{direction: 'min' | 'max', value: int, is_enabled: boolean}>
	19	+ * } $config
26	20	*/
27		- private function __construct( array $breakpoints, string $selector_prefix = self::DEFAULT_SELECTOR_PREFIX ) {
28		- $this->breakpoints = $breakpoints;
29		- $this->selector_prefix = $selector_prefix;
	21	+ public function __construct( array $config ) {
	22	+ $this->breakpoints = $config['breakpoints'];
30	23	}
31	24
32		- public static function make( array $breakpoints, string $selector_prefix = self::DEFAULT_SELECTOR_PREFIX ): self {
33		- return new self( $breakpoints, $selector_prefix );
34		- }
35		-
36	25	/**
37	26	* Render the styles to a CSS string.
38	27	*
39		- * Styles format:
40		- * array<int, array{
	28	+ * @param array<int, array{
41	29	* id: string,
42	30	* type: string,
43		- * cssName: string | null,
44	31	* variants: array<int, array{
45	32	* props: array<string, mixed>,
46	33	* meta: array<string, mixed>
47	34	* }>
48		- * }>
	35	+ * }> $styles Array of style definitions.
49	36	*
50		- * @param array $styles Array of style definitions.
51		- *
52	37	* @return string Rendered CSS string.
53	38	*/
54	39	public function render( array $styles ): string {
55	40	$css_style = [];
		@@ -61,14 +46,8 @@
61	46
62	47	return implode( '', $css_style );
63	48	}
64	49
65		- public function on_prop_transform( callable $callback ): self {
66		- $this->on_prop_transform = $callback;
67		-
68		- return $this;
69		- }
70		-
71	50	private function style_definition_to_css_string( array $style ): string {
72	51	$base_selector = $this->get_base_selector( $style );
73	52
74	53	if ( ! $base_selector ) {
		@@ -98,17 +77,9 @@
98	77	isset( $style_def['id'] ) &&
99	78	isset( $map[ $style_def['type'] ] ) &&
100	79	$style_def['id']
101	80	) {
102		- $type = $map[ $style_def['type'] ];
103		- $name = $style_def['cssName'] ?? $style_def['id'];
104		-
105		- $selector_parts = array_filter( [
106		- $this->selector_prefix,
107		- "{$type}{$name}",
108		- ] );
109		-
110		- return implode( ' ', $selector_parts );
	81	+ return $map[ $style_def['type'] ] . $style_def['id'];
111	82	}
112	83
113	84	return null;
114	85	}
		@@ -113,22 +84,18 @@
113	84	return null;
114	85	}
115	86
116	87	private function variant_to_css_string( string $base_selector, array $variant ): string {
117		- $css = $this->props_to_css_string( $variant['props'] ) ?? '';
118		- $custom_css = $this->custom_css_to_css_string( $variant['custom_css'] ?? null );
	88	+ $css = $this->props_to_css_string( $variant['props'] );
119	89
120		- if ( ! $css && ! $custom_css ) {
	90	+ if ( ! $css ) {
121	91	return '';
122	92	}
123	93
124		- if ( isset( $variant['meta']['state'] ) ) {
125		- $selector = Style_States::get_selector_with_state( $base_selector, $variant['meta']['state'] );
126		- } else {
127		- $selector = $base_selector;
128		- }
	94	+ $state = isset( $variant['meta']['state'] ) ? ':' . $variant['meta']['state'] : '';
	95	+ $selector = $base_selector . $state;
129	96
130		- $style_declaration = $selector . '{' . $css . $custom_css . '}';
	97	+ $style_declaration = $selector . '{' . $css . '}';
131	98
132	99	if ( isset( $variant['meta']['breakpoint'] ) ) {
133	100	$style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration );
134	101	}
		@@ -135,30 +102,19 @@
135	102
136	103	return $style_declaration;
137	104	}
138	105
139		-
140	106	private function props_to_css_string( array $props ): string {
141	107	$schema = Style_Schema::get();
142	108
143		- return Collection::make( Render_Props_Resolver::for_styles()->resolve( $schema, $props ) )
	109	+ return Collection::make( Props_Resolver::for_styles()->resolve( $schema, $props ) )
144	110	->filter()
145	111	->map( function ( $value, $prop ) {
146		- if ( $this->on_prop_transform ) {
147		- call_user_func( $this->on_prop_transform, $prop, $value );
148		- }
149		-
150	112	return $prop . ':' . $value . ';';
151	113	} )
152	114	->implode( '' );
153	115	}
154	116
155		- private function custom_css_to_css_string( ?array $custom_css ): string {
156		- return ! empty( $custom_css['raw'] )
157		- ? Utils::decode_string( $custom_css['raw'], '' ) . '\n'
158		- : '';
159		- }
160		-
161	117	private function wrap_with_media_query( string $breakpoint_id, string $css ): string {
162	118	if ( ! isset( $this->breakpoints[ $breakpoint_id ] ) ) {
163	119	return $css;
164	120	}
		@@ -167,24 +123,14 @@
167	123	if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
168	124	return '';
169	125	}
170	126
171		- $query = $this->get_media_query( $this->breakpoints[ $breakpoint_id ] );
	127	+ $size = $this->get_breakpoint_size( $this->breakpoints[ $breakpoint_id ] );
172	128
173		- return $query ? $query . '{' . $css . '}' : $css;
	129	+ return $size ? '@media(' . $size . '){' . $css . '}' : $css;
174	130	}
175	131
176		- public static function get_media_query( $breakpoint ): ?string {
177		- if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
178		- return null;
179		- }
180		-
181		- $size = self::get_breakpoint_size( $breakpoint );
182		-
183		- return $size ? '@media(' . $size . ')' : null;
184		- }
185		-
186		- private static function get_breakpoint_size( array $breakpoint ): ?string {
	132	+ private function get_breakpoint_size( array $breakpoint ): ?string {
187	133	$bound = 'min' === $breakpoint['direction'] ? 'min-width' : 'max-width';
188	134	$width = $breakpoint['value'] . 'px';
189	135
190	136	return "{$bound}:{$width}";