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

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