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

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

954 lines 24.3 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\AliceCarousel\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')) exit; // Exit if accessed directly
21
22	class Alice_Carousel extends Group_Control_Query {
23	use Global_Widget_Controls;
24	use Global_Swiper_Functions;
25	use Global_Widget_Functions;
26
27	private $_query = null;
28
29	public function get_name() {
30	return 'upk-alice-carousel';
31	}
32
33	public function get_title() {
34	return BDTUPK . esc_html__('Alice Carousel', 'ultimate-post-kit');
35	}
36
37	public function get_icon() {
38	return 'upk-widget-icon upk-icon-alice-carousel';
39	}
40
41	public function get_categories() {
42	return ['ultimate-post-kit'];
43	}
44
45	public function get_keywords() {
46	return ['post', 'carousel', 'blog', 'recent', 'news', 'alice'];
47	}
48
49	public function get_style_depends() {
50	if ($this->upk_is_edit_mode()) {
51	return ['swiper', 'upk-all-styles'];
52	} else {
53	return ['swiper', 'upk-font', 'upk-alice-carousel'];
54	}
55	}
56
57	public function get_script_depends() {
58	if ($this->upk_is_edit_mode()) {
59	return ['swiper', 'upk-all-scripts'];
60	} else {
61	return ['swiper', 'upk-alice-carousel'];
62	}
63	}
64
65	public function get_custom_help_url() {
66	return 'https://youtu.be/I0i6q45j6Ps';
67	}
68
69
70	public function get_query() {
71	return $this->_query;
72	}
73
74	public function has_widget_inner_wrapper(): bool {
75	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
76	}
77
78
79	protected function register_controls() {
80	$this->start_controls_section(
81	'section_content_layout',
82	[
83	'label' => esc_html__('Layout', 'ultimate-post-kit'),
84	]
85	);
86
87	$this->add_responsive_control(
88	'columns',
89	[
90	'label' => esc_html__('Columns', 'ultimate-post-kit'),
91	'type' => Controls_Manager::SELECT,
92	'default' => 3,
93	'tablet_default' => 2,
94	'mobile_default' => 1,
95	'options' => [
96	1 => esc_html__('1', 'ultimate-post-kit'),
97	2 => esc_html__('2', 'ultimate-post-kit'),
98	3 => esc_html__('3', 'ultimate-post-kit'),
99	4 => esc_html__('4', 'ultimate-post-kit'),
100	5 => esc_html__('5', 'ultimate-post-kit'),
101	6 => esc_html__('6', 'ultimate-post-kit'),
102	],
103	]
104	);
105
106	$this->add_responsive_control(
107	'item_gap',
108	[
109	'label' => esc_html__('Item Gap', 'ultimate-post-kit'),
110	'type' => Controls_Manager::SLIDER,
111	'default' => [
112	'size' => 20,
113	],
114	'tablet_default' => [
115	'size' => 20,
116	],
117	'mobile_default' => [
118	'size' => 20,
119	],
120	'range' => [
121	'px' => [
122	'min' => 0,
123	'max' => 100,
124	],
125	],
126	]
127	);
128
129	$this->add_responsive_control(
130	'item_height',
131	[
132	'label' => esc_html__('Item Height(px)', 'ultimate-post-kit'),
133	'type' => Controls_Manager::SLIDER,
134	'range' => [
135	'px' => [
136	'min' => 200,
137	'max' => 800,
138	],
139	],
140	'selectors' => [
141	'{{WRAPPER}} .upk-alice-carousel .upk-item' => 'height: {{SIZE}}{{UNIT}};',
142	],
143	]
144	);
145
146	$this->add_control(
147	'content_position',
148	[
149	'label' => esc_html__('Content Position', 'ultimate-post-kit'),
150	'type' => Controls_Manager::CHOOSE,
151	'toggle' => false,
152	'default' => 'bottom-center',
153	'options' => [
154	'bottom-left' => [
155	'title' => esc_html__('Left', 'ultimate-post-kit'),
156	'icon' => 'eicon-text-align-left',
157	],
158	'bottom-center' => [
159	'title' => esc_html__('Center', 'ultimate-post-kit'),
160	'icon' => 'eicon-text-align-center',
161	],
162	'bottom-right' => [
163	'title' => esc_html__('Right', 'ultimate-post-kit'),
164	'icon' => 'eicon-text-align-right',
165	],
166	],
167	]
168	);
169
170	$this->add_group_control(
171	Group_Control_Image_Size::get_type(),
172	[
173	'name' => 'primary_thumbnail',
174	// phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude -- Elementor widget query built from user-configured controls; expected behaviour.
175	'exclude' => ['custom'],
176	'default' => 'medium',
177	]
178	);
179
180	$this->end_controls_section();
181
182	// Query Settings
183	$this->start_controls_section(
184	'section_post_query_builder',
185	[
186	'label' => esc_html__('Query', 'ultimate-post-kit'),
187	'tab' => Controls_Manager::TAB_CONTENT,
188	]
189	);
190
191	$this->add_control(
192	'item_limit',
193	[
194	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
195	'type' => Controls_Manager::SLIDER,
196	'range' => [
197	'px' => [
198	'min' => 1,
199	'max' => 20,
200	],
201	],
202	'default' => [
203	'size' => 5,
204	],
205	'condition' => [
206	'posts_source!' => 'current_query',
207	]
208	]
209	);
210
211	$this->register_query_builder_controls();
212
213	$this->end_controls_section();
214
215	$this->start_controls_section(
216	'section_content_additional',
217	[
218	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
219	]
220	);
221
222	//Global Title Controls
223	$this->register_title_controls();
224
225	$this->add_control(
226	'show_category',
227	[
228	'label' => esc_html__('Category', 'ultimate-post-kit'),
229	'type' => Controls_Manager::SWITCHER,
230	'default' => 'yes',
231	]
232	);
233
234	$this->add_control(
235	'show_author',
236	[
237	'label' => esc_html__('Author', 'ultimate-post-kit'),
238	'type' => Controls_Manager::SWITCHER,
239	'default' => 'yes',
240	]
241	);
242
243	//Global Date Controls
244	$this->register_date_controls();
245
246	//Global Reading Time Controls
247	$this->register_reading_time_controls();
248
249	$this->add_control(
250	'meta_separator',
251	[
252	'label' => esc_html__('Separator', 'ultimate-post-kit'),
253	'type' => Controls_Manager::TEXT,
254	'default' => '.',
255	'label_block' => false,
256	]
257	);
258
259	$this->add_control(
260	'global_link',
261	[
262	'label' => esc_html__('Item Wrapper Link', 'ultimate-post-kit'),
263	'type' => Controls_Manager::SWITCHER,
264	'prefix_class' => 'upk-global-link-',
265	'description' => esc_html__('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
266	'separator' => 'before'
267	]
268	);
269
270	$this->end_controls_section();
271
272	//Navigaiton Global Controls
273	$this->register_navigation_controls('alice');
274
275	//Style
276	$this->start_controls_section(
277	'upk_section_style',
278	[
279	'label' => esc_html__('Items', 'ultimate-post-kit'),
280	'tab' => Controls_Manager::TAB_STYLE,
281	]
282	);
283
284	$this->add_responsive_control(
285	'content_padding',
286	[
287	'label' => esc_html__('Content Padding', 'ultimate-post-kit'),
288	'type' => Controls_Manager::DIMENSIONS,
289	'size_units' => ['px', 'em', '%'],
290	'selectors' => [
291	'{{WRAPPER}} .upk-alice-carousel .upk-item-box .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
292	],
293	]
294	);
295
296	$this->start_controls_tabs('tabs_item_style');
297
298	$this->start_controls_tab(
299	'tab_item_normal',
300	[
301	'label' => esc_html__('Normal', 'ultimate-post-kit'),
302	]
303	);
304
305	$this->add_control(
306	'overlay_blur_effect',
307	[
308	'label' => esc_html__('Glassmorphism', 'ultimate-post-kit'),
309	'type' => Controls_Manager::SWITCHER,
310	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
311	'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1$s look here %2$s', 'ultimate-post-kit'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
312	]
313	);
314
315	$this->add_control(
316	'overlay_blur_level',
317	[
318	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
319	'type' => Controls_Manager::SLIDER,
320	'range' => [
321	'px' => [
322	'min' => 0,
323	'step' => 1,
324	'max' => 50,
325	]
326	],
327	'default' => [
328	'size' => 5
329	],
330	'selectors' => [
331	'{{WRAPPER}} .upk-alice-carousel .upk-item-box::before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
332	],
333	'condition' => [
334	'overlay_blur_effect' => 'yes'
335	]
336	]
337	);
338
339	$this->add_control(
340	'item_overlay_color',
341	[
342	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
343	'type' => Controls_Manager::COLOR,
344	'selectors' => [
345	'{{WRAPPER}} .upk-alice-carousel .upk-item-box::before' => 'background: {{VALUE}};',
346	],
347	]
348	);
349
350	$this->add_group_control(
351	Group_Control_Border::get_type(),
352	[
353	'name' => 'item_border',
354	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-item-box',
355	]
356	);
357
358	$this->add_responsive_control(
359	'item_border_radius',
360	[
361	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
362	'type' => Controls_Manager::DIMENSIONS,
363	'size_units' => ['px', '%'],
364	'selectors' => [
365	'{{WRAPPER}} .upk-alice-carousel .upk-item-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
366	],
367	]
368	);
369
370	$this->add_responsive_control(
371	'item_padding',
372	[
373	'label' => esc_html__('Padding', 'ultimate-post-kit'),
374	'type' => Controls_Manager::DIMENSIONS,
375	'size_units' => ['px', 'em', '%'],
376	'selectors' => [
377	'{{WRAPPER}} .upk-alice-carousel .upk-item-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
378	],
379	]
380	);
381
382	$this->add_group_control(
383	Group_Control_Box_Shadow::get_type(),
384	[
385	'name' => 'item_box_shadow',
386	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-item-box',
387	]
388	);
389
390	$this->end_controls_tab();
391
392	$this->start_controls_tab(
393	'tab_item_hover',
394	[
395	'label' => esc_html__('Hover', 'ultimate-post-kit'),
396	]
397	);
398
399	$this->add_control(
400	'overlay_blur_level_hover',
401	[
402	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
403	'type' => Controls_Manager::SLIDER,
404	'range' => [
405	'px' => [
406	'min' => 0,
407	'step' => 1,
408	'max' => 50,
409	]
410	],
411	'default' => [
412	'size' => 0
413	],
414	'selectors' => [
415	'{{WRAPPER}} .upk-alice-carousel .upk-item:hover .upk-item-box::before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
416	],
417	'condition' => [
418	'overlay_blur_effect' => 'yes'
419	]
420	]
421	);
422
423	$this->add_control(
424	'item_overlay_hover_color',
425	[
426	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
427	'type' => Controls_Manager::COLOR,
428	'selectors' => [
429	'{{WRAPPER}} .upk-alice-carousel .upk-item:hover .upk-item-box::before' => 'background: {{VALUE}};',
430	],
431	]
432	);
433
434	$this->add_control(
435	'item_hover_border_color',
436	[
437	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
438	'type' => Controls_Manager::COLOR,
439	'condition' => [
440	'item_border_border!' => '',
441	],
442	'selectors' => [
443	'{{WRAPPER}} .upk-alice-carousel .upk-item-box:hover' => 'border-color: {{VALUE}};',
444	],
445	]
446	);
447
448	$this->add_group_control(
449	Group_Control_Box_Shadow::get_type(),
450	[
451	'name' => 'item_hover_box_shadow',
452	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-item-box:hover',
453	]
454	);
455
456	$this->add_responsive_control(
457	'item_shadow_padding',
458	[
459	'label' => esc_html__('Match Padding', 'ultimate-post-kit'),
460	'description' => esc_html__('You have to add padding for matching overlaping normal/hover box shadow when you used Box Shadow option.', 'ultimate-post-kit'),
461	'type' => Controls_Manager::SLIDER,
462	'range' => [
463	'px' => [
464	'min' => 0,
465	'step' => 1,
466	'max' => 50,
467	]
468	],
469	'selectors' => [
470	'{{WRAPPER}} .swiper-carousel' => 'padding: {{SIZE}}{{UNIT}}; margin: 0 -{{SIZE}}{{UNIT}};'
471	],
472	]
473	);
474
475	$this->end_controls_tab();
476
477	$this->end_controls_tabs();
478
479	$this->end_controls_section();
480
481	$this->start_controls_section(
482	'section_style_title',
483	[
484	'label' => esc_html__('Title', 'ultimate-post-kit'),
485	'tab' => Controls_Manager::TAB_STYLE,
486	'condition' => [
487	'show_title' => 'yes',
488	],
489	]
490	);
491
492	$this->add_control(
493	'title_style',
494	[
495	'label' => esc_html__('Style', 'ultimate-post-kit'),
496	'type' => Controls_Manager::SELECT,
497	'default' => 'underline',
498	'options' => [
499	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
500	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
501	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
502	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
503	],
504	]
505	);
506
507	$this->add_control(
508	'title_color',
509	[
510	'label' => esc_html__('Color', 'ultimate-post-kit'),
511	'type' => Controls_Manager::COLOR,
512	'selectors' => [
513	'{{WRAPPER}} .upk-alice-carousel .upk-title a' => 'color: {{VALUE}};',
514	],
515	]
516	);
517
518	$this->add_control(
519	'title_hover_color',
520	[
521	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
522	'type' => Controls_Manager::COLOR,
523	'selectors' => [
524	'{{WRAPPER}} .upk-alice-carousel .upk-title a:hover' => 'color: {{VALUE}};',
525	],
526	]
527	);
528
529	$this->add_responsive_control(
530	'title_spacing',
531	[
532	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
533	'type' => Controls_Manager::SLIDER,
534	'range' => [
535	'px' => [
536	'min' => 0,
537	'max' => 50,
538	],
539	],
540	'selectors' => [
541	'{{WRAPPER}} .upk-alice-carousel .upk-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
542	],
543	]
544	);
545
546	$this->add_group_control(
547	Group_Control_Typography::get_type(),
548	[
549	'name' => 'title_typography',
550	'label' => esc_html__('Typography', 'ultimate-post-kit'),
551	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-title',
552	]
553	);
554
555	$this->add_group_control(
556	Group_Control_Text_Shadow::get_type(),
557	[
558	'name' => 'title_text_shadow',
559	'label' => esc_html__('Text Shadow', 'ultimate-post-kit'),
560	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-title a',
561	]
562	);
563
564	$this->end_controls_section();
565
566	$this->start_controls_section(
567	'section_style_author',
568	[
569	'label' => esc_html__('Meta', 'ultimate-post-kit'),
570	'tab' => Controls_Manager::TAB_STYLE,
571	'conditions' => [
572	'relation' => 'or',
573	'terms' => [
574	[
575	'name' => 'show_author',
576	'value' => 'yes'
577	],
578	[
579	'name' => 'show_date',
580	'value' => 'yes'
581	]
582	]
583	],
584	]
585	);
586
587	$this->add_control(
588	'author_color',
589	[
590	'label' => esc_html__('Color', 'ultimate-post-kit'),
591	'type' => Controls_Manager::COLOR,
592	'selectors' => [
593	'{{WRAPPER}} .upk-alice-carousel .upk-meta *' => 'color: {{VALUE}};',
594	],
595	]
596	);
597
598	$this->add_control(
599	'author_hover_color',
600	[
601	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
602	'type' => Controls_Manager::COLOR,
603	'selectors' => [
604	'{{WRAPPER}} .upk-alice-carousel .upk-meta .upk-author a:hover' => 'color: {{VALUE}};',
605	],
606	]
607	);
608
609
610	// $this->add_control(
611	// 'date_divider_color',
612	// [
613	// 'label' => esc_html__('Divider Color', 'ultimate-post-kit'),
614	// 'type' => Controls_Manager::COLOR,
615	// 'selectors' => [
616	// '{{WRAPPER}} .upk-alice-carousel .upk-meta .upk-date:before' => 'background: {{VALUE}};',
617	// ],
618	// ]
619	// );
620
621	// $this->add_responsive_control(
622	// 'date_spacing',
623	// [
624	// 'label' => esc_html__('Spacing', 'ultimate-post-kit'),
625	// 'type' => Controls_Manager::SLIDER,
626	// 'range' => [
627	// 'px' => [
628	// 'min' => 0,
629	// 'max' => 50,
630	// 'step' => 2,
631	// ],
632	// ],
633	// 'selectors' => [
634	// '{{WRAPPER}} .upk-alice-carousel .upk-meta .upk-date' => 'margin-left: {{SIZE}}{{UNIT}}; padding-left: {{SIZE}}{{UNIT}};',
635	// ],
636	// ]
637	// );
638
639	$this->add_responsive_control(
640	'date_spacing',
641	[
642	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
643	'type' => Controls_Manager::SLIDER,
644	'range' => [
645	'px' => [
646	'min' => 0,
647	'max' => 50,
648	],
649	],
650	'selectors' => [
651	'{{WRAPPER}} .upk-alice-carousel .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
652	],
653	]
654	);
655
656	$this->add_group_control(
657	Group_Control_Typography::get_type(),
658	[
659	'name' => 'author_typography',
660	'label' => esc_html__('Typography', 'ultimate-post-kit'),
661	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-meta *',
662	]
663	);
664
665	$this->end_controls_section();
666
667	$this->start_controls_section(
668	'section_style_category',
669	[
670	'label' => esc_html__('Category', 'ultimate-post-kit'),
671	'tab' => Controls_Manager::TAB_STYLE,
672	'condition' => [
673	'show_category' => 'yes',
674	],
675	]
676	);
677
678	$this->add_responsive_control(
679	'category_bottom_spacing',
680	[
681	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
682	'type' => Controls_Manager::SLIDER,
683	'range' => [
684	'px' => [
685	'min' => 0,
686	'max' => 50,
687	],
688	],
689	'selectors' => [
690	'{{WRAPPER}} .upk-alice-carousel .upk-category' => 'margin: {{SIZE}}{{UNIT}};',
691	],
692	]
693	);
694
695	$this->start_controls_tabs('tabs_category_style');
696
697	$this->start_controls_tab(
698	'tab_category_normal',
699	[
700	'label' => esc_html__('Normal', 'ultimate-post-kit'),
701	]
702	);
703
704	$this->add_control(
705	'category_color',
706	[
707	'label' => esc_html__('Color', 'ultimate-post-kit'),
708	'type' => Controls_Manager::COLOR,
709	'selectors' => [
710	'{{WRAPPER}} .upk-alice-carousel .upk-category a' => 'color: {{VALUE}};',
711	],
712	]
713	);
714
715	$this->add_group_control(
716	Group_Control_Background::get_type(),
717	[
718	'name' => 'category_background',
719	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-category a',
720	]
721	);
722
723	$this->add_group_control(
724	Group_Control_Border::get_type(),
725	[
726	'name' => 'category_border',
727	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-category a',
728	]
729	);
730
731	$this->add_responsive_control(
732	'category_border_radius',
733	[
734	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
735	'type' => Controls_Manager::DIMENSIONS,
736	'size_units' => ['px', '%'],
737	'selectors' => [
738	'{{WRAPPER}} .upk-alice-carousel .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
739	],
740	]
741	);
742
743	$this->add_responsive_control(
744	'category_padding',
745	[
746	'label' => esc_html__('Padding', 'ultimate-post-kit'),
747	'type' => Controls_Manager::DIMENSIONS,
748	'size_units' => ['px', 'em', '%'],
749	'selectors' => [
750	'{{WRAPPER}} .upk-alice-carousel .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
751	],
752	]
753	);
754
755	$this->add_responsive_control(
756	'category_spacing',
757	[
758	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
759	'type' => Controls_Manager::SLIDER,
760	'range' => [
761	'px' => [
762	'min' => 0,
763	'max' => 50,
764	'step' => 2,
765	],
766	],
767	'selectors' => [
768	'{{WRAPPER}} .upk-alice-carousel .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
769	],
770	]
771	);
772
773
774	$this->add_group_control(
775	Group_Control_Box_Shadow::get_type(),
776	[
777	'name' => 'category_shadow',
778	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-category a',
779	]
780	);
781
782	$this->add_group_control(
783	Group_Control_Typography::get_type(),
784	[
785	'name' => 'category_typography',
786	'label' => esc_html__('Typography', 'ultimate-post-kit'),
787	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-category a',
788	]
789	);
790
791	$this->end_controls_tab();
792
793	$this->start_controls_tab(
794	'tab_category_hover',
795	[
796	'label' => esc_html__('Hover', 'ultimate-post-kit'),
797	]
798	);
799
800	$this->add_control(
801	'category_hover_color',
802	[
803	'label' => esc_html__('Color', 'ultimate-post-kit'),
804	'type' => Controls_Manager::COLOR,
805	'selectors' => [
806	'{{WRAPPER}} .upk-alice-carousel .upk-category a:hover' => 'color: {{VALUE}};',
807	],
808	]
809	);
810
811	$this->add_group_control(
812	Group_Control_Background::get_type(),
813	[
814	'name' => 'category_hover_background',
815	'selector' => '{{WRAPPER}} .upk-alice-carousel .upk-category a:hover',
816	]
817	);
818
819	$this->add_control(
820	'category_hover_border_color',
821	[
822	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
823	'type' => Controls_Manager::COLOR,
824	'condition' => [
825	'category_border_border!' => '',
826	],
827	'selectors' => [
828	'{{WRAPPER}} .upk-alice-carousel .upk-category a:hover' => 'border-color: {{VALUE}};',
829	],
830	]
831	);
832
833	$this->end_controls_tab();
834
835	$this->end_controls_tabs();
836
837	$this->end_controls_section();
838
839	//Navigation Global Controls
840	$this->register_navigation_style('swiper');
841	}
842
843	/**
844	* Main query render for this widget
845	* @param $posts_per_page number item query limit
846	*/
847	public function query_posts($posts_per_page) {
848
849	$default = $this->getGroupControlQueryArgs();
850	$args = [];
851	if ($posts_per_page) {
852	$args['posts_per_page'] = $posts_per_page;
853	}
854	$args = array_merge($default, $args);
855	$this->_query = new WP_Query($args);
856	}
857
858	public function render_author() {
859
860	if (!$this->get_settings('show_author')) {
861	return;
862	}
863
864	?>
865	<div class="upk-author">
866	<span><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit') ?></span>
867	<a
868	href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>"
869	aria-label="<?php echo esc_attr( 'View all posts by ' . get_the_author() ); ?>"
870	>
871	<?php echo esc_html( get_the_author() ) ?>
872	</a>
873	</div>
874	<?php
875	}
876
877	public function render_header() {
878	$settings = $this->get_settings_for_display();
879
880	//Global Function
881	$this->render_header_attribute('alice');
882
883	?>
884	<div <?php $this->print_render_attribute_string('carousel'); ?>>
885	<div class="upk-content-<?php echo esc_attr($settings['content_position']) ?>">
886	<div <?php $this->print_render_attribute_string('swiper'); ?>>
887	<div class="swiper-wrapper">
888	<?php
889	}
890
891	public function render_post_grid_item($post_id, $image_size) {
892	$settings = $this->get_settings_for_display();
893
894	if ('yes' == $settings['global_link']) {
895	$this->add_render_attribute('carousel-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
896	}
897
898	$this->add_render_attribute('carousel-item', 'class', 'upk-item swiper-slide', true);
899
900	?>
901	<div <?php $this->print_render_attribute_string('carousel-item'); ?>>
902	<div class="upk-item-box">
903	<div class="upk-img-wrap">
904	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
905	</div>
906	<?php $this->render_category(); ?>
907	<div class="upk-content">
908	<?php $this->render_title(substr($this->get_name(), 4)); ?>
909	<?php if ($settings['show_author'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
910	<div class="upk-meta">
911	<?php $this->render_author(); ?>
912	<div data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
913	<?php $this->render_date(); ?>
914	</div>
915	<?php if (_is_upk_pro_activated()) :
916	if ('yes' === $settings['show_reading_time']) : ?>
917	<div class="upk-reading-time" data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
918	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
919	</div>
920	<?php endif; ?>
921	<?php endif; ?>
922	</div>
923	<?php endif; ?>
924	</div>
925	</div>
926	</div>
927	<?php
928	}
929
930	public function render() {
931	$settings = $this->get_settings_for_display();
932
933	$this->query_posts($settings['item_limit']['size']);
934	$wp_query = $this->get_query();
935
936	if (!$wp_query->found_posts) {
937	return;
938	}
939
940	$this->render_header();
941
942	while ($wp_query->have_posts()) {
943	$wp_query->the_post();
944	$thumbnail_size = $settings['primary_thumbnail_size'];
945
946	$this->render_post_grid_item(get_the_ID(), $thumbnail_size);
947	}
948
949	wp_reset_postdata();
950
951	$this->render_footer();
952	}
953	}
954