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

1,050 lines 26.6 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', '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	if ($posts_per_page) {
882	$args['posts_per_page'] = $posts_per_page;
883	// $args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
884	}
885	$args = array_merge($default, $args);
886	$this->_query = new WP_Query($args);
887	}
888
889	public function render_image($image_id, $size) {
890	$placeholder_image_src = Utils::get_placeholder_image_src();
891
892	$image_src = wp_get_attachment_image_src($image_id, $size);
893
894	if (!$image_src) {
895	$image_src = $placeholder_image_src;
896	} else {
897	$image_src = $image_src[0];
898	}
899
900	?>
901	<img class="upk-blog-image" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_html(get_the_title()); ?>">
902	<?php
903	}
904
905	public function render_author() {
906
907	if (!$this->get_settings('show_author')) {
908	return;
909	}
910
911	?>
912	<div class="upk-blog-author">
913	<span class="by"><?php echo esc_html__('by', 'ultimate-post-kit') ?></span>
914	<span class="upk-author">
915	<a href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
916	<?php echo esc_html( get_the_author() ) ?>
917	</a>
918	</span>
919	</div>
920	<?php
921	}
922
923	public function render_date() {
924	$settings = $this->get_settings_for_display();
925
926	if (!$this->get_settings('show_date')) {
927	return;
928	}
929
930	if ($settings['human_diff_time'] == 'yes') {
931	echo esc_html( ultimate_post_kit_post_time_diff( ($settings['human_diff_time_short'] == 'yes') ? 'short' : '' ) );
932	} else {
933	echo get_the_date();
934	}
935	}
936
937	public function render_category() {
938
939	if (!$this->get_settings('show_category')) {
940	return;
941	}
942
943	?>
944	<div class="upk-blog-badge">
945	<span>
946	<?php echo upk_get_category($this->get_settings('posts_source')); ?>
947	</span>
948	</div>
949	<?php
950	}
951
952	public function render_header() {
953	$settings = $this->get_settings_for_display();
954
955	//Global Function
956	$this->render_header_attribute('hazel');
957
958	?>
959	<div <?php $this->print_render_attribute_string('carousel'); ?>>
960	<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']) ?>">
961	<div <?php echo $this->get_render_attribute_string('swiper'); ?>>
962	<div class="swiper-wrapper">
963	<?php
964	}
965
966	public function render_post($post_id, $image_size) {
967	$settings = $this->get_settings_for_display();
968	global $post;
969
970	if ('yes' == $settings['global_link']) {
971
972	$this->add_render_attribute('grid-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
973	}
974	$this->add_render_attribute('grid-item', 'class', 'upk-item swiper-slide upk-transition-toggle', true);
975
976	?>
977	<div <?php $this->print_render_attribute_string('grid-item'); ?>>
978	<div class="upk-item-box">
979	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
980
981	<div class="upk-content">
982	<div class="upk-cetagory">
983	<?php $this->render_category(); ?>
984	</div>
985
986	<div class="upk-title-wrapper">
987	<?php $this->render_title(substr($this->get_name(), 4)); ?>
988	</div>
989
990	<?php if ($settings['show_author'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
991	<div class="upk-meta">
992	<?php $this->render_author(); ?>
993
994	<?php if ($settings['show_date']) : ?>
995	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
996	<div class="upk-date">
997	<i class="upk-icon-calendar" aria-hidden="true"></i><?php $this->render_date(); ?>
998	</div>
999
1000	<?php if ($settings['show_time']) : ?>
1001	<div class="upk-post-time">
1002	<i class="upk-icon-clock" aria-hidden="true"></i>
1003	<?php echo esc_html( get_the_time() ); ?>
1004	</div>
1005	<?php endif; ?>
1006	</div>
1007	<?php endif; ?>
1008
1009	<?php if (_is_upk_pro_activated()) :
1010	if ('yes' === $settings['show_reading_time']) : ?>
1011	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1012	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'] ) ); ?>
1013	</div>
1014	<?php endif; ?>
1015	<?php endif; ?>
1016	</div>
1017	<?php endif; ?>
1018
1019
1020	</div>
1021	</div>
1022	</div>
1023	<?php
1024	}
1025
1026	public function render() {
1027	$settings = $this->get_settings_for_display();
1028
1029	$this->query_posts($settings['item_limit']['size']);
1030	$wp_query = $this->get_query();
1031
1032	if (!$wp_query->found_posts) {
1033	return;
1034	}
1035
1036	$this->render_header();
1037
1038	while ($wp_query->have_posts()) {
1039	$wp_query->the_post();
1040	$thumbnail_size = $settings['primary_thumbnail_size'];
1041
1042	$this->render_post(get_the_ID(), $thumbnail_size);
1043	}
1044
1045	wp_reset_postdata();
1046
1047	$this->render_footer();
1048	}
1049	}
1050