elementor / includes / widgets / common.php

common.php in Elementor Website Builder – more than just a page builder 3.9.1, at includes/widgets/common.php

1,172 lines 28.1 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 common widget.
12	*
13	* Elementor base widget that gives you all the advanced options of the basic
14	* widget.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Common extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve common widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'common';
32	}
33
34	/**
35	* Show in panel.
36	*
37	* Whether to show the common widget in the panel or not.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return bool Whether to show the widget in the panel.
43	*/
44	public function show_in_panel() {
45	return false;
46	}
47
48	/**
49	* Get Responsive Device Args
50	*
51	* Receives an array of device args, and duplicates it for each active breakpoint.
52	* Returns an array of device args.
53	*
54	* @since 3.4.7
55	* @deprcated 3.7.0 - Not needed anymore because responsive conditioning in the Editor was fixed in v3.7.0.
56	* @access protected
57	*
58	* @param array $args arguments to duplicate per breakpoint
59	* @param array $devices_to_exclude
60	*
61	* @return array responsive device args
62	*/
63	protected function get_responsive_device_args( array $args, array $devices_to_exclude = [] ) {
64	Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( __METHOD__, '3.7.0' );
65
66	$device_args = [];
67	$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
68
69	foreach ( $breakpoints as $breakpoint_key => $breakpoint ) {
70	// If the device is not excluded, add it to the device args array.
71	if ( ! in_array( $breakpoint_key, $devices_to_exclude, true ) ) {
72	$parsed_device_args = $this->parse_device_args_placeholders( $args, $breakpoint_key );
73
74	$device_args[ $breakpoint_key ] = $parsed_device_args;
75	}
76	}
77
78	return $device_args;
79	}
80
81	/**
82	* Parse Device Args Placeholders
83	*
84	* Receives an array of args. Iterates over the args, and replaces the {{DEVICE}} placeholder, if exists, with the
85	* passed breakpoint key.
86	*
87	* @since 3.4.7
88	* @access private
89	*
90	* @param array $args
91	* @param string $breakpoint_key
92	* @return array parsed device args
93	*/
94	private function parse_device_args_placeholders( array $args, $breakpoint_key ) {
95	$parsed_args = [];
96
97	foreach ( $args as $arg_key => $arg_value ) {
98	$arg_key = str_replace( '{{DEVICE}}', $breakpoint_key, $arg_key );
99
100	if ( is_array( $arg_value ) ) {
101	$arg_value = $this->parse_device_args_placeholders( $arg_value, $breakpoint_key );
102	}
103
104	$parsed_args[ $arg_key ] = $arg_value;
105	}
106
107	return $parsed_args;
108	}
109
110	/**
111	* @param $shape String Shape name.
112	*
113	* @return string The shape path in the assets folder.
114	*/
115	private function get_shape_url( $shape ) {
116	return ELEMENTOR_ASSETS_URL . 'mask-shapes/' . $shape . '.svg';
117	}
118
119	/**
120	* Return a translated user-friendly list of the available masking shapes.
121	*
122	* @param bool $add_custom Determine if the output should contain `Custom` options.
123	*
124	* @return array Array of shapes with their URL as key.
125	*/
126	private function get_shapes( $add_custom = true ) {
127	$shapes = [
128	'circle' => esc_html__( 'Circle', 'elementor' ),
129	'flower' => esc_html__( 'Flower', 'elementor' ),
130	'sketch' => esc_html__( 'Sketch', 'elementor' ),
131	'triangle' => esc_html__( 'Triangle', 'elementor' ),
132	'blob' => esc_html__( 'Blob', 'elementor' ),
133	'hexagon' => esc_html__( 'Hexagon', 'elementor' ),
134	];
135
136	if ( $add_custom ) {
137	$shapes['custom'] = esc_html__( 'Custom', 'elementor' );
138	}
139
140	return $shapes;
141	}
142
143	/**
144	* Gets a string of CSS rules to apply, and returns an array of selectors with those rules.
145	* This function has been created in order to deal with masking for image widget.
146	* For most of the widgets the mask is being applied to the wrapper itself, but in the case of an image widget,
147	* the `img` tag should be masked directly. So instead of writing a lot of selectors every time,
148	* this function builds both of those selectors easily.
149	*
150	* @param $rules string The CSS rules to apply.
151	*
152	* @return array Selectors with the rules applied.
153	*/
154	private function get_mask_selectors( $rules ) {
155	$mask_selectors = [
156	'default' => '{{WRAPPER}}:not( .elementor-widget-image ) .elementor-widget-container',
157	'image' => '{{WRAPPER}}.elementor-widget-image .elementor-widget-container img',
158	];
159
160	return [
161	$mask_selectors['default'] => $rules,
162	$mask_selectors['image'] => $rules,
163	];
164	}
165
166	/**
167	* Register the Layout section.
168	*
169	* @return void
170	*/
171	private function register_layout_section() {
172	$this->start_controls_section(
173	'_section_style',
174	[
175	'label' => esc_html__( 'Layout', 'elementor' ),
176	'tab' => Controls_Manager::TAB_ADVANCED,
177	]
178	);
179
180	// Element Name for the Navigator
181	$this->add_control(
182	'_title',
183	[
184	'label' => esc_html__( 'Title', 'elementor' ),
185	'type' => Controls_Manager::HIDDEN,
186	'render_type' => 'none',
187	]
188	);
189
190	$this->add_responsive_control(
191	'_margin',
192	[
193	'label' => esc_html__( 'Margin', 'elementor' ),
194	'type' => Controls_Manager::DIMENSIONS,
195	'size_units' => [ 'px', 'em', '%', 'rem' ],
196	'selectors' => [
197	'{{WRAPPER}} > .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
198	],
199	]
200	);
201
202	$this->add_responsive_control(
203	'_padding',
204	[
205	'label' => esc_html__( 'Padding', 'elementor' ),
206	'type' => Controls_Manager::DIMENSIONS,
207	'size_units' => [ 'px', 'em', '%', 'rem' ],
208	'selectors' => [
209	'{{WRAPPER}} > .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
210	],
211	]
212	);
213
214	$experiments_manager = Plugin::$instance->experiments;
215	$is_container_active = $experiments_manager->is_feature_active( 'container' );
216
217	$this->add_responsive_control(
218	'_element_width',
219	[
220	'label' => esc_html__( 'Width', 'elementor' ),
221	'type' => Controls_Manager::SELECT,
222	'default' => '',
223	'options' => [
224	'' => esc_html__( 'Default', 'elementor' ),
225	'inherit' => esc_html__( 'Full Width', 'elementor' ) . ' (100%)',
226	'auto' => esc_html__( 'Inline', 'elementor' ) . ' (auto)',
227	'initial' => esc_html__( 'Custom', 'elementor' ),
228	],
229	'selectors_dictionary' => [
230	'inherit' => '100%',
231	],
232	'prefix_class' => 'elementor-widget%s__width-',
233	'selectors' => [
234	'{{WRAPPER}}' => 'width: {{VALUE}}; max-width: {{VALUE}}',
235	],
236	]
237	);
238
239	$this->add_responsive_control(
240	'_element_custom_width',
241	[
242	'label' => esc_html__( 'Width', 'elementor' ),
243	'type' => Controls_Manager::SLIDER,
244	'default' => [
245	'unit' => '%',
246	],
247	'range' => [
248	'px' => [
249	'max' => 1000,
250	'step' => 1,
251	],
252	'%' => [
253	'max' => 100,
254	'step' => 1,
255	],
256	],
257	'size_units' => [ 'px', '%', 'vw' ],
258	'selectors' => [
259	'{{WRAPPER}}' => '--container-widget-width: {{SIZE}}{{UNIT}}; --container-widget-flex-grow: 0; width: var( --container-widget-width, {{SIZE}}{{UNIT}} ); max-width: {{SIZE}}{{UNIT}}',
260	],
261	'condition' => [ '_element_width' => 'initial' ],
262	]
263	);
264
265	// Register Flex controls only if the Container experiment is active.
266	if ( $is_container_active ) {
267	$this->add_group_control(
268	Group_Control_Flex_Item::get_type(),
269	[
270	'name' => '_flex',
271	// Hack to increase specificity and make sure that the current widget overrides the
272	// parent flex settings.
273	'selector' => '{{WRAPPER}}.elementor-element',
274	'include' => [
275	'align_self',
276	'order',
277	'order_custom',
278	'size',
279	'grow',
280	'shrink',
281	],
282	'fields_options' => [
283	'align_self' => [
284	'separator' => 'before',
285	],
286	],
287	]
288	);
289	}
290
291	$vertical_align_conditions = [
292	'_element_width!' => '',
293	'_position' => '',
294	];
295
296	if ( $is_container_active ) {
297	$vertical_align_conditions['_element_vertical_align!'] = ''; // TODO: For BC.
298	}
299
300	// TODO: For BC - Remove in the future.
301	$this->add_responsive_control(
302	'_element_vertical_align',
303	[
304	'label' => esc_html__( 'Vertical Align', 'elementor' ),
305	'type' => Controls_Manager::CHOOSE,
306	'options' => [
307	'flex-start' => [
308	'title' => esc_html__( 'Start', 'elementor' ),
309	'icon' => 'eicon-v-align-top',
310	],
311	'center' => [
312	'title' => esc_html__( 'Center', 'elementor' ),
313	'icon' => 'eicon-v-align-middle',
314	],
315	'flex-end' => [
316	'title' => esc_html__( 'End', 'elementor' ),
317	'icon' => 'eicon-v-align-bottom',
318	],
319	],
320	'condition' => $vertical_align_conditions,
321	'selectors' => [
322	'{{WRAPPER}}' => 'align-self: {{VALUE}}',
323	],
324	]
325	);
326
327	$this->add_control(
328	'_position_description',
329	[
330	'raw' => '<strong>' . esc_html__( 'Please note!', 'elementor' ) . '</strong> ' . esc_html__( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ),
331	'type' => Controls_Manager::RAW_HTML,
332	'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
333	'render_type' => 'ui',
334	'condition' => [
335	'_position!' => '',
336	],
337	]
338	);
339
340	$this->add_control(
341	'_position',
342	[
343	'label' => esc_html__( 'Position', 'elementor' ),
344	'type' => Controls_Manager::SELECT,
345	'default' => '',
346	'options' => [
347	'' => esc_html__( 'Default', 'elementor' ),
348	'absolute' => esc_html__( 'Absolute', 'elementor' ),
349	'fixed' => esc_html__( 'Fixed', 'elementor' ),
350	],
351	'prefix_class' => 'elementor-',
352	'frontend_available' => true,
353	'separator' => 'before',
354	]
355	);
356
357	$start = is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' );
358	$end = ! is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' );
359
360	$this->add_control(
361	'_offset_orientation_h',
362	[
363	'label' => esc_html__( 'Horizontal Orientation', 'elementor' ),
364	'type' => Controls_Manager::CHOOSE,
365	'toggle' => false,
366	'default' => 'start',
367	'options' => [
368	'start' => [
369	'title' => $start,
370	'icon' => 'eicon-h-align-left',
371	],
372	'end' => [
373	'title' => $end,
374	'icon' => 'eicon-h-align-right',
375	],
376	],
377	'classes' => 'elementor-control-start-end',
378	'render_type' => 'ui',
379	'condition' => [
380	'_position!' => '',
381	],
382	]
383	);
384
385	$this->add_responsive_control(
386	'_offset_x',
387	[
388	'label' => esc_html__( 'Offset', 'elementor' ),
389	'type' => Controls_Manager::SLIDER,
390	'range' => [
391	'px' => [
392	'min' => -1000,
393	'max' => 1000,
394	'step' => 1,
395	],
396	'%' => [
397	'min' => -200,
398	'max' => 200,
399	],
400	'vw' => [
401	'min' => -200,
402	'max' => 200,
403	],
404	'vh' => [
405	'min' => -200,
406	'max' => 200,
407	],
408	],
409	'default' => [
410	'size' => '0',
411	],
412	'size_units' => [ 'px', '%', 'vw', 'vh' ],
413	'selectors' => [
414	'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
415	'body.rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
416	],
417	'condition' => [
418	'_offset_orientation_h!' => 'end',
419	'_position!' => '',
420	],
421	]
422	);
423
424	$this->add_responsive_control(
425	'_offset_x_end',
426	[
427	'label' => esc_html__( 'Offset', 'elementor' ),
428	'type' => Controls_Manager::SLIDER,
429	'range' => [
430	'px' => [
431	'min' => -1000,
432	'max' => 1000,
433	'step' => 0.1,
434	],
435	'%' => [
436	'min' => -200,
437	'max' => 200,
438	],
439	'vw' => [
440	'min' => -200,
441	'max' => 200,
442	],
443	'vh' => [
444	'min' => -200,
445	'max' => 200,
446	],
447	],
448	'default' => [
449	'size' => '0',
450	],
451	'size_units' => [ 'px', '%', 'vw', 'vh' ],
452	'selectors' => [
453	'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
454	'body.rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
455	],
456	'condition' => [
457	'_offset_orientation_h' => 'end',
458	'_position!' => '',
459	],
460	]
461	);
462
463	$this->add_control(
464	'_offset_orientation_v',
465	[
466	'label' => esc_html__( 'Vertical Orientation', 'elementor' ),
467	'type' => Controls_Manager::CHOOSE,
468	'toggle' => false,
469	'default' => 'start',
470	'options' => [
471	'start' => [
472	'title' => esc_html__( 'Top', 'elementor' ),
473	'icon' => 'eicon-v-align-top',
474	],
475	'end' => [
476	'title' => esc_html__( 'Bottom', 'elementor' ),
477	'icon' => 'eicon-v-align-bottom',
478	],
479	],
480	'render_type' => 'ui',
481	'condition' => [
482	'_position!' => '',
483	],
484	]
485	);
486
487	$this->add_responsive_control(
488	'_offset_y',
489	[
490	'label' => esc_html__( 'Offset', 'elementor' ),
491	'type' => Controls_Manager::SLIDER,
492	'range' => [
493	'px' => [
494	'min' => -1000,
495	'max' => 1000,
496	'step' => 1,
497	],
498	'%' => [
499	'min' => -200,
500	'max' => 200,
501	],
502	'vh' => [
503	'min' => -200,
504	'max' => 200,
505	],
506	'vw' => [
507	'min' => -200,
508	'max' => 200,
509	],
510	],
511	'size_units' => [ 'px', '%', 'vh', 'vw' ],
512	'default' => [
513	'size' => '0',
514	],
515	'selectors' => [
516	'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
517	],
518	'condition' => [
519	'_offset_orientation_v!' => 'end',
520	'_position!' => '',
521	],
522	]
523	);
524
525	$this->add_responsive_control(
526	'_offset_y_end',
527	[
528	'label' => esc_html__( 'Offset', 'elementor' ),
529	'type' => Controls_Manager::SLIDER,
530	'range' => [
531	'px' => [
532	'min' => -1000,
533	'max' => 1000,
534	'step' => 1,
535	],
536	'%' => [
537	'min' => -200,
538	'max' => 200,
539	],
540	'vh' => [
541	'min' => -200,
542	'max' => 200,
543	],
544	'vw' => [
545	'min' => -200,
546	'max' => 200,
547	],
548	],
549	'size_units' => [ 'px', '%', 'vh', 'vw' ],
550	'default' => [
551	'size' => '0',
552	],
553	'selectors' => [
554	'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
555	],
556	'condition' => [
557	'_offset_orientation_v' => 'end',
558	'_position!' => '',
559	],
560	]
561	);
562
563	$this->add_responsive_control(
564	'_z_index',
565	[
566	'label' => esc_html__( 'Z-Index', 'elementor' ),
567	'type' => Controls_Manager::NUMBER,
568	'selectors' => [
569	'{{WRAPPER}}' => 'z-index: {{VALUE}};',
570	],
571	]
572	);
573
574	$this->add_control(
575	'_element_id',
576	[
577	'label' => esc_html__( 'CSS ID', 'elementor' ),
578	'type' => Controls_Manager::TEXT,
579	'dynamic' => [
580	'active' => true,
581	],
582	'default' => '',
583	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
584	'style_transfer' => false,
585	'classes' => 'elementor-control-direction-ltr',
586	]
587	);
588
589	$this->add_control(
590	'_css_classes',
591	[
592	'label' => esc_html__( 'CSS Classes', 'elementor' ),
593	'type' => Controls_Manager::TEXT,
594	'dynamic' => [
595	'active' => true,
596	],
597	'prefix_class' => '',
598	'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
599	'classes' => 'elementor-control-direction-ltr',
600	]
601	);
602
603	$this->end_controls_section();
604	}
605
606	/**
607	* Register the Motion Effects section.
608	*
609	* @return void
610	*/
611	private function register_effects_section() {
612	$this->start_controls_section(
613	'section_effects',
614	[
615	'label' => esc_html__( 'Motion Effects', 'elementor' ),
616	'tab' => Controls_Manager::TAB_ADVANCED,
617	]
618	);
619
620	$this->add_responsive_control(
621	'_animation',
622	[
623	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
624	'type' => Controls_Manager::ANIMATION,
625	'frontend_available' => true,
626	]
627	);
628
629	$this->add_control(
630	'animation_duration',
631	[
632	'label' => esc_html__( 'Animation Duration', 'elementor' ),
633	'type' => Controls_Manager::SELECT,
634	'default' => '',
635	'options' => [
636	'slow' => esc_html__( 'Slow', 'elementor' ),
637	'' => esc_html__( 'Normal', 'elementor' ),
638	'fast' => esc_html__( 'Fast', 'elementor' ),
639	],
640	'prefix_class' => 'animated-',
641	'condition' => [
642	'_animation!' => '',
643	],
644	]
645	);
646
647	$this->add_control(
648	'_animation_delay',
649	[
650	'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
651	'type' => Controls_Manager::NUMBER,
652	'default' => '',
653	'min' => 0,
654	'step' => 100,
655	'condition' => [
656	'_animation!' => '',
657	],
658	'render_type' => 'none',
659	'frontend_available' => true,
660	]
661	);
662
663	$this->end_controls_section();
664	}
665
666	/** Register the Background section.
667	*
668	* @return void
669	*/
670	private function register_background_section() {
671	$this->start_controls_section(
672	'_section_background',
673	[
674	'label' => esc_html__( 'Background', 'elementor' ),
675	'tab' => Controls_Manager::TAB_ADVANCED,
676	]
677	);
678
679	$this->start_controls_tabs( '_tabs_background' );
680
681	$this->start_controls_tab(
682	'_tab_background_normal',
683	[
684	'label' => esc_html__( 'Normal', 'elementor' ),
685	]
686	);
687
688	$this->add_group_control(
689	Group_Control_Background::get_type(),
690	[
691	'name' => '_background',
692	'selector' => '{{WRAPPER}} > .elementor-widget-container',
693	'fields_options' => [
694	'image' => [
695	'background_lazyload' => [
696	'active' => true,
697	'keys' => [ '_background_image', 'url' ],
698	'selector' => '.elementor-widget-container',
699	],
700	],
701	],
702	]
703	);
704
705	$this->end_controls_tab();
706
707	$this->start_controls_tab(
708	'_tab_background_hover',
709	[
710	'label' => esc_html__( 'Hover', 'elementor' ),
711	]
712	);
713
714	$this->add_group_control(
715	Group_Control_Background::get_type(),
716	[
717	'name' => '_background_hover',
718	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
719	]
720	);
721
722	$this->add_control(
723	'_background_hover_transition',
724	[
725	'label' => esc_html__( 'Transition Duration', 'elementor' ),
726	'type' => Controls_Manager::SLIDER,
727	'range' => [
728	'px' => [
729	'max' => 3,
730	'step' => 0.1,
731	],
732	],
733	'render_type' => 'ui',
734	'separator' => 'before',
735	'selectors' => [
736	'{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}s',
737	],
738	]
739	);
740
741	$this->end_controls_tab();
742
743	$this->end_controls_tabs();
744
745	$this->end_controls_section();
746	}
747
748	/**
749	* Register the Border section.
750	*
751	* @return void
752	*/
753	private function register_border_section() {
754	$this->start_controls_section(
755	'_section_border',
756	[
757	'label' => esc_html__( 'Border', 'elementor' ),
758	'tab' => Controls_Manager::TAB_ADVANCED,
759	]
760	);
761
762	$this->start_controls_tabs( '_tabs_border' );
763
764	$this->start_controls_tab(
765	'_tab_border_normal',
766	[
767	'label' => esc_html__( 'Normal', 'elementor' ),
768	]
769	);
770
771	$this->add_group_control(
772	Group_Control_Border::get_type(),
773	[
774	'name' => '_border',
775	'selector' => '{{WRAPPER}} > .elementor-widget-container',
776	]
777	);
778
779	$this->add_responsive_control(
780	'_border_radius',
781	[
782	'label' => esc_html__( 'Border Radius', 'elementor' ),
783	'type' => Controls_Manager::DIMENSIONS,
784	'size_units' => [ 'px', '%', 'em' ],
785	'selectors' => [
786	'{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
787	],
788	]
789	);
790
791	$this->add_group_control(
792	Group_Control_Box_Shadow::get_type(),
793	[
794	'name' => '_box_shadow',
795	'selector' => '{{WRAPPER}} > .elementor-widget-container',
796	]
797	);
798
799	$this->end_controls_tab();
800
801	$this->start_controls_tab(
802	'_tab_border_hover',
803	[
804	'label' => esc_html__( 'Hover', 'elementor' ),
805	]
806	);
807
808	$this->add_group_control(
809	Group_Control_Border::get_type(),
810	[
811	'name' => '_border_hover',
812	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
813	]
814	);
815
816	$this->add_responsive_control(
817	'_border_radius_hover',
818	[
819	'label' => esc_html__( 'Border Radius', 'elementor' ),
820	'type' => Controls_Manager::DIMENSIONS,
821	'size_units' => [ 'px', '%', 'em' ],
822	'selectors' => [
823	'{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
824	],
825	]
826	);
827
828	$this->add_group_control(
829	Group_Control_Box_Shadow::get_type(),
830	[
831	'name' => '_box_shadow_hover',
832	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
833	]
834	);
835
836	$this->add_control(
837	'_border_hover_transition',
838	[
839	'label' => esc_html__( 'Transition Duration', 'elementor' ),
840	'type' => Controls_Manager::SLIDER,
841	'separator' => 'before',
842	'range' => [
843	'px' => [
844	'max' => 3,
845	'step' => 0.1,
846	],
847	],
848	'selectors' => [
849	'{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
850	],
851	]
852	);
853
854	$this->end_controls_tab();
855
856	$this->end_controls_tabs();
857
858	$this->end_controls_section();
859	}
860
861
862	/**
863	* Register the Mask section.
864	*
865	* @return void
866	*/
867	private function register_masking_section() {
868	$this->start_controls_section(
869	'_section_masking',
870	[
871	'label' => esc_html__( 'Mask', 'elementor' ),
872	'tab' => Controls_Manager::TAB_ADVANCED,
873	]
874	);
875
876	$this->add_control(
877	'_mask_switch',
878	[
879	'label' => esc_html__( 'Mask', 'elementor' ),
880	'type' => Controls_Manager::SWITCHER,
881	'label_on' => esc_html__( 'On', 'elementor' ),
882	'label_off' => esc_html__( 'Off', 'elementor' ),
883	'default' => '',
884	]
885	);
886
887	$this->add_control(
888	'_mask_shape',
889	[
890	'label' => esc_html__( 'Shape', 'elementor' ),
891	'type' => Controls_Manager::SELECT,
892	'options' => $this->get_shapes(),
893	'default' => 'circle',
894	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
895	'condition' => [
896	'_mask_switch!' => '',
897	],
898	]
899	);
900
901	$this->add_control(
902	'_mask_image',
903	[
904	'label' => esc_html__( 'Image', 'elementor' ),
905	'type' => Controls_Manager::MEDIA,
906	'media_type' => 'image',
907	'should_include_svg_inline_option' => true,
908	'library_type' => 'image/svg+xml',
909	'dynamic' => [
910	'active' => true,
911	],
912	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
913	'condition' => [
914	'_mask_switch!' => '',
915	'_mask_shape' => 'custom',
916	],
917	]
918	);
919
920	$this->add_control(
921	'_mask_notice',
922	[
923	'type' => Controls_Manager::HIDDEN,
924	'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
925	'<br>' .
926	sprintf(
927	/* translators: 1: Link open tag, 2: Link close tag. */
928	esc_html__( 'Explore additional Premium Shape packs and use them in your site. %1$sLearn More%2$s', 'elementor' ),
929	'<a target="_blank" href="https://go.elementor.com/mask-control">',
930	'</a>'
931	),
932	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
933	'condition' => [
934	'_mask_switch!' => '',
935	],
936	]
937	);
938
939	$this->add_responsive_control(
940	'_mask_size',
941	[
942	'label' => esc_html__( 'Size', 'elementor' ),
943	'type' => Controls_Manager::SELECT,
944	'options' => [
945	'contain' => esc_html__( 'Fit', 'elementor' ),
946	'cover' => esc_html__( 'Fill', 'elementor' ),
947	'custom' => esc_html__( 'Custom', 'elementor' ),
948	],
949	'default' => 'contain',
950	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ),
951	'condition' => [
952	'_mask_switch!' => '',
953	],
954	]
955	);
956
957	$this->add_responsive_control(
958	'_mask_size_scale',
959	[
960	'label' => esc_html__( 'Scale', 'elementor' ),
961	'type' => Controls_Manager::SLIDER,
962	'size_units' => [ 'px', 'em', '%', 'vw' ],
963	'range' => [
964	'px' => [
965	'min' => 0,
966	'max' => 500,
967	],
968	'em' => [
969	'min' => 0,
970	'max' => 100,
971	],
972	'%' => [
973	'min' => 0,
974	'max' => 200,
975	],
976	'vw' => [
977	'min' => 0,
978	'max' => 100,
979	],
980	],
981	'default' => [
982	'unit' => '%',
983	'size' => 100,
984	],
985	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ),
986	'condition' => [
987	'_mask_switch!' => '',
988	'_mask_size' => 'custom',
989	],
990	]
991	);
992
993	$this->add_responsive_control(
994	'_mask_position',
995	[
996	'label' => esc_html__( 'Position', 'elementor' ),
997	'type' => Controls_Manager::SELECT,
998	'options' => [
999	'center center' => esc_html__( 'Center Center', 'elementor' ),
1000	'center left' => esc_html__( 'Center Left', 'elementor' ),
1001	'center right' => esc_html__( 'Center Right', 'elementor' ),
1002	'top center' => esc_html__( 'Top Center', 'elementor' ),
1003	'top left' => esc_html__( 'Top Left', 'elementor' ),
1004	'top right' => esc_html__( 'Top Right', 'elementor' ),
1005	'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
1006	'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
1007	'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
1008	'custom' => esc_html__( 'Custom', 'elementor' ),
1009	],
1010	'default' => 'center center',
1011	'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ),
1012	'condition' => [
1013	'_mask_switch!' => '',
1014	],
1015	]
1016	);
1017
1018	$this->add_responsive_control(
1019	'_mask_position_x',
1020	[
1021	'label' => esc_html__( 'X Position', 'elementor' ),
1022	'type' => Controls_Manager::SLIDER,
1023	'size_units' => [ 'px', 'em', '%', 'vw' ],
1024	'range' => [
1025	'px' => [
1026	'min' => -500,
1027	'max' => 500,
1028	],
1029	'em' => [
1030	'min' => -100,
1031	'max' => 100,
1032	],
1033	'%' => [
1034	'min' => -100,
1035	'max' => 100,
1036	],
1037	'vw' => [
1038	'min' => -100,
1039	'max' => 100,
1040	],
1041	],
1042	'default' => [
1043	'unit' => '%',
1044	'size' => 0,
1045	],
1046	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ),
1047	'condition' => [
1048	'_mask_switch!' => '',
1049	'_mask_position' => 'custom',
1050	],
1051	]
1052	);
1053
1054	$this->add_responsive_control(
1055	'_mask_position_y',
1056	[
1057	'label' => esc_html__( 'Y Position', 'elementor' ),
1058	'type' => Controls_Manager::SLIDER,
1059	'size_units' => [ 'px', 'em', '%', 'vw' ],
1060	'range' => [
1061	'px' => [
1062	'min' => -500,
1063	'max' => 500,
1064	],
1065	'em' => [
1066	'min' => -100,
1067	'max' => 100,
1068	],
1069	'%' => [
1070	'min' => -100,
1071	'max' => 100,
1072	],
1073	'vw' => [
1074	'min' => -100,
1075	'max' => 100,
1076	],
1077	],
1078	'default' => [
1079	'unit' => '%',
1080	'size' => 0,
1081	],
1082	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ),
1083	'condition' => [
1084	'_mask_switch!' => '',
1085	'_mask_position' => 'custom',
1086	],
1087	]
1088	);
1089
1090	$this->add_responsive_control(
1091	'_mask_repeat',
1092	[
1093	'label' => esc_html__( 'Repeat', 'elementor' ),
1094	'type' => Controls_Manager::SELECT,
1095	'options' => [
1096	'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
1097	'repeat' => esc_html__( 'Repeat', 'elementor' ),
1098	'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
1099	'repeat-Y' => esc_html__( 'Repeat-y', 'elementor' ),
1100	'round' => esc_html__( 'Round', 'elementor' ),
1101	'space' => esc_html__( 'Space', 'elementor' ),
1102	],
1103	'default' => 'no-repeat',
1104	'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ),
1105	'condition' => [
1106	'_mask_switch!' => '',
1107	'_mask_size!' => 'cover',
1108	],
1109	]
1110	);
1111
1112	$this->end_controls_section();
1113	}
1114
1115
1116	/**
1117	* Register the Responsive section.
1118	*
1119	* @return void
1120	*/
1121	private function register_responsive_section() {
1122	$this->start_controls_section(
1123	'_section_responsive',
1124	[
1125	'label' => esc_html__( 'Responsive', 'elementor' ),
1126	'tab' => Controls_Manager::TAB_ADVANCED,
1127	]
1128	);
1129
1130	$this->add_control(
1131	'responsive_description',
1132	[
1133	'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1134	'type' => Controls_Manager::RAW_HTML,
1135	'content_classes' => 'elementor-descriptor',
1136	]
1137	);
1138
1139	$this->add_hidden_device_controls();
1140
1141	$this->end_controls_section();
1142	}
1143
1144	/**
1145	* Register common widget controls.
1146	*
1147	* Adds different input fields to allow the user to change and customize the widget settings.
1148	*
1149	* @since 3.1.0
1150	* @access protected
1151	*/
1152	protected function register_controls() {
1153	$this->register_layout_section();
1154
1155	$this->register_effects_section();
1156
1157	$this->register_transform_section();
1158
1159	$this->register_background_section();
1160
1161	$this->register_border_section();
1162
1163	$this->register_masking_section();
1164
1165	$this->register_responsive_section();
1166
1167	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1168
1169	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
1170	}
1171	}
1172