elementor / modules / atomic-widgets / styles / styles-renderer.php

styles-renderer.php in Elementor Website Builder – more than just a page builder 3.26.4, at modules/atomic-widgets/styles/styles-renderer.php

139 lines 3.4 KB

Raw Download Zip

1	<?php
2
3	namespace Elementor\Modules\AtomicWidgets\Styles;
4
5	use Elementor\Core\Utils\Collection;
6	use Elementor\Modules\AtomicWidgets\PropsResolver\Props_Resolver;
7
8	class Styles_Renderer {
9	/**
10	* @var array<string, array{direction: 'min' \| 'max', value: int, is_enabled: boolean}> $breakpoints
11	*/
12	private array $breakpoints;
13
14	/**
15	* Styles_Renderer constructor.
16	*
17	* @param array{
18	* breakpoints: array<string, array{direction: 'min' \| 'max', value: int, is_enabled: boolean}>
19	* } $config
20	*/
21	public function __construct( array $config ) {
22	$this->breakpoints = $config['breakpoints'];
23	}
24
25	/**
26	* Render the styles to a CSS string.
27	*
28	* @param array<int, array{
29	* id: string,
30	* type: string,
31	* variants: array<int, array{
32	* props: array<string, mixed>,
33	* meta: array<string, mixed>
34	* }>
35	* }> $styles Array of style definitions.
36	*
37	* @return string Rendered CSS string.
38	*/
39	public function render( array $styles ): string {
40	$css_style = [];
41
42	foreach ( $styles as $style_def ) {
43	$style = $this->style_definition_to_css_string( $style_def );
44	$css_style[] = $style;
45	}
46
47	return implode( '', $css_style );
48	}
49
50	private function style_definition_to_css_string( array $style ): string {
51	$base_selector = $this->get_base_selector( $style );
52
53	if ( ! $base_selector ) {
54	return '';
55	}
56
57	$stylesheet = [];
58
59	foreach ( $style['variants'] as $variant ) {
60	$style_declaration = $this->variant_to_css_string( $base_selector, $variant );
61
62	if ( $style_declaration ) {
63	$stylesheet[] = $style_declaration;
64	}
65	}
66
67	return implode( '', $stylesheet );
68	}
69
70	private function get_base_selector( array $style_def ): ?string {
71	$map = [
72	'class' => '.',
73	];
74
75	if (
76	isset( $style_def['type'] ) &&
77	isset( $style_def['id'] ) &&
78	isset( $map[ $style_def['type'] ] ) &&
79	$style_def['id']
80	) {
81	return $map[ $style_def['type'] ] . $style_def['id'];
82	}
83
84	return null;
85	}
86
87	private function variant_to_css_string( string $base_selector, array $variant ): string {
88	$css = $this->props_to_css_string( $variant['props'] );
89
90	if ( ! $css ) {
91	return '';
92	}
93
94	$state = isset( $variant['meta']['state'] ) ? ':' . $variant['meta']['state'] : '';
95	$selector = $base_selector . $state;
96
97	$style_declaration = $selector . '{' . $css . '}';
98
99	if ( isset( $variant['meta']['breakpoint'] ) ) {
100	$style_declaration = $this->wrap_with_media_query( $variant['meta']['breakpoint'], $style_declaration );
101	}
102
103	return $style_declaration;
104	}
105
106	private function props_to_css_string( array $props ): string {
107	$schema = Style_Schema::get();
108
109	return Collection::make( Props_Resolver::for_styles()->resolve( $schema, $props ) )
110	->filter()
111	->map( function ( $value, $prop ) {
112	return $prop . ':' . $value . ';';
113	} )
114	->implode( '' );
115	}
116
117	private function wrap_with_media_query( string $breakpoint_id, string $css ): string {
118	if ( ! isset( $this->breakpoints[ $breakpoint_id ] ) ) {
119	return $css;
120	}
121
122	$breakpoint = $this->breakpoints[ $breakpoint_id ];
123	if ( isset( $breakpoint['is_enabled'] ) && ! $breakpoint['is_enabled'] ) {
124	return '';
125	}
126
127	$size = $this->get_breakpoint_size( $this->breakpoints[ $breakpoint_id ] );
128
129	return $size ? '@media(' . $size . '){' . $css . '}' : $css;
130	}
131
132	private function get_breakpoint_size( array $breakpoint ): ?string {
133	$bound = 'min' === $breakpoint['direction'] ? 'min-width' : 'max-width';
134	$width = $breakpoint['value'] . 'px';
135
136	return "{$bound}:{$width}";
137	}
138	}
139