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

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