PluginProbe
UiCore Elements – Free widgets and templates for Elementor / 1.3.18
UiCore Elements – Free widgets and templates for Elementor v1.3.18
1.3.18 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 All 42 releases
← All changes | includes/utils/pagination-component.php +561 -526 1.0.12 → 1.3.18 View file →
@@ -1,526 +1,561 @@
1 -<?php
2 -namespace UiCoreElements\Utils;
3 -use \Elementor\Controls_Manager;
4 -use \Elementor\Group_Control_Border;
5 -use \Elementor\Group_Control_Box_Shadow;
6 -use \Elementor\Group_Control_Typography;
7 -
8 -defined('ABSPATH') || exit();
9 -
10 -/**
11 - * Paginations Trait Component
12 - *
13 - */
14 -
15 -trait Pagination_Trait {
16 -
17 - function pagination_options()
18 - {
19 - return [
20 - 'numbers' => esc_html__('Numbers', 'uicore-elements'),
21 - 'load_more' => esc_html__('Load More', 'uicore-elements'),
22 - ];
23 - }
24 - function TRAIT_register_pagination_controls($section = true)
25 - {
26 - if($section){
27 - $this->start_controls_section(
28 - 'section_pagination',
29 - [
30 - 'label' => esc_html__('Pagination', 'uicore-elements'),
31 - ]
32 - );
33 - }
34 -
35 - $this->add_control(
36 - 'pagination',
37 - [
38 - 'label' => __( 'Pagination', 'uicore-elements' ),
39 - 'type' => Controls_Manager::SWITCHER,
40 - 'default'=> 'no',
41 - 'render_type' => 'template',
42 - ]
43 - );
44 - $this->add_control(
45 - 'pagination_type',
46 - [
47 - 'label' => esc_html__('Pagination Type', 'uicore-elements'),
48 - 'type' => Controls_Manager::SELECT,
49 - 'default' => 'numbers',
50 - 'options' => $this->pagination_options(),
51 - 'frontend_available' => true,
52 - 'condition' => [
53 - 'pagination' => 'yes',
54 - ],
55 - ]
56 - );
57 -
58 - if($section){
59 - $this->end_controls_section();
60 - }
61 - }
62 - function TRAIT_register_pagination_style_controls($section = true)
63 - {
64 - if($section){
65 - $this->start_controls_section(
66 - 'section_style_pagination',
67 - [
68 - 'label' => __('Pagination Style', 'uicore-elements'),
69 - 'tab' => Controls_Manager::TAB_STYLE,
70 - 'condition' => [
71 - 'pagination' => 'yes',
72 - ],
73 - ]
74 - );
75 - }
76 -
77 - $this->add_group_control(
78 - Group_Control_Typography::get_type(),
79 - [
80 - 'name' => 'pagination_typography',
81 - 'label' => esc_html__( 'Typography', 'uicore-elements' ),
82 - 'selector' => '{{WRAPPER}} .uicore-page-item, {{WRAPPER}} .ui-e-load-more',
83 - ]
84 - );
85 - $this->add_responsive_control(
86 - 'icon_size',
87 - [
88 - 'label' => __( 'Previous/Next Icon Size', 'uicore-elements' ),
89 - 'type' => Controls_Manager::SLIDER,
90 - 'size_units' => [ 'px' ],
91 - 'range' => [
92 - 'px' => [
93 - 'min' => 0,
94 - 'max' => 30,
95 - 'step' => 1,
96 - ],
97 - ],
98 - 'default' => [
99 - 'unit' => 'px',
100 - 'size' => 16,
101 - ],
102 - 'selectors' => [
103 - '{{WRAPPER}} .uicore-pagination a.prev svg, {{WRAPPER}} .uicore-pagination a.next svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
104 - '{{WRAPPER}} .uicore-pagination a.prev i, {{WRAPPER}} .uicore-pagination a.next i' => 'font-size: {{SIZE}}{{UNIT}};',
105 - ],
106 - 'condition' => [
107 - 'pagination_type' => 'numbers'
108 - ]
109 - ]
110 - );
111 - $this->add_responsive_control(
112 - 'pagination_top',
113 - [
114 - 'label' => __( 'Pagination Top Space', 'uicore-elements' ),
115 - 'type' => Controls_Manager::SLIDER,
116 - 'size_units' => [ 'px' ],
117 - 'range' => [
118 - 'px' => [
119 - 'min' => 0,
120 - 'max' => 500,
121 - 'step' => 1,
122 - ],
123 - ],
124 - 'default' => [
125 - 'unit' => 'px',
126 - 'size' => 50,
127 - ],
128 - 'selectors' => [
129 - '{{WRAPPER}} .uicore-pagination' => 'margin-top: {{SIZE}}px;',
130 - '{{WRAPPER}} .ui-e-load-more' => 'margin-top: {{SIZE}}px;',
131 - ],
132 - ]
133 - );
134 - $this->add_control(
135 - 'pagination_align',
136 - [
137 - 'label' => esc_html__( 'Pagination Alignment', 'uicore-elements' ),
138 - 'type' => Controls_Manager::CHOOSE,
139 - 'options' => [
140 - 'start' => [
141 - 'title' => esc_html__( 'Left', 'uicore-elements' ),
142 - 'icon' => 'eicon-text-align-left',
143 - ],
144 - 'center' => [
145 - 'title' => esc_html__( 'Center', 'uicore-elements' ),
146 - 'icon' => 'eicon-text-align-center',
147 - ],
148 - ],
149 - 'selectors' => [
150 - '{{WRAPPER}} .uicore-pagination ul' => 'justify-content: {{VALUE}};',
151 - '{{WRAPPER}} .ui-e-pagination' => 'text-align: {{VALUE}};',
152 - ],
153 - ]
154 - );
155 - // Number Specific
156 - $this->add_control(
157 - 'pagination_padding',
158 - [
159 - 'label' => __( 'Items Padding', 'uicore-elements' ),
160 - 'type' => Controls_Manager::SLIDER,
161 - 'size_units' => [ 'em' ],
162 - 'range' => [
163 - 'em' => [
164 - 'min' => 0,
165 - 'max' => 3,
166 - 'step' => 0.1,
167 - ],
168 - ],
169 - 'default' => [
170 - 'unit' => 'em',
171 - 'size' => 0.4,
172 - ],
173 - 'selectors' => [
174 - '{{WRAPPER}} .uicore-pagination ul li > *' => ' width: calc(1em + {{SIZE}}em);line-height: calc(1em + {{SIZE}}em);',
175 - ],
176 - 'condition' => array(
177 - 'pagination_type' => 'numbers',
178 - ),
179 - ]
180 - );
181 - $this->add_control(
182 - 'pagination_gap',
183 - [
184 - 'label' => __( 'Items Gap', 'uicore-elements' ),
185 - 'type' => Controls_Manager::SLIDER,
186 - 'size_units' => [ 'em' ],
187 - 'range' => [
188 - 'em' => [
189 - 'min' => 0,
190 - 'max' => 3,
191 - 'step' => 0.1,
192 - ],
193 - ],
194 - 'default' => [
195 - 'unit' => 'em',
196 - 'size' => 0.4,
197 - ],
198 - 'selectors' => [
199 - '{{WRAPPER}} .uicore-pagination ul' => 'gap: {{SIZE}}em;',
200 - ],
201 - 'condition' => array(
202 - 'pagination_type' => 'numbers',
203 - ),
204 - ]
205 - );
206 - $this->add_control(
207 - 'pagination_radius',
208 - [
209 - 'label' => __( 'Items Border Radius', 'uicore-elements' ),
210 - 'type' => Controls_Manager::SLIDER,
211 - 'size_units' => [ 'em' ],
212 - 'range' => [
213 - 'em' => [
214 - 'min' => 0,
215 - 'max' => 3,
216 - 'step' => 0.1,
217 - ],
218 - ],
219 - 'default' => [
220 - 'unit' => 'em',
221 - 'size' => 0.2,
222 - ],
223 - 'selectors' => [
224 - '{{WRAPPER}} .uicore-pagination ul li' => 'border-radius: {{SIZE}}em;',
225 - ],
226 - 'condition' => array(
227 - 'pagination_type' => 'numbers',
228 - ),
229 - ]
230 - );
231 - // Load More Specific
232 - $this->add_control(
233 - 'load_more_padding',
234 - [
235 - 'label' => esc_html__( 'Button Padding', 'uicore-elements' ),
236 - 'type' => Controls_Manager::DIMENSIONS,
237 - 'size_units' => [ 'px', '%', 'em'],
238 - 'selectors' => [
239 - '{{WRAPPER}} .ui-e-load-more' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
240 - ],
241 - 'condition' => array(
242 - 'pagination_type' => 'load_more'
243 - ),
244 - ]
245 - );
246 - $this->add_control(
247 - 'load_more_radius',
248 - [
249 - 'label' => esc_html__( 'Button Radius', 'uicore-elements' ),
250 - 'type' => Controls_Manager::DIMENSIONS,
251 - 'size_units' => [ 'px', '%', 'em'],
252 - 'selectors' => [
253 - '{{WRAPPER}} .ui-e-load-more' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
254 - ],
255 - 'condition' => array(
256 - 'pagination_type' => 'load_more'
257 - ),
258 - ]
259 - );
260 - // General Again
261 - $this->start_controls_tabs(
262 - 'pagination_item', [
263 - 'condition' => [
264 - 'pagination' => 'yes',
265 - ],
266 - ]
267 - );
268 - $this->start_controls_tab(
269 - 'pagination_normal_tab',
270 - [
271 - 'label' => esc_html__( 'Normal', 'plugin-name' ),
272 - ]
273 - );
274 - $this->add_control(
275 - 'pagination_bg',
276 - [
277 - 'label' => esc_html__( 'Background', 'uicore-elements' ),
278 - 'type' => Controls_Manager::COLOR,
279 - 'default' => '',
280 - 'selectors' => [
281 - '{{WRAPPER}} .uicore-pagination li' => 'background: {{VALUE}};',
282 - '{{WRAPPER}} .ui-e-load-more' => 'background: {{VALUE}};',
283 - ],
284 - ]
285 - );
286 - $this->add_control(
287 - 'pagination_color',
288 - [
289 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
290 - 'type' => Controls_Manager::COLOR,
291 - 'default' => '',
292 - 'selectors' => [
293 - '{{WRAPPER}} .uicore-pagination li a' => 'color: {{VALUE}};',
294 - '{{WRAPPER}} .uicore-pagination svg' => 'fill: {{VALUE}};',
295 - '{{WRAPPER}} .ui-e-load-more' => 'color: {{VALUE}};',
296 - ],
297 - ]
298 - );
299 - $this->add_group_control(
300 - Group_Control_Border::get_type(),
301 - [
302 - 'name' => 'pagination_border',
303 - 'selector' => '{{WRAPPER}} .uicore-pagination ul li, {{WRAPPER}} .ui-e-load-more',
304 - 'separator' => 'before',
305 - ]
306 - );
307 - $this->add_group_control(
308 - Group_Control_Box_Shadow::get_type(),
309 - [
310 - 'name' => 'pagination_shadow',
311 - 'selector' => '{{WRAPPER}} .uicore-pagination ul li, {{WRAPPER}} .ui-e-load-more',
312 - ]
313 - );
314 - $this->end_controls_tab();
315 -
316 - $this->start_controls_tab(
317 - 'pagination_hover_tab',
318 - [
319 - 'label' => esc_html__( 'Hover', 'plugin-name' ),
320 - ]
321 - );
322 - $this->add_control(
323 - 'pagination_hover_bg',
324 - [
325 - 'label' => esc_html__( 'Background', 'uicore-elements' ),
326 - 'type' => Controls_Manager::COLOR,
327 - 'default' => '',
328 - 'selectors' => [
329 - '{{WRAPPER}} .uicore-pagination ul li:hover:not(.uicore-active)' => 'background: {{VALUE}};',
330 - '{{WRAPPER}} .ui-e-load-more:hover' => 'background: {{VALUE}};',
331 - ],
332 - ]
333 - );
334 - $this->add_control('pagination_hover_color', [
335 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
336 - 'type' => Controls_Manager::COLOR,
337 - 'default' => '',
338 - 'selectors' => [
339 - '{{WRAPPER}} .uicore-pagination li:hover:not(.uicore-active) a' => 'color: {{VALUE}};',
340 - '{{WRAPPER}} .uicore-pagination li:hover:not(.uicore-active) svg' => 'fill: {{VALUE}};',
341 - '{{WRAPPER}} .ui-e-load-more:hover' => 'color: {{VALUE}};',
342 - ],
343 - ]
344 - );
345 - $this->add_group_control(
346 - Group_Control_Border::get_type(),
347 - [
348 - 'name' => 'pagination_border_hover',
349 - 'selector' => '{{WRAPPER}} .uicore-pagination ul li:hover:not(.uicore-active), {{WRAPPER}} .ui-e-load-more:hover',
350 - 'separator' => 'before',
351 - ]
352 - );
353 - $this->add_group_control(
354 - Group_Control_Box_Shadow::get_type(),
355 - [
356 - 'name' => 'pagination_shadow_hover',
357 - 'selector' => '{{WRAPPER}} .uicore-pagination ul li:hover:not(.uicore-active), {{WRAPPER}} .ui-e-load-more:hover',
358 - ]
359 - );
360 - $this->end_controls_tab();
361 - // Number specific
362 - $this->start_controls_tab(
363 - 'pagination_active_tab',
364 - [
365 - 'label' => esc_html__( 'Active', 'plugin-name' ),
366 - 'condition' => [
367 - 'pagination_type' => 'numbers',
368 - ]
369 - ]
370 - );
371 - $this->add_control('pagination_active_bg', [
372 - 'label' => esc_html__( 'Background', 'uicore-elements' ),
373 - 'type' => Controls_Manager::COLOR,
374 - 'default' => '',
375 - 'selectors' => [
376 - '{{WRAPPER}} .uicore-page-link.current' => 'background: {{VALUE}};',
377 - ],
378 - 'condition' => [
379 - 'pagination_type' => 'numbers',
380 - ]
381 - ]
382 - );
383 - $this->add_control('pagination_active_color', [
384 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
385 - 'type' => Controls_Manager::COLOR,
386 - 'default' => '',
387 - 'selectors' => [
388 - '{{WRAPPER}} .uicore-page-link.current' => 'color: {{VALUE}};',
389 - ],
390 - 'condition' => [
391 - 'pagination_type' => 'numbers',
392 - ]
393 - ]
394 - );
395 - $this->add_group_control(
396 - Group_Control_Border::get_type(),
397 - [
398 - 'name' => 'pagination_border_active',
399 - 'selector' => '{{WRAPPER}} .uicore-pagination li.uicore-active',
400 - 'separator' => 'before',
401 - 'condition' => [
402 - 'pagination_type' => 'numbers',
403 - ]
404 - ]
405 - );
406 - $this->add_group_control(
407 - Group_Control_Box_Shadow::get_type(),
408 - [
409 - 'name' => 'pagination_shadow_active',
410 - 'selector' => '{{WRAPPER}} .uicore-pagination li.uicore-active',
411 - 'condition' => [
412 - 'pagination_type' => 'numbers',
413 - ]
414 - ]
415 - );
416 - $this->end_controls_tab();
417 -
418 - $this->end_controls_tabs();
419 -
420 - if($section){
421 - $this->end_controls_section();
422 - }
423 - }
424 -
425 - /**
426 - * sajdnek
427 - *
428 - * @param array $args
429 - * @param string $class
430 - * @author Andrei Voica <[email protected]>
431 - * @since 1.0.0
432 - */
433 - function render_numbers($is_product, $args = [])
434 - {
435 - //
436 - if ( $is_product ){
437 - $query = $this->get_query();
438 -
439 - //
440 - $total_items = $query['limit'] ?? get_option('posts_per_page'); // TODO: using products quantity from framework maybe better
441 - $total_count = wc_get_products( array_merge($query, ['limit' => -1, 'return' => 'ids']) ); // Fetch all products
442 - $total = ceil( count($total_count) / $total_items );
443 - $current_page = max(1, get_query_var('paged'));
444 -
445 - } else {
446 - global $query;
447 - }
448 -
449 - // Set pagination args
450 - $args = wp_parse_args($args, [
451 - 'mid_size' => 2,
452 - 'prev_next' => true,
453 - 'prev_text' => null,
454 - 'next_text' => null,
455 - 'screen_reader_text' => _x('Posts navigation', 'Frontend - Pagination', 'uicore-elements'),
456 - 'type' => 'array',
457 - 'current' => max(1, get_query_var('paged')),
458 - ]);
459 -
460 -
461 - // Build woo pagination args
462 - if ( $is_product ) {
463 -
464 - if ( $total && $total <= 1 ) {
465 - return;
466 - }
467 -
468 - $args = apply_filters('woocommerce_pagination_args', [
469 - // WPCS: XSS ok.
470 - 'current' => $current_page,
471 - 'total' => $total,
472 - 'prev_text' => '',
473 - 'next_text' => '',
474 - 'type' => 'array',
475 - 'base' => esc_url_raw( add_query_arg( 'product-page', '%#%', false ) ),
476 - 'screen_reader_text' => _x('Products navigation', 'Frontend - Pagination', 'uicore-elements'),
477 - ]);
478 -
479 - if ( ! wc_get_loop_prop( 'is_shortcode' ) ) {
480 - $args['format'] = '';
481 - $args['base'] = esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) );
482 - }
483 - }
484 -
485 - $links = paginate_links($args);
486 - $class = 'uicore-pagination';
487 - $class .= !defined('UICORE_ASSETS') ? ' ui-e-pagination' : '';
488 -
489 - if (is_array($links) || is_object($links)) { ?>
490 - <nav aria-label="<?php echo $args['screen_reader_text']; ?>" class="<?php echo esc_attr($class);?>">
491 - <ul>
492 - <?php foreach ($links as $key => $link) :
493 - // If next/prev buttons and Uicore Framework is not active, get arrow icon and append it
494 - if ( (strpos($link, 'prev') || strpos($link, 'next')) && !defined('UICORE_ASSETS') ) {
495 - $svg = \file_get_contents(UICORE_ELEMENTS_ASSETS . '/media/svg/pagination-icon.svg');
496 - $link = str_replace('</a>', $svg . '</a>', $link);
497 - }
498 - ?>
499 - <li class="uicore-page-item <?php echo strpos($link, 'current') ? 'uicore-active' : ''; ?>">
500 - <?php echo str_replace('page-numbers', 'uicore-page-link', $link); ?>
501 - </li>
502 - <?php endforeach; ?>
503 - </ul>
504 - </nav>
505 - <?php }
506 - }
507 - function render_load_more()
508 - {
509 - // No logic here. It's handled by ajax-request script and rest-api endpoint
510 - ?>
511 - <nav aria-label="Posts navigation" class="ui-e-pagination">
512 - <button class="ui-e-load-more elementor-button">Load more</button>
513 - </nav>
514 - <?php
515 - }
516 - function TRAIT_render_pagination($settings, $is_product = false)
517 - {
518 - if( $settings['pagination'] === 'yes'){
519 - if( $settings['pagination_type'] === 'load_more'){
520 - $this->render_load_more();
521 - } else {
522 - $this->render_numbers($is_product);
523 - }
524 - }
525 - }
526 -}
1 +<?php
2 +
3 +namespace UiCoreElements\Utils;
4 +
5 +use UicoreElements\Helper;
6 +
7 +use \Elementor\Controls_Manager;
8 +use \Elementor\Group_Control_Border;
9 +use \Elementor\Group_Control_Box_Shadow;
10 +use \Elementor\Group_Control_Typography;
11 +
12 +defined('ABSPATH') || exit();
13 +
14 +/**
15 + * Paginations Trait Component
16 + *
17 + */
18 +
19 +trait Pagination_Trait
20 +{
21 +
22 + function TRAIT_register_pagination_controls($section = true)
23 + {
24 + if ($section) {
25 + $this->start_controls_section(
26 + 'section_pagination',
27 + [
28 + 'label' => esc_html__('Pagination', 'uicore-elements'),
29 + ]
30 + );
31 + }
32 +
33 + $this->add_control(
34 + 'pagination',
35 + [
36 + 'label' => __('Pagination', 'uicore-elements'),
37 + 'type' => Controls_Manager::SWITCHER,
38 + 'default' => 'no',
39 + 'render_type' => 'template',
40 + ]
41 + );
42 + $this->add_control(
43 + 'pagination_type',
44 + [
45 + 'label' => esc_html__('Pagination Type', 'uicore-elements'),
46 + 'type' => Controls_Manager::SELECT,
47 + 'default' => 'numbers',
48 + 'options' => [
49 + 'numbers' => esc_html__('Numbers', 'uicore-elements'),
50 + 'load_more' => esc_html__('Load More', 'uicore-elements'),
51 + ],
52 + 'frontend_available' => true,
53 + 'condition' => [
54 + 'pagination' => 'yes',
55 + ],
56 + ]
57 + );
58 + $this->add_control(
59 + 'load_more_qty',
60 + [
61 + 'label' => esc_html__('Posts per Load', 'uicore-elements'),
62 + 'type' => Controls_Manager::SLIDER,
63 + 'range' => [
64 + 'px' => [
65 + 'min' => -1,
66 + 'max' => 100,
67 + ],
68 + ],
69 + 'condition' => array(
70 + 'pagination_type' => 'load_more',
71 + ),
72 + ]
73 + );
74 +
75 + if ($section) {
76 + $this->end_controls_section();
77 + }
78 + }
79 + function TRAIT_register_pagination_style_controls($section = true)
80 + {
81 + if ($section) {
82 + $this->start_controls_section(
83 + 'section_style_pagination',
84 + [
85 + 'label' => __('Pagination Style', 'uicore-elements'),
86 + 'tab' => Controls_Manager::TAB_STYLE,
87 + 'condition' => [
88 + 'pagination' => 'yes',
89 + ],
90 + ]
91 + );
92 + }
93 +
94 + $this->add_group_control(
95 + Group_Control_Typography::get_type(),
96 + [
97 + 'name' => 'pagination_typography',
98 + 'label' => esc_html__('Typography', 'uicore-elements'),
99 + 'selector' => '{{WRAPPER}} .uicore-page-item, {{WRAPPER}} .ui-e-load-more',
100 + ]
101 + );
102 + $this->add_responsive_control(
103 + 'icon_size',
104 + [
105 + 'label' => __('Previous/Next Icon Size', 'uicore-elements'),
106 + 'type' => Controls_Manager::SLIDER,
107 + 'size_units' => ['px'],
108 + 'range' => [
109 + 'px' => [
110 + 'min' => 0,
111 + 'max' => 30,
112 + 'step' => 1,
113 + ],
114 + ],
115 + 'default' => [
116 + 'unit' => 'px',
117 + 'size' => 16,
118 + ],
119 + 'selectors' => [
120 + '{{WRAPPER}} .uicore-pagination a.prev svg, {{WRAPPER}} .uicore-pagination a.next svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
121 + '{{WRAPPER}} .uicore-pagination a.prev i, {{WRAPPER}} .uicore-pagination a.next i' => 'font-size: {{SIZE}}{{UNIT}};',
122 + ],
123 + 'condition' => [
124 + 'pagination_type' => 'numbers'
125 + ]
126 + ]
127 + );
128 + $this->add_responsive_control(
129 + 'pagination_top',
130 + [
131 + 'label' => __('Pagination Top Space', 'uicore-elements'),
132 + 'type' => Controls_Manager::SLIDER,
133 + 'size_units' => ['px'],
134 + 'range' => [
135 + 'px' => [
136 + 'min' => 0,
137 + 'max' => 500,
138 + 'step' => 1,
139 + ],
140 + ],
141 + 'default' => [
142 + 'unit' => 'px',
143 + 'size' => 50,
144 + ],
145 + 'selectors' => [
146 + '{{WRAPPER}} .uicore-pagination' => 'margin-top: {{SIZE}}px;',
147 + '{{WRAPPER}} .ui-e-load-more' => 'margin-top: {{SIZE}}px;',
148 + ],
149 + ]
150 + );
151 + $this->add_control(
152 + 'pagination_align',
153 + [
154 + 'label' => esc_html__('Pagination Alignment', 'uicore-elements'),
155 + 'type' => Controls_Manager::CHOOSE,
156 + 'options' => [
157 + 'start' => [
158 + 'title' => esc_html__('Left', 'uicore-elements'),
159 + 'icon' => 'eicon-text-align-left',
160 + ],
161 + 'center' => [
162 + 'title' => esc_html__('Center', 'uicore-elements'),
163 + 'icon' => 'eicon-text-align-center',
164 + ],
165 + ],
166 + 'selectors' => [
167 + '{{WRAPPER}} .uicore-pagination ul' => 'justify-content: {{VALUE}};',
168 + '{{WRAPPER}} .ui-e-pagination' => 'text-align: {{VALUE}};',
169 + ],
170 + ]
171 + );
172 + // Number Specific
173 + $this->add_control(
174 + 'pagination_padding',
175 + [
176 + 'label' => __('Items Padding', 'uicore-elements'),
177 + 'type' => Controls_Manager::SLIDER,
178 + 'size_units' => ['em'],
179 + 'range' => [
180 + 'em' => [
181 + 'min' => 0,
182 + 'max' => 3,
183 + 'step' => 0.1,
184 + ],
185 + ],
186 + 'default' => [
187 + 'unit' => 'em',
188 + 'size' => 0.4,
189 + ],
190 + 'selectors' => [
191 + '{{WRAPPER}} .uicore-pagination ul li > *' => ' width: calc(1em + {{SIZE}}em);line-height: calc(1em + {{SIZE}}em);',
192 + ],
193 + 'condition' => array(
194 + 'pagination_type' => 'numbers',
195 + ),
196 + ]
197 + );
198 + $this->add_control(
199 + 'pagination_gap',
200 + [
201 + 'label' => __('Items Gap', 'uicore-elements'),
202 + 'type' => Controls_Manager::SLIDER,
203 + 'size_units' => ['em'],
204 + 'range' => [
205 + 'em' => [
206 + 'min' => 0,
207 + 'max' => 3,
208 + 'step' => 0.1,
209 + ],
210 + ],
211 + 'default' => [
212 + 'unit' => 'em',
213 + 'size' => 0.4,
214 + ],
215 + 'selectors' => [
216 + '{{WRAPPER}} .uicore-pagination ul' => 'gap: {{SIZE}}em;',
217 + ],
218 + 'condition' => array(
219 + 'pagination_type' => 'numbers',
220 + ),
221 + ]
222 + );
223 + $this->add_control(
224 + 'pagination_radius',
225 + [
226 + 'label' => __('Items Border Radius', 'uicore-elements'),
227 + 'type' => Controls_Manager::SLIDER,
228 + 'size_units' => ['em'],
229 + 'range' => [
230 + 'em' => [
231 + 'min' => 0,
232 + 'max' => 3,
233 + 'step' => 0.1,
234 + ],
235 + ],
236 + 'default' => [
237 + 'unit' => 'em',
238 + 'size' => 0.2,
239 + ],
240 + 'selectors' => [
241 + '{{WRAPPER}} .uicore-pagination ul li' => 'border-radius: {{SIZE}}em;',
242 + ],
243 + 'condition' => array(
244 + 'pagination_type' => 'numbers',
245 + ),
246 + ]
247 + );
248 + // Load More Specific
249 + $this->add_control(
250 + 'load_more_padding',
251 + [
252 + 'label' => esc_html__('Button Padding', 'uicore-elements'),
253 + 'type' => Controls_Manager::DIMENSIONS,
254 + 'size_units' => ['px', '%', 'em'],
255 + 'selectors' => [
256 + '{{WRAPPER}} .ui-e-load-more' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
257 + ],
258 + 'condition' => array(
259 + 'pagination_type' => 'load_more'
260 + ),
261 + ]
262 + );
263 + $this->add_control(
264 + 'load_more_radius',
265 + [
266 + 'label' => esc_html__('Button Radius', 'uicore-elements'),
267 + 'type' => Controls_Manager::DIMENSIONS,
268 + 'size_units' => ['px', '%', 'em'],
269 + 'selectors' => [
270 + '{{WRAPPER}} .ui-e-load-more' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
271 + ],
272 + 'condition' => array(
273 + 'pagination_type' => 'load_more'
274 + ),
275 + ]
276 + );
277 + // General Again
278 + $this->start_controls_tabs(
279 + 'pagination_item',
280 + [
281 + 'condition' => [
282 + 'pagination' => 'yes',
283 + ],
284 + ]
285 + );
286 + $this->start_controls_tab(
287 + 'pagination_normal_tab',
288 + [
289 + 'label' => esc_html__('Normal', 'uicore-elements'),
290 + ]
291 + );
292 + $this->add_control(
293 + 'pagination_bg',
294 + [
295 + 'label' => esc_html__('Background', 'uicore-elements'),
296 + 'type' => Controls_Manager::COLOR,
297 + 'default' => '',
298 + 'selectors' => [
299 + '{{WRAPPER}} .uicore-pagination li' => 'background: {{VALUE}};',
300 + '{{WRAPPER}} .ui-e-load-more' => 'background: {{VALUE}};',
301 + ],
302 + ]
303 + );
304 + $this->add_control(
305 + 'pagination_color',
306 + [
307 + 'label' => esc_html__('Color', 'uicore-elements'),
308 + 'type' => Controls_Manager::COLOR,
309 + 'default' => '',
310 + 'selectors' => [
311 + '{{WRAPPER}} .uicore-pagination li a' => 'color: {{VALUE}};',
312 + '{{WRAPPER}} .uicore-pagination svg' => 'fill: {{VALUE}};',
313 + '{{WRAPPER}} .ui-e-load-more' => 'color: {{VALUE}};',
314 + ],
315 + ]
316 + );
317 + $this->add_group_control(
318 + Group_Control_Border::get_type(),
319 + [
320 + 'name' => 'pagination_border',
321 + 'selector' => '{{WRAPPER}} .uicore-pagination ul li, {{WRAPPER}} .ui-e-load-more',
322 + 'separator' => 'before',
323 + ]
324 + );
325 + $this->add_group_control(
326 + Group_Control_Box_Shadow::get_type(),
327 + [
328 + 'name' => 'pagination_shadow',
329 + 'selector' => '{{WRAPPER}} .uicore-pagination ul li, {{WRAPPER}} .ui-e-load-more',
330 + ]
331 + );
332 + $this->end_controls_tab();
333 +
334 + $this->start_controls_tab(
335 + 'pagination_hover_tab',
336 + [
337 + 'label' => esc_html__('Hover', 'uicore-elements'),
338 + ]
339 + );
340 + $this->add_control(
341 + 'pagination_hover_bg',
342 + [
343 + 'label' => esc_html__('Background', 'uicore-elements'),
344 + 'type' => Controls_Manager::COLOR,
345 + 'default' => '',
346 + 'selectors' => [
347 + '{{WRAPPER}} .uicore-pagination ul li:hover:not(.uicore-active)' => 'background: {{VALUE}};',
348 + '{{WRAPPER}} .ui-e-load-more:hover' => 'background: {{VALUE}};',
349 + ],
350 + ]
351 + );
352 + $this->add_control(
353 + 'pagination_hover_color',
354 + [
355 + 'label' => esc_html__('Color', 'uicore-elements'),
356 + 'type' => Controls_Manager::COLOR,
357 + 'default' => '',
358 + 'selectors' => [
359 + '{{WRAPPER}} .uicore-pagination li:hover:not(.uicore-active) a' => 'color: {{VALUE}};',
360 + '{{WRAPPER}} .uicore-pagination li:hover:not(.uicore-active) svg' => 'fill: {{VALUE}};',
361 + '{{WRAPPER}} .ui-e-load-more:hover' => 'color: {{VALUE}};',
362 + ],
363 + ]
364 + );
365 + $this->add_group_control(
366 + Group_Control_Border::get_type(),
367 + [
368 + 'name' => 'pagination_border_hover',
369 + 'selector' => '{{WRAPPER}} .uicore-pagination ul li:hover:not(.uicore-active), {{WRAPPER}} .ui-e-load-more:hover',
370 + 'separator' => 'before',
371 + ]
372 + );
373 + $this->add_group_control(
374 + Group_Control_Box_Shadow::get_type(),
375 + [
376 + 'name' => 'pagination_shadow_hover',
377 + 'selector' => '{{WRAPPER}} .uicore-pagination ul li:hover:not(.uicore-active), {{WRAPPER}} .ui-e-load-more:hover',
378 + ]
379 + );
380 + $this->end_controls_tab();
381 + // Number specific
382 + $this->start_controls_tab(
383 + 'pagination_active_tab',
384 + [
385 + 'label' => esc_html__('Active', 'uicore-elements'),
386 + 'condition' => [
387 + 'pagination_type' => 'numbers',
388 + ]
389 + ]
390 + );
391 + $this->add_control(
392 + 'pagination_active_bg',
393 + [
394 + 'label' => esc_html__('Background', 'uicore-elements'),
395 + 'type' => Controls_Manager::COLOR,
396 + 'default' => '',
397 + 'selectors' => [
398 + '{{WRAPPER}} .uicore-page-link.current' => 'background: {{VALUE}};',
399 + ],
400 + 'condition' => [
401 + 'pagination_type' => 'numbers',
402 + ]
403 + ]
404 + );
405 + $this->add_control(
406 + 'pagination_active_color',
407 + [
408 + 'label' => esc_html__('Color', 'uicore-elements'),
409 + 'type' => Controls_Manager::COLOR,
410 + 'default' => '',
411 + 'selectors' => [
412 + '{{WRAPPER}} .uicore-page-link.current' => 'color: {{VALUE}};',
413 + ],
414 + 'condition' => [
415 + 'pagination_type' => 'numbers',
416 + ]
417 + ]
418 + );
419 + $this->add_group_control(
420 + Group_Control_Border::get_type(),
421 + [
422 + 'name' => 'pagination_border_active',
423 + 'selector' => '{{WRAPPER}} .uicore-pagination li.uicore-active',
424 + 'separator' => 'before',
425 + 'condition' => [
426 + 'pagination_type' => 'numbers',
427 + ]
428 + ]
429 + );
430 + $this->add_group_control(
431 + Group_Control_Box_Shadow::get_type(),
432 + [
433 + 'name' => 'pagination_shadow_active',
434 + 'selector' => '{{WRAPPER}} .uicore-pagination li.uicore-active',
435 + 'condition' => [
436 + 'pagination_type' => 'numbers',
437 + ]
438 + ]
439 + );
440 + $this->end_controls_tab();
441 +
442 + $this->end_controls_tabs();
443 +
444 + if ($section) {
445 + $this->end_controls_section();
446 + }
447 + }
448 +
449 + /**
450 + * Render pagination numbers.
451 + *
452 + * @param bool $is_product - If the pagination is for products
453 + * @param array $args
454 + * @author Andrei Voica <[email protected]>
455 + * @since 1.0.0
456 + */
457 + function render_numbers($is_product, $args = [])
458 + {
459 +
460 + if ($is_product) {
461 + $query = $this->get_query();
462 +
463 + // Currently we alow users to use number pagination in contexts that shouldn't be used. E.g: in related posts on single product pages
464 + if (!isset($query)) {
465 + return;
466 + }
467 +
468 + $total_items = Helper::get_framework_visible_posts('product');
469 + $total_count = wc_get_products(array_merge($query, ['limit' => -1, 'return' => 'ids'])); // Fetch all products - TODO: -1 is very bad for performance
470 + $total = ceil(count($total_count) / $total_items);
471 + $current_page = max(1, get_query_var('paged'));
472 + } else {
473 + global $query;
474 + }
475 +
476 + // Set pagination args
477 + $args = wp_parse_args($args, [
478 + 'mid_size' => 2,
479 + 'prev_next' => true,
480 + 'prev_text' => null,
481 + 'next_text' => null,
482 + 'screen_reader_text' => _x('Posts navigation', 'Frontend - Pagination', 'uicore-elements'),
483 + 'type' => 'array',
484 + 'current' => max(1, get_query_var('paged')),
485 + ]);
486 +
487 +
488 + // Build woo pagination args
489 + if ($is_product) {
490 +
491 + if ($total && $total <= 1) {
492 + return;
493 + }
494 +
495 + $args = apply_filters('woocommerce_pagination_args', [
496 + // WPCS: XSS ok.
497 + 'current' => $current_page,
498 + 'total' => $total,
499 + 'prev_text' => '',
500 + 'next_text' => '',
501 + 'type' => 'array',
502 + 'base' => esc_url_raw(add_query_arg('product-page', '%#%', false)),
503 + 'screen_reader_text' => _x('Products navigation', 'Frontend - Pagination', 'uicore-elements'),
504 + ]);
505 +
506 + if (! wc_get_loop_prop('is_shortcode')) {
507 + $args['format'] = '';
508 + $args['base'] = esc_url_raw(str_replace(999999999, '%#%', remove_query_arg('add-to-cart', get_pagenum_link(999999999, false))));
509 + }
510 + }
511 +
512 + $links = paginate_links($args);
513 + $class = 'uicore-pagination';
514 + $class .= !defined('UICORE_ASSETS') ? ' ui-e-pagination' : '';
515 +
516 + if (is_array($links) || is_object($links)) { ?>
517 + <nav aria-label="<?php echo esc_attr($args['screen_reader_text']); ?>" class="<?php echo esc_attr($class); ?>">
518 + <ul>
519 + <?php foreach ($links as $key => $link) :
520 + // If next/prev buttons and Uicore Framework is not active, get arrow icon and append it
521 + if ((strpos($link, 'prev') || strpos($link, 'next')) && !defined('UICORE_ASSETS')) {
522 + $svg = \file_get_contents(UICORE_ELEMENTS_ASSETS . '/media/svg/pagination-icon.svg');
523 + $link = str_replace('</a>', $svg . '</a>', $link);
524 + }
525 + ?>
526 + <li class="uicore-page-item <?php echo strpos($link, 'current') ? 'uicore-active' : ''; ?>">
527 + <?php echo wp_kses_post(str_replace('page-numbers', 'uicore-page-link', $link)); ?>
528 + </li>
529 + <?php endforeach; ?>
530 + </ul>
531 + </nav>
532 + <?php }
533 + }
534 + function render_load_more($postID)
535 + {
536 + // Script may get the current page ID to set as exclusion list on related posts query
537 + ?>
538 + <nav data-ui-e-current-page="<?php echo esc_attr($postID); ?>" aria-label="Posts navigation" class="ui-e-pagination">
539 + <button class="ui-e-load-more elementor-button">Load more</button>
540 + </nav>
541 +<?php
542 + }
543 +
544 + /**
545 + * Render pagination for post/product widgets
546 + *
547 + * @param array $settings - The settings of the widget
548 + * @param int $postID - The ID of the post or product
549 + * @param bool $is_product - Whether the pagination is for products. Default is false.
550 + */
551 + function TRAIT_render_pagination($settings, $postID, $is_product = false)
552 + {
553 + if ($this->is_option('pagination', 'yes')) {
554 + if ($this->is_option('pagination_type', 'load_more')) {
555 + $this->render_load_more($postID);
556 + } else {
557 + $this->render_numbers($is_product);
558 + }
559 + }
560 + }
561 +}