elementor / includes / controls / groups / background.php

background.php in Elementor Website Builder – more than just a page builder 3.2.0, at includes/controls/groups/background.php

872 lines 23.2 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	use Elementor\Modules\DynamicTags\Module as TagsModule;
5
6	if ( ! defined( 'ABSPATH' ) ) {
7	exit; // Exit if accessed directly.
8	}
9
10	/**
11	* Elementor background control.
12	*
13	* A base control for creating background control. Displays input fields to define
14	* the background color, background image, background gradient or background video.
15	*
16	* @since 1.2.2
17	*/
18	class Group_Control_Background extends Group_Control_Base {
19
20	/**
21	* Fields.
22	*
23	* Holds all the background control fields.
24	*
25	* @since 1.2.2
26	* @access protected
27	* @static
28	*
29	* @var array Background control fields.
30	*/
31	protected static $fields;
32
33	/**
34	* Background Types.
35	*
36	* Holds all the available background types.
37	*
38	* @since 1.2.2
39	* @access private
40	* @static
41	*
42	* @var array
43	*/
44	private static $background_types;
45
46	/**
47	* Get background control type.
48	*
49	* Retrieve the control type, in this case `background`.
50	*
51	* @since 1.0.0
52	* @access public
53	* @static
54	*
55	* @return string Control type.
56	*/
57	public static function get_type() {
58	return 'background';
59	}
60
61	/**
62	* Get background control types.
63	*
64	* Retrieve available background types.
65	*
66	* @since 1.2.2
67	* @access public
68	* @static
69	*
70	* @return array Available background types.
71	*/
72	public static function get_background_types() {
73	if ( null === self::$background_types ) {
74	self::$background_types = self::get_default_background_types();
75	}
76
77	return self::$background_types;
78	}
79
80	/**
81	* Get Default background types.
82	*
83	* Retrieve background control initial types.
84	*
85	* @since 2.0.0
86	* @access private
87	* @static
88	*
89	* @return array Default background types.
90	*/
91	private static function get_default_background_types() {
92	return [
93	'classic' => [
94	'title' => _x( 'Classic', 'Background Control', 'elementor' ),
95	'icon' => 'eicon-paint-brush',
96	],
97	'gradient' => [
98	'title' => _x( 'Gradient', 'Background Control', 'elementor' ),
99	'icon' => 'eicon-barcode',
100	],
101	'video' => [
102	'title' => _x( 'Video', 'Background Control', 'elementor' ),
103	'icon' => 'eicon-video-camera',
104	],
105	'slideshow' => [
106	'title' => _x( 'Slideshow', 'Background Control', 'elementor' ),
107	'icon' => 'eicon-slideshow',
108	],
109	];
110	}
111
112	/**
113	* Init fields.
114	*
115	* Initialize background control fields.
116	*
117	* @since 1.2.2
118	* @access public
119	*
120	* @return array Control fields.
121	*/
122	public function init_fields() {
123	$fields = [];
124
125	$fields['background'] = [
126	'label' => _x( 'Background Type', 'Background Control', 'elementor' ),
127	'type' => Controls_Manager::CHOOSE,
128	'render_type' => 'ui',
129	];
130
131	$fields['color'] = [
132	'label' => _x( 'Color', 'Background Control', 'elementor' ),
133	'type' => Controls_Manager::COLOR,
134	'default' => '',
135	'title' => _x( 'Background Color', 'Background Control', 'elementor' ),
136	'selectors' => [
137	'{{SELECTOR}}' => 'background-color: {{VALUE}};',
138	],
139	'condition' => [
140	'background' => [ 'classic', 'gradient' ],
141	],
142	];
143
144	$fields['color_stop'] = [
145	'label' => _x( 'Location', 'Background Control', 'elementor' ),
146	'type' => Controls_Manager::SLIDER,
147	'size_units' => [ '%' ],
148	'default' => [
149	'unit' => '%',
150	'size' => 0,
151	],
152	'render_type' => 'ui',
153	'condition' => [
154	'background' => [ 'gradient' ],
155	],
156	'of_type' => 'gradient',
157	];
158
159	$fields['color_b'] = [
160	'label' => _x( 'Second Color', 'Background Control', 'elementor' ),
161	'type' => Controls_Manager::COLOR,
162	'default' => '#f2295b',
163	'render_type' => 'ui',
164	'condition' => [
165	'background' => [ 'gradient' ],
166	],
167	'of_type' => 'gradient',
168	];
169
170	$fields['color_b_stop'] = [
171	'label' => _x( 'Location', 'Background Control', 'elementor' ),
172	'type' => Controls_Manager::SLIDER,
173	'size_units' => [ '%' ],
174	'default' => [
175	'unit' => '%',
176	'size' => 100,
177	],
178	'render_type' => 'ui',
179	'condition' => [
180	'background' => [ 'gradient' ],
181	],
182	'of_type' => 'gradient',
183	];
184
185	$fields['gradient_type'] = [
186	'label' => _x( 'Type', 'Background Control', 'elementor' ),
187	'type' => Controls_Manager::SELECT,
188	'options' => [
189	'linear' => _x( 'Linear', 'Background Control', 'elementor' ),
190	'radial' => _x( 'Radial', 'Background Control', 'elementor' ),
191	],
192	'default' => 'linear',
193	'render_type' => 'ui',
194	'condition' => [
195	'background' => [ 'gradient' ],
196	],
197	'of_type' => 'gradient',
198	];
199
200	$fields['gradient_angle'] = [
201	'label' => _x( 'Angle', 'Background Control', 'elementor' ),
202	'type' => Controls_Manager::SLIDER,
203	'size_units' => [ 'deg' ],
204	'default' => [
205	'unit' => 'deg',
206	'size' => 180,
207	],
208	'range' => [
209	'deg' => [
210	'step' => 10,
211	],
212	],
213	'selectors' => [
214	'{{SELECTOR}}' => 'background-color: transparent; background-image: linear-gradient({{SIZE}}{{UNIT}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
215	],
216	'condition' => [
217	'background' => [ 'gradient' ],
218	'gradient_type' => 'linear',
219	],
220	'of_type' => 'gradient',
221	];
222
223	$fields['gradient_position'] = [
224	'label' => _x( 'Position', 'Background Control', 'elementor' ),
225	'type' => Controls_Manager::SELECT,
226	'options' => [
227	'center center' => _x( 'Center Center', 'Background Control', 'elementor' ),
228	'center left' => _x( 'Center Left', 'Background Control', 'elementor' ),
229	'center right' => _x( 'Center Right', 'Background Control', 'elementor' ),
230	'top center' => _x( 'Top Center', 'Background Control', 'elementor' ),
231	'top left' => _x( 'Top Left', 'Background Control', 'elementor' ),
232	'top right' => _x( 'Top Right', 'Background Control', 'elementor' ),
233	'bottom center' => _x( 'Bottom Center', 'Background Control', 'elementor' ),
234	'bottom left' => _x( 'Bottom Left', 'Background Control', 'elementor' ),
235	'bottom right' => _x( 'Bottom Right', 'Background Control', 'elementor' ),
236	],
237	'default' => 'center center',
238	'selectors' => [
239	'{{SELECTOR}}' => 'background-color: transparent; background-image: radial-gradient(at {{VALUE}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
240	],
241	'condition' => [
242	'background' => [ 'gradient' ],
243	'gradient_type' => 'radial',
244	],
245	'of_type' => 'gradient',
246	];
247
248	$fields['image'] = [
249	'label' => _x( 'Image', 'Background Control', 'elementor' ),
250	'type' => Controls_Manager::MEDIA,
251	'dynamic' => [
252	'active' => true,
253	],
254	'responsive' => true,
255	'title' => _x( 'Background Image', 'Background Control', 'elementor' ),
256	'selectors' => [
257	'{{SELECTOR}}' => 'background-image: url("{{URL}}");',
258	],
259	'render_type' => 'template',
260	'condition' => [
261	'background' => [ 'classic' ],
262	],
263	];
264
265	$fields['position'] = [
266	'label' => _x( 'Position', 'Background Control', 'elementor' ),
267	'type' => Controls_Manager::SELECT,
268	'default' => '',
269	'responsive' => true,
270	'options' => [
271	'' => _x( 'Default', 'Background Control', 'elementor' ),
272	'center center' => _x( 'Center Center', 'Background Control', 'elementor' ),
273	'center left' => _x( 'Center Left', 'Background Control', 'elementor' ),
274	'center right' => _x( 'Center Right', 'Background Control', 'elementor' ),
275	'top center' => _x( 'Top Center', 'Background Control', 'elementor' ),
276	'top left' => _x( 'Top Left', 'Background Control', 'elementor' ),
277	'top right' => _x( 'Top Right', 'Background Control', 'elementor' ),
278	'bottom center' => _x( 'Bottom Center', 'Background Control', 'elementor' ),
279	'bottom left' => _x( 'Bottom Left', 'Background Control', 'elementor' ),
280	'bottom right' => _x( 'Bottom Right', 'Background Control', 'elementor' ),
281	'initial' => _x( 'Custom', 'Background Control', 'elementor' ),
282
283	],
284	'selectors' => [
285	'{{SELECTOR}}' => 'background-position: {{VALUE}};',
286	],
287	'condition' => [
288	'background' => [ 'classic' ],
289	'image[url]!' => '',
290	],
291	];
292
293	$fields['xpos'] = [
294	'label' => _x( 'X Position', 'Background Control', 'elementor' ),
295	'type' => Controls_Manager::SLIDER,
296	'responsive' => true,
297	'size_units' => [ 'px', 'em', '%', 'vw' ],
298	'default' => [
299	'unit' => 'px',
300	'size' => 0,
301	],
302	'tablet_default' => [
303	'unit' => 'px',
304	'size' => 0,
305	],
306	'mobile_default' => [
307	'unit' => 'px',
308	'size' => 0,
309	],
310	'range' => [
311	'px' => [
312	'min' => -800,
313	'max' => 800,
314	],
315	'em' => [
316	'min' => -100,
317	'max' => 100,
318	],
319	'%' => [
320	'min' => -100,
321	'max' => 100,
322	],
323	'vw' => [
324	'min' => -100,
325	'max' => 100,
326	],
327	],
328	'selectors' => [
329	'{{SELECTOR}}' => 'background-position: {{SIZE}}{{UNIT}} {{ypos.SIZE}}{{ypos.UNIT}}',
330	],
331	'condition' => [
332	'background' => [ 'classic' ],
333	'position' => [ 'initial' ],
334	'image[url]!' => '',
335	],
336	'required' => true,
337	'device_args' => [
338	Controls_Stack::RESPONSIVE_TABLET => [
339	'selectors' => [
340	'{{SELECTOR}}' => 'background-position: {{SIZE}}{{UNIT}} {{ypos_tablet.SIZE}}{{ypos_tablet.UNIT}}',
341	],
342	'condition' => [
343	'background' => [ 'classic' ],
344	'position_tablet' => [ 'initial' ],
345	],
346	],
347	Controls_Stack::RESPONSIVE_MOBILE => [
348	'selectors' => [
349	'{{SELECTOR}}' => 'background-position: {{SIZE}}{{UNIT}} {{ypos_mobile.SIZE}}{{ypos_mobile.UNIT}}',
350	],
351	'condition' => [
352	'background' => [ 'classic' ],
353	'position_mobile' => [ 'initial' ],
354	],
355	],
356	],
357	];
358
359	$fields['ypos'] = [
360	'label' => _x( 'Y Position', 'Background Control', 'elementor' ),
361	'type' => Controls_Manager::SLIDER,
362	'responsive' => true,
363	'size_units' => [ 'px', 'em', '%', 'vh' ],
364	'default' => [
365	'unit' => 'px',
366	'size' => 0,
367	],
368	'tablet_default' => [
369	'unit' => 'px',
370	'size' => 0,
371	],
372	'mobile_default' => [
373	'unit' => 'px',
374	'size' => 0,
375	],
376	'range' => [
377	'px' => [
378	'min' => -800,
379	'max' => 800,
380	],
381	'em' => [
382	'min' => -100,
383	'max' => 100,
384	],
385	'%' => [
386	'min' => -100,
387	'max' => 100,
388	],
389	'vh' => [
390	'min' => -100,
391	'max' => 100,
392	],
393	],
394	'selectors' => [
395	'{{SELECTOR}}' => 'background-position: {{xpos.SIZE}}{{xpos.UNIT}} {{SIZE}}{{UNIT}}',
396	],
397	'condition' => [
398	'background' => [ 'classic' ],
399	'position' => [ 'initial' ],
400	'image[url]!' => '',
401	],
402	'required' => true,
403	'device_args' => [
404	Controls_Stack::RESPONSIVE_TABLET => [
405	'selectors' => [
406	'{{SELECTOR}}' => 'background-position: {{xpos_tablet.SIZE}}{{xpos_tablet.UNIT}} {{SIZE}}{{UNIT}}',
407	],
408	'condition' => [
409	'background' => [ 'classic' ],
410	'position_tablet' => [ 'initial' ],
411	],
412	],
413	Controls_Stack::RESPONSIVE_MOBILE => [
414	'selectors' => [
415	'{{SELECTOR}}' => 'background-position: {{xpos_mobile.SIZE}}{{xpos_mobile.UNIT}} {{SIZE}}{{UNIT}}',
416	],
417	'condition' => [
418	'background' => [ 'classic' ],
419	'position_mobile' => [ 'initial' ],
420	],
421	],
422	],
423	];
424
425	$fields['attachment'] = [
426	'label' => _x( 'Attachment', 'Background Control', 'elementor' ),
427	'type' => Controls_Manager::SELECT,
428	'default' => '',
429	'options' => [
430	'' => _x( 'Default', 'Background Control', 'elementor' ),
431	'scroll' => _x( 'Scroll', 'Background Control', 'elementor' ),
432	'fixed' => _x( 'Fixed', 'Background Control', 'elementor' ),
433	],
434	'selectors' => [
435	'(desktop+){{SELECTOR}}' => 'background-attachment: {{VALUE}};',
436	],
437	'condition' => [
438	'background' => [ 'classic' ],
439	'image[url]!' => '',
440	],
441	];
442
443	$fields['attachment_alert'] = [
444	'type' => Controls_Manager::RAW_HTML,
445	'content_classes' => 'elementor-control-field-description',
446	'raw' => __( 'Note: Attachment Fixed works only on desktop.', 'elementor' ),
447	'separator' => 'none',
448	'condition' => [
449	'background' => [ 'classic' ],
450	'image[url]!' => '',
451	'attachment' => 'fixed',
452	],
453	];
454
455	$fields['repeat'] = [
456	'label' => _x( 'Repeat', 'Background Control', 'elementor' ),
457	'type' => Controls_Manager::SELECT,
458	'default' => '',
459	'responsive' => true,
460	'options' => [
461	'' => _x( 'Default', 'Background Control', 'elementor' ),
462	'no-repeat' => _x( 'No-repeat', 'Background Control', 'elementor' ),
463	'repeat' => _x( 'Repeat', 'Background Control', 'elementor' ),
464	'repeat-x' => _x( 'Repeat-x', 'Background Control', 'elementor' ),
465	'repeat-y' => _x( 'Repeat-y', 'Background Control', 'elementor' ),
466	],
467	'selectors' => [
468	'{{SELECTOR}}' => 'background-repeat: {{VALUE}};',
469	],
470	'condition' => [
471	'background' => [ 'classic' ],
472	'image[url]!' => '',
473	],
474	];
475
476	$fields['size'] = [
477	'label' => _x( 'Size', 'Background Control', 'elementor' ),
478	'type' => Controls_Manager::SELECT,
479	'responsive' => true,
480	'default' => '',
481	'options' => [
482	'' => _x( 'Default', 'Background Control', 'elementor' ),
483	'auto' => _x( 'Auto', 'Background Control', 'elementor' ),
484	'cover' => _x( 'Cover', 'Background Control', 'elementor' ),
485	'contain' => _x( 'Contain', 'Background Control', 'elementor' ),
486	'initial' => _x( 'Custom', 'Background Control', 'elementor' ),
487	],
488	'selectors' => [
489	'{{SELECTOR}}' => 'background-size: {{VALUE}};',
490	],
491	'condition' => [
492	'background' => [ 'classic' ],
493	'image[url]!' => '',
494	],
495	];
496
497	$fields['bg_width'] = [
498	'label' => _x( 'Width', 'Background Control', 'elementor' ),
499	'type' => Controls_Manager::SLIDER,
500	'responsive' => true,
501	'size_units' => [ 'px', 'em', '%', 'vw' ],
502	'range' => [
503	'px' => [
504	'min' => 0,
505	'max' => 1000,
506	],
507	'%' => [
508	'min' => 0,
509	'max' => 100,
510	],
511	'vw' => [
512	'min' => 0,
513	'max' => 100,
514	],
515	],
516	'default' => [
517	'size' => 100,
518	'unit' => '%',
519	],
520	'required' => true,
521	'selectors' => [
522	'{{SELECTOR}}' => 'background-size: {{SIZE}}{{UNIT}} auto',
523
524	],
525	'condition' => [
526	'background' => [ 'classic' ],
527	'size' => [ 'initial' ],
528	'image[url]!' => '',
529	],
530	'device_args' => [
531	Controls_Stack::RESPONSIVE_TABLET => [
532	'selectors' => [
533	'{{SELECTOR}}' => 'background-size: {{SIZE}}{{UNIT}} auto',
534	],
535	'condition' => [
536	'background' => [ 'classic' ],
537	'size_tablet' => [ 'initial' ],
538	],
539	],
540	Controls_Stack::RESPONSIVE_MOBILE => [
541	'selectors' => [
542	'{{SELECTOR}}' => 'background-size: {{SIZE}}{{UNIT}} auto',
543	],
544	'condition' => [
545	'background' => [ 'classic' ],
546	'size_mobile' => [ 'initial' ],
547	],
548	],
549	],
550	];
551
552	$fields['video_link'] = [
553	'label' => _x( 'Video Link', 'Background Control', 'elementor' ),
554	'type' => Controls_Manager::TEXT,
555	'placeholder' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
556	'description' => __( 'YouTube/Vimeo link, or link to video file (mp4 is recommended).', 'elementor' ),
557	'label_block' => true,
558	'default' => '',
559	'dynamic' => [
560	'active' => true,
561	'categories' => [
562	TagsModule::POST_META_CATEGORY,
563	TagsModule::URL_CATEGORY,
564	],
565	],
566	'condition' => [
567	'background' => [ 'video' ],
568	],
569	'of_type' => 'video',
570	'frontend_available' => true,
571	];
572
573	$fields['video_start'] = [
574	'label' => __( 'Start Time', 'elementor' ),
575	'type' => Controls_Manager::NUMBER,
576	'description' => __( 'Specify a start time (in seconds)', 'elementor' ),
577	'placeholder' => 10,
578	'condition' => [
579	'background' => [ 'video' ],
580	],
581	'of_type' => 'video',
582	'frontend_available' => true,
583	];
584
585	$fields['video_end'] = [
586	'label' => __( 'End Time', 'elementor' ),
587	'type' => Controls_Manager::NUMBER,
588	'description' => __( 'Specify an end time (in seconds)', 'elementor' ),
589	'placeholder' => 70,
590	'condition' => [
591	'background' => [ 'video' ],
592	],
593	'of_type' => 'video',
594	'frontend_available' => true,
595	];
596
597	$fields['play_once'] = [
598	'label' => __( 'Play Once', 'elementor' ),
599	'type' => Controls_Manager::SWITCHER,
600	'condition' => [
601	'background' => [ 'video' ],
602	],
603	'of_type' => 'video',
604	'frontend_available' => true,
605	];
606
607	$fields['play_on_mobile'] = [
608	'label' => __( 'Play On Mobile', 'elementor' ),
609	'type' => Controls_Manager::SWITCHER,
610	'condition' => [
611	'background' => [ 'video' ],
612	],
613	'of_type' => 'video',
614	'frontend_available' => true,
615	];
616
617	// This control was added to handle a bug with the Youtube Embed API. The bug: If there is a video with Privacy
618	// Mode on, and at the same time the page contains another video WITHOUT privacy mode on, one of the videos
619	// will not run properly. This added control allows users to align all their videos to one host (either
620	// youtube.com or youtube-nocookie.com, depending on whether the user wants privacy mode on or not).
621	$fields['privacy_mode'] = [
622	'label' => __( 'Privacy mode', 'elementor' ),
623	'type' => Controls_Manager::SWITCHER,
624	'description' => __( 'Only works for YouTube videos.', 'elementor' ),
625	'condition' => [
626	'background' => [ 'video' ],
627	],
628	'of_type' => 'video',
629	'frontend_available' => true,
630	];
631
632	$fields['video_fallback'] = [
633	'label' => _x( 'Background Fallback', 'Background Control', 'elementor' ),
634	'description' => __( 'This cover image will replace the background video in case that the video could not be loaded.', 'elementor' ),
635	'type' => Controls_Manager::MEDIA,
636	'dynamic' => [
637	'active' => true,
638	],
639	'condition' => [
640	'background' => [ 'video' ],
641	],
642	'selectors' => [
643	'{{SELECTOR}}' => 'background: url("{{URL}}") 50% 50%; background-size: cover;',
644	],
645	'of_type' => 'video',
646	];
647
648	$fields['slideshow_gallery'] = [
649	'label' => _x( 'Images', 'Background Control', 'elementor' ),
650	'type' => Controls_Manager::GALLERY,
651	'condition' => [
652	'background' => [ 'slideshow' ],
653	],
654	'show_label' => false,
655	'of_type' => 'slideshow',
656	'frontend_available' => true,
657	];
658
659	$fields['slideshow_loop'] = [
660	'label' => __( 'Infinite Loop', 'elementor' ),
661	'type' => Controls_Manager::SWITCHER,
662	'default' => 'yes',
663	'condition' => [
664	'background' => [ 'slideshow' ],
665	],
666	'of_type' => 'slideshow',
667	'frontend_available' => true,
668	];
669
670	$fields['slideshow_slide_duration'] = [
671	'label' => __( 'Duration', 'elementor' ) . ' (ms)',
672	'type' => Controls_Manager::NUMBER,
673	'default' => 5000,
674	'condition' => [
675	'background' => [ 'slideshow' ],
676	],
677	'frontend_available' => true,
678	];
679
680	$fields['slideshow_slide_transition'] = [
681	'label' => __( 'Transition', 'elementor' ),
682	'type' => Controls_Manager::SELECT,
683	'default' => 'fade',
684	'options' => [
685	'fade' => 'Fade',
686	'slide_right' => 'Slide Right',
687	'slide_left' => 'Slide Left',
688	'slide_up' => 'Slide Up',
689	'slide_down' => 'Slide Down',
690	],
691	'condition' => [
692	'background' => [ 'slideshow' ],
693	],
694	'of_type' => 'slideshow',
695	'frontend_available' => true,
696	];
697
698	$fields['slideshow_transition_duration'] = [
699	'label' => __( 'Transition Duration', 'elementor' ) . ' (ms)',
700	'type' => Controls_Manager::NUMBER,
701	'default' => 500,
702	'condition' => [
703	'background' => [ 'slideshow' ],
704	],
705	'frontend_available' => true,
706	];
707
708	$fields['slideshow_background_size'] = [
709	'label' => __( 'Background Size', 'elementor' ),
710	'type' => Controls_Manager::SELECT,
711	'responsive' => true,
712	'default' => '',
713	'options' => [
714	'' => __( 'Default', 'elementor' ),
715	'auto' => __( 'Auto', 'elementor' ),
716	'cover' => __( 'Cover', 'elementor' ),
717	'contain' => __( 'Contain', 'elementor' ),
718	],
719	'selectors' => [
720	'{{WRAPPER}} .elementor-background-slideshow__slide__image' => 'background-size: {{VALUE}};',
721	],
722	'condition' => [
723	'background' => [ 'slideshow' ],
724	],
725	];
726
727	$fields['slideshow_background_position'] = [
728	'label' => __( 'Background Position', 'elementor' ),
729	'type' => Controls_Manager::SELECT,
730	'default' => '',
731	'responsive' => true,
732	'options' => [
733	'' => __( 'Default', 'elementor' ),
734	'center center' => _x( 'Center Center', 'Background Control', 'elementor' ),
735	'center left' => _x( 'Center Left', 'Background Control', 'elementor' ),
736	'center right' => _x( 'Center Right', 'Background Control', 'elementor' ),
737	'top center' => _x( 'Top Center', 'Background Control', 'elementor' ),
738	'top left' => _x( 'Top Left', 'Background Control', 'elementor' ),
739	'top right' => _x( 'Top Right', 'Background Control', 'elementor' ),
740	'bottom center' => _x( 'Bottom Center', 'Background Control', 'elementor' ),
741	'bottom left' => _x( 'Bottom Left', 'Background Control', 'elementor' ),
742	'bottom right' => _x( 'Bottom Right', 'Background Control', 'elementor' ),
743	],
744	'selectors' => [
745	'{{WRAPPER}} .elementor-background-slideshow__slide__image' => 'background-position: {{VALUE}};',
746	],
747	'condition' => [
748	'background' => [ 'slideshow' ],
749	],
750	];
751
752	$fields['slideshow_ken_burns'] = [
753	'label' => __( 'Ken Burns Effect', 'elementor' ),
754	'type' => Controls_Manager::SWITCHER,
755	'separator' => 'before',
756	'condition' => [
757	'background' => [ 'slideshow' ],
758	],
759	'of_type' => 'slideshow',
760	'frontend_available' => true,
761	];
762
763	$fields['slideshow_ken_burns_zoom_direction'] = [
764	'label' => __( 'Direction', 'elementor' ),
765	'type' => Controls_Manager::SELECT,
766	'default' => 'in',
767	'options' => [
768	'in' => __( 'In', 'elementor' ),
769	'out' => __( 'Out', 'elementor' ),
770	],
771	'condition' => [
772	'background' => [ 'slideshow' ],
773	'slideshow_ken_burns!' => '',
774	],
775	'of_type' => 'slideshow',
776	'frontend_available' => true,
777	];
778
779	return $fields;
780	}
781
782	/**
783	* Get child default args.
784	*
785	* Retrieve the default arguments for all the child controls for a specific group
786	* control.
787	*
788	* @since 1.2.2
789	* @access protected
790	*
791	* @return array Default arguments for all the child controls.
792	*/
793	protected function get_child_default_args() {
794	return [
795	'types' => [ 'classic', 'gradient' ],
796	'selector' => '{{WRAPPER}}:not(.elementor-motion-effects-element-type-background), {{WRAPPER}} > .elementor-motion-effects-container > .elementor-motion-effects-layer',
797	];
798	}
799
800	/**
801	* Filter fields.
802	*
803	* Filter which controls to display, using `include`, `exclude`, `condition`
804	* and `of_type` arguments.
805	*
806	* @since 1.2.2
807	* @access protected
808	*
809	* @return array Control fields.
810	*/
811	protected function filter_fields() {
812	$fields = parent::filter_fields();
813
814	$args = $this->get_args();
815
816	foreach ( $fields as &$field ) {
817	if ( isset( $field['of_type'] ) && ! in_array( $field['of_type'], $args['types'] ) ) {
818	unset( $field );
819	}
820	}
821
822	return $fields;
823	}
824
825	/**
826	* Prepare fields.
827	*
828	* Process background control fields before adding them to `add_control()`.
829	*
830	* @since 1.2.2
831	* @access protected
832	*
833	* @param array $fields Background control fields.
834	*
835	* @return array Processed fields.
836	*/
837	protected function prepare_fields( $fields ) {
838	$args = $this->get_args();
839
840	$background_types = self::get_background_types();
841
842	$choose_types = [];
843
844	foreach ( $args['types'] as $type ) {
845	if ( isset( $background_types[ $type ] ) ) {
846	$choose_types[ $type ] = $background_types[ $type ];
847	}
848	}
849
850	$fields['background']['options'] = $choose_types;
851
852	return parent::prepare_fields( $fields );
853	}
854
855	/**
856	* Get default options.
857	*
858	* Retrieve the default options of the background control. Used to return the
859	* default options while initializing the background control.
860	*
861	* @since 1.9.0
862	* @access protected
863	*
864	* @return array Default background control options.
865	*/
866	protected function get_default_options() {
867	return [
868	'popover' => false,
869	];
870	}
871	}
872