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.16, at modules/harold-carousel/widgets/harold-carousel.php

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