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