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

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

1,777 lines 50.0 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	'condition' => [
865	'animation_style!' => ['horizontal']
866	]
867	]
868	);
869	$this->add_control(
870	'show_hidden',
871	[
872	'label' => esc_html__( 'Show Hidden Items', 'uicore-elements' ),
873	'type' => \Elementor\Controls_Manager::SELECT,
874	'default' => 'hidden',
875	'options' => [
876	'hidden' => esc_html__( 'Hidden', 'uicore-elements' ),
877	'left' => esc_html__( 'Show Left', 'uicore-elements' ),
878	'right' => esc_html__( 'Show Right', 'uicore-elements' ),
879	],
880	'condition' => [
881	'animation_style' => ['fade_blur', 'circular']
882	],
883	'frontend_available' => true,
884	]
885	);
886	$this->add_control(
887	'center_slides',
888	[
889	'label' => esc_html__('Center Slides', 'uicore-elements'),
890	'type' => Controls_Manager::SWITCHER,
891	'return_value' => 'true',
892	'condition' => [
893	'animation_style!' => 'marquee',
894	],
895	'frontend_available' => true,
896	]
897	);
898	$this->add_control(
899	'marquee_speed',
900	[
901	'label' => esc_html__('Marquee Speed', 'uicore-elements'),
902	'type' => Controls_Manager::NUMBER,
903	'default' => 5000,
904	'min' => 100,
905	'max' => 10000,
906	'step' => 100,
907	'condition' => [
908	'animation_style' => 'marquee',
909	],
910	'frontend_available' => true,
911	]
912	);
913	$this->add_control(
914	'fade_edges',
915	[
916	'label' => __('Fade Edges', 'uicore-elements'),
917	'type' => Controls_Manager::SWITCHER,
918	'prefix_class' => 'ui-e-fade-edges-',
919	]
920	);
921	$this->add_control(
922	'fade_edge_opacity',
923	[
924	'label' => esc_html__( 'Fade opacity', 'uicore-elements' ),
925	'type' => Controls_Manager::NUMBER,
926	'default' => 0.35,
927	'min' => 0,
928	'max' => 1,
929	'step' => 0.05,
930	'condition' => [
931	'fade_edges' => 'yes',
932	],
933	'selectors' => [
934	'{{WRAPPER}}' => '--ui-e-fade-edge-alpha: {{VALUE}};',
935	],
936	]
937	);
938	$this->add_control(
939	'fade_edge_deep',
940	[
941	'label' => esc_html__( 'Fade deepening', 'uicore-elements' ),
942	'type' => Controls_Manager::NUMBER,
943	'default' => 30,
944	'min' => 0,
945	'max' => 50,
946	'step' => 5,
947	'condition' => [
948	'fade_edges' => 'yes',
949	],
950	'selectors' => [
951	'{{WRAPPER}}' => '--ui-e-fade-edge-deep: {{VALUE}}%;',
952	],
953	]
954	);
955	$this->add_control(
956	'autoplay',
957	[
958	'label' => __('Autoplay', 'uicore-elements'),
959	'type' => Controls_Manager::SWITCHER,
960	'return_value' => 'yes',
961	'condition' => [
962	'animation_style!' => 'marquee',
963	],
964	'frontend_available' => true,
965	]
966	);
967	$this->add_control(
968	'autoplay_speed',
969	[
970	'label' => esc_html__('Autoplay Speed', 'uicore-elements'),
971	'type' => Controls_Manager::NUMBER,
972	'default' => 5000,
973	'min' => 100,
974	'max' => 10000,
975	'step' => 100,
976	'condition' => [
977	'autoplay' => 'yes',
978	'animation_style!' => 'marquee',
979	],
980	'frontend_available' => true,
981	]
982	);
983	$this->add_control(
984	'pause_on_hover',
985	[
986	'label' => esc_html__('Pause on Hover', 'uicore-elements'),
987	'type' => Controls_Manager::SWITCHER,
988	'return_value' => 'true',
989	'separator' => 'after',
990	'condition' => [
991	'autoplay' => 'yes',
992	'animation_style!' => 'marquee',
993	],
994	'frontend_available' => true,
995	]
996	);
997	$this->add_control(
998	'grab_cursor',
999	[
1000	'label' => __('Grab Cursor', 'uicore-elements'),
1001	'type' => Controls_Manager::SWITCHER,
1002	'default' => 'yes',
1003	'condition' => [
1004	'animation_style!' => 'marquee',
1005	],
1006	'frontend_available' => true,
1007	]
1008	);
1009	$this->add_control(
1010	'loop',
1011	[
1012	'label' => __('Loop', 'uicore-elements'),
1013	'type' => Controls_Manager::SWITCHER,
1014	'default' => 'true',
1015	'return_value' => 'true',
1016	'condition' => [
1017	'animation_style!' => 'marquee',
1018	],
1019	'frontend_available' => true,
1020	]
1021	);
1022	$this->add_control(
1023	'overflow_container',
1024	[
1025	'label' => esc_html__( 'Overflow Container', 'uicore-elements' ),
1026	'type' => \Elementor\Controls_Manager::HIDDEN,
1027	'default' => Plugin::$instance->experiments->is_feature_active('container') ? 'container' : 'column',
1028	'frontend_available' => true, // return on the JS the container type (flexbox or column) for overflow
1029	]
1030	);
1031	$this->add_control(
1032	'observer',
1033	[
1034	'label' => __('Observer', 'uicore-elements'),
1035	'description' => __('Use it when the carousel is placed in a hidden place (ex: tab, accordion).', 'uicore-elements'),
1036	'type' => Controls_Manager::SWITCHER,
1037	'return_value' => 'yes',
1038	'frontend_available' => true,
1039	]
1040	);
1041	}
1042	//Navigation Style Controls
1043	function TRAIT_register_navigation_style_controls()
1044	{
1045
1046	$this->start_controls_section(
1047	'section_style_navigation',
1048	[
1049	'label' => esc_html__('Navigation', 'uicore-elements'),
1050	'tab' => Controls_Manager::TAB_STYLE,
1051	'conditions' => [
1052	'terms' => [
1053	[
1054	'name' => 'navigation',
1055	'operator' => '!=',
1056	'value' => '',
1057	],
1058	],
1059	],
1060	]
1061	);
1062
1063	$this->add_control(
1064	'arrows_heading',
1065	[
1066	'label' => __('Arrows', 'uicore-elements'),
1067	'type' => Controls_Manager::HEADING,
1068	'conditions' => $this->nav_conditions('arrows'),
1069	]
1070	);
1071
1072	$this->start_controls_tabs('tabs_navigation_arrows_style');
1073
1074	$this->start_controls_tab(
1075	'tabs_nav_arrows_normal',
1076	[
1077	'label' => __('Normal', 'uicore-elements'),
1078	'conditions' => $this->nav_conditions('arrows'),
1079	]
1080	);
1081
1082	$this->add_control(
1083	'arrows_color',
1084	[
1085	'label' => __('Color', 'uicore-elements'),
1086	'type' => Controls_Manager::COLOR,
1087	'selectors' => [
1088	'{{WRAPPER}} .ui-e-button i' => 'color: {{VALUE}}',
1089	'{{WRAPPER}} .ui-e-button svg' => 'fill: {{VALUE}}',
1090	],
1091	'conditions' => $this->nav_conditions('arrows'),
1092	]
1093	);
1094	$this->add_control(
1095	'arrows_background',
1096	[
1097	'label' => __('Background', 'uicore-elements'),
1098	'type' => Controls_Manager::COLOR,
1099	'selectors' => [
1100	'{{WRAPPER}} .ui-e-button' => 'background-color: {{VALUE}}',
1101	],
1102	'conditions' => $this->nav_conditions('arrows'),
1103	]
1104	);
1105	$this->add_group_control(
1106	Group_Control_Border::get_type(),
1107	[
1108	'name' => 'nav_arrows_border',
1109	'selector' => '{{WRAPPER}} .ui-e-button',
1110	'conditions' => $this->nav_conditions('arrows'),
1111	]
1112	);
1113	$this->add_control(
1114	'arrows_radius',
1115	[
1116	'label' => __('Border Radius', 'uicore-elements'),
1117	'type' => Controls_Manager::DIMENSIONS,
1118	'size_units' => ['px', '%'],
1119	'selectors' => [
1120	'{{WRAPPER}} .ui-e-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1121	],
1122	'conditions' => $this->nav_conditions('arrows'),
1123	]
1124	);
1125	$this->add_control(
1126	'arrows_padding',
1127	[
1128	'label' => esc_html__('Padding', 'uicore-elements'),
1129	'type' => Controls_Manager::DIMENSIONS,
1130	'size_units' => ['px', 'em', '%'],
1131	'selectors' => [
1132	'{{WRAPPER}} .ui-e-button' => 'padding: {{TOP}}{{UNIT \|\| 0}} {{RIGHT}}{{UNIT \|\| 0}} {{BOTTOM}}{{UNIT \|\| 0}} {{LEFT}}{{UNIT \|\| 0}};',
1133	],
1134	'conditions' => $this->nav_conditions('arrows'),
1135	]
1136	);
1137	$this->add_responsive_control(
1138	'arrows_size',
1139	[
1140	'label' => __('Size', 'uicore-elements'),
1141	'type' => Controls_Manager::SLIDER,
1142	'range' => [
1143	'px' => [
1144	'min' => 10,
1145	'max' => 100,
1146	],
1147	],
1148	'default' => [
1149	'size' => 16,
1150	'unit' => 'px'
1151	],
1152	'selectors' => [
1153	'{{WRAPPER}} .ui-e-button i' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1154	'{{WRAPPER}} .ui-e-button svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
1155	],
1156	'conditions' => $this->nav_conditions('arrows'),
1157	]
1158	);
1159	$this->add_group_control(
1160	Group_Control_Box_Shadow::get_type(),
1161	[
1162	'name' => 'arrows_box_shadow',
1163	'selector' => '{{WRAPPER}} .ui-e-button',
1164	'conditions' => $this->nav_conditions('arrows'),
1165	]
1166	);
1167
1168	$this->end_controls_tab();
1169
1170	$this->start_controls_tab(
1171	'tabs_nav_arrows_hover',
1172	[
1173	'label' => __('Hover', 'uicore-elements'),
1174	'conditions' => $this->nav_conditions('arrows'),
1175	]
1176	);
1177
1178	$this->add_control(
1179	'arrows_hover_color',
1180	[
1181	'label' => __('Color', 'uicore-elements'),
1182	'type' => Controls_Manager::COLOR,
1183	'selectors' => [
1184	'{{WRAPPER}} .ui-e-button:hover i' => 'color: {{VALUE}}',
1185	'{{WRAPPER}} .ui-e-button:hover svg' => 'fill: {{VALUE}}',
1186	],
1187	'conditions' => $this->nav_conditions('arrows'),
1188	]
1189	);
1190	$this->add_control(
1191	'arrows_hover_background',
1192	[
1193	'label' => __('Background', 'uicore-elements'),
1194	'type' => Controls_Manager::COLOR,
1195	'selectors' => [
1196	'{{WRAPPER}} .ui-e-button:hover' => 'background-color: {{VALUE}}',
1197
1198	],
1199	'conditions' => $this->nav_conditions('arrows'),
1200	]
1201	);
1202	$this->add_control(
1203	'nav_arrows_hover_border_color',
1204	[
1205	'label' => __('Border Color', 'uicore-elements'),
1206	'type' => Controls_Manager::COLOR,
1207	'selectors' => [
1208	'{{WRAPPER}} .ui-e-button:hover' => 'border-color: {{VALUE}};',
1209	],
1210	'conditions' => $this->nav_conditions('arrows'),
1211	]
1212	);
1213	$this->add_group_control(
1214	Group_Control_Box_Shadow::get_type(),
1215	[
1216	'name' => 'arrows_hover_box_shadow',
1217	'selector' => '{{WRAPPER}} .ui-e-button:hover',
1218	'conditions' => $this->nav_conditions('arrows'),
1219	]
1220	);
1221
1222	$this->end_controls_tab();
1223
1224	$this->end_controls_tabs();
1225
1226	$this->add_control(
1227	'hr_1',
1228	[
1229	'type' => Controls_Manager::DIVIDER,
1230	'conditions' => $this->nav_conditions('dots'),
1231	]
1232	);
1233	$this->add_control(
1234	'dots_heading',
1235	[
1236	'label' => __('Dots', 'uicore-elements'),
1237	'type' => Controls_Manager::HEADING,
1238	'conditions' => $this->nav_conditions('dots'),
1239	]
1240	);
1241
1242	$this->start_controls_tabs('tabs_navigation_dots_style');
1243
1244	$this->start_controls_tab(
1245	'tabs_nav_dots_normal',
1246	[
1247	'label' => __('Normal', 'uicore-elements'),
1248	'conditions' => $this->nav_conditions('dots'),
1249	]
1250	);
1251
1252	$this->add_control(
1253	'dots_color',
1254	[
1255	'label' => __('Color', 'uicore-elements'),
1256	'type' => Controls_Manager::COLOR,
1257	'selectors' => [
1258	'{{WRAPPER}} .ui-e-dots .dot' => 'background-color: {{VALUE}}',
1259	],
1260	'conditions' => $this->nav_conditions('dots'),
1261	]
1262	);
1263	$this->add_control(
1264	'dots_space_between',
1265	[
1266	'label' => __('Space Between Dots', 'uicore-elements'),
1267	'type' => Controls_Manager::SLIDER,
1268	'selectors' => [
1269	'{{WRAPPER}} .ui-e-dots .dot' => 'margin: 0 {{SIZE}}{{UNIT}};',
1270	],
1271	'range' => [
1272	'px' =>[
1273	'min' => 0,
1274	'max' => 15,
1275	'step' => 1,
1276	]
1277	],
1278	'default' => [
1279	'unit' => 'px',
1280	'size' => 8,
1281	],
1282	'conditions' => $this->nav_conditions('dots'),
1283	]
1284	);
1285	$this->add_responsive_control(
1286	'dots_size',
1287	[
1288	'label' => __('Size', 'uicore-elements'),
1289	'type' => Controls_Manager::SLIDER,
1290	'range' => [
1291	'px' => [
1292	'min' => 5,
1293	'max' => 20,
1294	],
1295	],
1296	'default' => [
1297	'unit' => 'px',
1298	'size' => 8,
1299	],
1300	'selectors' => [
1301	'{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1302	],
1303	'conditions' => $this->nav_conditions(
1304	'dots',
1305	[
1306	[
1307	'name' => 'advanced_dots_size',
1308	'operator' => '===',
1309	'value' => '',
1310	]
1311	]
1312	),
1313	]
1314	);
1315	$this->add_control(
1316	'advanced_dots_size',
1317	[
1318	'label' => __('Advanced Size', 'uicore-elements'),
1319	'type' => Controls_Manager::SWITCHER,
1320	'conditions' => $this->nav_conditions('dots'),
1321	]
1322	);
1323	$this->add_responsive_control(
1324	'advanced_dots_width',
1325	[
1326	'label' => __('Width', 'uicore-elements'),
1327	'type' => Controls_Manager::SLIDER,
1328	'range' => [
1329	'px' => [
1330	'min' => 1,
1331	'max' => 50,
1332	],
1333	],
1334	'default' => [
1335	'size' => 6,
1336	'unit' => 'px',
1337	],
1338	'selectors' => [
1339	'{{WRAPPER}} .ui-e-dots .dot' => 'width: {{SIZE}}{{UNIT}};',
1340	],
1341	'conditions' => $this->nav_conditions(
1342	'dots',
1343	[
1344	[
1345	'name' => 'advanced_dots_size',
1346	'operator' => '==',
1347	'value' => 'yes',
1348	]
1349	]
1350	),
1351	]
1352	);
1353	$this->add_responsive_control(
1354	'advanced_dots_height',
1355	[
1356	'label' => __('Height', 'uicore-elements'),
1357	'type' => Controls_Manager::SLIDER,
1358	'range' => [
1359	'px' => [
1360	'min' => 1,
1361	'max' => 50,
1362	],
1363	],
1364	'default' => [
1365	'size' => 6,
1366	'unit' => 'px',
1367	],
1368	'selectors' => [
1369	'{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}};',
1370	],
1371	'conditions' => $this->nav_conditions(
1372	'dots',
1373	[
1374	[
1375	'name' => 'advanced_dots_size',
1376	'operator' => '==',
1377	'value' => 'yes',
1378	]
1379	]
1380	),
1381	]
1382	);
1383	$this->add_control(
1384	'advanced_dots_radius',
1385	[
1386	'label' => esc_html__('Border Radius', 'uicore-elements'),
1387	'type' => Controls_Manager::DIMENSIONS,
1388	'size_units' => ['px', '%'],
1389	'selectors' => [
1390	'{{WRAPPER}} .ui-e-dots .dot' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1391	],
1392	'conditions' => $this->nav_conditions(
1393	'dots',
1394	[
1395	[
1396	'name' => 'advanced_dots_size',
1397	'operator' => '==',
1398	'value' => 'yes',
1399	]
1400	]
1401	),
1402	]
1403	);
1404	$this->add_group_control(
1405	Group_Control_Box_Shadow::get_type(),
1406	[
1407	'name' => 'dots_box_shadow',
1408	'selector' => '{{WRAPPER}} .ui-e-dots .dot',
1409	'conditions' => $this->nav_conditions('dots'),
1410	]
1411	);
1412
1413	$this->end_controls_tab();
1414
1415	$this->start_controls_tab(
1416	'tabs_nav_dots_active',
1417	[
1418	'label' => __('Active', 'uicore-elements'),
1419	'conditions' => $this->nav_conditions('dots'),
1420	]
1421	);
1422
1423	$this->add_control(
1424	'active_dot_color',
1425	[
1426	'label' => __('Color', 'uicore-elements'),
1427	'type' => Controls_Manager::COLOR,
1428	'selectors' => [
1429	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'background-color: {{VALUE}}',
1430	],
1431	'conditions' => $this->nav_conditions('dots'),
1432	]
1433	);
1434	$this->add_responsive_control(
1435	'active_dots_size',
1436	[
1437	'label' => __('Size', 'uicore-elements'),
1438	'type' => Controls_Manager::SLIDER,
1439	'range' => [
1440	'px' => [
1441	'min' => 5,
1442	'max' => 20,
1443	],
1444	],
1445	'selectors' => [
1446	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1447	],
1448	'conditions' => $this->nav_conditions(
1449	'dots',
1450	[
1451	[
1452	'name' => 'advanced_dots_size',
1453	'operator' => '===',
1454	'value' => '',
1455	]
1456	]
1457	),
1458	]
1459	);
1460	$this->add_responsive_control(
1461	'active_advanced_dots_width',
1462	[
1463	'label' => __('Width', 'uicore-elements'),
1464	'type' => Controls_Manager::SLIDER,
1465	'range' => [
1466	'px' => [
1467	'min' => 1,
1468	'max' => 50,
1469	],
1470	],
1471	'default' => [
1472	'size' => 15,
1473	'unit' => 'px',
1474	],
1475	'selectors' => [
1476	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'width: {{SIZE}}{{UNIT}};',
1477	],
1478	'conditions' => $this->nav_conditions(
1479	'dots',
1480	[
1481	[
1482	'name' => 'advanced_dots_size',
1483	'operator' => '==',
1484	'value' => 'yes',
1485	]
1486	]
1487	),
1488	]
1489	);
1490	$this->add_responsive_control(
1491	'active_advanced_dots_height',
1492	[
1493	'label' => __('Height', 'uicore-elements'),
1494	'type' => Controls_Manager::SLIDER,
1495	'range' => [
1496	'px' => [
1497	'min' => 1,
1498	'max' => 50,
1499	],
1500	],
1501	'default' => [
1502	'size' => 6,
1503	'unit' => 'px',
1504	],
1505	'selectors' => [
1506	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}};',
1507	],
1508	'conditions' => $this->nav_conditions(
1509	'dots',
1510	[
1511	[
1512	'name' => 'advanced_dots_size',
1513	'operator' => '==',
1514	'value' => 'yes',
1515	]
1516	]
1517	),
1518	]
1519	);
1520	$this->add_control(
1521	'active_advanced_dots_radius',
1522	[
1523	'label' => esc_html__('Border Radius', 'uicore-elements'),
1524	'type' => Controls_Manager::DIMENSIONS,
1525	'size_units' => ['px', '%'],
1526	'selectors' => [
1527	'{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1528	],
1529	'conditions' => $this->nav_conditions(
1530	'dots',
1531	[
1532	[
1533	'name' => 'advanced_dots_size',
1534	'operator' => '==',
1535	'value' => 'yes',
1536	]
1537	]
1538	),
1539	]
1540	);
1541	$this->add_group_control(
1542	Group_Control_Box_Shadow::get_type(),
1543	[
1544	'name' => 'dots_active_box_shadow',
1545	'selector' => '{{WRAPPER}} .ui-e-dots .dot.is-selected',
1546	'conditions' => $this->nav_conditions('dots'),
1547	]
1548	);
1549
1550	$this->end_controls_tab();
1551
1552	$this->end_controls_tabs();
1553
1554	$this->add_control(
1555	'hr_2',
1556	[
1557	'type' => Controls_Manager::DIVIDER,
1558	'conditions' => $this->nav_conditions('fraction'),
1559	]
1560	);
1561	$this->add_control(
1562	'fraction_heading',
1563	[
1564	'label' => __('Fractions', 'uicore-elements'),
1565	'type' => Controls_Manager::HEADING,
1566	'conditions' => $this->nav_conditions('fraction'),
1567	]
1568	);
1569	$this->add_control(
1570	'fraction_bg_color',
1571	[
1572	'label' => __('Background Color', 'uicore-elements'),
1573	'type' => Controls_Manager::COLOR,
1574	'selectors' => [
1575	'{{WRAPPER}} .ui-e-fraction' => 'background-color: {{VALUE}}',
1576	],
1577	'conditions' => $this->nav_conditions('fraction'),
1578	]
1579	);
1580	$this->add_control(
1581	'fraction_padding',
1582	[
1583	'label' => esc_html__('Padding', 'uicore-elements'),
1584	'type' => Controls_Manager::DIMENSIONS,
1585	'size_units' => ['px', 'em', '%'],
1586	'selectors' => [
1587	'{{WRAPPER}} .ui-e-fraction' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1588	],
1589	'conditions' => $this->nav_conditions('fraction'),
1590	]
1591	);
1592	$this->add_control(
1593	'fraction_radius',
1594	[
1595	'label' => esc_html__('Border Radius', 'uicore-elements'),
1596	'type' => Controls_Manager::DIMENSIONS,
1597	'size_units' => ['px', 'em', '%'],
1598	'selectors' => [
1599	'{{WRAPPER}} .ui-e-fraction' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1600	],
1601	'conditions' => $this->nav_conditions('fraction'),
1602	]
1603	);
1604	$this->add_group_control(
1605	Group_Control_Border::get_type(),
1606	[
1607	'name' => 'fraction_border',
1608	'selector' => '{{WRAPPER}} .ui-e-fraction',
1609	'conditions' => $this->nav_conditions('fraction'),
1610	]
1611	);
1612	$this->add_control(
1613	'fraction_color',
1614	[
1615	'label' => __('Color', 'uicore-elements'),
1616	'type' => Controls_Manager::COLOR,
1617	'selectors' => [
1618	'{{WRAPPER}} .ui-e-fraction, {{WRAPPER}} .ui-e-fraction .ui-e-total' => 'color: {{VALUE}}',
1619	],
1620	'conditions' => $this->nav_conditions('fraction'),
1621	]
1622	);
1623	$this->add_control(
1624	'active_fraction_color',
1625	[
1626	'label' => __('Active Color', 'uicore-elements'),
1627	'type' => Controls_Manager::COLOR,
1628	'selectors' => [
1629	'{{WRAPPER}} .ui-e-fraction .swiper-pagination-current' => 'color: {{VALUE}}',
1630	],
1631	'conditions' => $this->nav_conditions('fraction'),
1632	]
1633	);
1634	$this->add_group_control(
1635	Group_Control_Typography::get_type(),
1636	[
1637	'name' => 'fraction_typography',
1638	'label' => esc_html__('Typography', 'uicore-elements'),
1639	'selector' => '{{WRAPPER}} .ui-e-fraction span, {{WRAPPER}} .ui-e-fraction',
1640	'conditions' => $this->nav_conditions('fraction'),
1641	]
1642	);
1643
1644	$this->end_controls_section();
1645	}
1646	/**
1647	* Register Additional Controls that might change depending on the widget
1648	*
1649	* @param bool $is_slider - Enable specific slider control(s)
1650	*/
1651	function TRAIT_register_carousel_additional_controls($is_slider = false)
1652	{
1653	$this->add_responsive_control(
1654	'carousel_gap',
1655	[
1656	'label' => __('Item Gap', 'uicore-elements'),
1657	'type' => Controls_Manager::SLIDER,
1658	'default' => [
1659	'size' => 20,
1660	],
1661	'range' => [
1662	'px' => [
1663	'min' => 0,
1664	'max' => 100,
1665	],
1666	],
1667	'frontend_available' => true,
1668	]
1669	);
1670	$this->add_control(
1671	'match_height',
1672	[
1673	'label' => __('Match Item Height', 'uicore-elements'),
1674	'type' => Controls_Manager::SWITCHER,
1675	'default' => 'yes',
1676	'prefix_class' => 'ui-e-match-height-',
1677	'selectors' => [
1678	'{{WRAPPER}} .ui-e-wrp' => 'height: auto',
1679	'{{WRAPPER}} .ui-e-animations-wrp, {{WRAPPER}} .ui-e-item' => 'height: 100%'
1680	]
1681	]
1682	);
1683	if($is_slider) {
1684	$this->add_control(
1685	'slider_height',
1686	[
1687	'label' => __('Slide Height', 'uicore-elements'),
1688	'type' => Controls_Manager::SLIDER,
1689	'size_units' => [ 'px', '%', 'em', 'rem' ],
1690	'range' => [
1691	'px' => [
1692	'min' => 80,
1693	'max' => 1000,
1694	],
1695	],
1696	'selectors' => [
1697	'{{WRAPPER}} .ui-e-wrp' => 'height: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}}',
1698	'{{WRAPPER}} .ui-e-item' => 'height: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}}',
1699	]
1700	]
1701	);
1702	}
1703	}
1704
1705	// Navigation rendering
1706	function render_carousel_dots()
1707	{
1708	// TODO: fully replace `ui-e-dots` for `ui-e-carousel-dots`, after, at least, 3 releases from 1.2.0
1709	?>
1710	<div class="swiper-pagination ui-e-dots ui-e-carousel-dots"></div>
1711	<?php
1712	}
1713	function render_carousel_arrows()
1714	{
1715	$settings = $this->get_settings_for_display();
1716	// TODO: fully replace `ui-e-button` for `ui-e-carousel-button`, after, at least, 3 releases from 1.2.0
1717	?>
1718	<div class="ui-e-button ui-e-carousel-button ui-e-previous" role="button" aria-label="Previous slide">
1719	<?php Icons_Manager::render_icon( $settings['previous_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1720	</div>
1721	<div class="ui-e-button ui-e-carousel-button ui-e-next" role="button" aria-label="Next slide">
1722	<?php Icons_Manager::render_icon( $settings['next_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1723	</div>
1724	<?php
1725	}
1726	function render_carousel_fraction()
1727	{
1728	// TODO: fully replace `ui-e-fraction` for `ui-e-carousel-fraction`, after, at least, 3 releases from 1.2.0
1729	?>
1730	<div class="ui-e-fraction ui-e-carousel-fraction">
1731	<span class="ui-e-current"></span>
1732	/
1733	<span class="ui-e-total"></span>
1734	</div>
1735	<?php
1736	}
1737	// TODO: this compatibily functions have been generating debug log errors, such as `Passing null to parameter #1 ($haystack) of type string is deprecated..`
1738	function TRAIT_render_carousel_navigations()
1739	{
1740	$navigation = $this->get_settings_for_display('navigation');
1741
1742	if( strpos($navigation, 'dots') !== false ) {
1743	$this->render_carousel_dots();
1744	}
1745	if( strpos($navigation, 'arrows') !== false ) {
1746	$this->render_carousel_arrows();
1747	}
1748	if( strpos($navigation, 'fraction') !== false ) {
1749	$this->render_carousel_fraction();
1750	}
1751	}
1752
1753	/**
1754	* Calculates how much slides should be duplicated so loop can work
1755	* TODO: move to class helper OR find a way of traits being able to use it without usin carousel trait
1756	*
1757	* @param int $total_slides
1758	*
1759	* @return int Number of slides to duplicate
1760	*/
1761	function TRAIT_get_duplication_diff($total_slides){
1762	$visible = $this->get_settings('slides_per_view');
1763	return abs($total_slides - $visible);
1764	}
1765
1766	/**
1767	* Check if slides should be duplicated so loop can work
1768	* TODO: move to class helper OR find a way of traits being able to use it without usin carousel trait
1769	*/
1770	function TRAIT_should_duplicate_slides( $total_slides ){
1771	if( $this->get_settings('loop') === 'true' && $total_slides <= $this->get_settings('slides_per_view') ){
1772	return true;
1773	}
1774
1775	return false;
1776	}
1777	}