← All changes | modules/atomic-widgets/styles/styles-renderer.php +23 -73 4.0.7 → 3.27.4 View file →

		@@ -2,54 +2,43 @@
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 );
	25	+ public static function make( array $config ): self {
	26	+ return new self( $config );
34	27	}
35	28
36	29	/**
37	30	* Render the styles to a CSS string.
38	31	*
39		- * Styles format:
40		- * array<int, array{
	32	+ * @param array<int, array{
41	33	* id: string,
42	34	* type: string,
43		- * cssName: string | null,
44	35	* variants: array<int, array{
45	36	* props: array<string, mixed>,
46	37	* meta: array<string, mixed>
47	38	* }>
48		- * }>
	39	+ * }> $styles Array of style definitions.
49	40	*
50		- * @param array $styles Array of style definitions.
51		- *
52	41	* @return string Rendered CSS string.
53	42	*/
54	43	public function render( array $styles ): string {
55	44	$css_style = [];
		@@ -61,14 +50,8 @@
61	50
62	51	return implode( '', $css_style );
63	52	}
64	53
65		- public function on_prop_transform( callable $callback ): self {
66		- $this->on_prop_transform = $callback;
67		-
68		- return $this;
69		- }
70		-
71	54	private function style_definition_to_css_string( array $style ): string {
72	55	$base_selector = $this->get_base_selector( $style );
73	56
74	57	if ( ! $base_selector ) {
		@@ -98,17 +81,9 @@
98	81	isset( $style_def['id'] ) &&
99	82	isset( $map[ $style_def['type'] ] ) &&
100	83	$style_def['id']
101	84	) {
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 );
	85	+ return $map[ $style_def['type'] ] . $style_def['id'];
111	86	}
112	87
113	88	return null;
114	89	}
		@@ -113,22 +88,18 @@
113	88	return null;
114	89	}
115	90
116	91	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 );
	92	+ $css = $this->props_to_css_string( $variant['props'] );
119	93
120		- if ( ! $css && ! $custom_css ) {
	94	+ if ( ! $css ) {
121	95	return '';
122	96	}
123	97
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		- }
	98	+ $state = isset( $variant['meta']['state'] ) ? ':' . $variant['meta']['state'] : '';
	99	+ $selector = $base_selector . $state;
129	100
130		- $style_declaration = $selector . '{' . $css . $custom_css . '}';
	101	+ $style_declaration = $selector . '{' . $css . '}';
131	102
132	103	if ( isset( $variant['meta']['breakpoint'] ) ) {
133	104	$style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration );
134	105	}
		@@ -135,30 +106,19 @@
135	106
136	107	return $style_declaration;
137	108	}
138	109
139		-
140	110	private function props_to_css_string( array $props ): string {
141	111	$schema = Style_Schema::get();
142	112
143		- return Collection::make( Render_Props_Resolver::for_styles()->resolve( $schema, $props ) )
	113	+ return Collection::make( Props_Resolver::for_styles()->resolve( $schema, $props ) )
144	114	->filter()
145	115	->map( function ( $value, $prop ) {
146		- if ( $this->on_prop_transform ) {
147		- call_user_func( $this->on_prop_transform, $prop, $value );
148		- }
149		-
150	116	return $prop . ':' . $value . ';';
151	117	} )
152	118	->implode( '' );
153	119	}
154	120
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	121	private function wrap_with_media_query( string $breakpoint_id, string $css ): string {
162	122	if ( ! isset( $this->breakpoints[ $breakpoint_id ] ) ) {
163	123	return $css;
164	124	}
		@@ -167,24 +127,14 @@
167	127	if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
168	128	return '';
169	129	}
170	130
171		- $query = $this->get_media_query( $this->breakpoints[ $breakpoint_id ] );
	131	+ $size = $this->get_breakpoint_size( $this->breakpoints[ $breakpoint_id ] );
172	132
173		- return $query ? $query . '{' . $css . '}' : $css;
	133	+ return $size ? '@media(' . $size . '){' . $css . '}' : $css;
174	134	}
175	135
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 {
	136	+ private function get_breakpoint_size( array $breakpoint ): ?string {
187	137	$bound = 'min' === $breakpoint['direction'] ? 'min-width' : 'max-width';
188	138	$width = $breakpoint['value'] . 'px';
189	139
190	140	return "{$bound}:{$width}";