elementor / includes / base / element-base.php

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

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