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