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

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

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