elementor / includes / base / element-base.php

element-base.php in Elementor Website Builder – more than just a page builder 3.18.2, at includes/base/element-base.php

1,508 lines 37.5 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
5
6	if ( ! defined( 'ABSPATH' ) ) {
7	exit; // Exit if accessed directly.
8	}
9
10	/**
11	* Elementor element base.
12	*
13	* An abstract class to register new Elementor elements. It extended the
14	* `Controls_Stack` class to inherit its properties.
15	*
16	* This abstract class must be extended in order to register new elements.
17	*
18	* @since 1.0.0
19	* @abstract
20	*/
21	abstract class Element_Base extends Controls_Stack {
22
23	/**
24	* Child elements.
25	*
26	* Holds all the child elements of the element.
27	*
28	* @access private
29	*
30	* @var Element_Base[]
31	*/
32	private $children;
33
34	/**
35	* Element default arguments.
36	*
37	* Holds all the default arguments of the element. Used to store additional
38	* data. For example WordPress widgets use this to store widget names.
39	*
40	* @access private
41	*
42	* @var array
43	*/
44	private $default_args = [];
45
46	/**
47	* Is type instance.
48	*
49	* Whether the element is an instance of that type or not.
50	*
51	* @access private
52	*
53	* @var bool
54	*/
55	private $is_type_instance = true;
56
57	/**
58	* Depended scripts.
59	*
60	* Holds all the element depended scripts to enqueue.
61	*
62	* @since 1.9.0
63	* @access private
64	*
65	* @var array
66	*/
67	private $depended_scripts = [];
68
69	/**
70	* Depended styles.
71	*
72	* Holds all the element depended styles to enqueue.
73	*
74	* @since 1.9.0
75	* @access private
76	*
77	* @var array
78	*/
79	private $depended_styles = [];
80
81	/**
82	* Add script depends.
83	*
84	* Register new script to enqueue by the handler.
85	*
86	* @since 1.9.0
87	* @access public
88	*
89	* @param string $handler Depend script handler.
90	*/
91	public function add_script_depends( $handler ) {
92	$this->depended_scripts[] = $handler;
93	}
94
95	/**
96	* Add style depends.
97	*
98	* Register new style to enqueue by the handler.
99	*
100	* @since 1.9.0
101	* @access public
102	*
103	* @param string $handler Depend style handler.
104	*/
105	public function add_style_depends( $handler ) {
106	$this->depended_styles[] = $handler;
107	}
108
109	/**
110	* Get script dependencies.
111	*
112	* Retrieve the list of script dependencies the element requires.
113	*
114	* @since 1.3.0
115	* @access public
116	*
117	* @return array Element scripts dependencies.
118	*/
119	public function get_script_depends() {
120	return $this->depended_scripts;
121	}
122
123	/**
124	* Enqueue scripts.
125	*
126	* Registers all the scripts defined as element dependencies and enqueues
127	* them. Use `get_script_depends()` method to add custom script dependencies.
128	*
129	* @since 1.3.0
130	* @access public
131	*/
132	final public function enqueue_scripts() {
133	$deprecated_scripts = [
134	//Insert here when you have a deprecated script
135	];
136
137	foreach ( $this->get_script_depends() as $script ) {
138	if ( isset( $deprecated_scripts[ $script ] ) ) {
139	Utils::handle_deprecation( $script, $deprecated_scripts[ $script ]['version'], $deprecated_scripts[ $script ]['replacement'] );
140	}
141
142	wp_enqueue_script( $script );
143	}
144	}
145
146	/**
147	* Get style dependencies.
148	*
149	* Retrieve the list of style dependencies the element requires.
150	*
151	* @since 1.9.0
152	* @access public
153	*
154	* @return array Element styles dependencies.
155	*/
156	public function get_style_depends() {
157	return $this->depended_styles;
158	}
159
160	/**
161	* Enqueue styles.
162	*
163	* Registers all the styles defined as element dependencies and enqueues
164	* them. Use `get_style_depends()` method to add custom style dependencies.
165	*
166	* @since 1.9.0
167	* @access public
168	*/
169	final public function enqueue_styles() {
170	foreach ( $this->get_style_depends() as $style ) {
171	wp_enqueue_style( $style );
172	}
173	}
174
175	/**
176	* @since 1.0.0
177	* @deprecated 2.6.0
178	* @access public
179	* @static
180	*/
181	final public static function add_edit_tool() {}
182
183	/**
184	* @since 2.2.0
185	* @deprecated 2.6.0
186	* @access public
187	* @static
188	*/
189	final public static function is_edit_buttons_enabled() {
190	return get_option( 'elementor_edit_buttons' );
191	}
192
193	/**
194	* Get default child type.
195	*
196	* Retrieve the default child type based on element data.
197	*
198	* Note that not all elements support children.
199	*
200	* @since 1.0.0
201	* @access protected
202	* @abstract
203	*
204	* @param array $element_data Element data.
205	*
206	* @return Element_Base
207	*/
208	abstract protected function _get_default_child_type( array $element_data );
209
210	/**
211	* Before element rendering.
212	*
213	* Used to add stuff before the element.
214	*
215	* @since 1.0.0
216	* @access public
217	*/
218	public function before_render() {}
219
220	/**
221	* After element rendering.
222	*
223	* Used to add stuff after the element.
224	*
225	* @since 1.0.0
226	* @access public
227	*/
228	public function after_render() {}
229
230	/**
231	* Get element title.
232	*
233	* Retrieve the element title.
234	*
235	* @since 1.0.0
236	* @access public
237	*
238	* @return string Element title.
239	*/
240	public function get_title() {
241	return '';
242	}
243
244	/**
245	* Get element icon.
246	*
247	* Retrieve the element icon.
248	*
249	* @since 1.0.0
250	* @access public
251	*
252	* @return string Element icon.
253	*/
254	public function get_icon() {
255	return 'eicon-columns';
256	}
257
258	public function get_help_url() {
259	return 'https://go.elementor.com/widget-' . $this->get_name();
260	}
261
262	public function get_custom_help_url() {
263	return '';
264	}
265
266	/**
267	* Whether the reload preview is required.
268	*
269	* Used to determine whether the reload preview is required or not.
270	*
271	* @since 1.0.0
272	* @access public
273	*
274	* @return bool Whether the reload preview is required.
275	*/
276	public function is_reload_preview_required() {
277	return false;
278	}
279
280	/**
281	* @since 2.3.1
282	* @access protected
283	*/
284	protected function should_print_empty() {
285	return true;
286	}
287
288	/**
289	* Get child elements.
290	*
291	* Retrieve all the child elements of this element.
292	*
293	* @since 1.0.0
294	* @access public
295	*
296	* @return Element_Base[] Child elements.
297	*/
298	public function get_children() {
299	if ( null === $this->children ) {
300	$this->init_children();
301	}
302
303	return $this->children;
304	}
305
306	/**
307	* Get default arguments.
308	*
309	* Retrieve the element default arguments. Used to return all the default
310	* arguments or a specific default argument, if one is set.
311	*
312	* @since 1.0.0
313	* @access public
314	*
315	* @param array $item Optional. Default is null.
316	*
317	* @return array Default argument(s).
318	*/
319	public function get_default_args( $item = null ) {
320	return self::get_items( $this->default_args, $item );
321	}
322
323	/**
324	* Get panel presets.
325	*
326	* Used for displaying the widget in the panel multiple times, but with different defaults values,
327	* icon, title etc.
328	*
329	* @since 3.16.0
330	* @access public
331	*
332	* @return array
333	*/
334	public function get_panel_presets() {
335	return [];
336	}
337
338	/**
339	* Add new child element.
340	*
341	* Register new child element to allow hierarchy.
342	*
343	* @since 1.0.0
344	* @access public
345	* @param array $child_data Child element data.
346	* @param array $child_args Child element arguments.
347	*
348	* @return Element_Base\|false Child element instance, or false if failed.
349	*/
350	public function add_child( array $child_data, array $child_args = [] ) {
351	if ( null === $this->children ) {
352	$this->init_children();
353	}
354
355	$child_type = $this->get_child_type( $child_data );
356
357	if ( ! $child_type ) {
358	return false;
359	}
360
361	$child = Plugin::$instance->elements_manager->create_element_instance( $child_data, $child_args, $child_type );
362
363	if ( $child ) {
364	$this->children[] = $child;
365	}
366
367	return $child;
368	}
369
370	/**
371	* Add link render attributes.
372	*
373	* Used to add link tag attributes to a specific HTML element.
374	*
375	* The HTML link tag is represented by the element parameter. The `url_control` parameter
376	* needs to be an array of link settings in the same format they are set by Elementor's URL control.
377	*
378	* Example usage:
379	*
380	* `$this->add_link_attributes( 'button', $settings['link'] );`
381	*
382	* @since 2.8.0
383	* @access public
384	*
385	* @param array\|string $element The HTML element.
386	* @param array $url_control Array of link settings.
387	* @param bool $overwrite Optional. Whether to overwrite existing
388	* attribute. Default is false, not to overwrite.
389	*
390	* @return Element_Base Current instance of the element.
391	*/
392
393	public function add_link_attributes( $element, array $url_control, $overwrite = false ) {
394	$attributes = [];
395
396	if ( ! empty( $url_control['url'] ) ) {
397	$allowed_protocols = array_merge( wp_allowed_protocols(), [ 'skype', 'viber' ] );
398
399	$attributes['href'] = esc_url( $url_control['url'], $allowed_protocols );
400	}
401
402	if ( ! empty( $url_control['is_external'] ) ) {
403	$attributes['target'] = '_blank';
404	}
405
406	if ( ! empty( $url_control['nofollow'] ) ) {
407	$attributes['rel'] = 'nofollow';
408	}
409
410	if ( ! empty( $url_control['custom_attributes'] ) ) {
411	// Custom URL attributes should come as a string of comma-delimited key\|value pairs
412	$attributes = array_merge( $attributes, Utils::parse_custom_attributes( $url_control['custom_attributes'] ) );
413	}
414
415	if ( $attributes ) {
416	$this->add_render_attribute( $element, $attributes, null, $overwrite );
417	}
418
419	return $this;
420	}
421
422	/**
423	* Print element.
424	*
425	* Used to generate the element final HTML on the frontend and the editor.
426	*
427	* @since 1.0.0
428	* @access public
429	*/
430	public function print_element() {
431	$element_type = $this->get_type();
432
433	/**
434	* Before frontend element render.
435	*
436	* Fires before Elementor element is rendered in the frontend.
437	*
438	* @since 2.2.0
439	*
440	* @param Element_Base $this The element.
441	*/
442	do_action( 'elementor/frontend/before_render', $this );
443
444	/**
445	* Before frontend element render.
446	*
447	* Fires before Elementor element is rendered in the frontend.
448	*
449	* The dynamic portion of the hook name, `$element_type`, refers to the element type.
450	*
451	* @since 1.0.0
452	*
453	* @param Element_Base $this The element.
454	*/
455	do_action( "elementor/frontend/{$element_type}/before_render", $this );
456
457	ob_start();
458
459	if ( $this->has_own_method( '_print_content', self::class ) ) {
460	Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( '_print_content', '3.1.0', __CLASS__ . '::print_content()' );
461
462	$this->_print_content();
463	} else {
464	$this->print_content();
465	}
466
467	$content = ob_get_clean();
468
469	$should_render = ( ! empty( $content ) \|\| $this->should_print_empty() );
470
471	/**
472	* Should the element be rendered for frontend
473	*
474	* Filters if the element should be rendered on frontend.
475	*
476	* @since 2.3.3
477	*
478	* @param bool true The element.
479	* @param Element_Base $this The element.
480	*/
481	$should_render = apply_filters( "elementor/frontend/{$element_type}/should_render", $should_render, $this );
482
483	if ( $should_render ) {
484	if ( $this->has_own_method( '_add_render_attributes', self::class ) ) {
485	Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( '_add_render_attributes', '3.1.0', __CLASS__ . '::add_render_attributes()' );
486
487	$this->_add_render_attributes();
488	} else {
489	$this->add_render_attributes();
490	}
491
492	$this->before_render();
493	// PHPCS - The content has already been escaped by the `render` method.
494	echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
495	$this->after_render();
496
497	$this->enqueue_scripts();
498	$this->enqueue_styles();
499	}
500
501	/**
502	* After frontend element render.
503	*
504	* Fires after Elementor element is rendered in the frontend.
505	*
506	* The dynamic portion of the hook name, `$element_type`, refers to the element type.
507	*
508	* @since 1.0.0
509	*
510	* @param Element_Base $this The element.
511	*/
512	do_action( "elementor/frontend/{$element_type}/after_render", $this );
513
514	/**
515	* After frontend element render.
516	*
517	* Fires after Elementor element is rendered in the frontend.
518	*
519	* @since 2.3.0
520	*
521	* @param Element_Base $this The element.
522	*/
523	do_action( 'elementor/frontend/after_render', $this );
524	}
525
526	/**
527	* Get the element raw data.
528	*
529	* Retrieve the raw element data, including the id, type, settings, child
530	* elements and whether it is an inner element.
531	*
532	* The data with the HTML used always to display the data, but the Elementor
533	* editor uses the raw data without the HTML in order not to render the data
534	* again.
535	*
536	* @since 1.0.0
537	* @access public
538	*
539	* @param bool $with_html_content Optional. Whether to return the data with
540	* HTML content or without. Used for caching.
541	* Default is false, without HTML.
542	*
543	* @return array Element raw data.
544	*/
545	public function get_raw_data( $with_html_content = false ) {
546	$data = $this->get_data();
547
548	$elements = [];
549
550	foreach ( $this->get_children() as $child ) {
551	$elements[] = $child->get_raw_data( $with_html_content );
552	}
553
554	$raw_data = [
555	'id' => $this->get_id(),
556	'elType' => $data['elType'],
557	'settings' => $data['settings'],
558	'elements' => $elements,
559	'isInner' => $data['isInner'],
560	];
561
562	if ( ! empty( $data['isLocked'] ) ) {
563	$raw_data['isLocked'] = $data['isLocked'];
564	}
565
566	return $raw_data;
567	}
568
569	public function get_data_for_save() {
570	$data = $this->get_raw_data();
571
572	$elements = [];
573
574	foreach ( $this->get_children() as $child ) {
575	$elements[] = $child->get_data_for_save();
576	}
577
578	if ( ! empty( $elements ) ) {
579	$data['elements'] = $elements;
580	}
581
582	if ( ! empty( $data['settings'] ) ) {
583	$data['settings'] = $this->on_save( $data['settings'] );
584	}
585
586	return $data;
587	}
588
589	/**
590	* Get unique selector.
591	*
592	* Retrieve the unique selector of the element. Used to set a unique HTML
593	* class for each HTML element. This way Elementor can set custom styles for
594	* each element.
595	*
596	* @since 1.0.0
597	* @access public
598	*
599	* @return string Unique selector.
600	*/
601	public function get_unique_selector() {
602	return '.elementor-element-' . $this->get_id();
603	}
604
605	/**
606	* Is type instance.
607	*
608	* Used to determine whether the element is an instance of that type or not.
609	*
610	* @since 1.0.0
611	* @access public
612	*
613	* @return bool Whether the element is an instance of that type.
614	*/
615	public function is_type_instance() {
616	return $this->is_type_instance;
617	}
618
619	/**
620	* On import update dynamic content (e.g. post and term IDs).
621	*
622	* @since 3.8.0
623	*
624	* @param array $config The config of the passed element.
625	* @param array $data The data that requires updating/replacement when imported.
626	* @param array\|null $controls The available controls.
627	*
628	* @return array Element data.
629	*/
630	public static function on_import_update_dynamic_content( array $config, array $data, $controls = null ) : array {
631	$tags_manager = Plugin::$instance->dynamic_tags;
632
633	if ( empty( $config['settings'][ $tags_manager::DYNAMIC_SETTING_KEY ] ) ) {
634	return $config;
635	}
636
637	foreach ( $config['settings'][ $tags_manager::DYNAMIC_SETTING_KEY ] as $dynamic_name => $dynamic_value ) {
638	$tag_config = $tags_manager->tag_text_to_tag_data( $dynamic_value );
639	$tag_instance = $tags_manager->create_tag( $tag_config['id'], $tag_config['name'], $tag_config['settings'] );
640
641	if ( is_null( $tag_instance ) ) {
642	continue;
643	}
644
645	if ( $tag_instance->has_own_method( 'on_import_replace_dynamic_content' ) ) {
646	// TODO: Remove this check in the future.
647	$tag_config = $tag_instance->on_import_replace_dynamic_content( $tag_config, $data['post_ids'] );
648	} else {
649	$tag_config = $tag_instance->on_import_update_dynamic_content( $tag_config, $data, $tag_instance->get_controls() );
650	}
651
652	$config['settings'][ $tags_manager::DYNAMIC_SETTING_KEY ][ $dynamic_name ] = $tags_manager->tag_data_to_tag_text( $tag_config['id'], $tag_config['name'], $tag_config['settings'] );
653	}
654
655	return $config;
656	}
657
658	/**
659	* Add render attributes.
660	*
661	* Used to add attributes to the current element wrapper HTML tag.
662	*
663	* @since 1.3.0
664	* @access protected
665	* @deprecated 3.1.0 Use `add_render_attribute()` method instead.
666	*/
667	protected function _add_render_attributes() {
668	Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( __METHOD__, '3.1.0', 'add_render_attributes()' );
669
670	return $this->add_render_attributes();
671	}
672
673	/**
674	* Add render attributes.
675	*
676	* Used to add attributes to the current element wrapper HTML tag.
677	*
678	* @since 3.1.0
679	* @access protected
680	*/
681	protected function add_render_attributes() {
682	$id = $this->get_id();
683
684	$settings = $this->get_settings_for_display();
685	$frontend_settings = $this->get_frontend_settings();
686	$controls = $this->get_controls();
687
688	$this->add_render_attribute( '_wrapper', [
689	'class' => [
690	'elementor-element',
691	'elementor-element-' . $id,
692	],
693	'data-id' => $id,
694	'data-element_type' => $this->get_type(),
695	] );
696
697	$class_settings = [];
698
699	foreach ( $settings as $setting_key => $setting ) {
700	if ( isset( $controls[ $setting_key ]['prefix_class'] ) ) {
701	if ( isset( $controls[ $setting_key ]['classes_dictionary'][ $setting ] ) ) {
702	$value = $controls[ $setting_key ]['classes_dictionary'][ $setting ];
703	} else {
704	$value = $setting;
705	}
706
707	$class_settings[ $setting_key ] = $value;
708	}
709	}
710
711	foreach ( $class_settings as $setting_key => $setting ) {
712	if ( empty( $setting ) && '0' !== $setting ) {
713	continue;
714	}
715
716	$this->add_render_attribute( '_wrapper', 'class', $controls[ $setting_key ]['prefix_class'] . $setting );
717	}
718
719	$_animation = ! empty( $settings['_animation'] );
720	$animation = ! empty( $settings['animation'] );
721	$has_animation = $_animation && 'none' !== $settings['_animation'] \|\| $animation && 'none' !== $settings['animation'];
722
723	if ( $has_animation ) {
724	$is_static_render_mode = Plugin::$instance->frontend->is_static_render_mode();
725
726	if ( ! $is_static_render_mode ) {
727	// Hide the element until the animation begins
728	$this->add_render_attribute( '_wrapper', 'class', 'elementor-invisible' );
729	}
730	}
731
732	if ( ! empty( $settings['_element_id'] ) ) {
733	$this->add_render_attribute( '_wrapper', 'id', trim( $settings['_element_id'] ) );
734	}
735
736	if ( $frontend_settings ) {
737	$this->add_render_attribute( '_wrapper', 'data-settings', wp_json_encode( $frontend_settings ) );
738	}
739
740	/**
741	* After element attribute rendered.
742	*
743	* Fires after the attributes of the element HTML tag are rendered.
744	*
745	* @since 2.3.0
746	*
747	* @param Element_Base $this The element.
748	*/
749	do_action( 'elementor/element/after_add_attributes', $this );
750	}
751
752	/**
753	* Register the Transform controls in the advanced tab of the element.
754	*
755	* Previously registered under the Widget_Common class, but registered a more fundamental level now to enable access from other widgets.
756	*
757	* @since 3.9.0
758	* @access protected
759	* @return void
760	*/
761	protected function register_transform_section( $element_selector = '' ) {
762	$default_unit_values_deg = [];
763	$default_unit_values_ms = [];
764
765	// Set the default unit sizes for all active breakpoints.
766	foreach ( Breakpoints_Manager::get_default_config() as $breakpoint_name => $breakpoint_config ) {
767	$default_unit_values_deg[ $breakpoint_name ] = [
768	'default' => [
769	'unit' => 'deg',
770	],
771	];
772
773	$default_unit_values_ms[ $breakpoint_name ] = [
774	'default' => [
775	'unit' => 'ms',
776	],
777	];
778	}
779
780	$this->start_controls_section(
781	'_section_transform',
782	[
783	'label' => esc_html__( 'Transform', 'elementor' ),
784	'tab' => Controls_Manager::TAB_ADVANCED,
785	]
786	);
787
788	$this->start_controls_tabs( '_tabs_positioning' );
789
790	$transform_prefix_class = 'e-';
791	$transform_return_value = 'transform';
792	$transform_selector_class = ' > .elementor-widget-container';
793	$transform_css_modifier = '';
794
795	if ( 'con' === $element_selector ) {
796	$transform_selector_class = '.e-' . $element_selector;
797	$transform_css_modifier = $element_selector . '-';
798	}
799
800	foreach ( [ '', '_hover' ] as $tab ) {
801	$state = '_hover' === $tab ? ':hover' : '';
802
803	$this->start_controls_tab(
804	"_tab_positioning{$tab}",
805	[
806	'label' => '' === $tab ? esc_html__( 'Normal', 'elementor' ) : esc_html__( 'Hover', 'elementor' ),
807	]
808	);
809
810	$this->add_control(
811	"_transform_rotate_popover{$tab}",
812	[
813	'label' => esc_html__( 'Rotate', 'elementor' ),
814	'type' => Controls_Manager::POPOVER_TOGGLE,
815	'prefix_class' => $transform_prefix_class,
816	'return_value' => $transform_return_value,
817	]
818	);
819
820	$this->start_popover();
821
822	$this->add_responsive_control(
823	"_transform_rotateZ_effect{$tab}",
824	[
825	'label' => esc_html__( 'Rotate', 'elementor' ),
826	'type' => Controls_Manager::SLIDER,
827	'device_args' => $default_unit_values_deg,
828	'range' => [
829	'px' => [
830	'min' => -360,
831	'max' => 360,
832	],
833	],
834	'selectors' => [
835	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateZ: {{SIZE}}deg',
836	],
837	'condition' => [
838	"_transform_rotate_popover{$tab}!" => '',
839	],
840	'frontend_available' => true,
841	]
842	);
843
844	$this->add_control(
845	"_transform_rotate_3d{$tab}",
846	[
847	'label' => esc_html__( '3D Rotate', 'elementor' ),
848	'type' => Controls_Manager::SWITCHER,
849	'label_on' => esc_html__( 'On', 'elementor' ),
850	'label_off' => esc_html__( 'Off', 'elementor' ),
851	'selectors' => [
852	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateX: 1{{UNIT}}; --e-' . $transform_css_modifier . 'transform-perspective: 20px;',
853	],
854	'condition' => [
855	"_transform_rotate_popover{$tab}!" => '',
856	],
857	]
858	);
859
860	$this->add_responsive_control(
861	"_transform_rotateX_effect{$tab}",
862	[
863	'label' => esc_html__( 'Rotate X', 'elementor' ),
864	'type' => Controls_Manager::SLIDER,
865	'device_args' => $default_unit_values_deg,
866	'range' => [
867	'px' => [
868	'min' => -360,
869	'max' => 360,
870	],
871	],
872	'condition' => [
873	"_transform_rotate_3d{$tab}!" => '',
874	"_transform_rotate_popover{$tab}!" => '',
875	],
876	'selectors' => [
877	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateX: {{SIZE}}deg;',
878	],
879	'frontend_available' => true,
880	]
881	);
882
883	$this->add_responsive_control(
884	"_transform_rotateY_effect{$tab}",
885	[
886	'label' => esc_html__( 'Rotate Y', 'elementor' ),
887	'type' => Controls_Manager::SLIDER,
888	'device_args' => $default_unit_values_deg,
889	'range' => [
890	'px' => [
891	'min' => -360,
892	'max' => 360,
893	],
894	],
895	'condition' => [
896	"_transform_rotate_3d{$tab}!" => '',
897	"_transform_rotate_popover{$tab}!" => '',
898	],
899	'selectors' => [
900	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-rotateY: {{SIZE}}deg;',
901	],
902	'frontend_available' => true,
903	]
904	);
905
906	$this->add_responsive_control(
907	"_transform_perspective_effect{$tab}",
908	[
909	'label' => esc_html__( 'Perspective', 'elementor' ),
910	'type' => Controls_Manager::SLIDER,
911	'range' => [
912	'px' => [
913	'min' => 0,
914	'max' => 1000,
915	],
916	],
917	'condition' => [
918	"_transform_rotate_popover{$tab}!" => '',
919	"_transform_rotate_3d{$tab}!" => '',
920	],
921	'selectors' => [
922	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-perspective: {{SIZE}}px',
923	],
924	'frontend_available' => true,
925	]
926	);
927
928	$this->end_popover();
929
930	$this->add_control(
931	"_transform_translate_popover{$tab}",
932	[
933	'label' => esc_html__( 'Offset', 'elementor' ),
934	'type' => Controls_Manager::POPOVER_TOGGLE,
935	'prefix_class' => $transform_prefix_class,
936	'return_value' => $transform_return_value,
937	]
938	);
939
940	$this->start_popover();
941
942	$this->add_responsive_control(
943	"_transform_translateX_effect{$tab}",
944	[
945	'label' => esc_html__( 'Offset X', 'elementor' ),
946	'type' => Controls_Manager::SLIDER,
947	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
948	'range' => [
949	'%' => [
950	'min' => -100,
951	'max' => 100,
952	],
953	'px' => [
954	'min' => -1000,
955	'max' => 1000,
956	],
957	],
958	'condition' => [
959	"_transform_translate_popover{$tab}!" => '',
960	],
961	'selectors' => [
962	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-translateX: {{SIZE}}{{UNIT}};',
963	],
964	'frontend_available' => true,
965	]
966	);
967
968	$this->add_responsive_control(
969	"_transform_translateY_effect{$tab}",
970	[
971	'label' => esc_html__( 'Offset Y', 'elementor' ),
972	'type' => Controls_Manager::SLIDER,
973	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
974	'range' => [
975	'%' => [
976	'min' => -100,
977	'max' => 100,
978	],
979	'px' => [
980	'min' => -1000,
981	'max' => 1000,
982	],
983	],
984	'condition' => [
985	"_transform_translate_popover{$tab}!" => '',
986	],
987	'selectors' => [
988	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-translateY: {{SIZE}}{{UNIT}};',
989	],
990	'frontend_available' => true,
991	]
992	);
993
994	$this->end_popover();
995
996	$this->add_control(
997	"_transform_scale_popover{$tab}",
998	[
999	'label' => esc_html__( 'Scale', 'elementor' ),
1000	'type' => Controls_Manager::POPOVER_TOGGLE,
1001	'prefix_class' => $transform_prefix_class,
1002	'return_value' => $transform_return_value,
1003	]
1004	);
1005
1006	$this->start_popover();
1007
1008	$this->add_control(
1009	"_transform_keep_proportions{$tab}",
1010	[
1011	'label' => esc_html__( 'Keep Proportions', 'elementor' ),
1012	'type' => Controls_Manager::SWITCHER,
1013	'label_on' => esc_html__( 'On', 'elementor' ),
1014	'label_off' => esc_html__( 'Off', 'elementor' ),
1015	'default' => 'yes',
1016	]
1017	);
1018
1019	$this->add_responsive_control(
1020	"_transform_scale_effect{$tab}",
1021	[
1022	'label' => esc_html__( 'Scale', 'elementor' ),
1023	'type' => Controls_Manager::SLIDER,
1024	'range' => [
1025	'px' => [
1026	'min' => 0,
1027	'max' => 2,
1028	'step' => 0.1,
1029	],
1030	],
1031	'condition' => [
1032	"_transform_scale_popover{$tab}!" => '',
1033	"_transform_keep_proportions{$tab}!" => '',
1034	],
1035	'selectors' => [
1036	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-scale: {{SIZE}};',
1037	],
1038	'frontend_available' => true,
1039	]
1040	);
1041
1042	$this->add_responsive_control(
1043	"_transform_scaleX_effect{$tab}",
1044	[
1045	'label' => esc_html__( 'Scale X', 'elementor' ),
1046	'type' => Controls_Manager::SLIDER,
1047	'range' => [
1048	'px' => [
1049	'min' => 0,
1050	'max' => 2,
1051	'step' => 0.1,
1052	],
1053	],
1054	'condition' => [
1055	"_transform_scale_popover{$tab}!" => '',
1056	"_transform_keep_proportions{$tab}" => '',
1057	],
1058	'selectors' => [
1059	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-scaleX: {{SIZE}};',
1060	],
1061	'frontend_available' => true,
1062	]
1063	);
1064
1065	$this->add_responsive_control(
1066	"_transform_scaleY_effect{$tab}",
1067	[
1068	'label' => esc_html__( 'Scale Y', 'elementor' ),
1069	'type' => Controls_Manager::SLIDER,
1070	'range' => [
1071	'px' => [
1072	'min' => 0,
1073	'max' => 2,
1074	'step' => 0.1,
1075	],
1076	],
1077	'condition' => [
1078	"_transform_scale_popover{$tab}!" => '',
1079	"_transform_keep_proportions{$tab}" => '',
1080	],
1081	'selectors' => [
1082	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-scaleY: {{SIZE}};',
1083	],
1084	'frontend_available' => true,
1085	]
1086	);
1087
1088	$this->end_popover();
1089
1090	$this->add_control(
1091	"_transform_skew_popover{$tab}",
1092	[
1093	'label' => esc_html__( 'Skew', 'elementor' ),
1094	'type' => Controls_Manager::POPOVER_TOGGLE,
1095	'prefix_class' => $transform_prefix_class,
1096	'return_value' => $transform_return_value,
1097	]
1098	);
1099
1100	$this->start_popover();
1101
1102	$this->add_responsive_control(
1103	"_transform_skewX_effect{$tab}",
1104	[
1105	'label' => esc_html__( 'Skew X', 'elementor' ),
1106	'type' => Controls_Manager::SLIDER,
1107	'device_args' => $default_unit_values_deg,
1108	'range' => [
1109	'px' => [
1110	'min' => -360,
1111	'max' => 360,
1112	],
1113	],
1114	'condition' => [
1115	"_transform_skew_popover{$tab}!" => '',
1116	],
1117	'selectors' => [
1118	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-skewX: {{SIZE}}deg;',
1119	],
1120	'frontend_available' => true,
1121	]
1122	);
1123
1124	$this->add_responsive_control(
1125	"_transform_skewY_effect{$tab}",
1126	[
1127	'label' => esc_html__( 'Skew Y', 'elementor' ),
1128	'type' => Controls_Manager::SLIDER,
1129	'device_args' => $default_unit_values_deg,
1130	'range' => [
1131	'px' => [
1132	'min' => -360,
1133	'max' => 360,
1134	],
1135	],
1136	'condition' => [
1137	"_transform_skew_popover{$tab}!" => '',
1138	],
1139	'selectors' => [
1140	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-skewY: {{SIZE}}deg;',
1141	],
1142	'frontend_available' => true,
1143	]
1144	);
1145
1146	$this->end_popover();
1147
1148	$this->add_control(
1149	"_transform_flipX_effect{$tab}",
1150	[
1151	'label' => esc_html__( 'Flip Horizontal', 'elementor' ),
1152	'type' => Controls_Manager::CHOOSE,
1153	'options' => [
1154	'transform' => [
1155	'title' => esc_html__( 'Flip Horizontal', 'elementor' ),
1156	'icon' => 'eicon-flip eicon-tilted',
1157	],
1158	],
1159	'prefix_class' => $transform_prefix_class,
1160	'selectors' => [
1161	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-flipX: -1',
1162	],
1163	'frontend_available' => true,
1164	]
1165	);
1166
1167	$this->add_control(
1168	"_transform_flipY_effect{$tab}",
1169	[
1170	'label' => esc_html__( 'Flip Vertical', 'elementor' ),
1171	'type' => Controls_Manager::CHOOSE,
1172	'options' => [
1173	'transform' => [
1174	'title' => esc_html__( 'Flip Vertical', 'elementor' ),
1175	'icon' => 'eicon-flip',
1176	],
1177	],
1178	'prefix_class' => $transform_prefix_class,
1179	'selectors' => [
1180	"{{WRAPPER}}{$transform_selector_class}{$state}" => '--e-' . $transform_css_modifier . 'transform-flipY: -1',
1181	],
1182	'frontend_available' => true,
1183	]
1184	);
1185
1186	if ( '_hover' === $tab ) {
1187	$this->add_control(
1188	'_transform_transition_hover',
1189	[
1190	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (ms)',
1191	'type' => Controls_Manager::SLIDER,
1192	'device_args' => $default_unit_values_ms,
1193	'range' => [
1194	'px' => [
1195	'min' => 100,
1196	'max' => 10000,
1197	],
1198	],
1199	'selectors' => [
1200	'{{WRAPPER}}' => '--e-' . $transform_css_modifier . 'transform-transition-duration: {{SIZE}}ms',
1201	],
1202	]
1203	);
1204	}
1205
1206	${"transform_origin_conditions{$tab}"} = [
1207	[
1208	'name' => "_transform_scale_popover{$tab}",
1209	'operator' => '!=',
1210	'value' => '',
1211	],
1212	[
1213	'name' => "_transform_rotate_popover{$tab}",
1214	'operator' => '!=',
1215	'value' => '',
1216	],
1217	[
1218	'name' => "_transform_flipX_effect{$tab}",
1219	'operator' => '!=',
1220	'value' => '',
1221	],
1222	[
1223	'name' => "_transform_flipY_effect{$tab}",
1224	'operator' => '!=',
1225	'value' => '',
1226	],
1227	];
1228
1229	$this->end_controls_tab();
1230	}
1231
1232	$this->end_controls_tabs();
1233
1234	$transform_origin_conditions = [
1235	'relation' => 'or',
1236	'terms' => array_merge( $transform_origin_conditions, $transform_origin_conditions_hover ),
1237	];
1238
1239	// Will override motion effect transform-origin
1240	$this->add_responsive_control(
1241	'motion_fx_transform_x_anchor_point',
1242	[
1243	'label' => esc_html__( 'X Anchor Point', 'elementor' ),
1244	'type' => Controls_Manager::CHOOSE,
1245	'options' => [
1246	'left' => [
1247	'title' => esc_html__( 'Left', 'elementor' ),
1248	'icon' => 'eicon-h-align-left',
1249	],
1250	'center' => [
1251	'title' => esc_html__( 'Center', 'elementor' ),
1252	'icon' => 'eicon-h-align-center',
1253	],
1254	'right' => [
1255	'title' => esc_html__( 'Right', 'elementor' ),
1256	'icon' => 'eicon-h-align-right',
1257	],
1258	],
1259	'conditions' => $transform_origin_conditions,
1260	'separator' => 'before',
1261	'selectors' => [
1262	'{{WRAPPER}}' => '--e-' . $transform_css_modifier . 'transform-origin-x: {{VALUE}}',
1263	],
1264	]
1265	);
1266
1267	// Will override motion effect transform-origin
1268	$this->add_responsive_control(
1269	'motion_fx_transform_y_anchor_point',
1270	[
1271	'label' => esc_html__( 'Y Anchor Point', 'elementor' ),
1272	'type' => Controls_Manager::CHOOSE,
1273	'options' => [
1274	'top' => [
1275	'title' => esc_html__( 'Top', 'elementor' ),
1276	'icon' => 'eicon-v-align-top',
1277	],
1278	'center' => [
1279	'title' => esc_html__( 'Center', 'elementor' ),
1280	'icon' => 'eicon-v-align-middle',
1281	],
1282	'bottom' => [
1283	'title' => esc_html__( 'Bottom', 'elementor' ),
1284	'icon' => 'eicon-v-align-bottom',
1285	],
1286	],
1287	'conditions' => $transform_origin_conditions,
1288	'selectors' => [
1289	'{{WRAPPER}}' => '--e-' . $transform_css_modifier . 'transform-origin-y: {{VALUE}}',
1290	],
1291	]
1292	);
1293
1294	$this->end_controls_section();
1295	}
1296
1297	/**
1298	* Add Hidden Device Controls
1299	*
1300	* Adds controls for hiding elements within certain devices' viewport widths. Adds a control for each active device.
1301	*
1302	* @since 3.4.0
1303	* @access protected
1304	*/
1305	protected function add_hidden_device_controls() {
1306	// The 'Hide On X' controls are displayed from largest to smallest, while the method returns smallest to largest.
1307	$active_devices = Plugin::$instance->breakpoints->get_active_devices_list( [ 'reverse' => true ] );
1308	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
1309
1310	foreach ( $active_devices as $breakpoint_key ) {
1311	$label = 'desktop' === $breakpoint_key ? esc_html__( 'Desktop', 'elementor' ) : $active_breakpoints[ $breakpoint_key ]->get_label();
1312
1313	$this->add_control(
1314	'hide_' . $breakpoint_key,
1315	[
1316	/* translators: %s: Device name. */
1317	'label' => sprintf( __( 'Hide On %s', 'elementor' ), $label ),
1318	'type' => Controls_Manager::SWITCHER,
1319	'default' => '',
1320	'prefix_class' => 'elementor-',
1321	'label_on' => esc_html__( 'Hide', 'elementor' ),
1322	'label_off' => esc_html__( 'Show', 'elementor' ),
1323	'return_value' => 'hidden-' . $breakpoint_key,
1324	]
1325	);
1326	}
1327	}
1328
1329	/**
1330	* Get default data.
1331	*
1332	* Retrieve the default element data. Used to reset the data on initialization.
1333	*
1334	* @since 1.0.0
1335	* @access protected
1336	*
1337	* @return array Default data.
1338	*/
1339	protected function get_default_data() {
1340	$data = parent::get_default_data();
1341
1342	return array_merge(
1343	$data, [
1344	'elements' => [],
1345	'isInner' => false,
1346	]
1347	);
1348	}
1349
1350	/**
1351	* Print element content.
1352	*
1353	* Output the element final HTML on the frontend.
1354	*
1355	* @since 1.0.0
1356	* @access protected
1357	* @deprecated 3.1.0 Use `print_content()` method instead.
1358	*/
1359	protected function _print_content() {
1360	Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( __METHOD__, '3.1.0', 'print_content()' );
1361
1362	$this->print_content();
1363	}
1364
1365	/**
1366	* Print element content.
1367	*
1368	* Output the element final HTML on the frontend.
1369	*
1370	* @since 3.1.0
1371	* @access protected
1372	*/
1373	protected function print_content() {
1374	foreach ( $this->get_children() as $child ) {
1375	$child->print_element();
1376	}
1377	}
1378
1379	/**
1380	* Get initial config.
1381	*
1382	* Retrieve the current element initial configuration.
1383	*
1384	* Adds more configuration on top of the controls list and the tabs assigned
1385	* to the control. This method also adds element name, type, icon and more.
1386	*
1387	* @since 2.9.0
1388	* @access protected
1389	*
1390	* @return array The initial config.
1391	*/
1392	protected function get_initial_config() {
1393	$config = [
1394	'name' => $this->get_name(),
1395	'elType' => $this->get_type(),
1396	'title' => $this->get_title(),
1397	'icon' => $this->get_icon(),
1398	'reload_preview' => $this->is_reload_preview_required(),
1399	];
1400
1401	if ( preg_match( '/^' . __NAMESPACE__ . '(Pro)?\\\\/', get_called_class() ) ) {
1402	$config['help_url'] = $this->get_help_url();
1403	} else {
1404	$config['help_url'] = $this->get_custom_help_url();
1405	}
1406
1407	if ( ! $this->is_editable() ) {
1408	$config['editable'] = false;
1409	}
1410
1411	return $config;
1412	}
1413
1414	/**
1415	* A Base method for sanitizing the settings before save.
1416	* This method is meant to be overridden by the element.
1417	*/
1418	protected function on_save( array $settings ) {
1419	return $settings;
1420	}
1421
1422	/**
1423	* Get child type.
1424	*
1425	* Retrieve the element child type based on element data.
1426	*
1427	* @since 2.0.0
1428	* @access private
1429	*
1430	* @param array $element_data Element ID.
1431	*
1432	* @return Element_Base\|false Child type or false if type not found.
1433	*/
1434	private function get_child_type( $element_data ) {
1435	$child_type = $this->_get_default_child_type( $element_data );
1436
1437	// If it's not a valid widget ( like a deactivated plugin )
1438	if ( ! $child_type ) {
1439	return false;
1440	}
1441
1442	/**
1443	* Element child type.
1444	*
1445	* Filters the child type of the element.
1446	*
1447	* @since 1.0.0
1448	*
1449	* @param Element_Base $child_type The child element.
1450	* @param array $element_data The original element ID.
1451	* @param Element_Base $this The original element.
1452	*/
1453	$child_type = apply_filters( 'elementor/element/get_child_type', $child_type, $element_data, $this );
1454
1455	return $child_type;
1456	}
1457
1458	/**
1459	* Initialize children.
1460	*
1461	* Initializing the element child elements.
1462	*
1463	* @since 2.0.0
1464	* @access private
1465	*/
1466	private function init_children() {
1467	$this->children = [];
1468
1469	$children_data = $this->get_data( 'elements' );
1470
1471	if ( ! $children_data ) {
1472	return;
1473	}
1474
1475	foreach ( $children_data as $child_data ) {
1476	if ( ! $child_data ) {
1477	continue;
1478	}
1479
1480	$this->add_child( $child_data );
1481	}
1482	}
1483
1484	/**
1485	* Element base constructor.
1486	*
1487	* Initializing the element base class using `$data` and `$args`.
1488	*
1489	* The `$data` parameter is required for a normal instance because of the
1490	* way Elementor renders data when initializing elements.
1491	*
1492	* @since 1.0.0
1493	* @access public
1494	*
1495	* @param array $data Optional. Element data. Default is an empty array.
1496	* @param array\|null $args Optional. Element default arguments. Default is null.
1497	**/
1498	public function __construct( array $data = [], array $args = null ) {
1499	if ( $data ) {
1500	$this->is_type_instance = false;
1501	} elseif ( $args ) {
1502	$this->default_args = $args;
1503	}
1504
1505	parent::__construct( $data );
1506	}
1507	}
1508