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

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

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