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

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

1,054 lines 26.9 KB

Raw Download Zip

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