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