elementor / includes / base / element-base.php

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

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