elementor / includes / base / element-base.php

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

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