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

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