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/pagination-component.php +459 -416 1.0.41.3.17 View file →
@@ -1,6 +1,10 @@
1 1 <?php
2 +
2 3 namespace UiCoreElements\Utils;
4 +
5 +use UicoreElements\Helper;
6 +
3 7 use \Elementor\Controls_Manager;
4 8 use \Elementor\Group_Control_Border;
5 9 use \Elementor\Group_Control_Box_Shadow;
6 10 use \Elementor\Group_Control_Typography;
@@ -11,26 +15,14 @@
11 15 * Paginations Trait Component
12 16 *
13 17 */
14 18
15 -trait Pagination_Trait {
19 +trait Pagination_Trait
20 +{
16 21
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 22 function TRAIT_register_pagination_controls($section = true)
31 23 {
32 - if($section){
24 + if ($section) {
33 25 $this->start_controls_section(
34 26 'section_pagination',
35 27 [
36 28 'label' => esc_html__('Pagination', 'uicore-elements'),
@@ -37,39 +29,57 @@
37 29 ]
38 30 );
39 31 }
40 32
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',
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,
60 67 ],
61 - ]
62 - );
68 + ],
69 + 'condition' => array(
70 + 'pagination_type' => 'load_more',
71 + ),
72 + ]
73 + );
63 74
64 - if($section){
75 + if ($section) {
65 76 $this->end_controls_section();
66 77 }
67 78 }
68 -
69 79 function TRAIT_register_pagination_style_controls($section = true)
70 80 {
71 - if($section){
81 + if ($section) {
72 82 $this->start_controls_section(
73 83 'section_style_pagination',
74 84 [
75 85 'label' => __('Pagination Style', 'uicore-elements'),
@@ -80,368 +90,391 @@
80 90 ]
81 91 );
82 92 }
83 93
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 - ],
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,
104 113 ],
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 - ]
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'
116 125 ]
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 - ],
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,
130 139 ],
131 - 'default' => [
132 - 'unit' => 'px',
133 - 'size' => 50,
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',
134 160 ],
135 - 'selectors' => [
136 - '{{WRAPPER}} .uicore-pagination' => 'margin-top: {{SIZE}}px;',
137 - '{{WRAPPER}} .ui-e-load-more' => 'margin-top: {{SIZE}}px;',
161 + 'center' => [
162 + 'title' => esc_html__('Center', 'uicore-elements'),
163 + 'icon' => 'eicon-text-align-center',
138 164 ],
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 - ],
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,
155 184 ],
156 - 'selectors' => [
157 - '{{WRAPPER}} .uicore-pagination ul' => 'justify-content: {{VALUE}};',
158 - '{{WRAPPER}} .ui-e-pagination' => 'text-align: {{VALUE}};',
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,
159 209 ],
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 - ],
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,
175 234 ],
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 - ),
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',
186 388 ]
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 - ),
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',
211 402 ]
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 - ),
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',
236 416 ]
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 - ),
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',
251 427 ]
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 - ),
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',
265 437 ]
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();
438 + ]
439 + );
440 + $this->end_controls_tab();
322 441
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();
442 + $this->end_controls_tabs();
424 443
425 - $this->end_controls_tabs();
426 -
427 - if($section){
444 + if ($section) {
428 445 $this->end_controls_section();
429 446 }
430 447 }
431 448
432 449 /**
433 - * sajdnek
450 + * Render pagination numbers.
434 451 *
452 + * @param bool $is_product - If the pagination is for products
435 453 * @param array $args
436 - * @param string $class
437 454 * @author Andrei Voica <andrei@uicore.co>
438 455 * @since 1.0.0
439 456 */
440 - function render_numbers($args = [])
457 + function render_numbers($is_product, $args = [])
441 458 {
442 - global $query;
443 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
444 477 $args = wp_parse_args($args, [
445 478 'mid_size' => 2,
446 479 'prev_next' => true,
447 480 'prev_text' => null,
@@ -449,70 +482,80 @@
449 482 'screen_reader_text' => _x('Posts navigation', 'Frontend - Pagination', 'uicore-elements'),
450 483 'type' => 'array',
451 484 'current' => max(1, get_query_var('paged')),
452 485 ]);
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() ) {
486 +
487 +
488 + // Build woo pagination args
489 + if ($is_product) {
490 +
491 + if ($total && $total <= 1) {
455 492 return;
456 493 }
457 494
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 - }
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))));
476 509 }
477 510 }
511 +
478 512 $links = paginate_links($args);
479 513 $class = 'uicore-pagination';
480 514 $class .= !defined('UICORE_ASSETS') ? ' ui-e-pagination' : '';
515 +
481 516 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 - }
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 + }
490 525 ?>
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 }
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 }
498 533 }
499 - function render_load_more()
534 + function render_load_more($postID)
500 535 {
536 + // Script may get the current page ID to set as exclusion list on related posts query
501 537 ?>
502 - <nav aria-label="Posts navigation" class="ui-e-pagination">
538 + <nav data-ui-e-current-page="<?php echo esc_attr($postID); ?>" aria-label="Posts navigation" class="ui-e-pagination">
503 539 <button class="ui-e-load-more elementor-button">Load more</button>
504 540 </nav>
505 - <?php
541 +<?php
506 542 }
507 - function TRAIT_render_pagination()
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)
508 552 {
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();
553 + if ($this->is_option('pagination', 'yes')) {
554 + if ($this->is_option('pagination_type', 'load_more')) {
555 + $this->render_load_more($postID);
513 556 } else {
514 - $this->render_numbers();
557 + $this->render_numbers($is_product);
515 558 }
516 559 }
517 560 }
518 561 }