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

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