elementor / core / breakpoints / manager.php

manager.php in Elementor Website Builder – more than just a page builder 3.4.2, at core/breakpoints/manager.php

509 lines 14.7 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Core\Breakpoints;
3
4	use Elementor\Core\Base\Module;
5	use Elementor\Core\Kits\Documents\Tabs\Settings_Layout;
6	use Elementor\Core\Responsive\Files\Frontend;
7	use Elementor\Plugin;
8
9	if ( ! defined( 'ABSPATH' ) ) {
10	exit; // Exit if accessed directly.
11	}
12
13	class Manager extends Module {
14
15	const BREAKPOINT_SETTING_PREFIX = 'viewport_';
16	const BREAKPOINT_KEY_MOBILE = 'mobile';
17	const BREAKPOINT_KEY_MOBILE_EXTRA = 'mobile_extra';
18	const BREAKPOINT_KEY_TABLET = 'tablet';
19	const BREAKPOINT_KEY_TABLET_EXTRA = 'tablet_extra';
20	const BREAKPOINT_KEY_LAPTOP = 'laptop';
21	const BREAKPOINT_KEY_DESKTOP = 'desktop';
22	const BREAKPOINT_KEY_WIDESCREEN = 'widescreen';
23
24	/**
25	* Breakpoints
26	*
27	* An array containing instances of the all of the system's available breakpoints.
28	*
29	* @since 3.2.0
30	* @access private
31	*
32	* @var Breakpoint[]
33	*/
34	private $breakpoints;
35
36	/**
37	* Active Breakpoints
38	*
39	* An array containing instances of the enabled breakpoints.
40	*
41	* @since 3.2.0
42	* @access private
43	*
44	* @var Breakpoint[]
45	*/
46	private $active_breakpoints;
47
48	/**
49	* Responsive Control Duplication Mode.
50	*
51	* Determines the current responsive control generation mode.
52	* Options are:
53	* -- 'on': Responsive controls are duplicated in `add_responsive_control()`.
54	* -- 'off': Responsive controls are NOT duplicated in `add_responsive_control()`.
55	* -- 'dynamic': Responsive controls are only duplicated if their config contains `'dynamic' => 'active' => true`.
56	*
57	* When generating Post CSS, the mode is set to 'on'. When generating Dynamic CSS, the mode is set to 'dynamic'.
58	*
59	* default value is 'off'.
60	*
61	* @since 3.4.0
62	* @access private
63	*
64	* @var string
65	*/
66	private $responsive_control_duplication_mode = 'off';
67
68	private $icons_map;
69
70	public function get_name() {
71	return 'breakpoints';
72	}
73
74	/**
75	* Get Breakpoints
76	*
77	* Retrieve the array containing instances of all breakpoints existing in the system, or a single breakpoint if a
78	* name is passed.
79	*
80	* @since 3.2.0
81	*
82	* @param $breakpoint_name
83	* @return Breakpoint[]\|Breakpoint
84	*/
85	public function get_breakpoints( $breakpoint_name = null ) {
86	if ( ! $this->breakpoints ) {
87	$this->init_breakpoints();
88	}
89	return self::get_items( $this->breakpoints, $breakpoint_name );
90	}
91
92	/**
93	* Get Active Breakpoints
94	*
95	* Retrieve the array of --enabled-- breakpoints, or a single breakpoint if a name is passed.
96	*
97	* @since 3.2.0
98	*
99	* @param string\|null $breakpoint_name
100	* @return Breakpoint[]\|Breakpoint
101	*/
102	public function get_active_breakpoints( $breakpoint_name = null ) {
103	if ( ! $this->active_breakpoints ) {
104	$this->init_active_breakpoints();
105	}
106
107	return self::get_items( $this->active_breakpoints, $breakpoint_name );
108	}
109
110	/**
111	* Get Active Devices List
112	*
113	* Retrieve an array containing the keys of all active devices, including 'desktop'.
114	*
115	* @since 3.2.0
116	*
117	* @param array $args
118	* @return array
119	*/
120	public function get_active_devices_list( $args = [] ) {
121	$default_args = [
122	'add_desktop' => true,
123	'reverse' => false,
124	];
125
126	$args = array_merge( $default_args, $args );
127
128	$active_devices = array_keys( Plugin::$instance->breakpoints->get_active_breakpoints() );
129
130	if ( $args['add_desktop'] ) {
131	// Insert the 'desktop' device in the correct position.
132	if ( in_array( 'widescreen', $active_devices, true ) ) {
133	$widescreen_index = array_search( 'widescreen', $active_devices, true );
134
135	array_splice( $active_devices, $widescreen_index, 0, [ 'desktop' ] );
136	} else {
137	$active_devices[] = 'desktop';
138	}
139	}
140
141	if ( $args['reverse'] ) {
142	$active_devices = array_reverse( $active_devices );
143	}
144
145	return $active_devices;
146	}
147
148	/** Has Custom Breakpoints
149	*
150	* Checks whether there are currently custom breakpoints saved in the database.
151	* Returns true if there are breakpoint values saved in the active kit.
152	* If the user has activated any additional custom breakpoints (mobile extra, tablet extra, laptop, widescreen) -
153	* that is considered as having custom breakpoints.
154	*
155	* @since 3.2.0
156	*
157	* @return boolean
158	*/
159	public function has_custom_breakpoints() {
160	$breakpoints = $this->get_active_breakpoints();
161
162	$additional_breakpoints = [
163	self::BREAKPOINT_KEY_MOBILE_EXTRA,
164	self::BREAKPOINT_KEY_TABLET_EXTRA,
165	self::BREAKPOINT_KEY_LAPTOP,
166	self::BREAKPOINT_KEY_WIDESCREEN,
167	];
168
169	foreach ( $breakpoints as $breakpoint_name => $breakpoint ) {
170	if ( in_array( $breakpoint_name, $additional_breakpoints, true ) ) {
171	return true;
172	}
173
174	/** @var Breakpoint $breakpoint */
175	if ( $breakpoint->is_custom() ) {
176	return true;
177	}
178	}
179
180	return false;
181	}
182
183	/**
184	* Get Device Min Breakpoint
185	*
186	* For a given device, return the minimum possible breakpoint. Except for the cases of mobile and widescreen
187	* devices, A device's min breakpoint is determined by the previous device's max breakpoint + 1px.
188	*
189	* @since 3.2.0
190	*
191	* @param string $device_name
192	* @return int the min breakpoint of the passed device
193	*/
194	public function get_device_min_breakpoint( $device_name ) {
195	if ( 'desktop' === $device_name ) {
196	return $this->get_desktop_min_point();
197	}
198
199	$active_breakpoints = $this->get_active_breakpoints();
200	$current_device_breakpoint = $active_breakpoints[ $device_name ];
201
202	// Since this method is called multiple times, usage of class variables is to memory and processing time.
203	// Get only the keys for active breakpoints.
204	$breakpoint_keys = array_keys( $active_breakpoints );
205
206	if ( $breakpoint_keys[0] === $device_name ) {
207	// For the lowest breakpoint, the min point is always 320.
208	$min_breakpoint = 320;
209	} elseif ( 'min' === $current_device_breakpoint->get_direction() ) {
210	// 'min-width' breakpoints only have a minimum point. The breakpoint value itself the device min point.
211	$min_breakpoint = $current_device_breakpoint->get_value();
212	} else {
213	// This block handles all other devices.
214	$device_name_index = array_search( $device_name, $breakpoint_keys, true );
215
216	$previous_index = $device_name_index - 1;
217	$previous_breakpoint_key = $breakpoint_keys[ $previous_index ];
218	/** @var Breakpoint $previous_breakpoint */
219	$previous_breakpoint = $active_breakpoints[ $previous_breakpoint_key ];
220
221	$min_breakpoint = $previous_breakpoint->get_value() + 1;
222	}
223
224	return $min_breakpoint;
225	}
226
227	/**
228	* Get Desktop Min Breakpoint
229	*
230	* Returns the minimum possible breakpoint for the default (desktop) device.
231	*
232	* @since 3.2.0
233	*
234	* @return int the min breakpoint of the passed device
235	*/
236	public function get_desktop_min_point() {
237	$active_breakpoints = $this->get_active_breakpoints();
238	$desktop_previous_device = $this->get_desktop_previous_device_key();
239
240	return $active_breakpoints[ $desktop_previous_device ]->get_value() + 1;
241	}
242
243	public function refresh() {
244	$this->init_breakpoints();
245	$this->init_active_breakpoints();
246	}
247
248	/**
249	* Get Responsive Icons Classes Map
250	*
251	* If a $device parameter is passed, this method retrieves the device's icon class list (the ones attached to the `<i>`
252	* element). If no parameter is passed, it returns an array of devices containing each device's icon class list.
253	*
254	* This method was created because 'mobile_extra' and 'tablet_extra' breakpoint icons need to be tilted by 90
255	* degrees, and this tilt is achieved in CSS via the class `eicon-tilted`.
256	*
257	* @since 3.4.0
258	*
259	* @return array\|string
260	*/
261	public function get_responsive_icons_classes_map( $device = null ) {
262	if ( ! $this->icons_map ) {
263	$this->icons_map = [
264	'mobile' => 'eicon-device-mobile',
265	'mobile_extra' => 'eicon-device-mobile eicon-tilted',
266	'tablet' => 'eicon-device-tablet',
267	'tablet_extra' => 'eicon-device-tablet eicon-tilted',
268	'laptop' => 'eicon-device-laptop',
269	'desktop' => 'eicon-device-desktop',
270	'widescreen' => 'eicon-device-wide',
271	];
272	}
273
274	return self::get_items( $this->icons_map, $device );
275	}
276
277	/**
278	* Get Default Config
279	*
280	* Retrieve the default breakpoints config array. The 'selector' property is used for CSS generation (the
281	* Stylesheet::add_device() method).
282	*
283	* @return array
284	*/
285	public static function get_default_config() {
286	return [
287	self::BREAKPOINT_KEY_MOBILE => [
288	'label' => esc_html__( 'Mobile', 'elementor' ),
289	'default_value' => 767,
290	'direction' => 'max',
291	],
292	self::BREAKPOINT_KEY_MOBILE_EXTRA => [
293	'label' => esc_html__( 'Mobile Extra', 'elementor' ),
294	'default_value' => 880,
295	'direction' => 'max',
296	],
297	self::BREAKPOINT_KEY_TABLET => [
298	'label' => esc_html__( 'Tablet', 'elementor' ),
299	'default_value' => 1024,
300	'direction' => 'max',
301	],
302	self::BREAKPOINT_KEY_TABLET_EXTRA => [
303	'label' => esc_html__( 'Tablet Extra', 'elementor' ),
304	'default_value' => 1200,
305	'direction' => 'max',
306	],
307	self::BREAKPOINT_KEY_LAPTOP => [
308	'label' => esc_html__( 'Laptop', 'elementor' ),
309	'default_value' => 1366,
310	'direction' => 'max',
311	],
312	self::BREAKPOINT_KEY_WIDESCREEN => [
313	'label' => esc_html__( 'Widescreen', 'elementor' ),
314	'default_value' => 2400,
315	'direction' => 'min',
316	],
317	];
318	}
319
320	/**
321	* Get Breakpoints Config
322	*
323	* Iterates over an array of all of the system's breakpoints (both active and inactive), queries each breakpoint's
324	* class instance, and generates an array containing data on each breakpoint: its label, current value, direction
325	* ('min'/'max') and whether it is enabled or not.
326	*
327	* @return array
328	*/
329	public function get_breakpoints_config() {
330	$breakpoints = $this->get_breakpoints();
331
332	$config = [];
333
334	foreach ( $breakpoints as $breakpoint_name => $breakpoint ) {
335	$config[ $breakpoint_name ] = [
336	'label' => $breakpoint->get_label(),
337	'value' => $breakpoint->get_value(),
338	'default_value' => $breakpoint->get_default_value(),
339	'direction' => $breakpoint->get_direction(),
340	'is_enabled' => $breakpoint->is_enabled(),
341	];
342	}
343
344	return $config;
345	}
346
347	/**
348	* Get Responsive Control Duplication Mode
349	*
350	* Retrieve the value of the $responsive_control_duplication_mode private class variable.
351	* See the variable's PHPDoc for details.
352	*
353	* @since 3.4.0
354	* @access public
355	*/
356	public function get_responsive_control_duplication_mode() {
357	return $this->responsive_control_duplication_mode;
358	}
359
360	/**
361	* Set Responsive Control Duplication Mode
362	*
363	* Sets the value of the $responsive_control_duplication_mode private class variable.
364	* See the variable's PHPDoc for details.
365	*
366	* @since 3.4.0
367	*
368	* @access public
369	* @param string $mode
370	*/
371	public function set_responsive_control_duplication_mode( $mode ) {
372	$this->responsive_control_duplication_mode = $mode;
373	}
374
375	/**
376	* Get Stylesheet Templates Path
377	*
378	* @since 3.2.0
379	* @access public
380	* @static
381	*/
382	public static function get_stylesheet_templates_path() {
383	return ELEMENTOR_ASSETS_PATH . 'css/templates/';
384	}
385
386	/**
387	* Compile Stylesheet Templates
388	*
389	* @since 3.2.0
390	* @access public
391	* @static
392	*/
393	public static function compile_stylesheet_templates() {
394	foreach ( self::get_stylesheet_templates() as $file_name => $template_path ) {
395	$file = new Frontend( $file_name, $template_path );
396
397	$file->update();
398	}
399	}
400
401	/**
402	* Init Breakpoints
403	*
404	* Creates the breakpoints array, containing instances of each breakpoint. Returns an array of ALL breakpoints,
405	* both enabled and disabled.
406	*
407	* @since 3.2.0
408	*/
409	private function init_breakpoints() {
410	$breakpoints = [];
411
412	$setting_prefix = self::BREAKPOINT_SETTING_PREFIX;
413
414	$active_breakpoint_keys = [
415	$setting_prefix . self::BREAKPOINT_KEY_MOBILE,
416	$setting_prefix . self::BREAKPOINT_KEY_TABLET,
417	];
418
419	if ( Plugin::$instance->experiments->is_feature_active( 'additional_custom_breakpoints' ) ) {
420	$kit_active_id = Plugin::$instance->kits_manager->get_active_id();
421	// Get the breakpoint settings saved in the kit directly from the DB to avoid initializing the kit too early.
422	$raw_kit_settings = get_post_meta( $kit_active_id, '_elementor_page_settings', true );
423
424	// If there is an existing kit with an active breakpoints value saved, use it.
425	if ( isset( $raw_kit_settings[ Settings_Layout::ACTIVE_BREAKPOINTS_CONTROL_ID ] ) ) {
426	$active_breakpoint_keys = $raw_kit_settings[ Settings_Layout::ACTIVE_BREAKPOINTS_CONTROL_ID ];
427	}
428	}
429
430	$default_config = self::get_default_config();
431
432	foreach ( $default_config as $breakpoint_name => $breakpoint_config ) {
433	$args = [ 'name' => $breakpoint_name ] + $breakpoint_config;
434
435	// Make sure the two default breakpoints (mobile, tablet) are always enabled.
436	if ( self::BREAKPOINT_KEY_MOBILE === $breakpoint_name \|\| self::BREAKPOINT_KEY_TABLET === $breakpoint_name ) {
437	// Make sure the default Mobile and Tablet breakpoints are always enabled.
438	$args['is_enabled'] = true;
439	} else {
440	// If the breakpoint is in the active breakpoints array, make sure it's instantiated as enabled.
441	$args['is_enabled'] = in_array( $setting_prefix . $breakpoint_name, $active_breakpoint_keys, true );
442	}
443
444	$breakpoints[ $breakpoint_name ] = new Breakpoint( $args );
445	}
446
447	$this->breakpoints = $breakpoints;
448	}
449
450	/**
451	* Init Active Breakpoints
452	*
453	* Create/Refresh the array of --enabled-- breakpoints.
454	*
455	* @since 3.2.0
456	*/
457	private function init_active_breakpoints() {
458	$this->active_breakpoints = array_filter( $this->get_breakpoints(), function( $breakpoint ) {
459	/** @var Breakpoint $breakpoint */
460	return $breakpoint->is_enabled();
461	} );
462	}
463
464	private function get_desktop_previous_device_key() {
465	$config_array_keys = array_keys( $this->get_active_breakpoints() );
466	$num_of_devices = count( $config_array_keys );
467
468	// If the widescreen breakpoint is active, the device that's previous to desktop is the last one before
469	// widescreen.
470	if ( self::BREAKPOINT_KEY_WIDESCREEN === $config_array_keys[ $num_of_devices - 1 ] ) {
471	$desktop_previous_device = $config_array_keys[ $num_of_devices - 2 ];
472	} else {
473	// If the widescreen breakpoint isn't active, we just take the last device returned by the config.
474	$desktop_previous_device = $config_array_keys[ $num_of_devices - 1 ];
475	}
476
477	return $desktop_previous_device;
478	}
479
480	/**
481	* Get Stylesheet Templates
482	*
483	* @since 3.2.0
484	* @access private
485	* @static
486	*/
487	private static function get_stylesheet_templates() {
488	$templates_paths = glob( self::get_stylesheet_templates_path() . '*.css' );
489
490	$templates = [];
491
492	foreach ( $templates_paths as $template_path ) {
493	$file_name = 'custom-' . basename( $template_path );
494
495	$templates[ $file_name ] = $template_path;
496	}
497
498	$deprecated_hook = 'elementor/core/responsive/get_stylesheet_templates';
499	$replacement_hook = 'elementor/core/breakpoints/get_stylesheet_template';
500
501	Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_hook( $deprecated_hook, '3.2.0', $replacement_hook );
502
503	// TODO: REMOVE THIS DEPRECATED HOOK IN ELEMENTOR v3.10.0/v4.0.0
504	$templates = apply_filters( $deprecated_hook, $templates );
505
506	return apply_filters( $replacement_hook, $templates );
507	}
508	}
509