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

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

1,249 lines 31.1 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\MapleCarousel\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 Maple_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-maple-carousel';
34	}
35
36	public function get_title() {
37	return BDTUPK . esc_html__('Maple Carousel', 'ultimate-post-kit');
38	}
39
40	public function get_icon() {
41	return 'upk-widget-icon upk-icon-maple-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', 'maple'];
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-maple-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-maple-carousel'];
65	}
66	}
67
68	public function get_custom_help_url() {
69	return 'https://youtu.be/h9KTG-DIbm4';
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	'image_height',
133	[
134	'label' => esc_html__('Image Height', 'ultimate-post-kit'),
135	'type' => Controls_Manager::SLIDER,
136	'range' => [
137	'px' => [
138	'min' => 100,
139	'max' => 800,
140	],
141	],
142	'selectors' => [
143	'{{WRAPPER}} .upk-maple-carousel .upk-main-image .upk-img' => 'height: {{SIZE}}px;',
144	],
145	]
146	);
147
148	$this->add_group_control(
149	Group_Control_Image_Size::get_type(),
150	[
151	'name' => 'primary_thumbnail',
152	// phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude -- Elementor widget query built from user-configured controls; expected behaviour.
153	'exclude' => ['custom'],
154	'default' => 'medium',
155	]
156	);
157
158	$this->end_controls_section();
159
160	// Query Settings
161	$this->start_controls_section(
162	'section_post_query_builder',
163	[
164	'label' => __('Query', 'ultimate-post-kit'),
165	'tab' => Controls_Manager::TAB_CONTENT,
166	]
167	);
168
169	$this->add_control(
170	'item_limit',
171	[
172	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
173	'type' => Controls_Manager::SLIDER,
174	'range' => [
175	'px' => [
176	'min' => 1,
177	'max' => 20,
178	],
179	],
180	'default' => [
181	'size' => 6,
182	],
183	'condition' => [
184	'posts_source!' => 'current_query',
185	]
186	]
187	);
188
189	$this->register_query_builder_controls();
190
191	$this->end_controls_section();
192
193	$this->start_controls_section(
194	'section_content_additional',
195	[
196	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
197	]
198	);
199
200	//Global Title Controls
201	$this->register_title_controls();
202	$this->register_text_controls();
203
204	$this->add_control(
205	'show_author_avatar',
206	[
207	'label' => esc_html__('Show Author Avatar', 'ultimate-post-kit'),
208	'type' => Controls_Manager::SWITCHER,
209	'default' => 'yes',
210	]
211	);
212
213	$this->add_control(
214	'show_author_name',
215	[
216	'label' => esc_html__('Show Author Name', 'ultimate-post-kit'),
217	'type' => Controls_Manager::SWITCHER,
218	'default' => 'yes',
219	]
220	);
221
222	$this->add_control(
223	'show_category',
224	[
225	'label' => esc_html__('Category', 'ultimate-post-kit'),
226	'type' => Controls_Manager::SWITCHER,
227	'default' => 'yes',
228	]
229	);
230
231	$this->add_control(
232	'show_post_format',
233	[
234	'label' => esc_html__('Post Format', 'ultimate-post-kit'),
235	'type' => Controls_Manager::SWITCHER,
236	'default' => 'yes',
237	]
238	);
239
240	//Global Date Controls
241	$this->register_date_controls();
242
243	//Global Reading Time Controls
244	$this->register_reading_time_controls();
245
246	$this->add_control(
247	'meta_separator',
248	[
249	'label' => __('Separator', 'ultimate-post-kit'),
250	'type' => Controls_Manager::TEXT,
251	'default' => '-',
252	'label_block' => false,
253	]
254	);
255
256	$this->add_control(
257	'item_match_height',
258	[
259	'label' => __('Item Match Height', 'ultimate-post-kit'),
260	'type' => Controls_Manager::SWITCHER,
261	'default' => 'yes',
262	'prefix_class' => 'upk-item-match-height--',
263	]
264	);
265
266	$this->add_control(
267	'global_link',
268	[
269	'label' => __('Item Wrapper Link', 'ultimate-post-kit'),
270	'type' => Controls_Manager::SWITCHER,
271	'prefix_class' => 'upk-global-link-',
272	'description' => __('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
273	'separator' => 'before'
274	]
275	);
276
277	$this->end_controls_section();
278
279	//Navigaiton Global Controls
280	$this->register_navigation_controls('maple');
281
282	//Style
283	$this->start_controls_section(
284	'upk_section_style',
285	[
286	'label' => esc_html__('Items', 'ultimate-post-kit'),
287	'tab' => Controls_Manager::TAB_STYLE,
288	]
289	);
290
291	$this->add_responsive_control(
292	'content_padding',
293	[
294	'label' => __('Content Padding', 'ultimate-post-kit'),
295	'type' => Controls_Manager::DIMENSIONS,
296	'size_units' => ['px', 'em', '%'],
297	'selectors' => [
298	'{{WRAPPER}} .upk-maple-carousel .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
299	],
300	]
301	);
302
303	$this->add_control(
304	'item_image_heading',
305	[
306	'label' => esc_html__('Image', 'ultimate-post-kit'),
307	'type' => Controls_Manager::HEADING,
308	'separator' => 'before'
309	]
310	);
311
312	$this->add_responsive_control(
313	'item_image_border_radius',
314	[
315	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
316	'type' => Controls_Manager::DIMENSIONS,
317	'size_units' => ['px', '%'],
318	'selectors' => [
319	'{{WRAPPER}} .upk-maple-carousel .upk-img-wrap .upk-main-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
320	],
321	]
322	);
323
324	$this->start_controls_tabs('tabs_item_style');
325
326	$this->start_controls_tab(
327	'tab_item_normal',
328	[
329	'label' => esc_html__('Normal', 'ultimate-post-kit'),
330	]
331	);
332
333	$this->add_group_control(
334	Group_Control_Background::get_type(),
335	[
336	'name' => 'itam_background',
337	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-item',
338	]
339	);
340
341	$this->add_group_control(
342	Group_Control_Border::get_type(),
343	[
344	'name' => 'item_border',
345	'label' => __('Border', 'ultimate-post-kit'),
346	'placeholder' => '1px',
347	'default' => '1px',
348	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-item',
349	]
350	);
351
352	$this->add_responsive_control(
353	'item_border_radius',
354	[
355	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
356	'type' => Controls_Manager::DIMENSIONS,
357	'size_units' => ['px', '%'],
358	'selectors' => [
359	'{{WRAPPER}} .upk-maple-carousel .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
360	],
361	]
362	);
363
364	$this->add_group_control(
365	Group_Control_Box_Shadow::get_type(),
366	[
367	'name' => 'item_box_shadow',
368	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-item',
369	]
370	);
371
372	$this->end_controls_tab();
373
374	$this->start_controls_tab(
375	'tab_item_hover',
376	[
377	'label' => esc_html__('Hover', 'ultimate-post-kit'),
378	]
379	);
380
381	$this->add_group_control(
382	Group_Control_Background::get_type(),
383	[
384	'name' => 'itam_background_hover',
385	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-item:hover',
386	]
387	);
388
389	$this->add_control(
390	'item_border_color_hover',
391	[
392	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
393	'type' => Controls_Manager::COLOR,
394	'selectors' => [
395	'{{WRAPPER}} .upk-maple-carousel .upk-item:hover' => 'border-color: {{VALUE}};'
396	],
397	'condition' => [
398	'item_border_border!' => ''
399	]
400	]
401	);
402
403	$this->add_group_control(
404	Group_Control_Box_Shadow::get_type(),
405	[
406	'name' => 'item_box_shadow_hover',
407	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-item:hover',
408	]
409	);
410
411	$this->add_responsive_control(
412	'item_shadow_padding',
413	[
414	'label' => __('Match Padding', 'ultimate-post-kit'),
415	'description' => __('You have to add padding for matching overlaping normal/hover box shadow when you used Box Shadow option.', 'ultimate-post-kit'),
416	'type' => Controls_Manager::SLIDER,
417	'range' => [
418	'px' => [
419	'min' => 0,
420	'step' => 1,
421	'max' => 50,
422	]
423	],
424	'default' => [
425	'size' => 10
426	],
427	'selectors' => [
428	'{{WRAPPER}} .swiper-carousel' => 'padding: {{SIZE}}{{UNIT}}; margin: 0 -{{SIZE}}{{UNIT}};'
429	],
430	]
431	);
432
433	$this->end_controls_tab();
434
435	$this->end_controls_tabs();
436
437	$this->end_controls_section();
438
439	$this->start_controls_section(
440	'section_style_title',
441	[
442	'label' => esc_html__('Title', 'ultimate-post-kit'),
443	'tab' => Controls_Manager::TAB_STYLE,
444	'condition' => [
445	'show_title' => 'yes',
446	],
447	]
448	);
449
450	$this->add_control(
451	'title_style',
452	[
453	'label' => esc_html__('Style', 'ultimate-post-kit') . BDTUPK_NC,
454	'type' => Controls_Manager::SELECT,
455	'default' => 'underline',
456	'options' => [
457	'' => esc_html__('Default', 'ultimate-post-kit'),
458	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
459	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
460	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
461	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
462	],
463	]
464	);
465
466	$this->add_control(
467	'title_color',
468	[
469	'label' => esc_html__('Color', 'ultimate-post-kit'),
470	'type' => Controls_Manager::COLOR,
471	'selectors' => [
472	'{{WRAPPER}} .upk-maple-carousel .upk-title a' => 'color: {{VALUE}};',
473	],
474	]
475	);
476
477
478	$this->add_control(
479	'title_hover_color',
480	[
481	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
482	'type' => Controls_Manager::COLOR,
483	'selectors' => [
484	'{{WRAPPER}} .upk-maple-carousel .upk-title a:hover' => 'color: {{VALUE}};',
485	],
486	]
487	);
488
489	$this->add_responsive_control(
490	'title_spacing',
491	[
492	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
493	'type' => Controls_Manager::SLIDER,
494	'range' => [
495	'px' => [
496	'min' => 0,
497	'max' => 50,
498	'step' => 2,
499	],
500	],
501	'selectors' => [
502	'{{WRAPPER}} .upk-maple-carousel .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
503	],
504	]
505	);
506
507	$this->add_group_control(
508	Group_Control_Typography::get_type(),
509	[
510	'name' => 'title_typography',
511	'label' => esc_html__('Typography', 'ultimate-post-kit'),
512	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-title',
513	]
514	);
515
516	$this->add_control(
517	'title_advanced_style',
518	[
519	'label' => esc_html__('Advanced Style', 'ultimate-post-kit'),
520	'type' => Controls_Manager::SWITCHER,
521	]
522	);
523
524	$this->add_control(
525	'title_background',
526	[
527	'label' => esc_html__('Background Color', 'ultimate-post-kit'),
528	'type' => Controls_Manager::COLOR,
529	'selectors' => [
530	'{{WRAPPER}} .upk-maple-carousel .upk-title a' => 'background-color: {{VALUE}};',
531	],
532	'condition' => [
533	'title_advanced_style' => 'yes'
534	]
535	]
536	);
537
538	$this->add_group_control(
539	Group_Control_Text_Shadow::get_type(),
540	[
541	'name' => 'title_text_shadow',
542	'label' => __('Text Shadow', 'ultimate-post-kit'),
543	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-title a',
544	'condition' => [
545	'title_advanced_style' => 'yes'
546	]
547	]
548	);
549
550	$this->add_group_control(
551	Group_Control_Border::get_type(),
552	[
553	'name' => 'title_border',
554	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-title a',
555	'condition' => [
556	'title_advanced_style' => 'yes'
557	]
558	]
559	);
560
561	$this->add_responsive_control(
562	'title_border_radius',
563	[
564	'label' => __('Border Radius', 'ultimate-post-kit'),
565	'type' => Controls_Manager::DIMENSIONS,
566	'size_units' => ['px', '%'],
567	'selectors' => [
568	'{{WRAPPER}} .upk-maple-carousel .upk-title a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
569	],
570	'condition' => [
571	'title_advanced_style' => 'yes'
572	]
573	]
574	);
575
576	$this->add_group_control(
577	Group_Control_Box_Shadow::get_type(),
578	[
579	'name' => 'title_box_shadow',
580	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-title a',
581	'condition' => [
582	'title_advanced_style' => 'yes'
583	]
584	]
585	);
586
587	$this->add_responsive_control(
588	'title_text_padding',
589	[
590	'label' => __('Padding', 'ultimate-post-kit'),
591	'type' => Controls_Manager::DIMENSIONS,
592	'size_units' => ['px', 'em', '%'],
593	'selectors' => [
594	'{{WRAPPER}} .upk-maple-carousel .upk-title a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
595	],
596	'condition' => [
597	'title_advanced_style' => 'yes'
598	]
599	]
600	);
601
602	$this->end_controls_section();
603
604	$this->start_controls_section(
605	'section_style_text',
606	[
607	'label' => esc_html__('Text', 'ultimate-post-kit'),
608	'tab' => Controls_Manager::TAB_STYLE,
609	'condition' => [
610	'show_excerpt' => 'yes',
611	],
612	]
613	);
614
615	$this->add_control(
616	'text_color',
617	[
618	'label' => esc_html__('Color', 'ultimate-post-kit'),
619	'type' => Controls_Manager::COLOR,
620	'selectors' => [
621	'{{WRAPPER}} .upk-maple-carousel .upk-text' => 'color: {{VALUE}};',
622	],
623	]
624	);
625
626	$this->add_group_control(
627	Group_Control_Typography::get_type(),
628	[
629	'name' => 'text_typography',
630	'label' => esc_html__('Typography', 'ultimate-post-kit'),
631	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-text',
632	]
633	);
634
635	$this->end_controls_section();
636
637	$this->start_controls_section(
638	'section_style_meta',
639	[
640	'label' => esc_html__('Meta', 'ultimate-post-kit'),
641	'tab' => Controls_Manager::TAB_STYLE,
642	'conditions' => [
643	'relation' => 'or',
644	'terms' => [
645	[
646	'name' => 'show_author_avatar',
647	'value' => 'yes'
648	],
649	[
650	'name' => 'show_author_name',
651	'value' => 'yes'
652	],
653	[
654	'name' => 'show_date',
655	'value' => 'yes'
656	]
657	]
658	],
659	]
660	);
661
662	$this->add_control(
663	'meta_color',
664	[
665	'label' => esc_html__('Text Color', 'ultimate-post-kit'),
666	'type' => Controls_Manager::COLOR,
667	'selectors' => [
668	'{{WRAPPER}} .upk-maple-carousel .upk-meta *' => 'color: {{VALUE}};',
669	],
670	]
671	);
672
673	$this->add_control(
674	'meta_hover_color',
675	[
676	'label' => esc_html__('Hover Text Color', 'ultimate-post-kit'),
677	'type' => Controls_Manager::COLOR,
678	'selectors' => [
679	'{{WRAPPER}} .upk-maple-carousel .upk-meta .author-name:hover' => 'color: {{VALUE}};',
680	],
681	]
682	);
683
684	$this->add_responsive_control(
685	'avatar_spacing',
686	[
687	'label' => esc_html__('Avatar Spacing', 'ultimate-post-kit'),
688	'type' => Controls_Manager::SLIDER,
689	'range' => [
690	'px' => [
691	'min' => 0,
692	'max' => 50,
693	],
694	],
695	'selectors' => [
696	'{{WRAPPER}} .upk-maple-carousel .upk-meta .upk-author img' => 'margin-right: {{SIZE}}{{UNIT}};',
697	],
698	]
699	);
700
701	$this->add_responsive_control(
702	'avatar_border_radius',
703	[
704	'label' => esc_html__('Avatar Radius', 'ultimate-post-kit'),
705	'type' => Controls_Manager::DIMENSIONS,
706	'size_units' => ['px', '%'],
707	'selectors' => [
708	'{{WRAPPER}} .upk-maple-carousel .upk-meta .upk-author img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
709	],
710	]
711	);
712
713	$this->add_responsive_control(
714	'meta_space_between',
715	[
716	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
717	'type' => Controls_Manager::SLIDER,
718	'range' => [
719	'px' => [
720	'min' => 0,
721	'max' => 50,
722	],
723	],
724	'selectors' => [
725	'{{WRAPPER}} .upk-maple-carousel .upk-item .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
726	],
727	]
728	);
729
730	$this->add_group_control(
731	Group_Control_Typography::get_type(),
732	[
733	'name' => 'meta_typography',
734	'label' => esc_html__('Typography', 'ultimate-post-kit'),
735	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-meta',
736	]
737	);
738
739	$this->end_controls_section();
740
741	$this->start_controls_section(
742	'section_style_category',
743	[
744	'label' => esc_html__('Category', 'ultimate-post-kit'),
745	'tab' => Controls_Manager::TAB_STYLE,
746	'condition' => [
747	'show_category' => 'yes',
748	],
749	]
750	);
751
752	$this->start_controls_tabs('tabs_category_style');
753
754	$this->start_controls_tab(
755	'tab_category_normal',
756	[
757	'label' => esc_html__('Normal', 'ultimate-post-kit'),
758	]
759	);
760
761	$this->add_control(
762	'category_color',
763	[
764	'label' => esc_html__('Color', 'ultimate-post-kit'),
765	'type' => Controls_Manager::COLOR,
766	'selectors' => [
767	'{{WRAPPER}} .upk-maple-carousel .upk-category a' => 'color: {{VALUE}};',
768	],
769	]
770	);
771
772	$this->add_group_control(
773	Group_Control_Background::get_type(),
774	[
775	'name' => 'category_background',
776	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-category a',
777	]
778	);
779
780	$this->add_group_control(
781	Group_Control_Border::get_type(),
782	[
783	'name' => 'category_border',
784	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-category a',
785	'separator' => 'before'
786	]
787	);
788
789	$this->add_responsive_control(
790	'category_border_radius',
791	[
792	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
793	'type' => Controls_Manager::DIMENSIONS,
794	'size_units' => ['px', '%'],
795	'selectors' => [
796	'{{WRAPPER}} .upk-maple-carousel .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
797	],
798	]
799	);
800
801	$this->add_responsive_control(
802	'category_padding',
803	[
804	'label' => esc_html__('Padding', 'ultimate-post-kit'),
805	'type' => Controls_Manager::DIMENSIONS,
806	'size_units' => ['px', 'em', '%'],
807	'selectors' => [
808	'{{WRAPPER}} .upk-maple-carousel .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
809	],
810	]
811	);
812
813	$this->add_responsive_control(
814	'category_margin',
815	[
816	'label' => esc_html__('Margin', 'ultimate-post-kit'),
817	'type' => Controls_Manager::DIMENSIONS,
818	'size_units' => ['px', 'em', '%'],
819	'selectors' => [
820	'{{WRAPPER}} .upk-maple-carousel .upk-category' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
821	],
822	]
823	);
824
825	$this->add_responsive_control(
826	'category_spacing',
827	[
828	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
829	'type' => Controls_Manager::SLIDER,
830	'range' => [
831	'px' => [
832	'min' => 0,
833	'max' => 50,
834	'step' => 2,
835	],
836	],
837	'selectors' => [
838	'{{WRAPPER}} .upk-maple-carousel .upk-category' => 'gap: {{SIZE}}{{UNIT}};',
839	],
840	]
841	);
842
843	$this->add_group_control(
844	Group_Control_Box_Shadow::get_type(),
845	[
846	'name' => 'category_shadow',
847	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-category a',
848	]
849	);
850
851	$this->add_group_control(
852	Group_Control_Typography::get_type(),
853	[
854	'name' => 'category_typography',
855	'label' => esc_html__('Typography', 'ultimate-post-kit'),
856	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-category a',
857	]
858	);
859
860	$this->end_controls_tab();
861
862	$this->start_controls_tab(
863	'tab_category_hover',
864	[
865	'label' => esc_html__('Hover', 'ultimate-post-kit'),
866	]
867	);
868
869	$this->add_control(
870	'category_hover_color',
871	[
872	'label' => esc_html__('Color', 'ultimate-post-kit'),
873	'type' => Controls_Manager::COLOR,
874	'selectors' => [
875	'{{WRAPPER}} .upk-maple-carousel .upk-category a:hover' => 'color: {{VALUE}};',
876	],
877	]
878	);
879
880	$this->add_group_control(
881	Group_Control_Background::get_type(),
882	[
883	'name' => 'category_hover_background',
884	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-category a:hover',
885	]
886	);
887
888	$this->add_control(
889	'category_hover_border_color',
890	[
891	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
892	'type' => Controls_Manager::COLOR,
893	'condition' => [
894	'category_border_border!' => '',
895	],
896	'selectors' => [
897	'{{WRAPPER}} .upk-maple-carousel .upk-category a:hover' => 'border-color: {{VALUE}};',
898	],
899	'separator' => 'before'
900	]
901	);
902	$this->add_group_control(
903	Group_Control_Box_Shadow::get_type(),
904	[
905	'name' => 'category_shadow_hover',
906	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-category a:hover',
907	]
908	);
909	$this->end_controls_tab();
910
911	$this->end_controls_tabs();
912
913	$this->end_controls_section();
914
915	$this->start_controls_section(
916	'section_style_post_format',
917	[
918	'label' => esc_html__('Post Format', 'ultimate-post-kit'),
919	'tab' => Controls_Manager::TAB_STYLE,
920	'condition' => [
921	'show_post_format' => 'yes',
922	],
923	]
924	);
925
926	$this->start_controls_tabs('tabs_post_format_style');
927
928	$this->start_controls_tab(
929	'tab_post_format_normal',
930	[
931	'label' => esc_html__('Normal', 'ultimate-post-kit'),
932	]
933	);
934
935	$this->add_control(
936	'post_format_color',
937	[
938	'label' => esc_html__('Color', 'ultimate-post-kit'),
939	'type' => Controls_Manager::COLOR,
940	'selectors' => [
941	'{{WRAPPER}} .upk-maple-carousel .upk-post-format a' => 'color: {{VALUE}};',
942	],
943	]
944	);
945
946	$this->add_group_control(
947	Group_Control_Background::get_type(),
948	[
949	'name' => 'post_format_background',
950	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-post-format a',
951	]
952	);
953
954	$this->add_group_control(
955	Group_Control_Border::get_type(),
956	[
957	'name' => 'post_format_border',
958	'label' => __('Border', 'ultimate-post-kit'),
959	'fields_options' => [
960	'border' => [
961	'default' => 'solid',
962	],
963	'width' => [
964	'default' => [
965	'top' => '5',
966	'right' => '5',
967	'bottom' => '5',
968	'left' => '5',
969	'isLinked' => false,
970	],
971	],
972	'color' => [
973	'default' => '#fff',
974	],
975	],
976	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-post-format a',
977	]
978	);
979
980	$this->add_responsive_control(
981	'post_format_border_radius',
982	[
983	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
984	'type' => Controls_Manager::DIMENSIONS,
985	'size_units' => ['px', '%'],
986	'selectors' => [
987	'{{WRAPPER}} .upk-maple-carousel .upk-post-format a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
988	],
989	]
990	);
991
992	$this->add_responsive_control(
993	'post_format_padding',
994	[
995	'label' => esc_html__('Padding', 'ultimate-post-kit'),
996	'type' => Controls_Manager::DIMENSIONS,
997	'size_units' => ['px', 'em', '%'],
998	'selectors' => [
999	'{{WRAPPER}} .upk-maple-carousel .upk-post-format a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1000	],
1001	]
1002	);
1003
1004	$this->add_responsive_control(
1005	'post_format_spacing',
1006	[
1007	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
1008	'type' => Controls_Manager::SLIDER,
1009	'range' => [
1010	'px' => [
1011	'min' => 10,
1012	'max' => 100,
1013	],
1014	],
1015	'selectors' => [
1016	'{{WRAPPER}} .upk-maple-carousel .upk-post-format' => 'right: {{SIZE}}{{UNIT}};',
1017	],
1018	]
1019	);
1020
1021
1022	$this->add_group_control(
1023	Group_Control_Box_Shadow::get_type(),
1024	[
1025	'name' => 'post_format_shadow',
1026	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-post-format a',
1027	]
1028	);
1029
1030	$this->add_group_control(
1031	Group_Control_Typography::get_type(),
1032	[
1033	'name' => 'post_format_typography',
1034	'label' => esc_html__('Typography', 'ultimate-post-kit'),
1035	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-post-format a',
1036	]
1037	);
1038
1039	$this->end_controls_tab();
1040
1041	$this->start_controls_tab(
1042	'tab_post_format_hover',
1043	[
1044	'label' => esc_html__('Hover', 'ultimate-post-kit'),
1045	]
1046	);
1047
1048	$this->add_control(
1049	'post_format_hover_color',
1050	[
1051	'label' => esc_html__('Color', 'ultimate-post-kit'),
1052	'type' => Controls_Manager::COLOR,
1053	'selectors' => [
1054	'{{WRAPPER}} .upk-maple-carousel .upk-post-format a:hover' => 'color: {{VALUE}};',
1055	],
1056	]
1057	);
1058
1059	$this->add_group_control(
1060	Group_Control_Background::get_type(),
1061	[
1062	'name' => 'post_format_hover_background',
1063	'selector' => '{{WRAPPER}} .upk-maple-carousel .upk-post-format a:hover',
1064	]
1065	);
1066
1067	$this->add_control(
1068	'post_format_hover_border_color',
1069	[
1070	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1071	'type' => Controls_Manager::COLOR,
1072	'condition' => [
1073	'post_format_border_border!' => '',
1074	],
1075	'selectors' => [
1076	'{{WRAPPER}} .upk-maple-carousel .upk-post-format a:hover' => 'border-color: {{VALUE}};',
1077	],
1078	]
1079	);
1080
1081	$this->end_controls_tab();
1082
1083	$this->end_controls_tabs();
1084
1085	$this->end_controls_section();
1086
1087	//Navigation Global Controls
1088	$this->register_navigation_style('swiper');
1089	}
1090
1091	/**
1092	* Main query render for this widget
1093	* @param $posts_per_page number item query limit
1094	*/
1095	public function query_posts($posts_per_page) {
1096
1097	$default = $this->getGroupControlQueryArgs();
1098	$args = [];
1099	if ($posts_per_page) {
1100	$args['posts_per_page'] = $posts_per_page;
1101	}
1102	$args = array_merge($default, $args);
1103	$this->_query = new WP_Query($args);
1104	}
1105
1106	public function render_author() {
1107	$settings = $this->get_settings_for_display();
1108
1109	?>
1110	<?php if ($settings['show_author_avatar'] == 'yes' or $settings['show_author_name'] == 'yes') : ?>
1111	<div class="upk-author">
1112	<?php if ($settings['show_author_avatar'] == 'yes') : ?>
1113	<?php echo get_avatar(get_the_author_meta('ID'), 36); ?>
1114	<?php endif; ?>
1115
1116	<?php if ($settings['show_author_name'] == 'yes') : ?>
1117	<a class="author-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>"><?php echo esc_html( get_the_author() ); ?></a>
1118	<?php endif; ?>
1119	</div>
1120	<?php endif; ?>
1121
1122	<?php
1123	}
1124
1125	public function render_human_date() {
1126	$settings = $this->get_settings_for_display();
1127
1128	if (!$this->get_settings('show_date')) {
1129	return;
1130	}
1131
1132	if ($settings['human_diff_time'] == 'yes') {
1133	echo esc_html( ultimate_post_kit_post_time_diff( ($settings['human_diff_time_short'] == 'yes') ? 'short' : '' ) );
1134	} else {
1135	echo get_the_date();
1136	}
1137	}
1138
1139	public function render_date() {
1140	$settings = $this->get_settings_for_display();
1141
1142	if (!$this->get_settings('show_date')) {
1143	return;
1144	}
1145
1146	if ($settings['show_date'] == 'yes') : ?>
1147	<div class="upk-blog-date">
1148	<a class="date" href="#">
1149	<i class="upk-icon-calendar" aria-hidden="true"></i><?php $this->render_human_date(); ?>
1150	</a>
1151	</div>
1152	<?php endif; ?>
1153	<?php if ($settings['show_time']) : ?>
1154	<div class="upk-post-time">
1155	<i class="upk-icon-clock" aria-hidden="true"></i>
1156	<?php echo esc_html( get_the_time() ); ?>
1157	</div>
1158	<?php endif;
1159	}
1160
1161	public function render_header() {
1162	//Global Function
1163	$this->render_header_attribute('maple');
1164
1165	?>
1166	<div <?php $this->print_render_attribute_string('carousel'); ?>>
1167	<div class="upk-post-grid">
1168	<div <?php $this->print_render_attribute_string('swiper'); ?>>
1169	<div class="swiper-wrapper">
1170	<?php
1171	}
1172
1173	public function render_post_grid_item($post_id, $image_size, $excerpt_length) {
1174	$settings = $this->get_settings_for_display();
1175
1176	if ('yes' == $settings['global_link']) {
1177	$this->add_render_attribute('grid-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
1178	}
1179
1180	$this->add_render_attribute('grid-item', 'class', 'upk-item swiper-slide upk-transition-toggle', true);
1181
1182	?>
1183	<div <?php $this->print_render_attribute_string('grid-item'); ?>>
1184	<div class="upk-item-box">
1185	<div class="upk-img-wrap">
1186	<div class="upk-main-image">
1187	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1188	</div>
1189
1190	<?php $this->render_post_format(); ?>
1191	<?php $this->render_category(); ?>
1192
1193	</div>
1194
1195	<div class="upk-content">
1196
1197	<?php if ($settings['show_date'] or $settings['show_reading_time']) : ?>
1198	<div class="upk-meta">
1199	<?php $this->render_author(); ?>
1200
1201	<?php if ($settings['show_date'] == 'yes') : ?>
1202	<div data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1203	<?php $this->render_date(); ?>
1204	</div>
1205	<?php endif; ?>
1206
1207	<?php if (_is_upk_pro_activated()) :
1208	if ('yes' === $settings['show_reading_time']) : ?>
1209	<div class="upk-reading-time" data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1210	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
1211	</div>
1212	<?php endif; ?>
1213	<?php endif; ?>
1214	</div>
1215	<?php endif; ?>
1216
1217	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1218
1219	<?php $this->render_excerpt($excerpt_length); ?>
1220	</div>
1221	</div>
1222	</div>
1223	<?php
1224	}
1225
1226	public function render() {
1227	$settings = $this->get_settings_for_display();
1228
1229	$this->query_posts($settings['item_limit']['size']);
1230	$wp_query = $this->get_query();
1231
1232	if (!$wp_query->found_posts) {
1233	return;
1234	}
1235
1236	$this->render_header();
1237
1238	while ($wp_query->have_posts()) {
1239	$wp_query->the_post();
1240	$thumbnail_size = $settings['primary_thumbnail_size'];
1241	$this->render_post_grid_item(get_the_ID(), $thumbnail_size, $settings['excerpt_length']);
1242	}
1243
1244	wp_reset_postdata();
1245
1246	$this->render_footer();
1247	}
1248	}
1249