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

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