elementor / includes / widgets / common.php

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

1,183 lines 28.6 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	* @deprecated 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', 'vw', 'custom' ],
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', 'vw', 'custom' ],
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', '%', 'em', 'rem', 'vw', 'custom' ],
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', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
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', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
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', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
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', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
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	'ai' => [
583	'active' => false,
584	],
585	'default' => '',
586	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
587	'style_transfer' => false,
588	'classes' => 'elementor-control-direction-ltr',
589	]
590	);
591
592	$this->add_control(
593	'_css_classes',
594	[
595	'label' => esc_html__( 'CSS Classes', 'elementor' ),
596	'type' => Controls_Manager::TEXT,
597	'ai' => [
598	'active' => false,
599	],
600	'dynamic' => [
601	'active' => true,
602	],
603	'prefix_class' => '',
604	'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
605	'classes' => 'elementor-control-direction-ltr',
606	]
607	);
608
609	$this->end_controls_section();
610	}
611
612	/**
613	* Register the Motion Effects section.
614	*
615	* @return void
616	*/
617	private function register_effects_section() {
618	$this->start_controls_section(
619	'section_effects',
620	[
621	'label' => esc_html__( 'Motion Effects', 'elementor' ),
622	'tab' => Controls_Manager::TAB_ADVANCED,
623	]
624	);
625
626	$this->add_responsive_control(
627	'_animation',
628	[
629	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
630	'type' => Controls_Manager::ANIMATION,
631	'frontend_available' => true,
632	]
633	);
634
635	$this->add_control(
636	'animation_duration',
637	[
638	'label' => esc_html__( 'Animation Duration', 'elementor' ),
639	'type' => Controls_Manager::SELECT,
640	'default' => '',
641	'options' => [
642	'slow' => esc_html__( 'Slow', 'elementor' ),
643	'' => esc_html__( 'Normal', 'elementor' ),
644	'fast' => esc_html__( 'Fast', 'elementor' ),
645	],
646	'prefix_class' => 'animated-',
647	'condition' => [
648	'_animation!' => '',
649	],
650	]
651	);
652
653	$this->add_control(
654	'_animation_delay',
655	[
656	'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
657	'type' => Controls_Manager::NUMBER,
658	'default' => '',
659	'min' => 0,
660	'step' => 100,
661	'condition' => [
662	'_animation!' => '',
663	],
664	'render_type' => 'none',
665	'frontend_available' => true,
666	]
667	);
668
669	$this->end_controls_section();
670	}
671
672	/** Register the Background section.
673	*
674	* @return void
675	*/
676	private function register_background_section() {
677	$this->start_controls_section(
678	'_section_background',
679	[
680	'label' => esc_html__( 'Background', 'elementor' ),
681	'tab' => Controls_Manager::TAB_ADVANCED,
682	]
683	);
684
685	$this->start_controls_tabs( '_tabs_background' );
686
687	$this->start_controls_tab(
688	'_tab_background_normal',
689	[
690	'label' => esc_html__( 'Normal', 'elementor' ),
691	]
692	);
693
694	$this->add_group_control(
695	Group_Control_Background::get_type(),
696	[
697	'name' => '_background',
698	'selector' => '{{WRAPPER}} > .elementor-widget-container',
699	'fields_options' => [
700	'image' => [
701	'background_lazyload' => [
702	'active' => true,
703	'keys' => [ '_background_image', 'url' ],
704	'selector' => '.elementor-widget-container',
705	],
706	],
707	],
708	]
709	);
710
711	$this->end_controls_tab();
712
713	$this->start_controls_tab(
714	'_tab_background_hover',
715	[
716	'label' => esc_html__( 'Hover', 'elementor' ),
717	]
718	);
719
720	$this->add_group_control(
721	Group_Control_Background::get_type(),
722	[
723	'name' => '_background_hover',
724	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
725	]
726	);
727
728	$this->add_control(
729	'_background_hover_transition',
730	[
731	'label' => esc_html__( 'Transition Duration', 'elementor' ),
732	'type' => Controls_Manager::SLIDER,
733	'range' => [
734	'px' => [
735	'max' => 3,
736	'step' => 0.1,
737	],
738	],
739	'render_type' => 'ui',
740	'separator' => 'before',
741	'selectors' => [
742	'{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}s',
743	],
744	]
745	);
746
747	$this->end_controls_tab();
748
749	$this->end_controls_tabs();
750
751	$this->end_controls_section();
752	}
753
754	/**
755	* Register the Border section.
756	*
757	* @return void
758	*/
759	private function register_border_section() {
760	$this->start_controls_section(
761	'_section_border',
762	[
763	'label' => esc_html__( 'Border', 'elementor' ),
764	'tab' => Controls_Manager::TAB_ADVANCED,
765	]
766	);
767
768	$this->start_controls_tabs( '_tabs_border' );
769
770	$this->start_controls_tab(
771	'_tab_border_normal',
772	[
773	'label' => esc_html__( 'Normal', 'elementor' ),
774	]
775	);
776
777	$this->add_group_control(
778	Group_Control_Border::get_type(),
779	[
780	'name' => '_border',
781	'selector' => '{{WRAPPER}} > .elementor-widget-container',
782	]
783	);
784
785	$this->add_responsive_control(
786	'_border_radius',
787	[
788	'label' => esc_html__( 'Border Radius', 'elementor' ),
789	'type' => Controls_Manager::DIMENSIONS,
790	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
791	'selectors' => [
792	'{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
793	],
794	]
795	);
796
797	$this->add_group_control(
798	Group_Control_Box_Shadow::get_type(),
799	[
800	'name' => '_box_shadow',
801	'selector' => '{{WRAPPER}} > .elementor-widget-container',
802	]
803	);
804
805	$this->end_controls_tab();
806
807	$this->start_controls_tab(
808	'_tab_border_hover',
809	[
810	'label' => esc_html__( 'Hover', 'elementor' ),
811	]
812	);
813
814	$this->add_group_control(
815	Group_Control_Border::get_type(),
816	[
817	'name' => '_border_hover',
818	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
819	]
820	);
821
822	$this->add_responsive_control(
823	'_border_radius_hover',
824	[
825	'label' => esc_html__( 'Border Radius', 'elementor' ),
826	'type' => Controls_Manager::DIMENSIONS,
827	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
828	'selectors' => [
829	'{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
830	],
831	]
832	);
833
834	$this->add_group_control(
835	Group_Control_Box_Shadow::get_type(),
836	[
837	'name' => '_box_shadow_hover',
838	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
839	]
840	);
841
842	$this->add_control(
843	'_border_hover_transition',
844	[
845	'label' => esc_html__( 'Transition Duration', 'elementor' ),
846	'type' => Controls_Manager::SLIDER,
847	'separator' => 'before',
848	'range' => [
849	'px' => [
850	'max' => 3,
851	'step' => 0.1,
852	],
853	],
854	'selectors' => [
855	'{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
856	],
857	]
858	);
859
860	$this->end_controls_tab();
861
862	$this->end_controls_tabs();
863
864	$this->end_controls_section();
865	}
866
867
868	/**
869	* Register the Mask section.
870	*
871	* @return void
872	*/
873	private function register_masking_section() {
874	$this->start_controls_section(
875	'_section_masking',
876	[
877	'label' => esc_html__( 'Mask', 'elementor' ),
878	'tab' => Controls_Manager::TAB_ADVANCED,
879	]
880	);
881
882	$this->add_control(
883	'_mask_switch',
884	[
885	'label' => esc_html__( 'Mask', 'elementor' ),
886	'type' => Controls_Manager::SWITCHER,
887	'label_on' => esc_html__( 'On', 'elementor' ),
888	'label_off' => esc_html__( 'Off', 'elementor' ),
889	'default' => '',
890	]
891	);
892
893	$this->add_control(
894	'_mask_shape',
895	[
896	'label' => esc_html__( 'Shape', 'elementor' ),
897	'type' => Controls_Manager::SELECT,
898	'options' => $this->get_shapes(),
899	'default' => 'circle',
900	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
901	'condition' => [
902	'_mask_switch!' => '',
903	],
904	]
905	);
906
907	$this->add_control(
908	'_mask_image',
909	[
910	'label' => esc_html__( 'Image', 'elementor' ),
911	'type' => Controls_Manager::MEDIA,
912	'media_types' => [ 'image' ],
913	'should_include_svg_inline_option' => true,
914	'library_type' => 'image/svg+xml',
915	'dynamic' => [
916	'active' => true,
917	],
918	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
919	'condition' => [
920	'_mask_switch!' => '',
921	'_mask_shape' => 'custom',
922	],
923	]
924	);
925
926	$this->add_control(
927	'_mask_notice',
928	[
929	'type' => Controls_Manager::HIDDEN,
930	'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
931	'<br>' .
932	sprintf(
933	/* translators: 1: Link open tag, 2: Link close tag. */
934	esc_html__( 'Explore additional Premium Shape packs and use them in your site. %1$sLearn More%2$s', 'elementor' ),
935	'<a target="_blank" href="https://go.elementor.com/mask-control">',
936	'</a>'
937	),
938	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
939	'condition' => [
940	'_mask_switch!' => '',
941	],
942	]
943	);
944
945	$this->add_responsive_control(
946	'_mask_size',
947	[
948	'label' => esc_html__( 'Size', 'elementor' ),
949	'type' => Controls_Manager::SELECT,
950	'options' => [
951	'contain' => esc_html__( 'Fit', 'elementor' ),
952	'cover' => esc_html__( 'Fill', 'elementor' ),
953	'custom' => esc_html__( 'Custom', 'elementor' ),
954	],
955	'default' => 'contain',
956	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ),
957	'condition' => [
958	'_mask_switch!' => '',
959	],
960	]
961	);
962
963	$this->add_responsive_control(
964	'_mask_size_scale',
965	[
966	'label' => esc_html__( 'Scale', 'elementor' ),
967	'type' => Controls_Manager::SLIDER,
968	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
969	'range' => [
970	'px' => [
971	'min' => 0,
972	'max' => 500,
973	],
974	'em' => [
975	'min' => 0,
976	'max' => 100,
977	],
978	'%' => [
979	'min' => 0,
980	'max' => 200,
981	],
982	'vw' => [
983	'min' => 0,
984	'max' => 100,
985	],
986	],
987	'default' => [
988	'unit' => '%',
989	'size' => 100,
990	],
991	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ),
992	'condition' => [
993	'_mask_switch!' => '',
994	'_mask_size' => 'custom',
995	],
996	]
997	);
998
999	$this->add_responsive_control(
1000	'_mask_position',
1001	[
1002	'label' => esc_html__( 'Position', 'elementor' ),
1003	'type' => Controls_Manager::SELECT,
1004	'options' => [
1005	'center center' => esc_html__( 'Center Center', 'elementor' ),
1006	'center left' => esc_html__( 'Center Left', 'elementor' ),
1007	'center right' => esc_html__( 'Center Right', 'elementor' ),
1008	'top center' => esc_html__( 'Top Center', 'elementor' ),
1009	'top left' => esc_html__( 'Top Left', 'elementor' ),
1010	'top right' => esc_html__( 'Top Right', 'elementor' ),
1011	'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
1012	'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
1013	'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
1014	'custom' => esc_html__( 'Custom', 'elementor' ),
1015	],
1016	'default' => 'center center',
1017	'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ),
1018	'condition' => [
1019	'_mask_switch!' => '',
1020	],
1021	]
1022	);
1023
1024	$this->add_responsive_control(
1025	'_mask_position_x',
1026	[
1027	'label' => esc_html__( 'X Position', 'elementor' ),
1028	'type' => Controls_Manager::SLIDER,
1029	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1030	'range' => [
1031	'px' => [
1032	'min' => -500,
1033	'max' => 500,
1034	],
1035	'em' => [
1036	'min' => -100,
1037	'max' => 100,
1038	],
1039	'%' => [
1040	'min' => -100,
1041	'max' => 100,
1042	],
1043	'vw' => [
1044	'min' => -100,
1045	'max' => 100,
1046	],
1047	],
1048	'default' => [
1049	'unit' => '%',
1050	'size' => 0,
1051	],
1052	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ),
1053	'condition' => [
1054	'_mask_switch!' => '',
1055	'_mask_position' => 'custom',
1056	],
1057	]
1058	);
1059
1060	$this->add_responsive_control(
1061	'_mask_position_y',
1062	[
1063	'label' => esc_html__( 'Y Position', 'elementor' ),
1064	'type' => Controls_Manager::SLIDER,
1065	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1066	'range' => [
1067	'px' => [
1068	'min' => -500,
1069	'max' => 500,
1070	],
1071	'em' => [
1072	'min' => -100,
1073	'max' => 100,
1074	],
1075	'%' => [
1076	'min' => -100,
1077	'max' => 100,
1078	],
1079	'vw' => [
1080	'min' => -100,
1081	'max' => 100,
1082	],
1083	],
1084	'default' => [
1085	'unit' => '%',
1086	'size' => 0,
1087	],
1088	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ),
1089	'condition' => [
1090	'_mask_switch!' => '',
1091	'_mask_position' => 'custom',
1092	],
1093	]
1094	);
1095
1096	$this->add_responsive_control(
1097	'_mask_repeat',
1098	[
1099	'label' => esc_html__( 'Repeat', 'elementor' ),
1100	'type' => Controls_Manager::SELECT,
1101	'options' => [
1102	'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
1103	'repeat' => esc_html__( 'Repeat', 'elementor' ),
1104	'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
1105	'repeat-Y' => esc_html__( 'Repeat-y', 'elementor' ),
1106	'round' => esc_html__( 'Round', 'elementor' ),
1107	'space' => esc_html__( 'Space', 'elementor' ),
1108	],
1109	'default' => 'no-repeat',
1110	'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ),
1111	'condition' => [
1112	'_mask_switch!' => '',
1113	'_mask_size!' => 'cover',
1114	],
1115	]
1116	);
1117
1118	$this->end_controls_section();
1119	}
1120
1121
1122	/**
1123	* Register the Responsive section.
1124	*
1125	* @return void
1126	*/
1127	private function register_responsive_section() {
1128	$this->start_controls_section(
1129	'_section_responsive',
1130	[
1131	'label' => esc_html__( 'Responsive', 'elementor' ),
1132	'tab' => Controls_Manager::TAB_ADVANCED,
1133	]
1134	);
1135
1136	$this->add_control(
1137	'responsive_description',
1138	[
1139	'raw' => sprintf(
1140	/* translators: 1: Link open tag, 2: Link close tag. */
1141	esc_html__( 'Responsive visibility will take effect only on %1$s preview mode %2$s or live page, and not while editing in Elementor.', 'elementor' ),
1142	'<a href="javascript: $e.run( \'panel/close\' )">',
1143	'</a>'
1144	),
1145	'type' => Controls_Manager::RAW_HTML,
1146	'content_classes' => 'elementor-descriptor',
1147	]
1148	);
1149
1150	$this->add_hidden_device_controls();
1151
1152	$this->end_controls_section();
1153	}
1154
1155	/**
1156	* Register common widget controls.
1157	*
1158	* Adds different input fields to allow the user to change and customize the widget settings.
1159	*
1160	* @since 3.1.0
1161	* @access protected
1162	*/
1163	protected function register_controls() {
1164	$this->register_layout_section();
1165
1166	$this->register_effects_section();
1167
1168	$this->register_transform_section();
1169
1170	$this->register_background_section();
1171
1172	$this->register_border_section();
1173
1174	$this->register_masking_section();
1175
1176	$this->register_responsive_section();
1177
1178	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1179
1180	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
1181	}
1182	}
1183