elementor / includes / controls / groups / background.php

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

884 lines 23.8 KB

Raw Download Zip

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