ultimate-post-kit / modules / harold-carousel / widgets / harold-carousel.php

harold-carousel.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.1.0, at modules/harold-carousel/widgets/harold-carousel.php

981 lines 24.1 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\HaroldCarousel\Widgets;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Typography;
9	use Elementor\Group_Control_Text_Shadow;
10	use Elementor\Group_Control_Image_Size;
11	use Elementor\Group_Control_Background;
12	use UltimatePostKit\Utils;
13
14	use UltimatePostKit\Traits\Global_Widget_Controls;
15	use UltimatePostKit\Traits\Global_Widget_Functions;
16	use UltimatePostKit\Traits\Global_Swiper_Functions;
17	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
18	use WP_Query;
19
20	if (!defined('ABSPATH')) {
21	exit;
22	} // Exit if accessed directly
23
24	class Harold_Carousel extends Group_Control_Query {
25
26	use Global_Widget_Controls;
27	use Global_Widget_Functions;
28	use Global_Swiper_Functions;
29
30	private $_query = null;
31
32	public function get_name() {
33	return 'upk-harold-carousel';
34	}
35
36	public function get_title() {
37	return BDTUPK . esc_html__('Harold List Carousel', 'ultimate-post-kit');
38	}
39
40	public function get_icon() {
41	return 'upk-widget-icon upk-icon-harold-carousel';
42	}
43
44	public function get_categories() {
45	return ['ultimate-post-kit'];
46	}
47
48	public function get_keywords() {
49	return ['post', 'list', 'blog', 'recent', 'news', 'harold', 'carousel'];
50	}
51
52	public function get_style_depends() {
53	if ($this->upk_is_edit_mode()) {
54	return ['swiper', 'upk-all-styles'];
55	} else {
56	return ['swiper', 'upk-font', 'upk-harold-carousel'];
57	}
58	}
59
60	public function get_script_depends() {
61	if ($this->upk_is_edit_mode()) {
62	return ['swiper', 'upk-all-scripts'];
63	} else {
64	return ['swiper', 'upk-harold-carousel'];
65	}
66	}
67
68	public function get_custom_help_url() {
69	return 'https://youtu.be/M9GruY3beAk';
70	}
71
72	public function get_query() {
73	return $this->_query;
74	}
75
76	public function has_widget_inner_wrapper(): bool {
77	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
78	}
79
80
81	protected function register_controls() {
82	$this->start_controls_section(
83	'section_content_layout',
84	[
85	'label' => esc_html__('Layout', 'ultimate-post-kit'),
86	]
87	);
88
89	$this->add_responsive_control(
90	'columns',
91	[
92	'label' => __('Columns', 'ultimate-post-kit'),
93	'type' => Controls_Manager::SELECT,
94	'default' => 2,
95	'tablet_default' => 1,
96	'mobile_default' => 1,
97	'options' => [
98	1 => '1',
99	2 => '2',
100	3 => '3',
101	],
102	]
103	);
104
105	$this->add_responsive_control(
106	'item_gap',
107	[
108	'label' => __('Item Gap', 'ultimate-post-kit'),
109	'type' => Controls_Manager::SLIDER,
110	'default' => [
111	'size' => 20,
112	],
113	'tablet_default' => [
114	'size' => 20,
115	],
116	'mobile_default' => [
117	'size' => 20,
118	],
119	'range' => [
120	'px' => [
121	'min' => 0,
122	'max' => 100,
123	],
124	],
125	]
126	);
127
128	$this->add_group_control(
129	Group_Control_Image_Size::get_type(),
130	[
131	'name' => 'primary_thumbnail',
132	'exclude' => ['custom'],
133	'default' => 'medium',
134	]
135	);
136
137	$this->end_controls_section();
138
139	// Query Settings
140	$this->start_controls_section(
141	'section_post_query_builder',
142	[
143	'label' => __('Query', 'ultimate-post-kit'),
144	'tab' => Controls_Manager::TAB_CONTENT,
145	]
146	);
147
148	$this->add_control(
149	'item_limit',
150	[
151	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
152	'type' => Controls_Manager::SLIDER,
153	'range' => [
154	'px' => [
155	'min' => 1,
156	'max' => 20,
157	],
158	],
159	'default' => [
160	'size' => 6,
161	],
162	]
163	);
164
165	$this->register_query_builder_controls();
166
167	$this->end_controls_section();
168
169	$this->start_controls_section(
170	'section_content_additional',
171	[
172	'label' => esc_html__('Additional', 'ultimate-post-kit'),
173	]
174	);
175
176	$this->add_control(
177	'show_image',
178	[
179	'label' => esc_html__('Show Image', 'ultimate-post-kit'),
180	'type' => Controls_Manager::SWITCHER,
181	'default' => 'yes',
182	]
183	);
184
185	//Global Title Controls
186	$this->register_title_controls();
187
188	$this->add_control(
189	'show_category',
190	[
191	'label' => esc_html__('Show Category', 'ultimate-post-kit'),
192	'type' => Controls_Manager::SWITCHER,
193	'default' => 'yes',
194	]
195	);
196
197	$this->add_control(
198	'show_author',
199	[
200	'label' => esc_html__('Show Author', 'ultimate-post-kit'),
201	'type' => Controls_Manager::SWITCHER,
202	'default' => 'yes',
203	]
204	);
205
206	//Global Date Controls
207	$this->register_date_controls();
208
209	//Global Reading Time Controls
210	$this->register_reading_time_controls();
211
212	$this->add_control(
213	'meta_separator',
214	[
215	'label' => __('Separator', 'ultimate-post-kit'),
216	'type' => Controls_Manager::TEXT,
217	'default' => '.',
218	'label_block' => false,
219	]
220	);
221
222	$this->add_control(
223	'item_match_height',
224	[
225	'label' => __('Item Match Height', 'ultimate-post-kit'),
226	'type' => Controls_Manager::SWITCHER,
227	'default' => 'yes',
228	'prefix_class' => 'upk-item-match-height--',
229	'separator' => 'before'
230	]
231	);
232
233	$this->add_control(
234	'global_link',
235	[
236	'label' => __('Item Wrapper Link', 'ultimate-post-kit'),
237	'type' => Controls_Manager::SWITCHER,
238	'prefix_class' => 'upk-global-link-',
239	'description' => __('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
240	'separator' => 'before'
241	]
242	);
243
244	$this->end_controls_section();
245
246	//Navigaiton Global Controls
247	$this->register_navigation_controls('harold');
248
249	//Style
250	$this->start_controls_section(
251	'upk_section_style',
252	[
253	'label' => esc_html__('Items', 'ultimate-post-kit'),
254	'tab' => Controls_Manager::TAB_STYLE,
255	]
256	);
257
258	$this->add_responsive_control(
259	'content_padding',
260	[
261	'label' => __('Content Padding', 'ultimate-post-kit'),
262	'type' => Controls_Manager::DIMENSIONS,
263	'size_units' => ['px', 'em', '%'],
264	'selectors' => [
265	'{{WRAPPER}} .upk-harold-carousel .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
266	],
267	]
268	);
269
270	$this->start_controls_tabs('tabs_item_style');
271
272	$this->start_controls_tab(
273	'tab_item_normal',
274	[
275	'label' => esc_html__('Normal', 'ultimate-post-kit'),
276	]
277	);
278
279	$this->add_group_control(
280	Group_Control_Background::get_type(),
281	[
282	'name' => 'item_background',
283	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item',
284	]
285	);
286
287	$this->add_group_control(
288	Group_Control_Border::get_type(),
289	[
290	'name' => 'item_border',
291	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item',
292	]
293	);
294
295	$this->add_responsive_control(
296	'item_border_radius',
297	[
298	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
299	'type' => Controls_Manager::DIMENSIONS,
300	'size_units' => ['px', '%'],
301	'selectors' => [
302	'{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
303	],
304	]
305	);
306
307	$this->add_responsive_control(
308	'item_padding',
309	[
310	'label' => __('Padding', 'ultimate-post-kit'),
311	'type' => Controls_Manager::DIMENSIONS,
312	'size_units' => ['px', 'em', '%'],
313	'selectors' => [
314	'{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
315	],
316	]
317	);
318
319	$this->add_group_control(
320	Group_Control_Box_Shadow::get_type(),
321	[
322	'name' => 'item_box_shadow',
323	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item',
324	]
325	);
326
327	$this->end_controls_tab();
328
329	$this->start_controls_tab(
330	'tab_item_hover',
331	[
332	'label' => esc_html__('Hover', 'ultimate-post-kit'),
333	]
334	);
335
336	$this->add_group_control(
337	Group_Control_Background::get_type(),
338	[
339	'name' => 'item_hover_background',
340	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item:hover',
341	]
342	);
343
344	$this->add_control(
345	'item_hover_border_color',
346	[
347	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
348	'type' => Controls_Manager::COLOR,
349	'condition' => [
350	'item_border_border!' => '',
351	],
352	'selectors' => [
353	'{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item:hover' => 'border-color: {{VALUE}};',
354	],
355	]
356	);
357
358	$this->add_group_control(
359	Group_Control_Box_Shadow::get_type(),
360	[
361	'name' => 'item_hover_box_shadow',
362	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-wrapper .upk-item:hover',
363	]
364	);
365
366	$this->add_responsive_control(
367	'item_shadow_padding',
368	[
369	'label' => __('Match Padding', 'ultimate-post-kit'),
370	'description' => __('You have to add padding for matching overlaping normal/hover box shadow when you used Box Shadow option.', 'ultimate-post-kit'),
371	'type' => Controls_Manager::SLIDER,
372	'range' => [
373	'px' => [
374	'min' => 0,
375	'step' => 1,
376	'max' => 50,
377	]
378	],
379	'default' => [
380	'size' => 10
381	],
382	'selectors' => [
383	'{{WRAPPER}} .swiper-carousel' => 'padding: {{SIZE}}{{UNIT}}; margin: 0 -{{SIZE}}{{UNIT}};'
384	],
385	]
386	);
387
388	$this->end_controls_tab();
389
390	$this->end_controls_tabs();
391
392	$this->end_controls_section();
393
394	$this->start_controls_section(
395	'section_style_image',
396	[
397	'label' => esc_html__('Image', 'ultimate-post-kit'),
398	'tab' => Controls_Manager::TAB_STYLE,
399	'condition' => [
400	'show_image' => 'yes'
401	]
402	]
403	);
404
405	$this->add_group_control(
406	Group_Control_Border::get_type(),
407	[
408	'name' => 'item_image_border',
409	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-image .upk-harold-img',
410	]
411	);
412
413	$this->add_responsive_control(
414	'item_image_border_radius',
415	[
416	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
417	'type' => Controls_Manager::DIMENSIONS,
418	'size_units' => ['px', '%'],
419	'selectors' => [
420	'{{WRAPPER}} .upk-harold-carousel .upk-image .upk-harold-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
421	],
422	]
423	);
424
425	$this->add_responsive_control(
426	'item_image_size',
427	[
428	'label' => esc_html__('Size(px)', 'ultimate-post-kit'),
429	'type' => Controls_Manager::SLIDER,
430	'range' => [
431	'px' => [
432	'min' => 100,
433	'max' => 500,
434	],
435	],
436	'selectors' => [
437	'{{WRAPPER}} .upk-harold-carousel .upk-image' => 'max-width: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}};',
438	],
439	]
440	);
441
442	$this->end_controls_section();
443
444	$this->start_controls_section(
445	'section_style_title',
446	[
447	'label' => esc_html__('Title', 'ultimate-post-kit'),
448	'tab' => Controls_Manager::TAB_STYLE,
449	'condition' => [
450	'show_title' => 'yes',
451	],
452	]
453	);
454
455	$this->add_control(
456	'title_style',
457	[
458	'label' => esc_html__('Style', 'ultimate-post-kit') . BDTUPK_UC,
459	'type' => Controls_Manager::SELECT,
460	'default' => 'underline',
461	'options' => [
462	'' => esc_html__('Default', 'ultimate-post-kit'),
463	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
464	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
465	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
466	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
467	],
468	]
469	);
470
471	$this->add_control(
472	'title_color',
473	[
474	'label' => esc_html__('Color', 'ultimate-post-kit'),
475	'type' => Controls_Manager::COLOR,
476	'selectors' => [
477	'{{WRAPPER}} .upk-harold-carousel .upk-title a' => 'color: {{VALUE}};',
478	],
479	]
480	);
481
482	$this->add_control(
483	'title_hover_color',
484	[
485	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
486	'type' => Controls_Manager::COLOR,
487	'selectors' => [
488	'{{WRAPPER}} .upk-harold-carousel .upk-title a:hover' => 'color: {{VALUE}};',
489	],
490	]
491	);
492
493	$this->add_responsive_control(
494	'title_spacing',
495	[
496	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
497	'type' => Controls_Manager::SLIDER,
498	'range' => [
499	'px' => [
500	'min' => 0,
501	'max' => 50,
502	],
503	],
504	'selectors' => [
505	'{{WRAPPER}} .upk-harold-carousel .upk-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
506	],
507	]
508	);
509
510	$this->add_group_control(
511	Group_Control_Typography::get_type(),
512	[
513	'name' => 'title_typography',
514	'label' => esc_html__('Typography', 'ultimate-post-kit'),
515	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-title',
516	]
517	);
518
519	$this->add_group_control(
520	Group_Control_Text_Shadow::get_type(),
521	[
522	'name' => 'title_text_shadow',
523	'label' => __('Text Shadow', 'ultimate-post-kit'),
524	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-title a',
525	]
526	);
527
528	$this->end_controls_section();
529
530	$this->start_controls_section(
531	'section_style_meta',
532	[
533	'label' => esc_html__('Meta', 'ultimate-post-kit'),
534	'tab' => Controls_Manager::TAB_STYLE,
535	'conditions' => [
536	'relation' => 'or',
537	'terms' => [
538	[
539	'name' => 'show_author',
540	'value' => 'yes'
541	],
542	[
543	'name' => 'show_date',
544	'value' => 'yes'
545	]
546	]
547	],
548	]
549	);
550
551	$this->add_control(
552	'meta_color',
553	[
554	'label' => esc_html__('Color', 'ultimate-post-kit'),
555	'type' => Controls_Manager::COLOR,
556	'selectors' => [
557	'{{WRAPPER}} .upk-harold-carousel .upk-meta *' => 'color: {{VALUE}};',
558	],
559	]
560	);
561
562	$this->add_control(
563	'meta_hover_color',
564	[
565	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
566	'type' => Controls_Manager::COLOR,
567	'selectors' => [
568	'{{WRAPPER}} .upk-harold-carousel .upk-meta .upk-author a:hover' => 'color: {{VALUE}};',
569	],
570	]
571	);
572
573	// $this->add_responsive_control(
574	// 'meta_spacing',
575	// [
576	// 'label' => esc_html__('Spacing', 'ultimate-post-kit'),
577	// 'type' => Controls_Manager::SLIDER,
578	// 'range' => [
579	// 'px' => [
580	// 'min' => 0,
581	// 'max' => 50,
582	// 'step' => 2,
583	// ],
584	// ],
585	// 'selectors' => [
586	// '{{WRAPPER}} .upk-harold-carousel .upk-meta .upk-date' => 'margin-left: {{SIZE}}{{UNIT}};',
587	// ],
588	// ]
589	// );
590	$this->add_responsive_control(
591	'meta_spacing',
592	[
593	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
594	'type' => Controls_Manager::SLIDER,
595	'range' => [
596	'px' => [
597	'min' => 0,
598	'max' => 50,
599	],
600	],
601	'selectors' => [
602	'{{WRAPPER}} .upk-harold-carousel .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
603	],
604	]
605	);
606
607	$this->add_group_control(
608	Group_Control_Typography::get_type(),
609	[
610	'name' => 'meta_typography',
611	'label' => esc_html__('Typography', 'ultimate-post-kit'),
612	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-meta',
613	]
614	);
615
616	$this->end_controls_section();
617
618	$this->start_controls_section(
619	'section_style_category',
620	[
621	'label' => esc_html__('Category', 'ultimate-post-kit'),
622	'tab' => Controls_Manager::TAB_STYLE,
623	'condition' => [
624	'show_category' => 'yes',
625	],
626	]
627	);
628
629	$this->add_responsive_control(
630	'category_bottom_spacing',
631	[
632	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
633	'type' => Controls_Manager::SLIDER,
634	'range' => [
635	'px' => [
636	'min' => 0,
637	'max' => 50,
638	'step' => 2,
639	],
640	],
641	'selectors' => [
642	'{{WRAPPER}} .upk-harold-carousel .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
643	],
644	]
645	);
646
647	$this->start_controls_tabs('tabs_category_style');
648
649	$this->start_controls_tab(
650	'tab_category_normal',
651	[
652	'label' => esc_html__('Normal', 'ultimate-post-kit'),
653	]
654	);
655
656	$this->add_control(
657	'category_color',
658	[
659	'label' => esc_html__('Color', 'ultimate-post-kit'),
660	'type' => Controls_Manager::COLOR,
661	'selectors' => [
662	'{{WRAPPER}} .upk-harold-carousel .upk-category a' => 'color: {{VALUE}};',
663	],
664	]
665	);
666
667	$this->add_group_control(
668	Group_Control_Background::get_type(),
669	[
670	'name' => 'category_background',
671	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-category a',
672	]
673	);
674
675	$this->add_group_control(
676	Group_Control_Border::get_type(),
677	[
678	'name' => 'category_border',
679	'label' => __('Border', 'ultimate-post-kit'),
680	'fields_options' => [
681	'border' => [
682	'default' => 'solid',
683	],
684	'width' => [
685	'default' => [
686	'top' => '1',
687	'right' => '1',
688	'bottom' => '1',
689	'left' => '1',
690	'isLinked' => false,
691	],
692	],
693	'color' => [
694	'default' => '#8D99AE',
695	],
696	],
697	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-category a',
698	]
699	);
700
701	$this->add_responsive_control(
702	'category_border_radius',
703	[
704	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
705	'type' => Controls_Manager::DIMENSIONS,
706	'size_units' => ['px', '%'],
707	'selectors' => [
708	'{{WRAPPER}} .upk-harold-carousel .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
709	],
710	]
711	);
712
713	$this->add_responsive_control(
714	'category_padding',
715	[
716	'label' => esc_html__('Padding', 'ultimate-post-kit'),
717	'type' => Controls_Manager::DIMENSIONS,
718	'size_units' => ['px', 'em', '%'],
719	'selectors' => [
720	'{{WRAPPER}} .upk-harold-carousel .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
721	],
722	]
723	);
724
725	$this->add_responsive_control(
726	'category_spacing',
727	[
728	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
729	'type' => Controls_Manager::SLIDER,
730	'range' => [
731	'px' => [
732	'min' => 0,
733	'max' => 50,
734	'step' => 2,
735	],
736	],
737	'selectors' => [
738	'{{WRAPPER}} .upk-harold-carousel .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
739	],
740	]
741	);
742
743
744	$this->add_group_control(
745	Group_Control_Box_Shadow::get_type(),
746	[
747	'name' => 'category_shadow',
748	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-category a',
749	]
750	);
751
752	$this->add_group_control(
753	Group_Control_Typography::get_type(),
754	[
755	'name' => 'category_typography',
756	'label' => esc_html__('Typography', 'ultimate-post-kit'),
757	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-category a',
758	]
759	);
760
761	$this->end_controls_tab();
762
763	$this->start_controls_tab(
764	'tab_category_hover',
765	[
766	'label' => esc_html__('Hover', 'ultimate-post-kit'),
767	]
768	);
769
770	$this->add_control(
771	'category_hover_color',
772	[
773	'label' => esc_html__('Color', 'ultimate-post-kit'),
774	'type' => Controls_Manager::COLOR,
775	'selectors' => [
776	'{{WRAPPER}} .upk-harold-carousel .upk-category a:hover' => 'color: {{VALUE}};',
777	],
778	]
779	);
780
781	$this->add_group_control(
782	Group_Control_Background::get_type(),
783	[
784	'name' => 'category_hover_background',
785	'selector' => '{{WRAPPER}} .upk-harold-carousel .upk-category a:hover',
786	]
787	);
788
789	$this->add_control(
790	'category_hover_border_color',
791	[
792	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
793	'type' => Controls_Manager::COLOR,
794	'condition' => [
795	'category_border_border!' => '',
796	],
797	'selectors' => [
798	'{{WRAPPER}} .upk-harold-carousel .upk-category a:hover' => 'border-color: {{VALUE}};',
799	],
800	]
801	);
802
803	$this->end_controls_tab();
804
805	$this->end_controls_tabs();
806
807	$this->end_controls_section();
808
809	//Navigation Global Controls
810	$this->register_navigation_style('swiper');
811	}
812
813	/**
814	* Main query render for this widget
815	* @param $posts_per_page number item query limit
816	*/
817	public function query_posts($posts_per_page) {
818
819	$default = $this->getGroupControlQueryArgs();
820	$args = [];
821	if ($posts_per_page) {
822	$args['posts_per_page'] = $posts_per_page;
823	// $args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
824	}
825	$args = array_merge($default, $args);
826	$this->_query = new WP_Query($args);
827	}
828
829	public function render_image($image_id, $size) {
830	if (!$this->get_settings('show_image')) {
831	return;
832	}
833
834	$placeholder_image_src = Utils::get_placeholder_image_src();
835
836	$image_src = wp_get_attachment_image_src($image_id, $size);
837
838	if (!$image_src) {
839	$image_src = $placeholder_image_src;
840	} else {
841	$image_src = $image_src[0];
842	}
843
844	?>
845
846	<img class="upk-harold-img" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_html(get_the_title()); ?>">
847
848	<?php
849	}
850
851	public function render_author() {
852
853	if (!$this->get_settings('show_author')) {
854	return;
855	}
856
857	?>
858
859	<div class="upk-author">
860	<a href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
861	<i class="upk-icon-user"></i>
862	<span class="upk-author-name"><?php echo esc_html( get_the_author() ); ?></span>
863	</a>
864	</div>
865
866	<?php
867	}
868
869	public function render_date() {
870	$settings = $this->get_settings_for_display();
871
872	if (!$this->get_settings('show_date')) {
873	return;
874	}
875
876	?>
877
878	<div class="upk-flex">
879	<div class="upk-date">
880	<i class="upk-icon-calendar"></i>
881	<span class="upk-harold-date">
882	<?php if ($settings['human_diff_time'] == 'yes') {
883	echo esc_html( ultimate_post_kit_post_time_diff(($settings['human_diff_time_short'] == 'yes') ? 'short' : '') );
884	} else {
885	echo get_the_date();
886	} ?>
887	</span>
888	</div>
889	<?php if ($settings['show_time']) : ?>
890	<div class="upk-post-time">
891	<i class="upk-icon-clock" aria-hidden="true"></i>
892	<?php echo esc_html( get_the_time() ); ?>
893	</div>
894	<?php endif; ?>
895	</div>
896
897	<?php
898	}
899
900	public function render_header() {
901	//Global Function
902	$this->render_header_attribute('harold');
903
904	?>
905	<div <?php $this->print_render_attribute_string('carousel'); ?>>
906	<div class="upk-wrapper">
907	<div <?php $this->print_render_attribute_string('swiper'); ?>>
908	<div class="swiper-wrapper">
909	<?php
910	}
911
912	public function render_post_grid_item($post_id, $image_size) {
913	$settings = $this->get_settings_for_display();
914
915	if ('yes' == $settings['global_link']) {
916
917	$this->add_render_attribute('list-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
918	}
919	$this->add_render_attribute('list-item', 'class', 'upk-item swiper-slide upk-transition-toggle', true);
920
921	?>
922	<div <?php $this->print_render_attribute_string('list-item'); ?>>
923	<div class="upk-item-box">
924	<?php if ('yes' == $settings['show_image']) : ?>
925	<div class="upk-image">
926	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
927	</div>
928	<?php endif; ?>
929	<div class="upk-content">
930	<div>
931	<?php $this->render_category(); ?>
932	<?php $this->render_title(substr($this->get_name(), 4)); ?>
933	<?php if ($settings['show_author'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
934	<div class="upk-meta">
935	<?php $this->render_author(); ?>
936	<?php if ($settings['show_date']) : ?>
937	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
938	<?php $this->render_date(); ?>
939	</div>
940	<?php endif; ?>
941	<?php if (_is_upk_pro_activated()) :
942	if ('yes' === $settings['show_reading_time']) : ?>
943	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
944	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
945	</div>
946	<?php endif; ?>
947	<?php endif; ?>
948	</div>
949	<?php endif; ?>
950	</div>
951	</div>
952	</div>
953	</div>
954
955	<?php
956	}
957
958	public function render() {
959	$settings = $this->get_settings_for_display();
960
961	$this->query_posts($settings['item_limit']['size']);
962	$wp_query = $this->get_query();
963
964	if (!$wp_query->found_posts) {
965	return;
966	}
967
968	$this->render_header();
969
970	while ($wp_query->have_posts()) {
971	$wp_query->the_post();
972	$thumbnail_size = $settings['primary_thumbnail_size'];
973	$this->render_post_grid_item(get_the_ID(), $thumbnail_size);
974	}
975
976	wp_reset_postdata();
977
978	$this->render_footer();
979	}
980	}
981