uicore-elements / includes / utils / carousel-component.php

carousel-component.php in UiCore Elements – Free widgets and templates for Elementor 1.2.4, at includes/utils/carousel-component.php

1,967 lines 56.6 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements\Utils;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Group_Control_Border;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Icons_Manager;
9	use Elementor\Plugin;
10
11	if ( ! defined( 'ABSPATH' ) ) {
12	exit; // Exit if accessed directly
13	}
14
15	/*
16	* Carousel / Slider Component Trait
17	*/
18
19	trait Carousel_Trait {
20
21	/**
22	* Sets all navigation conditions in one place
23	*
24	* @param string $type Control name
25	* @param array\|null $extras (Optional) Terms attributes. ['name' => 'control, 'operator' => '==', 'value' => 'yes'], [..]
26	* @param string\|null $relation (Optional) Accepts 'or' & 'and' values. Default is 'and'
27	* @return array Elementor API Conditions
28	*/
29	function nav_conditions($type, $extras = false, $relation = 'and')
30	{
31	if ($type == 'arrows') {
32	$options = ['arrows', 'arrows-dots', 'arrows-fraction'];
33	} elseif ($type == 'dots') {
34	$options = ['dots', 'arrows-dots'];
35	} elseif ($type == 'fraction') {
36	$options = ['fraction', 'arrows-fraction'];
37	}
38
39	$conditions['terms'][] = [
40	'name' => 'navigation',
41	'operator' => 'in',
42	'value' => $options,
43	];
44
45	// Marquee animation style does not support navigation
46	$conditions['terms'][] = [
47	'name' => 'animation_style',
48	'operator' => '!=',
49	'value' => 'marquee',
50	];
51
52	$conditions['relation'] = $relation;
53
54	// Check for extra conditions
55	if($extras != false){
56	foreach ($extras as $extra){
57	$conditions['terms'][] = $extra;
58	}
59	}
60
61	return $conditions;
62	}
63
64	/**
65	* Returns the Carousel/Slider widget scripts.
66	*
67	* @param bool $use_entrance If the entrance script should be enqueued or not. Default is `true`.
68	* @param array $extra_conditions Extra conditions to be added to the scripts.
69	*
70	* @return array The array of scripts for the widget.
71	*/
72	function TRAIT_get_carousel_scripts($use_entrance = true, $extra_conditions = null) {
73
74	$base = [ 'carousel' ];
75
76	// Add extra conditions to carousel script if requested
77	if( isset($extra_conditions) ){
78	$base['carousel'] = ['condition' => []];
79
80	foreach ($extra_conditions as $key => $value){
81	$base['carousel']['condition'][$key] = $value;
82	}
83	}
84
85	if($use_entrance) {
86	$base['entrance'] = [
87	'condition' => [
88	'animate_items' => 'ui-e-grid-animate'
89	],
90	];
91	}
92
93	// Specific Slider scripts
94	if( strpos($this->get_name(), 'slide') !== false ){
95	$type = [
96	'stacked-carousel' => [
97	'condition' => [
98	'animation_style' => 'stacked',
99	]
100	],
101	// TODO: move out and pass as extra
102	'circular-avatar-carousel' => [
103	'condition' => [
104	'animation_style' => 'circular_avatar',
105	]
106	]
107	];
108
109	// Specific Carousel scripts - if is not slider, is Carousel :)
110	} else {
111	$type = [
112	'special-effects' => [
113	'condition' => [
114	'animation_style' => ['fade_blur', 'circular']
115	]
116	]
117	];
118	}
119
120	// Merge and return the scripts
121	return array_merge($base, $type);
122	}
123
124	// Navigation Controls
125	function TRAIT_register_navigation_controls()
126	{
127
128	$this->start_controls_section(
129	'section_content_navigation',
130	[
131	'label' => __('Navigation', 'uicore-elements'),
132	]
133	);
134
135	$this->add_control(
136	'navigation',
137	[
138	'label' => __('Navigation', 'uicore-elements'),
139	'type' => Controls_Manager::SELECT,
140	'default' => 'arrows-dots',
141	'options' => [
142	'arrows' => esc_html__('Arrows', 'uicore-elements'),
143	'dots' => esc_html__('Dots', 'uicore-elements'),
144	'fraction' => esc_html__('Fractions', 'uicore-elements'),
145	'arrows-dots' => esc_html__('Arrows and Dots', 'uicore-elements'),
146	'arrows-fraction' => esc_html__('Arrows and Fraction', 'uicore-elements'),
147	'none' => esc_html__('None', 'uicore-elements'),
148	],
149	'label_block' => true,
150	'render_type' => 'template',
151	'frontend_available' => true,
152	'condition' => [
153	'animation_style!' => 'marquee',
154	],
155	]
156	);
157	$this->add_control(
158	'marquee_warning',
159	[
160	'type' => Controls_Manager::RAW_HTML,
161	'raw' => esc_html__( 'Marquee animation does not support navigation.', 'uicore-elements' ),
162	'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
163	'condition' => [
164	'animation_style' => 'marquee',
165	],
166	]
167	);
168	$this->add_control(
169	'hr_arrows',
170	[
171	'label' => esc_html__( 'Arrows', 'uicore-elements' ),
172	'type' => Controls_Manager::HEADING,
173	'separator' => 'before',
174	'conditions' => $this->nav_conditions('arrows'),
175	]
176	);
177	$this->start_controls_tabs(
178	'arrows_tabs'
179	);
180
181	$this->start_controls_tab(
182	'previous_tab',
183	[
184	'label' => esc_html__( 'Previous', 'uicore-elements' ),
185	'conditions' => $this->nav_conditions('arrows'),
186	]
187	);
188
189	$this->add_control(
190	'previous_arrow',
191	[
192	'label' => esc_html__( 'Previous Arrow Icon', 'uicore-elements' ),
193	'type' => Controls_Manager::ICONS,
194	'default' => [
195	'value' => 'fas fa-arrow-left',
196	'library' => 'fa-solid',
197	],
198	'recommended' => [
199	'fa-solid' => [
200	'arrow-alt-circle-left',
201	'caret-square-left',
202	'angle-double-left',
203	'angle-left',
204	'arrow-alt-circle-left',
205	'arrow-left',
206	'caret-left',
207	'caret-square-left',
208	'chevron-circle-left',
209	'chevron-left',
210	'long-arrow-alt-left'
211	]
212	],
213	'label_block' => false,
214	'skin' => 'inline',
215	'conditions' => $this->nav_conditions('arrows'),
216	]
217	);
218	$this->add_responsive_control(
219	'previous_arrow_h_position',
220	[
221	'label' => __('Horizontal Orientation', 'uicore-elements'),
222	'type' => Controls_Manager::CHOOSE,
223	'options' => [
224	'left: 0; right: auto;' => [
225	'title' => __('Left', 'uicore-elements'),
226	'icon' => 'eicon-h-align-left',
227	],
228	'left: 0; right: 0; margin: auto;' => [
229	'title' => __('Center', 'uicore-elements'),
230	'icon' => 'eicon-h-align-center',
231	],
232	'left: auto; right: 0;' => [
233	'title' => __('Right', 'uicore-elements'),
234	'icon' => 'eicon-h-align-right',
235	],
236	],
237	'default' => 'left: 0; right: auto;',
238	'selectors' => [
239	'{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
240	],
241	'conditions' => $this->nav_conditions('arrows'),
242	]
243	);
244	$this->add_responsive_control(
245	'previous_arrow_v_position',
246	[
247	'label' => __('Vertical Orientation', 'uicore-elements'),
248	'type' => Controls_Manager::CHOOSE,
249	'options' => [
250	'top: 0; bottom: auto;' => [
251	'title' => __('Top', 'uicore-elements'),
252	'icon' => 'eicon-v-align-top',
253	],
254	'top: 0; bottom: 0; margin: auto;' => [
255	'title' => __('Center', 'uicore-elements'),
256	'icon' => 'eicon-v-align-middle',
257	],
258	'top: auto; bottom: 0' => [
259	'title' => __('Bottom', 'uicore-elements'),
260	'icon' => 'eicon-v-align-bottom',
261	],
262	],
263	'selectors' => [
264	'{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
265	],
266	'default' => 'top: 0; bottom: 0; margin: auto;',
267	'conditions' => $this->nav_conditions('arrows'),
268	]
269	);
270	$this->add_control(
271	'previous_advanced_position',
272	[
273	'label' => esc_html__( 'Arrow Offset', 'uicore-elements' ),
274	'type' => Controls_Manager::POPOVER_TOGGLE,
275	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
276	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
277	'return_value' => 'yes',
278	'conditions' => $this->nav_conditions('arrows'),
279	]
280	);
281	$this->start_popover();
282
283	$this->add_responsive_control(
284	'prev_arrow_h_offset',
285	[
286	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
287	'type' => Controls_Manager::SLIDER,
288	'size_units' => [ 'px', '%',],
289	'range' => [
290	'px' => [
291	'min' => -200,
292	'max' => 200,
293	'step' => 5,
294	],
295	'%' => [
296	'min' => -100,
297	'max' => 100,
298	],
299	],
300	'selectors' => [
301	'{{WRAPPER}}' => '--ui-e-prev-arrow-h-off:{{SIZE}}{{UNIT}};',
302	],
303	'condition' => [
304	'previous_advanced_position' => 'yes'
305	]
306	]
307	);
308	$this->add_responsive_control(
309	'prev_arrow_v_offset',
310	[
311	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
312	'type' => Controls_Manager::SLIDER,
313	'size_units' => [ 'px', '%',],
314	'range' => [
315	'px' => [
316	'min' => -200,
317	'max' => 200,
318	'step' => 5,
319	],
320	'%' => [
321	'min' => -100,
322	'max' => 100,
323	],
324	],
325	'selectors' => [
326	'{{WRAPPER}}' => '--ui-e-prev-arrow-v-off:{{SIZE}}{{UNIT}};',
327	],
328	'condition' => [
329	'previous_advanced_position' => 'yes'
330	]
331	]
332	);
333	$this->add_responsive_control(
334	'prev_arrow_rotate',
335	[
336	'label' => esc_html__( 'Rotation', 'uicore-elements' ),
337	'type' => Controls_Manager::SLIDER,
338	'size_units' => ['px'],
339	'range' => [
340	'px' => [
341	'min' => 0,
342	'max' => 360,
343	'step' => 5,
344	],
345	],
346	'selectors' => [
347	'{{WRAPPER}} .ui-e-previous > *' => 'rotate:{{SIZE}}deg;',
348	],
349	'condition' => [
350	'previous_advanced_position' => 'yes'
351	]
352	]
353	);
354
355	$this->end_popover();
356
357	$this->end_controls_tab();
358
359	$this->start_controls_tab(
360	'next_tab',
361	[
362	'label' => esc_html__( 'Next', 'uicore-elements' ),
363	'conditions' => $this->nav_conditions('arrows'),
364	]
365	);
366
367	$this->add_control(
368	'next_arrow',
369	[
370	'label' => esc_html__( 'Previous Arrow Icon', 'uicore-elements' ),
371	'type' => Controls_Manager::ICONS,
372	'default' => [
373	'value' => 'fas fa-arrow-right',
374	'library' => 'fa-solid',
375	],
376	'recommended' => [
377	'fa-solid' => [
378	'arrow-alt-circle-right',
379	'caret-square-right',
380	'angle-double-right',
381	'angle-right',
382	'arrow-alt-circle-right',
383	'arrow-right',
384	'caret-right',
385	'caret-square-right',
386	'chevron-circle-right',
387	'chevron-right',
388	'long-arrow-alt-right'
389	]
390	],
391	'label_block' => false,
392	'skin' => 'inline',
393	'conditions' => $this->nav_conditions('arrows'),
394	]
395	);
396	$this->add_responsive_control(
397	'next_arrow_h_position',
398	[
399	'label' => __('Horizontal Orientation', 'uicore-elements'),
400	'type' => Controls_Manager::CHOOSE,
401	'options' => [
402	'left: 0; right: auto;' => [
403	'title' => __('Left', 'uicore-elements'),
404	'icon' => 'eicon-h-align-left',
405	],
406	'left: 0; right: 0; margin: auto;' => [
407	'title' => __('Center', 'uicore-elements'),
408	'icon' => 'eicon-h-align-center',
409	],
410	'left: auto; right: 0;' => [
411	'title' => __('Right', 'uicore-elements'),
412	'icon' => 'eicon-h-align-right',
413	],
414	],
415	'default' => 'left: auto; right: 0;',
416	'selectors' => [
417	'{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
418	],
419	'conditions' => $this->nav_conditions('arrows'),
420	]
421	);
422	$this->add_responsive_control(
423	'next_arrow_v_position',
424	[
425	'label' => __('Vertical Orientation', 'uicore-elements'),
426	'type' => Controls_Manager::CHOOSE,
427	'options' => [
428	'top: 0; bottom: auto;' => [
429	'title' => __('Top', 'uicore-elements'),
430	'icon' => 'eicon-v-align-top',
431	],
432	'top: 0; bottom: 0; margin: auto;' => [
433	'title' => __('Center', 'uicore-elements'),
434	'icon' => 'eicon-v-align-middle',
435	],
436	'top: auto; bottom: 0' => [
437	'title' => __('Bottom', 'uicore-elements'),
438	'icon' => 'eicon-v-align-bottom',
439	],
440	],
441	'selectors' => [
442	'{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
443	],
444	'default' => 'top: 0; bottom: 0; margin: auto;',
445	'conditions' => $this->nav_conditions('arrows'),
446	]
447	);
448	$this->add_control(
449	'next_advanced_position',
450	[
451	'label' => esc_html__( 'Arrow Offset', 'uicore-elements' ),
452	'type' => Controls_Manager::POPOVER_TOGGLE,
453	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
454	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
455	'return_value' => 'yes',
456	'conditions' => $this->nav_conditions('arrows'),
457	]
458	);
459	$this->start_popover();
460	$this->add_responsive_control(
461	'next_arrow_h_offset',
462	[
463	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
464	'type' => Controls_Manager::SLIDER,
465	'size_units' => [ 'px', '%',],
466	'range' => [
467	'px' => [
468	'min' => -200,
469	'max' => 200,
470	'step' => 5,
471	],
472	'%' => [
473	'min' => -100,
474	'max' => 100,
475	],
476	],
477	'selectors' => [
478	'{{WRAPPER}}' => '--ui-e-next-arrow-h-off:{{SIZE}}{{UNIT}};',
479	],
480	'condition' => [
481	'next_advanced_position' => 'yes'
482	]
483	]
484	);
485	$this->add_responsive_control(
486	'next_arrow_v_offset',
487	[
488	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
489	'type' => Controls_Manager::SLIDER,
490	'size_units' => [ 'px', '%',],
491	'range' => [
492	'px' => [
493	'min' => -200,
494	'max' => 200,
495	'step' => 5,
496	],
497	'%' => [
498	'min' => -100,
499	'max' => 100,
500	],
501	],
502	'selectors' => [
503	'{{WRAPPER}}' => '--ui-e-next-arrow-v-off:{{SIZE}}{{UNIT}};',
504	],
505	'condition' => [
506	'next_advanced_position' => 'yes'
507	]
508	]
509	);
510	$this->add_responsive_control(
511	'next_arrow_rotate',
512	[
513	'label' => esc_html__( 'Rotation', 'uicore-elements' ),
514	'type' => Controls_Manager::SLIDER,
515	'size_units' => ['px'],
516	'range' => [
517	'px' => [
518	'min' => 0,
519	'max' => 360,
520	'step' => 5,
521	],
522	],
523	'selectors' => [
524	'{{WRAPPER}} .ui-e-next > *' => 'rotate:{{SIZE}}deg;',
525	],
526	'condition' => [
527	'previous_advanced_position' => 'yes'
528	]
529	]
530	);
531
532	$this->end_popover();
533
534	$this->end_controls_tab();
535
536	$this->end_controls_tabs();
537
538	$this->add_control(
539	'arrows_mobile',
540	[
541	'label' => esc_html__( 'Hide arrows on Mobile', 'uicore-elements' ),
542	'type' => Controls_Manager::SWITCHER,
543	'default' => 'yes',
544	'selectors' => [
545	'(mobile){{WRAPPER}} .ui-e-button' => 'display: none',
546	],
547	'conditions' => $this->nav_conditions('arrows'),
548	]
549	);
550
551	$this->add_control(
552	'hr_fraction',
553	[
554	'label' => esc_html__( 'Fraction', 'uicore-elements' ),
555	'type' => Controls_Manager::HEADING,
556	'separator' => 'before',
557	'conditions' => $this->nav_conditions('fraction'),
558	]
559	);
560	$this->add_responsive_control(
561	'fraction_h_position',
562	[
563	'label' => __('Horizontal Orientation', 'uicore-elements'),
564	'type' => Controls_Manager::CHOOSE,
565	'options' => [
566	'left: 0; right: auto;' => [
567	'title' => __('Left', 'uicore-elements'),
568	'icon' => 'eicon-h-align-left',
569	],
570	'left: 0; right: 0; margin: auto;' => [
571	'title' => __('Center', 'uicore-elements'),
572	'icon' => 'eicon-h-align-center',
573	],
574	'left: auto; right: 0;' => [
575	'title' => __('Right', 'uicore-elements'),
576	'icon' => 'eicon-h-align-right',
577	],
578	],
579	'default' => 'left: 0; right: auto;',
580	'selectors' => [
581	'{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
582	],
583	'conditions' => $this->nav_conditions('fraction'),
584	]
585	);
586	$this->add_responsive_control(
587	'fraction_v_position',
588	[
589	'label' => __('Vertical Orientation', 'uicore-elements'),
590	'type' => Controls_Manager::CHOOSE,
591	'options' => [
592	'top: -25px; bottom: auto;' => [
593	'title' => __('Top', 'uicore-elements'),
594	'icon' => 'eicon-v-align-top',
595	],
596	'top: 0; bottom: 0; margin: auto;' => [
597	'title' => __('Center', 'uicore-elements'),
598	'icon' => 'eicon-v-align-middle',
599	],
600	'top: auto; bottom: -25px;' => [
601	'title' => __('Bottom', 'uicore-elements'),
602	'icon' => 'eicon-v-align-bottom',
603	],
604	],
605	'selectors' => [
606	'{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
607	],
608	'default' => 'bottom: -25px;',
609	'conditions' => $this->nav_conditions('fraction'),
610	]
611	);
612	$this->add_control(
613	'fraction_offset_toggle',
614	[
615	'label' => esc_html__( 'Fraction Offset', 'uicore-elements' ),
616	'type' => Controls_Manager::POPOVER_TOGGLE,
617	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
618	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
619	'return_value' => 'yes',
620	'conditions' => $this->nav_conditions('fraction'),
621	]
622	);
623	$this->start_popover();
624	$this->add_responsive_control(
625	'fraction_h_offset',
626	[
627	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
628	'type' => Controls_Manager::SLIDER,
629	'size_units' => [ 'px', '%',],
630	'range' => [
631	'px' => [
632	'min' => -80,
633	'max' => 80,
634	'step' => 5,
635	],
636	'%' => [
637	'min' => -100,
638	'max' => 100,
639	],
640	],
641	'selectors' => [
642	'{{WRAPPER}}' => '--ui-e-fraction-h-off:{{SIZE}}{{UNIT}};',
643	],
644	'condition' => [
645	'fraction_offset_toggle' => 'yes'
646	]
647	]
648	);
649	$this->add_responsive_control(
650	'fraction_v_offset',
651	[
652	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
653	'type' => Controls_Manager::SLIDER,
654	'size_units' => [ 'px', '%',],
655	'range' => [
656	'px' => [
657	'min' => -80,
658	'max' => 80,
659	'step' => 5,
660	],
661	'%' => [
662	'min' => -100,
663	'max' => 100,
664	],
665	],
666	'selectors' => [
667	'{{WRAPPER}}' => '--ui-e-fraction-v-off:{{SIZE}}{{UNIT}};',
668	],
669	'condition' => [
670	'fraction_offset_toggle' => 'yes'
671	]
672	]
673	);
674
675	$this->end_popover();
676
677	$this->add_control(
678	'hr_dots',
679	[
680	'label' => esc_html__( 'Dots', 'uicore-elements' ),
681	'type' => Controls_Manager::HEADING,
682	'separator' => 'before',
683	'conditions' => $this->nav_conditions('dots'),
684	]
685	);
686	$this->add_responsive_control(
687	'dots_h_position',
688	[
689	'label' => __('Horizontal Orientation', 'uicore-elements'),
690	'type' => Controls_Manager::CHOOSE,
691	'options' => [
692	'left: 0; right: auto;' => [
693	'title' => __('Left', 'uicore-elements'),
694	'icon' => 'eicon-h-align-left',
695	],
696	'left: 0; right: 0; margin: auto;' => [
697	'title' => __('Center', 'uicore-elements'),
698	'icon' => 'eicon-h-align-center',
699	],
700	'left: auto; right: 0;' => [
701	'title' => __('Right', 'uicore-elements'),
702	'icon' => 'eicon-h-align-right',
703	],
704	],
705	'default' => 'left: 0; right: 0; margin: auto;',
706	'selectors' => [
707	'{{WRAPPER}} .ui-e-dots' => '{{VALUE}};'
708	],
709	'conditions' => $this->nav_conditions('dots'),
710	]
711	);
712	$this->add_responsive_control(
713	'dots_v_position',
714	[
715	'label' => __('Vertical Orientation', 'uicore-elements'),
716	'type' => Controls_Manager::CHOOSE,
717	'options' => [
718	'top: 0px; bottom: auto;' => [
719	'title' => __('Top', 'uicore-elements'),
720	'icon' => 'eicon-v-align-top',
721	],
722	'top: 0; bottom: 0; margin: auto' => [
723	'title' => __('Center', 'uicore-elements'),
724	'icon' => 'eicon-v-align-middle',
725	],
726	'top: auto; bottom: 0px;' => [
727	'title' => __('Bottom', 'uicore-elements'),
728	'icon' => 'eicon-v-align-bottom',
729	],
730	],
731	'selectors' => [
732	'{{WRAPPER}} .ui-e-dots' => '{{VALUE}}'
733	],
734	'default' => 'top: auto; bottom: 0px;',
735	'conditions' => $this->nav_conditions('dots'),
736	]
737	);
738	$this->add_control(
739	'dots_advanced',
740	[
741	'label' => esc_html__( 'Dots Offset', 'uicore-elements' ),
742	'type' => Controls_Manager::POPOVER_TOGGLE,
743	'label_off' => esc_html__( 'Default', 'uicore-elements' ),
744	'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
745	'return_value' => 'yes',
746	'conditions' => $this->nav_conditions('dots'),
747	]
748	);
749	$this->start_popover();
750	$this->add_responsive_control(
751	'dots_h_offset',
752	[
753	'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
754	'type' => Controls_Manager::SLIDER,
755	'size_units' => [ 'px', '%',],
756	'range' => [
757	'px' => [
758	'min' => -100,
759	'max' => 100,
760	'step' => 5,
761	],
762	'%' => [
763	'min' => -100,
764	'max' => 100,
765	],
766	],
767	'selectors' => [
768	'{{WRAPPER}}' => '--ui-e-dots-h-off:{{SIZE}}{{UNIT}};',
769	],
770	'condition' => [
771	'dots_advanced' => 'yes'
772	]
773	]
774	);
775	$this->add_responsive_control(
776	'dots_v_offset',
777	[
778	'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
779	'type' => Controls_Manager::SLIDER,
780	'size_units' => [ 'px', '%',],
781	'range' => [
782	'px' => [
783	'min' => -100,
784	'max' => 100,
785	'step' => 5,
786	],
787	'%' => [
788	'min' => -100,
789	'max' => 100,
790	],
791	],
792	'selectors' => [
793	'{{WRAPPER}}' => '--ui-e-dots-v-off:{{SIZE}}{{UNIT}};',
794	],
795	'condition' => [
796	'dots_advanced' => 'yes'
797	]
798	]
799	);
800	$this->add_responsive_control(
801	'dots_rotate',
802	[
803	'label' => esc_html__( 'Rotation', 'uicore-elements' ),
804	'type' => Controls_Manager::SLIDER,
805	'size_units' => [ 'px'],
806	'range' => [
807	'px' => [
808	'min' => 0,
809	'max' => 360,
810	'step' => 5,
811	],
812	],
813	'selectors' => [
814	'{{WRAPPER}} .ui-e-dots' => 'rotate: {{SIZE}}deg;',
815	],
816	'condition' => [
817	'dots_advanced' => 'yes'
818	]
819	]
820	);
821	$this->end_popover();
822
823	$this->end_controls_section();
824	}
825	function TRAIT_register_carousel_settings_controls()
826	{
827	$this->add_control(
828	'animation_style',
829	[
830	'label' => __('Animation', 'uicore-elements'),
831	'type' => Controls_Manager::SELECT,
832	'default' => 'circular',
833	'options' => [
834	'circular' => esc_html__('Circular', 'uicore-elements'),
835	'fade_blur' => esc_html__('Fade Blur', 'uicore-elements'),
836	'marquee' => esc_html__('Marquee', 'uicore-elements'),
837	'default' => esc_html__('Default', 'uicore-elements'),
838	],
839	'prefix_class' => 'ui-e-animation-',
840	'render_type' => 'template',
841	'frontend_available' => true,
842	]
843	);
844	$this->add_responsive_control(
845	'slides_per_view',
846	[
847	'label' => __( 'Slides per View', 'uicore-elements' ),
848	'type' => Controls_Manager::SELECT,
849	'desktop_default' => 3,
850	'tablet_default' => 2,
851	'mobile_default' => 1,
852	'options' => [
853	1 => '1',
854	2 => '2',
855	3 => '3',
856	4 => '4',
857	5 => '5',
858	6 => '6',
859	7 => '7',
860	8 => '8',
861	],
862	'render_type' => 'template',
863	'frontend_available' => true,
864	'content_classes' => 'elementor-control-field-select-small',
865	'conditions' => [
866	'relation' => 'or',
867	'terms' => [
868	[
869	'name' => 'animation_style',
870	'operator' => '!==',
871	'value' => 'marquee',
872	],
873	[
874	'relation' => 'and',
875	'terms' => [
876	[
877	'name' => 'animation_style',
878	'operator' => '===',
879	'value' => 'marquee',
880	],
881	[
882	'name' => 'vertical',
883	'operator' => '!==',
884	'value' => 'true',
885	]
886	],
887	],
888	]
889	]
890	]
891	);
892	$this->add_control(
893	'show_hidden',
894	[
895	'label' => esc_html__( 'Show Hidden Items', 'uicore-elements' ),
896	'type' => \Elementor\Controls_Manager::SELECT,
897	'default' => 'hidden',
898	'options' => [
899	'hidden' => esc_html__( 'Hidden', 'uicore-elements' ),
900	'left' => esc_html__( 'Show Left', 'uicore-elements' ),
901	'right' => esc_html__( 'Show Right', 'uicore-elements' ),
902	],
903	'content_classes' => 'elementor-control-field-select-small',
904	'condition' => [
905	'animation_style' => ['fade_blur', 'circular']
906	],
907	'frontend_available' => true,
908	]
909	);
910	$this->add_control(
911	'marquee_speed',
912	[
913	'label' => esc_html__('Marquee Speed', 'uicore-elements'),
914	'type' => Controls_Manager::NUMBER,
915	'default' => 5000,
916	'min' => 100,
917	'max' => 10000,
918	'step' => 100,
919	'condition' => [
920	'animation_style' => 'marquee',
921	],
922	'frontend_available' => true,
923	]
924	);
925	$this->add_control(
926	'center_slides',
927	[
928	'label' => esc_html__('Center Slides', 'uicore-elements'),
929	'type' => Controls_Manager::SWITCHER,
930	'return_value' => 'true',
931	'condition' => [
932	'animation_style!' => 'marquee',
933	],
934	'frontend_available' => true,
935	]
936	);
937	$this->add_control(
938	'vertical',
939	[
940	'label' => __('Vertical Scroll', 'uicore-elements'),
941	'type' => Controls_Manager::SWITCHER,
942	'return_value' => 'true',
943	'render_type' => 'template',
944	'condition' => [
945	'animation_style' => 'marquee',
946	],
947	'prefix_class' => 'ui-e-vertical-',
948	'frontend_available' => true,
949	'selectors' => [
950	'{{WRAPPER}} .ui-e-carousel' => '--ui-e-fade-edge-direction: bottom;',
951	],
952	]
953	);
954	$this->add_control(
955	'vertical_slide_height',
956	[
957	'label' => esc_html__( 'Carousel Height', 'uicore-elements' ),
958	'type' => Controls_Manager::SLIDER,
959	'size_units' => [ 'px', 'vh', 'custom' ],
960	'range' => [
961	'px' => [
962	'min' => 10,
963	'max' => 1000,
964	'step' => 5,
965	],
966	'vh' => [
967	'min' => 1,
968	'max' => 100,
969	],
970	],
971	'default' => [
972	'unit' => 'px',
973	'size' => 350,
974	],
975	'condition' => [
976	'animation_style' => 'marquee',
977	'vertical' => 'true',
978	],
979	'selectors' => [
980	'{{WRAPPER}} .ui-e-carousel' => 'height: {{SIZE}}{{UNIT}} !important;',
981	],
982	]
983	);
984	$this->add_control(
985	'fade_edges',
986	[
987	'label' => __('Fade Edges', 'uicore-elements'),
988	'type' => Controls_Manager::SWITCHER,
989	'prefix_class' => 'ui-e-fade-edges-',
990	'selectors' => [
991	'{{WRAPPER}}' => '--ui-e-fade-edge-direction: right;',
992	],
993	]
994	);
995	$this->add_control(
996	'fade_edge_opacity',
997	[
998	'label' => esc_html__( 'Fade opacity', 'uicore-elements' ),
999	'type' => Controls_Manager::NUMBER,
1000	'default' => 0.35,
1001	'min' => 0,
1002	'max' => 1,
1003	'step' => 0.05,
1004	'condition' => [
1005	'fade_edges' => 'yes',
1006	],
1007	'selectors' => [
1008	'{{WRAPPER}}' => '--ui-e-fade-edge-alpha: {{VALUE}};',
1009	],
1010	]
1011	);
1012	$this->add_control(
1013	'fade_edge_deep',
1014	[
1015	'label' => esc_html__( 'Fade deepening', 'uicore-elements' ),
1016	'type' => Controls_Manager::NUMBER,
1017	'default' => 30,
1018	'min' => 0,
1019	'max' => 50,
1020	'step' => 5,
1021	'condition' => [
1022	'fade_edges' => 'yes',
1023	],
1024	'selectors' => [
1025	'{{WRAPPER}}' => '--ui-e-fade-edge-deep: {{VALUE}}%;',
1026	],
1027	]
1028	);
1029	$this->add_control(
1030	'autoplay',
1031	[
1032	'label' => __('Autoplay', 'uicore-elements'),
1033	'type' => Controls_Manager::SWITCHER,
1034	'return_value' => 'yes',
1035	'condition' => [
1036	'animation_style!' => 'marquee',
1037	],
1038	'frontend_available' => true,
1039	]
1040	);
1041
1042	$this->add_control(
1043	'autoplay_speed',
1044	[
1045	'label' => esc_html__('Autoplay Speed', 'uicore-elements'),
1046	'type' => Controls_Manager::NUMBER,
1047	'default' => 5000,
1048	'min' => 100,
1049	'max' => 10000,
1050	'step' => 100,
1051	'condition' => [
1052	'autoplay' => 'yes',
1053	'animation_style!' => 'marquee',
1054	],
1055	'frontend_available' => true,
1056	]
1057	);
1058	$this->add_control(
1059	'reverse',
1060	[
1061	'label' => __('Reverse Direction', 'uicore-elements'),
1062	'type' => Controls_Manager::SWITCHER,
1063	'return_value' => 'true',
1064	'render_type' => 'template',
1065	'conditions' => [
1066	'relation' => 'or',
1067	'terms' => [
1068	[
1069	'name' => 'animation_style',
1070	'operator' => '===',
1071	'value' => 'marquee',
1072	],
1073	[
1074	'name' => 'autoplay',
1075	'operator' => '===',
1076	'value' => 'yes',
1077	],
1078	],
1079	],
1080	'frontend_available' => true,
1081	]
1082	);
1083	$this->add_control(
1084	'pause_on_hover',
1085	[
1086	'label' => esc_html__('Pause on Hover', 'uicore-elements'),
1087	'type' => Controls_Manager::SWITCHER,
1088	'return_value' => 'true',
1089	'separator' => 'after',
1090	'condition' => [
1091	'autoplay' => 'yes',
1092	'animation_style!' => 'marquee',
1093	],
1094	'frontend_available' => true,
1095	]
1096	);
1097	$this->add_control(
1098	'grab_cursor',
1099	[
1100	'label' => __('Grab Cursor', 'uicore-elements'),
1101	'type' => Controls_Manager::SWITCHER,
1102	'default' => 'yes',
1103	'condition' => [
1104	'animation_style!' => 'marquee',
1105	],
1106	'frontend_available' => true,
1107	]
1108	);
1109	$this->add_control(
1110	'loop',
1111	[
1112	'label' => __('Loop', 'uicore-elements'),
1113	'type' => Controls_Manager::SWITCHER,
1114	'default' => 'true',
1115	'return_value' => 'true',
1116	'condition' => [
1117	'animation_style!' => 'marquee',
1118	],
1119	'frontend_available' => true,
1120	]
1121	);
1122	$this->add_control(
1123	'overflow_container',
1124	[
1125	'label' => esc_html__( 'Overflow Container', 'uicore-elements' ),
1126	'type' => \Elementor\Controls_Manager::HIDDEN,
1127	'default' => Plugin::$instance->experiments->is_feature_active('container') ? 'container' : 'column',
1128	'frontend_available' => true, // return on the JS the container type (flexbox or column) for overflow
1129	]
1130	);
1131	$this->add_control(
1132	'observer',
1133	[
1134	'label' => __('Observer', 'uicore-elements'),
1135	'description' => __('Use it when the carousel is placed in a hidden place (ex: tab, accordion).', 'uicore-elements'),
1136	'type' => Controls_Manager::SWITCHER,
1137	'return_value' => 'yes',
1138	'frontend_available' => true,
1139	]
1140	);
1141	}
1142	//Navigation Style Controls
1143	function TRAIT_register_navigation_style_controls()
1144	{
1145
1146	$this->start_controls_section(
1147	'section_style_navigation',
1148	[
1149	'label' => esc_html__('Navigation', 'uicore-elements'),
1150	'tab' => Controls_Manager::TAB_STYLE,
1151	'conditions' => [
1152	'terms' => [
1153	[
1154	'name' => 'navigation',
1155	'operator' => '!=',
1156	'value' => '',
1157	],
1158	],
1159	],
1160	]
1161	);
1162
1163	$this->add_control(
1164	'arrows_heading',
1165	[
1166	'label' => __('Arrows', 'uicore-elements'),
1167	'type' => Controls_Manager::HEADING,
1168	'conditions' => $this->nav_conditions('arrows'),
1169	]
1170	);
1171
1172	$this->start_controls_tabs('tabs_navigation_arrows_style');
1173
1174	$this->start_controls_tab(
1175	'tabs_nav_arrows_normal',
1176	[
1177	'label' => __('Normal', 'uicore-elements'),
1178	'conditions' => $this->nav_conditions('arrows'),
1179	]
1180	);
1181
1182	$this->add_control(
1183	'arrows_color',
1184	[
1185	'label' => __('Color', 'uicore-elements'),
1186	'type' => Controls_Manager::COLOR,
1187	'selectors' => [
1188	'{{WRAPPER}} .ui-e-button i' => 'color: {{VALUE}}',
1189	'{{WRAPPER}} .ui-e-button svg' => 'fill: {{VALUE}}',
1190	],
1191	'conditions' => $this->nav_conditions('arrows'),
1192	]
1193	);
1194	$this->add_control(
1195	'arrows_background',
1196	[
1197	'label' => __('Background', 'uicore-elements'),
1198	'type' => Controls_Manager::COLOR,
1199	'selectors' => [
1200	'{{WRAPPER}} .ui-e-button' => 'background-color: {{VALUE}}',
1201	],
1202	'conditions' => $this->nav_conditions('arrows'),
1203	]
1204	);
1205	$this->add_group_control(
1206	Group_Control_Border::get_type(),
1207	[
1208	'name' => 'nav_arrows_border',
1209	'selector' => '{{WRAPPER}} .ui-e-button',
1210	'conditions' => $this->nav_conditions('arrows'),
1211	]
1212	);
1213	$this->add_control(
1214	'arrows_radius',
1215	[
1216	'label' => __('Border Radius', 'uicore-elements'),
1217	'type' => Controls_Manager::DIMENSIONS,
1218	'size_units' => ['px', '%'],
1219	'selectors' => [
1220	'{{WRAPPER}} .ui-e-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1221	],
1222	'conditions' => $this->nav_conditions('arrows'),
1223	]
1224	);
1225	$this->add_control(
1226	'arrows_padding',
1227	[
1228	'label' => esc_html__('Padding', 'uicore-elements'),
1229	'type' => Controls_Manager::DIMENSIONS,
1230	'size_units' => ['px', 'em', '%'],
1231	'selectors' => [
1232	'{{WRAPPER}} .ui-e-button' => 'padding: {{TOP}}{{UNIT \|\| 0}} {{RIGHT}}{{UNIT \|\| 0}} {{BOTTOM}}{{UNIT \|\| 0}} {{LEFT}}{{UNIT \|\| 0}};',
1233	],
1234	'conditions' => $this->nav_conditions('arrows'),
1235	]
1236	);
1237	$this->add_responsive_control(
1238	'arrows_size',
1239	[
1240	'label' => __('Size', 'uicore-elements'),
1241	'type' => Controls_Manager::SLIDER,
1242	'range' => [
1243	'px' => [
1244	'min' => 10,
1245	'max' => 100,
1246	],
1247	],
1248	'default' => [
1249	'size' => 16,
1250	'unit' => 'px'
1251	],
1252	'selectors' => [
1253	'{{WRAPPER}} .ui-e-button i' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1254	'{{WRAPPER}} .ui-e-button svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
1255	],
1256	'conditions' => $this->nav_conditions('arrows'),
1257	]
1258	);
1259	$this->add_group_control(
1260	Group_Control_Box_Shadow::get_type(),
1261	[
1262	'name' => 'arrows_box_shadow',
1263	'selector' => '{{WRAPPER}} .ui-e-button',
1264	'conditions' => $this->nav_conditions('arrows'),
1265	]
1266	);
1267
1268	$this->end_controls_tab();
1269
1270	$this->start_controls_tab(
1271	'tabs_nav_arrows_hover',
1272	[
1273	'label' => __('Hover', 'uicore-elements'),
1274	'conditions' => $this->nav_conditions('arrows'),
1275	]
1276	);
1277
1278	$this->add_control(
1279	'arrows_hover_color',
1280	[
1281	'label' => __('Color', 'uicore-elements'),
1282	'type' => Controls_Manager::COLOR,
1283	'selectors' => [
1284	'{{WRAPPER}} .ui-e-button:hover i' => 'color: {{VALUE}}',
1285	'{{WRAPPER}} .ui-e-button:hover svg' => 'fill: {{VALUE}}',
1286	],
1287	'conditions' => $this->nav_conditions('arrows'),
1288	]
1289	);
1290	$this->add_control(
1291	'arrows_hover_background',
1292	[
1293	'label' => __('Background', 'uicore-elements'),
1294	'type' => Controls_Manager::COLOR,
1295	'selectors' => [
1296	'{{WRAPPER}} .ui-e-button:hover' => 'background-color: {{VALUE}}',
1297
1298	],
1299	'conditions' => $this->nav_conditions('arrows'),
1300	]
1301	);
1302	$this->add_control(
1303	'nav_arrows_hover_border_color',
1304	[
1305	'label' => __('Border Color', 'uicore-elements'),
1306	'type' => Controls_Manager::COLOR,
1307	'selectors' => [
1308	'{{WRAPPER}} .ui-e-button:hover' => 'border-color: {{VALUE}};',
1309	],
1310	'conditions' => $this->nav_conditions('arrows'),
1311	]
1312	);
1313	$this->add_group_control(
1314	Group_Control_Box_Shadow::get_type(),
1315	[
1316	'name' => 'arrows_hover_box_shadow',
1317	'selector' => '{{WRAPPER}} .ui-e-button:hover',
1318	'conditions' => $this->nav_conditions('arrows'),
1319	]
1320	);
1321
1322	$this->end_controls_tab();
1323
1324	$this->end_controls_tabs();
1325
1326	$this->add_control(
1327	'hr_1',
1328	[
1329	'type' => Controls_Manager::DIVIDER,
1330	'conditions' => $this->nav_conditions('dots'),
1331	]
1332	);
1333	$this->add_control(
1334	'dots_heading',
1335	[
1336	'label' => __('Dots', 'uicore-elements'),
1337	'type' => Controls_Manager::HEADING,
1338	'conditions' => $this->nav_conditions('dots'),
1339	]
1340	);
1341
1342	$this->start_controls_tabs('tabs_navigation_dots_style');
1343
1344	$this->start_controls_tab(
1345	'tabs_nav_dots_normal',
1346	[
1347	'label' => __('Normal', 'uicore-elements'),
1348	'conditions' => $this->nav_conditions('dots'),
1349	]
1350	);
1351
1352	$this->add_control(
1353	'dots_color',
1354	[
1355	'label' => __('Color', 'uicore-elements'),
1356	'type' => Controls_Manager::COLOR,
1357	'selectors' => [
1358	'{{WRAPPER}} .ui-e-dots .dot' => 'background-color: {{VALUE}}',
1359	],
1360	'conditions' => $this->nav_conditions('dots'),
1361	]
1362	);
1363	$this->add_control(
1364	'dots_space_between',
1365	[
1366	'label' => __('Space Between Dots', 'uicore-elements'),
1367	'type' => Controls_Manager::SLIDER,
1368	'selectors' => [
1369	'{{WRAPPER}} .ui-e-dots .dot' => 'margin: 0 {{SIZE}}{{UNIT}};',
1370	],
1371	'range' => [
1372	'px' =>[
1373	'min' => 0,
1374	'max' => 15,
1375	'step' => 1,
1376	]
1377	],
1378	'default' => [
1379	'unit' => 'px',
1380	'size' => 8,
1381	],
1382	'conditions' => $this->nav_conditions('dots'),
1383	]
1384	);
1385	$this->add_responsive_control(
1386	'dots_size',
1387	[
1388	'label' => __('Size', 'uicore-elements'),
1389	'type' => Controls_Manager::SLIDER,
1390	'range' => [
1391	'px' => [
1392	'min' => 5,
1393	'max' => 20,
1394	],
1395	],
1396	'default' => [
1397	'unit' => 'px',
1398	'size' => 8,
1399	],
1400	'selectors' => [
1401	'{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1402	],
1403	'conditions' => $this->nav_conditions(
1404	'dots',
1405	[
1406	[
1407	'name' => 'advanced_dots_size',
1408	'operator' => '===',
1409	'value' => '',
1410	]
1411	]
1412	),
1413	]
1414	);
1415	$this->add_control(
1416	'advanced_dots_size',
1417	[
1418	'label' => __('Advanced Size', 'uicore-elements'),
1419	'type' => Controls_Manager::SWITCHER,
1420	'conditions' => $this->nav_conditions('dots'),
1421	]
1422	);
1423	$this->add_responsive_control(
1424	'advanced_dots_width',
1425	[
1426	'label' => __('Width', 'uicore-elements'),
1427	'type' => Controls_Manager::SLIDER,
1428	'range' => [
1429	'px' => [
1430	'min' => 1,
1431	'max' => 50,
1432	],
1433	],
1434	'default' => [
1435	'size' => 6,
1436	'unit' => 'px',
1437	],
1438	'selectors' => [
1439	'{{WRAPPER}} .ui-e-dots .dot' => 'width: {{SIZE}}{{UNIT}};',
1440	],
1441	'conditions' => $this->nav_conditions(
1442	'dots',
1443	[
1444	[
1445	'name' => 'advanced_dots_size',
1446	'operator' => '==',
1447	'value' => 'yes',
1448	]
1449	]
1450	),
1451	]
1452	);
1453	$this->add_responsive_control(
1454	'advanced_dots_height',
1455	[
1456	'label' => __('Height', 'uicore-elements'),
1457	'type' => Controls_Manager::SLIDER,
1458	'range' => [
1459	'px' => [
1460	'min' => 1,
1461	'max' => 50,
1462	],
1463	],
1464	'default' => [
1465	'size' => 6,
1466	'unit' => 'px',
1467	],
1468	'selectors' => [
1469	'{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}};',
1470	],
1471	'conditions' => $this->nav_conditions(
1472	'dots',
1473	[
1474	[
1475	'name' => 'advanced_dots_size',
1476	'operator' => '==',
1477	'value' => 'yes',
1478	]
1479	]
1480	),
1481	]
1482	);
1483	$this->add_control(
1484	'advanced_dots_radius',
1485	[
1486	'label' => esc_html__('Border Radius', 'uicore-elements'),
1487	'type' => Controls_Manager::DIMENSIONS,
1488	'size_units' => ['px', '%'],
1489	'selectors' => [
1490	'{{WRAPPER}} .ui-e-dots .dot' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1491	],
1492	'conditions' => $this->nav_conditions(
1493	'dots',
1494	[
1495	[
1496	'name' => 'advanced_dots_size',
1497	'operator' => '==',
1498	'value' => 'yes',
1499	]
1500	]
1501	),
1502	]
1503	);
1504	$this->add_group_control(
1505	Group_Control_Box_Shadow::get_type(),
1506	[
1507	'name' => 'dots_box_shadow',
1508	'selector' => '{{WRAPPER}} .ui-e-dots .dot',
1509	'conditions' => $this->nav_conditions('dots'),
1510	]
1511	);
1512
1513	$this->end_controls_tab();
1514
1515	$this->start_controls_tab(
1516	'tabs_nav_dots_active',
1517	[
1518	'label' => __('Active', 'uicore-elements'),
1519	'conditions' => $this->nav_conditions('dots'),
1520	]
1521	);
1522
1523	$this->add_control(
1524	'active_dot_color',
1525	[
1526	'label' => __('Color', 'uicore-elements'),
1527	'type' => Controls_Manager::COLOR,
1528	'selectors' => [
1529	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'background-color: {{VALUE}}',
1530	],
1531	'conditions' => $this->nav_conditions('dots'),
1532	]
1533	);
1534	$this->add_responsive_control(
1535	'active_dots_size',
1536	[
1537	'label' => __('Size', 'uicore-elements'),
1538	'type' => Controls_Manager::SLIDER,
1539	'range' => [
1540	'px' => [
1541	'min' => 5,
1542	'max' => 20,
1543	],
1544	],
1545	'selectors' => [
1546	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1547	],
1548	'conditions' => $this->nav_conditions(
1549	'dots',
1550	[
1551	[
1552	'name' => 'advanced_dots_size',
1553	'operator' => '===',
1554	'value' => '',
1555	]
1556	]
1557	),
1558	]
1559	);
1560	$this->add_responsive_control(
1561	'active_advanced_dots_width',
1562	[
1563	'label' => __('Width', 'uicore-elements'),
1564	'type' => Controls_Manager::SLIDER,
1565	'range' => [
1566	'px' => [
1567	'min' => 1,
1568	'max' => 50,
1569	],
1570	],
1571	'default' => [
1572	'size' => 15,
1573	'unit' => 'px',
1574	],
1575	'selectors' => [
1576	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'width: {{SIZE}}{{UNIT}};',
1577	],
1578	'conditions' => $this->nav_conditions(
1579	'dots',
1580	[
1581	[
1582	'name' => 'advanced_dots_size',
1583	'operator' => '==',
1584	'value' => 'yes',
1585	]
1586	]
1587	),
1588	]
1589	);
1590	$this->add_responsive_control(
1591	'active_advanced_dots_height',
1592	[
1593	'label' => __('Height', 'uicore-elements'),
1594	'type' => Controls_Manager::SLIDER,
1595	'range' => [
1596	'px' => [
1597	'min' => 1,
1598	'max' => 50,
1599	],
1600	],
1601	'default' => [
1602	'size' => 6,
1603	'unit' => 'px',
1604	],
1605	'selectors' => [
1606	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}};',
1607	],
1608	'conditions' => $this->nav_conditions(
1609	'dots',
1610	[
1611	[
1612	'name' => 'advanced_dots_size',
1613	'operator' => '==',
1614	'value' => 'yes',
1615	]
1616	]
1617	),
1618	]
1619	);
1620	$this->add_control(
1621	'active_advanced_dots_radius',
1622	[
1623	'label' => esc_html__('Border Radius', 'uicore-elements'),
1624	'type' => Controls_Manager::DIMENSIONS,
1625	'size_units' => ['px', '%'],
1626	'selectors' => [
1627	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1628	],
1629	'conditions' => $this->nav_conditions(
1630	'dots',
1631	[
1632	[
1633	'name' => 'advanced_dots_size',
1634	'operator' => '==',
1635	'value' => 'yes',
1636	]
1637	]
1638	),
1639	]
1640	);
1641	$this->add_group_control(
1642	Group_Control_Box_Shadow::get_type(),
1643	[
1644	'name' => 'dots_active_box_shadow',
1645	'selector' => '{{WRAPPER}} .ui-e-dots .dot.is-selected',
1646	'conditions' => $this->nav_conditions('dots'),
1647	]
1648	);
1649
1650	$this->end_controls_tab();
1651
1652	$this->end_controls_tabs();
1653
1654	$this->add_control(
1655	'hr_2',
1656	[
1657	'type' => Controls_Manager::DIVIDER,
1658	'conditions' => $this->nav_conditions('fraction'),
1659	]
1660	);
1661	$this->add_control(
1662	'fraction_heading',
1663	[
1664	'label' => __('Fractions', 'uicore-elements'),
1665	'type' => Controls_Manager::HEADING,
1666	'conditions' => $this->nav_conditions('fraction'),
1667	]
1668	);
1669	$this->add_control(
1670	'fraction_bg_color',
1671	[
1672	'label' => __('Background Color', 'uicore-elements'),
1673	'type' => Controls_Manager::COLOR,
1674	'selectors' => [
1675	'{{WRAPPER}} .ui-e-fraction' => 'background-color: {{VALUE}}',
1676	],
1677	'conditions' => $this->nav_conditions('fraction'),
1678	]
1679	);
1680	$this->add_control(
1681	'fraction_padding',
1682	[
1683	'label' => esc_html__('Padding', 'uicore-elements'),
1684	'type' => Controls_Manager::DIMENSIONS,
1685	'size_units' => ['px', 'em', '%'],
1686	'selectors' => [
1687	'{{WRAPPER}} .ui-e-fraction' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1688	],
1689	'conditions' => $this->nav_conditions('fraction'),
1690	]
1691	);
1692	$this->add_control(
1693	'fraction_radius',
1694	[
1695	'label' => esc_html__('Border Radius', 'uicore-elements'),
1696	'type' => Controls_Manager::DIMENSIONS,
1697	'size_units' => ['px', 'em', '%'],
1698	'selectors' => [
1699	'{{WRAPPER}} .ui-e-fraction' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1700	],
1701	'conditions' => $this->nav_conditions('fraction'),
1702	]
1703	);
1704	$this->add_group_control(
1705	Group_Control_Border::get_type(),
1706	[
1707	'name' => 'fraction_border',
1708	'selector' => '{{WRAPPER}} .ui-e-fraction',
1709	'conditions' => $this->nav_conditions('fraction'),
1710	]
1711	);
1712	$this->add_control(
1713	'fraction_color',
1714	[
1715	'label' => __('Color', 'uicore-elements'),
1716	'type' => Controls_Manager::COLOR,
1717	'selectors' => [
1718	'{{WRAPPER}} .ui-e-fraction, {{WRAPPER}} .ui-e-fraction .ui-e-total' => 'color: {{VALUE}}',
1719	],
1720	'conditions' => $this->nav_conditions('fraction'),
1721	]
1722	);
1723	$this->add_control(
1724	'active_fraction_color',
1725	[
1726	'label' => __('Active Color', 'uicore-elements'),
1727	'type' => Controls_Manager::COLOR,
1728	'selectors' => [
1729	'{{WRAPPER}} .ui-e-fraction .swiper-pagination-current' => 'color: {{VALUE}}',
1730	],
1731	'conditions' => $this->nav_conditions('fraction'),
1732	]
1733	);
1734	$this->add_group_control(
1735	Group_Control_Typography::get_type(),
1736	[
1737	'name' => 'fraction_typography',
1738	'label' => esc_html__('Typography', 'uicore-elements'),
1739	'selector' => '{{WRAPPER}} .ui-e-fraction span, {{WRAPPER}} .ui-e-fraction',
1740	'conditions' => $this->nav_conditions('fraction'),
1741	]
1742	);
1743
1744	$this->end_controls_section();
1745	}
1746	/**
1747	* Register Additional Controls that might change depending on the widget
1748	*
1749	* @param bool $is_slider - Enable specific slider control(s)
1750	*/
1751	function TRAIT_register_carousel_additional_controls($is_slider = false)
1752	{
1753	$this->add_responsive_control(
1754	'carousel_gap',
1755	[
1756	'label' => __('Item Gap', 'uicore-elements'),
1757	'type' => Controls_Manager::SLIDER,
1758	'default' => [
1759	'size' => 20,
1760	],
1761	'range' => [
1762	'px' => [
1763	'min' => 0,
1764	'max' => 100,
1765	],
1766	],
1767	'frontend_available' => true,
1768	]
1769	);
1770	$this->add_control(
1771	'match_height',
1772	[
1773	'label' => __('Match Item Height', 'uicore-elements'),
1774	'type' => Controls_Manager::SWITCHER,
1775	'default' => 'yes',
1776	'prefix_class' => 'ui-e-match-height-',
1777	'conditions' => [
1778	'relation' => 'or',
1779	'terms' => [
1780	[
1781	'name' => 'animation_style',
1782	'operator' => '!==',
1783	'value' => 'marquee',
1784	],
1785	[
1786	'relation' => 'and',
1787	'terms' => [
1788	[
1789	'name' => 'animation_style',
1790	'operator' => '===',
1791	'value' => 'marquee',
1792	],
1793	[
1794	'name' => 'vertical',
1795	'operator' => '!==',
1796	'value' => 'true',
1797	]
1798	],
1799	],
1800	]
1801	],
1802	'selectors' => [
1803	'{{WRAPPER}} .ui-e-wrp' => 'height: auto',
1804	'{{WRAPPER}} .ui-e-animations-wrp, {{WRAPPER}} .ui-e-item' => 'height: 100%'
1805	]
1806	]
1807	);
1808	if($is_slider) {
1809	$this->add_control(
1810	'slider_height',
1811	[
1812	'label' => __('Slide Height', 'uicore-elements'),
1813	'type' => Controls_Manager::SLIDER,
1814	'size_units' => [ 'px', '%', 'em', 'rem' ],
1815	'range' => [
1816	'px' => [
1817	'min' => 80,
1818	'max' => 1000,
1819	],
1820	],
1821	'selectors' => [
1822	'{{WRAPPER}} .ui-e-wrp' => 'height: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}}',
1823	'{{WRAPPER}} .ui-e-item' => 'height: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}}',
1824	]
1825	]
1826	);
1827	}
1828	}
1829
1830	/**
1831	* Apply common updates Slider widgets, that inherits their respective Carousel version, needs.
1832	*
1833	* @param bool $item_animation - If the Carousel version of the widget has item animations,
1834	* set this to true to remove the animation controls
1835	*
1836	* @since 1.2.1
1837	*/
1838	function TRAIT_update_slider_controls( $item_animation = true )
1839	{
1840
1841	$animations = [
1842	'coverflow' => esc_html__('Coverflow', 'uicore-elements'),
1843	'fade' => esc_html__('Fade', 'uicore-elements'),
1844	'cards' => esc_html__('Cards', 'uicore-elements'),
1845	'flip' => esc_html__('Flip', 'uicore-elements'),
1846	//'creative' => esc_html__('Creative', 'uicore-elements'), //TODO: enable creative again after fixing arrows bug
1847	'stacked'=> esc_html__('Stacked', 'uicore-elements'),
1848	];
1849
1850	// Testimonial slider specifics
1851	if ( $this->get_name() === 'uicore-testimonial-slider' ) {
1852	$animations['circular_avatar'] = esc_html__('Circular Avatar', 'uicore-elements');
1853	}
1854
1855	// Update animations
1856	$this->update_control(
1857	'animation_style',
1858	[
1859	'default' => 'fade',
1860	'options' => $animations
1861	]
1862	);
1863
1864	// Remove controls specifically meant for carousel, not slide type widgets
1865	$this->remove_responsive_control('slides_per_view');
1866	$this->remove_control('show_hidden');
1867	$this->remove_control('fade_edges');
1868	$this->remove_control('fade_edges_alert');
1869	$this->remove_control('match_height');
1870	$this->remove_control('carousel_gap');
1871
1872	// Remove item animation controls
1873	if($item_animation){
1874	$this->remove_control('animate_items');
1875	$this->remove_control('item_hover_animation');
1876	}
1877	}
1878
1879	// Navigation rendering
1880	function render_carousel_dots()
1881	{
1882	// TODO: fully replace `ui-e-dots` for `ui-e-carousel-dots`, after, at least, 3 releases from 1.2.0
1883	?>
1884	<div class="swiper-pagination ui-e-dots ui-e-carousel-dots"></div>
1885	<?php
1886	}
1887	function render_carousel_arrows()
1888	{
1889	$settings = $this->get_settings_for_display();
1890	// TODO: fully replace `ui-e-button` for `ui-e-carousel-button`, after, at least, 3 releases from 1.2.0
1891	?>
1892	<div class="ui-e-button ui-e-carousel-button ui-e-previous" role="button" aria-label="Previous slide">
1893	<?php Icons_Manager::render_icon( $settings['previous_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1894	</div>
1895	<div class="ui-e-button ui-e-carousel-button ui-e-next" role="button" aria-label="Next slide">
1896	<?php Icons_Manager::render_icon( $settings['next_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1897	</div>
1898	<?php
1899	}
1900	function render_carousel_fraction()
1901	{
1902	// TODO: fully replace `ui-e-fraction` for `ui-e-carousel-fraction`, after, at least, 3 releases from 1.2.0
1903	?>
1904	<div class="ui-e-fraction ui-e-carousel-fraction">
1905	<span class="ui-e-current"></span>
1906	/
1907	<span class="ui-e-total"></span>
1908	</div>
1909	<?php
1910	}
1911	// TODO: this compatibily functions have been generating debug log errors, such as `Passing null to parameter #1 ($haystack) of type string is deprecated..`
1912	function TRAIT_render_carousel_navigations()
1913	{
1914	$navigation = $this->get_settings_for_display('navigation');
1915
1916	// Animations might disable navigation (e.g. `marquee`)
1917	if( ! isset($navigation) ) {
1918	return;
1919	}
1920
1921	// Migration code from old navigation select2 array values - TODO: can only be removed when the all design library is updated
1922	if( is_array($navigation)) {
1923	$navigation = implode('-', $navigation);
1924	}
1925
1926	if( strpos($navigation, 'dots') !== false ) {
1927	$this->render_carousel_dots();
1928	}
1929	if( strpos($navigation, 'arrows') !== false ) {
1930	$this->render_carousel_arrows();
1931	}
1932	if( strpos($navigation, 'fraction') !== false ) {
1933	$this->render_carousel_fraction();
1934	}
1935	}
1936
1937	/**
1938	* Calculates how much slides should be duplicated so loop can work
1939	* TODO: move to class helper OR find a way of traits being able to use it without usin carousel trait
1940	*
1941	* @param int $total_slides
1942	*
1943	* @return int Number of slides to duplicate
1944	*/
1945	function TRAIT_get_duplication_diff($total_slides){
1946	// Default carousel case
1947	return abs($total_slides - $this->get_settings('slides_per_view'));
1948	}
1949
1950	/**
1951	* Check if slides should be duplicated so loop can work
1952	* TODO: move to class helper OR find a way of traits being able to use it without usin carousel trait
1953	*/
1954	function TRAIT_should_duplicate_slides( $total_slides ){
1955
1956	if( $this->get_settings('loop') !== 'true' ){
1957	return false;
1958	}
1959
1960	// Default carousel case
1961	if( $total_slides <= $this->get_settings('slides_per_view') ){
1962	return true;
1963	}
1964
1965	return false;
1966	}
1967	}