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

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

1,507 lines 37.9 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\AlexCarousel\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
13	use UltimatePostKit\Traits\Global_Widget_Controls;
14	use UltimatePostKit\Traits\Global_Widget_Functions;
15	use UltimatePostKit\Traits\Global_Swiper_Functions;
16	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
17	use WP_Query;
18
19	if (!defined('ABSPATH')) {
20	exit;
21	} // Exit if accessed directly
22
23	class Alex_Carousel extends Group_Control_Query {
24
25	use Global_Widget_Controls;
26	use Global_Widget_Functions;
27	use Global_Swiper_Functions;
28
29	private $_query = null;
30
31	public function get_name() {
32	return 'upk-alex-carousel';
33	}
34
35	public function get_title() {
36	return BDTUPK . esc_html__('Alex Carousel', 'ultimate-post-kit');
37	}
38
39	public function get_icon() {
40	return 'upk-widget-icon upk-icon-alex-carousel';
41	}
42
43	public function get_categories() {
44	return ['ultimate-post-kit'];
45	}
46
47	public function get_keywords() {
48	return ['post', 'carousel', 'blog', 'recent', 'news', 'alex'];
49	}
50
51	public function get_style_depends() {
52	if ($this->upk_is_edit_mode()) {
53	return ['swiper', 'upk-all-styles'];
54	} else {
55	return ['swiper', 'upk-font', 'upk-alex-carousel'];
56	}
57	}
58
59	public function get_script_depends() {
60	if ($this->upk_is_edit_mode()) {
61	return ['swiper', 'upk-all-scripts'];
62	} else {
63	return ['swiper', 'upk-alex-carousel'];
64	}
65	}
66
67	public function get_custom_help_url() {
68	return 'https://youtu.be/nmMajegrTiM';
69	}
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' => esc_html__('Columns', 'ultimate-post-kit'),
93	'type' => Controls_Manager::SELECT,
94	'default' => 3,
95	'tablet_default' => 2,
96	'mobile_default' => 1,
97	'options' => [
98	1 => esc_html__('1', 'ultimate-post-kit'),
99	2 => esc_html__('2', 'ultimate-post-kit'),
100	3 => esc_html__('3', 'ultimate-post-kit'),
101	4 => esc_html__('4', 'ultimate-post-kit'),
102	5 => esc_html__('5', 'ultimate-post-kit'),
103	6 => esc_html__('6', 'ultimate-post-kit'),
104	],
105	]
106	);
107
108	$this->add_responsive_control(
109	'item_gap',
110	[
111	'label' => esc_html__('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	'item_height',
133	[
134	'label' => esc_html__('Item Height(px)', 'ultimate-post-kit'),
135	'type' => Controls_Manager::SLIDER,
136	'range' => [
137	'px' => [
138	'min' => 200,
139	'max' => 600,
140	],
141	],
142	'selectors' => [
143	'{{WRAPPER}} .upk-alex-carousel .upk-item' => 'height: {{SIZE}}{{UNIT}};',
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->add_control(
158	'content_position',
159	[
160	'label' => esc_html__('Content Position', 'ultimate-post-kit'),
161	'type' => Controls_Manager::CHOOSE,
162	'toggle' => false,
163	'default' => 'right',
164	'options' => [
165	'left' => [
166	'title' => esc_html__('Left', 'ultimate-post-kit'),
167	'icon' => 'eicon-h-align-left',
168	],
169	'right' => [
170	'title' => esc_html__('Right', 'ultimate-post-kit'),
171	'icon' => 'eicon-h-align-right',
172	],
173	],
174	]
175	);
176
177	$this->end_controls_section();
178
179	// Query Settings
180	$this->start_controls_section(
181	'section_post_query_builder',
182	[
183	'label' => esc_html__('Query', 'ultimate-post-kit'),
184	'tab' => Controls_Manager::TAB_CONTENT,
185	]
186	);
187
188	$this->add_control(
189	'item_limit',
190	[
191	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
192	'type' => Controls_Manager::SLIDER,
193	'range' => [
194	'px' => [
195	'min' => 1,
196	'max' => 20,
197	],
198	],
199	'default' => [
200	'size' => 6,
201	],
202	]
203	);
204
205	$this->register_query_builder_controls();
206
207	$this->end_controls_section();
208
209	$this->start_controls_section(
210	'section_content_additional',
211	[
212	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
213	]
214	);
215
216	//Global Title Controls
217	$this->register_title_controls();
218
219	$this->add_control(
220	'show_category',
221	[
222	'label' => esc_html__('Category', 'ultimate-post-kit'),
223	'type' => Controls_Manager::SWITCHER,
224	'default' => 'yes',
225	]
226	);
227
228	$this->add_control(
229	'show_readmore',
230	[
231	'label' => esc_html__('Read More', 'ultimate-post-kit'),
232	'type' => Controls_Manager::SWITCHER,
233	'default' => 'yes',
234	]
235	);
236
237	$this->add_control(
238	'show_author',
239	[
240	'label' => esc_html__('Author', 'ultimate-post-kit'),
241	'type' => Controls_Manager::SWITCHER,
242	'default' => 'yes',
243	]
244	);
245
246	//Global Date Controls
247	$this->register_date_controls();
248	//Global Reading Time Controls
249	$this->register_reading_time_controls();
250
251	$this->add_control(
252	'meta_separator',
253	[
254	'label' => esc_html__('Separator', 'ultimate-post-kit'),
255	'type' => Controls_Manager::TEXT,
256	'default' => '\|',
257	'label_block' => false,
258	]
259	);
260
261	$this->add_control(
262	'show_post_format',
263	[
264	'label' => esc_html__('Post Format', 'ultimate-post-kit'),
265	'type' => Controls_Manager::SWITCHER,
266	'separator' => 'before'
267	]
268	);
269
270	$this->add_control(
271	'global_link',
272	[
273	'label' => esc_html__('Item Wrapper Link', 'ultimate-post-kit'),
274	'type' => Controls_Manager::SWITCHER,
275	'prefix_class' => 'upk-global-link-',
276	'description' => esc_html__('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
277	'separator' => 'before'
278	]
279	);
280
281	$this->end_controls_section();
282
283	//Navigaiton Global Controls
284	$this->register_navigation_controls('alex');
285
286	//Style
287	$this->start_controls_section(
288	'upk_section_style',
289	[
290	'label' => esc_html__('Items', 'ultimate-post-kit'),
291	'tab' => Controls_Manager::TAB_STYLE,
292	]
293	);
294
295	$this->start_controls_tabs('tabs_item_style');
296
297	$this->start_controls_tab(
298	'tab_item_normal',
299	[
300	'label' => esc_html__('Normal', 'ultimate-post-kit'),
301	]
302	);
303
304	$this->add_responsive_control(
305	'item_border_radius',
306	[
307	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
308	'type' => Controls_Manager::DIMENSIONS,
309	'size_units' => ['px', '%'],
310	'selectors' => [
311	'{{WRAPPER}} .upk-alex-carousel .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
312	],
313	]
314	);
315
316	$this->add_group_control(
317	Group_Control_Box_Shadow::get_type(),
318	[
319	'name' => 'item_box_shadow',
320	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-item',
321	]
322	);
323
324	$this->end_controls_tab();
325
326	$this->start_controls_tab(
327	'tab_item_hover',
328	[
329	'label' => esc_html__('Hover', 'ultimate-post-kit'),
330	]
331	);
332
333	$this->add_group_control(
334	Group_Control_Box_Shadow::get_type(),
335	[
336	'name' => 'item_box_shadow_hover',
337	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-item:hover',
338	]
339	);
340
341	$this->add_responsive_control(
342	'item_shadow_padding',
343	[
344	'label' => esc_html__('Match Padding', 'ultimate-post-kit'),
345	'description' => esc_html__('You have to add padding for matching overlaping normal/hover box shadow when you used Box Shadow option.', 'ultimate-post-kit'),
346	'type' => Controls_Manager::SLIDER,
347	'range' => [
348	'px' => [
349	'min' => 0,
350	'step' => 1,
351	'max' => 50,
352	]
353	],
354	'selectors' => [
355	'{{WRAPPER}} .swiper-carousel' => 'padding: {{SIZE}}{{UNIT}}; margin: 0 -{{SIZE}}{{UNIT}};'
356	],
357	]
358	);
359
360	$this->end_controls_tab();
361
362	$this->end_controls_tabs();
363
364	$this->end_controls_section();
365
366	$this->start_controls_section(
367	'section_style_content',
368	[
369	'label' => esc_html__('Content', 'ultimate-post-kit'),
370	'tab' => Controls_Manager::TAB_STYLE,
371	]
372	);
373
374	$this->add_control(
375	'overlay_blur_effect',
376	[
377	'label' => esc_html__('Glass Morphism', 'ultimate-post-kit'),
378	'type' => Controls_Manager::SWITCHER,
379	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
380	'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1s look here %2s', 'ultimate-post-kit'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
381	'default' => 'yes',
382	]
383	);
384
385	$this->add_control(
386	'overlay_blur_level',
387	[
388	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
389	'type' => Controls_Manager::SLIDER,
390	'range' => [
391	'px' => [
392	'min' => 0,
393	'step' => 1,
394	'max' => 50,
395	]
396	],
397	'default' => [
398	'size' => 10
399	],
400	'selectors' => [
401	'{{WRAPPER}} .upk-alex-carousel .upk-content-wrap' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
402	],
403	'condition' => [
404	'overlay_blur_effect' => 'yes'
405	]
406	]
407	);
408
409	$this->add_group_control(
410	Group_Control_Background::get_type(),
411	[
412	'name' => 'content_background',
413	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-content-wrap',
414	]
415	);
416
417	$this->add_control(
418	'hr_15',
419	[
420	'type' => Controls_Manager::DIVIDER,
421	]
422	);
423
424	$this->add_responsive_control(
425	'content_width',
426	[
427	'label' => esc_html__('Width(%)', 'ultimate-post-kit'),
428	'type' => Controls_Manager::SLIDER,
429	'selectors' => [
430	'{{WRAPPER}} .upk-alex-carousel .upk-content-wrap' => 'width: {{SIZE}}%;'
431	],
432	]
433	);
434
435	$this->add_responsive_control(
436	'content_height',
437	[
438	'label' => esc_html__('Height(px)', 'ultimate-post-kit'),
439	'type' => Controls_Manager::SLIDER,
440	'range' => [
441	'px' => [
442	'min' => 50,
443	'max' => 500,
444	],
445	],
446	'selectors' => [
447	'{{WRAPPER}} .upk-alex-carousel .upk-content' => 'height: {{SIZE}}px;'
448	],
449	]
450	);
451
452	$this->add_control(
453	'hr_2',
454	[
455	'type' => Controls_Manager::DIVIDER,
456	]
457	);
458
459	$this->add_responsive_control(
460	'content_inner_padding',
461	[
462	'label' => esc_html__('Inner Padding', 'ultimate-post-kit'),
463	'type' => Controls_Manager::DIMENSIONS,
464	'size_units' => ['px', 'em', '%'],
465	'selectors' => [
466	'{{WRAPPER}} .upk-alex-carousel .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
467	],
468	]
469	);
470
471	$this->end_controls_section();
472
473	$this->start_controls_section(
474	'section_style_title',
475	[
476	'label' => esc_html__('Title', 'ultimate-post-kit'),
477	'tab' => Controls_Manager::TAB_STYLE,
478	'condition' => [
479	'show_title' => 'yes',
480	],
481	]
482	);
483
484	$this->add_control(
485	'title_style',
486	[
487	'label' => esc_html__('Style', 'ultimate-post-kit'),
488	'type' => Controls_Manager::SELECT,
489	'default' => '',
490	'options' => [
491	'' => esc_html__('Default', 'ultimate-post-kit'),
492	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
493	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
494	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
495	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
496	],
497	]
498	);
499
500	$this->start_controls_tabs('tabs_title_style');
501
502	$this->start_controls_tab(
503	'tab_title_normal',
504	[
505	'label' => esc_html__('Normal', 'ultimate-post-kit'),
506	]
507	);
508
509	$this->add_control(
510	'title_color',
511	[
512	'label' => esc_html__('Color', 'ultimate-post-kit'),
513	'type' => Controls_Manager::COLOR,
514	'selectors' => [
515	'{{WRAPPER}} .upk-alex-carousel .upk-title a' => 'color: {{VALUE}};',
516	],
517	]
518	);
519
520	$this->add_group_control(
521	Group_Control_Typography::get_type(),
522	[
523	'name' => 'title_typography',
524	'label' => esc_html__('Typography', 'ultimate-post-kit'),
525	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-title',
526	]
527	);
528
529	$this->add_control(
530	'title_advanced_style',
531	[
532	'label' => esc_html__('Advanced Style', 'ultimate-post-kit'),
533	'type' => Controls_Manager::SWITCHER,
534	]
535	);
536
537	$this->add_group_control(
538	Group_Control_Background::get_type(),
539	[
540	'name' => 'title_background',
541	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-title',
542	'condition' => [
543	'title_advanced_style' => 'yes'
544	]
545	]
546	);
547
548	$this->add_group_control(
549	Group_Control_Text_Shadow::get_type(),
550	[
551	'name' => 'title_text_shadow',
552	'label' => esc_html__('Text Shadow', 'ultimate-post-kit'),
553	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-title',
554	'condition' => [
555	'title_advanced_style' => 'yes'
556	]
557	]
558	);
559
560	$this->add_group_control(
561	Group_Control_Border::get_type(),
562	[
563	'name' => 'title_border',
564	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-title',
565	'condition' => [
566	'title_advanced_style' => 'yes'
567	]
568	]
569	);
570
571	$this->add_responsive_control(
572	'title_border_radius',
573	[
574	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
575	'type' => Controls_Manager::DIMENSIONS,
576	'size_units' => ['px', '%'],
577	'selectors' => [
578	'{{WRAPPER}} .upk-alex-carousel .upk-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
579	],
580	'condition' => [
581	'title_advanced_style' => 'yes'
582	]
583	]
584	);
585
586	$this->add_group_control(
587	Group_Control_Box_Shadow::get_type(),
588	[
589	'name' => 'title_box_shadow',
590	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-title',
591	'condition' => [
592	'title_advanced_style' => 'yes'
593	]
594	]
595	);
596
597	$this->add_responsive_control(
598	'title_text_padding',
599	[
600	'label' => esc_html__('Padding', 'ultimate-post-kit'),
601	'type' => Controls_Manager::DIMENSIONS,
602	'size_units' => ['px', 'em', '%'],
603	'selectors' => [
604	'{{WRAPPER}} .upk-alex-carousel .upk-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
605	],
606	'condition' => [
607	'title_advanced_style' => 'yes'
608	]
609	]
610	);
611
612	$this->end_controls_tab();
613
614	$this->start_controls_tab(
615	'tab_title_hover',
616	[
617	'label' => esc_html__('Hover', 'ultimate-post-kit'),
618	]
619	);
620
621	$this->add_control(
622	'title_hover_color',
623	[
624	'label' => esc_html__('Color', 'ultimate-post-kit'),
625	'type' => Controls_Manager::COLOR,
626	'selectors' => [
627	'{{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-title a' => 'color: {{VALUE}};',
628	],
629	]
630	);
631
632	$this->add_control(
633	'title_border_hover_color',
634	[
635	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
636	'type' => Controls_Manager::COLOR,
637	'selectors' => [
638	'{{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-title' => 'color: {{VALUE}};',
639	],
640	'condition' => [
641	'title_advanced_style' => 'yes',
642	'title_border_border!' => '',
643	]
644	]
645	);
646
647	$this->add_group_control(
648	Group_Control_Background::get_type(),
649	[
650	'name' => 'title_hover_background',
651	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-title',
652	'condition' => [
653	'title_advanced_style' => 'yes'
654	]
655	]
656	);
657
658	$this->end_controls_tab();
659
660	$this->end_controls_tabs();
661
662	$this->end_controls_section();
663
664	$this->start_controls_section(
665	'section_style_category',
666	[
667	'label' => esc_html__('Category', 'ultimate-post-kit'),
668	'tab' => Controls_Manager::TAB_STYLE,
669	'condition' => [
670	'show_category' => 'yes'
671	],
672	]
673	);
674
675	$this->add_responsive_control(
676	'category_bottom_spacing',
677	[
678	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
679	'type' => Controls_Manager::SLIDER,
680	'range' => [
681	'px' => [
682	'min' => 0,
683	'max' => 50,
684	'step' => 2,
685	],
686	],
687	'selectors' => [
688	'{{WRAPPER}} .upk-alex-carousel .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
689	],
690	]
691	);
692
693	$this->start_controls_tabs('tabs_category_style');
694
695	$this->start_controls_tab(
696	'tab_category_normal',
697	[
698	'label' => esc_html__('Normal', 'ultimate-post-kit'),
699	]
700	);
701
702	$this->add_control(
703	'category_color',
704	[
705	'label' => esc_html__('Color', 'ultimate-post-kit'),
706	'type' => Controls_Manager::COLOR,
707	'selectors' => [
708	'{{WRAPPER}} .upk-alex-carousel .upk-category a' => 'color: {{VALUE}};',
709	],
710	]
711	);
712
713	$this->add_group_control(
714	Group_Control_Background::get_type(),
715	[
716	'name' => 'category_background',
717	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-category a',
718	]
719	);
720
721	$this->add_group_control(
722	Group_Control_Border::get_type(),
723	[
724	'name' => 'category_border',
725	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-category a',
726	]
727	);
728
729	$this->add_responsive_control(
730	'category_border_radius',
731	[
732	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
733	'type' => Controls_Manager::DIMENSIONS,
734	'size_units' => ['px', '%'],
735	'selectors' => [
736	'{{WRAPPER}} .upk-alex-carousel .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
737	],
738	]
739	);
740
741	$this->add_responsive_control(
742	'category_padding',
743	[
744	'label' => esc_html__('Padding', 'ultimate-post-kit'),
745	'type' => Controls_Manager::DIMENSIONS,
746	'size_units' => ['px', 'em', '%'],
747	'selectors' => [
748	'{{WRAPPER}} .upk-alex-carousel .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
749	],
750	]
751	);
752
753	$this->add_responsive_control(
754	'category_spacing',
755	[
756	'label' => esc_html__('Spacing Between', 'ultimate-post-kit'),
757	'type' => Controls_Manager::SLIDER,
758	'range' => [
759	'px' => [
760	'min' => 0,
761	'max' => 50,
762	'step' => 2,
763	],
764	],
765	'selectors' => [
766	'{{WRAPPER}} .upk-alex-carousel .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
767	],
768	]
769	);
770
771	$this->add_group_control(
772	Group_Control_Box_Shadow::get_type(),
773	[
774	'name' => 'category_shadow',
775	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-category a',
776	]
777	);
778
779	$this->add_group_control(
780	Group_Control_Typography::get_type(),
781	[
782	'name' => 'category_typography',
783	'label' => esc_html__('Typography', 'ultimate-post-kit'),
784	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-category a',
785	]
786	);
787
788	$this->end_controls_tab();
789
790	$this->start_controls_tab(
791	'tab_category_hover',
792	[
793	'label' => esc_html__('Hover', 'ultimate-post-kit'),
794	'condition' => [
795	'show_category' => 'yes'
796	]
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-alex-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-alex-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-alex-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	$this->start_controls_section(
840	'section_style_readmore',
841	[
842	'label' => esc_html__('Read More', 'ultimate-post-kit'),
843	'tab' => Controls_Manager::TAB_STYLE,
844	'condition' => [
845	'show_readmore' => 'yes',
846	],
847	]
848	);
849
850	$this->start_controls_tabs('tabs_readmore_style');
851
852	$this->start_controls_tab(
853	'tab_readmore_normal',
854	[
855	'label' => esc_html__('Normal', 'ultimate-post-kit'),
856	]
857	);
858
859	$this->add_control(
860	'readmore_text_color',
861	[
862	'label' => esc_html__('Color', 'ultimate-post-kit'),
863	'type' => Controls_Manager::COLOR,
864	'selectors' => [
865	'{{WRAPPER}} .upk-alex-carousel .upk-readmore .upk-readmore-icon:before, {{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore .upk-readmore-icon span:before, {{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore .upk-readmore-icon span:after' => 'background: {{VALUE}};',
866	],
867	]
868	);
869
870	$this->add_group_control(
871	Group_Control_Background::get_type(),
872	[
873	'name' => 'readmore_background',
874	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-readmore',
875	]
876	);
877
878	$this->add_group_control(
879	Group_Control_Border::get_type(),
880	[
881	'name' => 'readmore_border',
882	'placeholder' => '1px',
883	'default' => '1px',
884	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-readmore'
885	]
886	);
887
888	$this->add_responsive_control(
889	'readmore_radius',
890	[
891	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
892	'type' => Controls_Manager::DIMENSIONS,
893	'size_units' => ['px', '%'],
894	'selectors' => [
895	'{{WRAPPER}} .upk-alex-carousel .upk-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
896	],
897	]
898	);
899
900	$this->add_responsive_control(
901	'readmore_primary_padding',
902	[
903	'label' => esc_html__('Padding', 'ultimate-post-kit'),
904	'type' => Controls_Manager::DIMENSIONS,
905	'size_units' => ['px', 'em', '%'],
906	'selectors' => [
907	'{{WRAPPER}} .upk-alex-carousel .upk-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
908	'{{WRAPPER}} .upk-alex-carousel .upk-button-wrap' => 'margin-bottom: calc(-{{TOP}}px * 2);',
909	],
910	]
911	);
912
913	$this->add_group_control(
914	Group_Control_Box_Shadow::get_type(),
915	[
916	'name' => 'readmore_shadow',
917	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-readmore',
918	]
919	);
920
921	$this->end_controls_tab();
922
923	$this->start_controls_tab(
924	'tab_readmore_hover',
925	[
926	'label' => esc_html__('Hover', 'ultimate-post-kit'),
927	]
928	);
929
930	$this->add_control(
931	'readmore_hover_text_color',
932	[
933	'label' => esc_html__('Color', 'ultimate-post-kit'),
934	'type' => Controls_Manager::COLOR,
935	'selectors' => [
936	'{{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore .upk-readmore-icon:before, {{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore .upk-readmore-icon span:before, {{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore .upk-readmore-icon span:after' => 'background: {{VALUE}};',
937	],
938	]
939	);
940
941	$this->add_group_control(
942	Group_Control_Background::get_type(),
943	[
944	'name' => 'readmore_hover_background',
945	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore',
946	]
947	);
948
949	$this->add_control(
950	'readmore_hover_border_color',
951	[
952	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
953	'type' => Controls_Manager::COLOR,
954	'selectors' => [
955	'{{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore' => 'border-color: {{VALUE}};',
956	],
957	'condition' => [
958	'readmore_border_border!' => ''
959	]
960	]
961	);
962
963	$this->add_group_control(
964	Group_Control_Box_Shadow::get_type(),
965	[
966	'name' => 'readmore_hover_shadow',
967	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-item:hover .upk-readmore',
968	]
969	);
970
971	$this->end_controls_tab();
972
973	$this->end_controls_tabs();
974
975	$this->end_controls_section();
976
977	$this->start_controls_section(
978	'section_style_author',
979	[
980	'label' => esc_html__('Meta', 'ultimate-post-kit') . BDTUPK_UC,
981	'tab' => Controls_Manager::TAB_STYLE,
982	'conditions' => [
983	'relation' => 'or',
984	'terms' => [
985	[
986	'name' => 'show_author',
987	'value' => 'yes'
988	],
989	[
990	'name' => 'show_date',
991	'value' => 'yes'
992	],
993	[
994	'name' => 'show_reading_time',
995	'value' => 'yes'
996	]
997	]
998	],
999	]
1000	);
1001
1002	$this->start_controls_tabs('tabs_author_date_style');
1003
1004	$this->start_controls_tab(
1005	'tab_avatar_normal',
1006	[
1007	'label' => esc_html__('Avatar', 'ultimate-post-kit'),
1008	'condition' => [
1009	'show_author' => 'yes',
1010	],
1011	]
1012	);
1013
1014	$this->add_responsive_control(
1015	'author_image_size',
1016	[
1017	'label' => esc_html__('Size', 'ultimate-post-kit'),
1018	'type' => Controls_Manager::SLIDER,
1019	'range' => [
1020	'px' => [
1021	'min' => 20,
1022	'max' => 100,
1023	],
1024	],
1025	'selectors' => [
1026	'{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-author-img img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1027	],
1028	'condition' => [
1029	'show_author' => 'yes',
1030	],
1031	]
1032	);
1033
1034	$this->add_responsive_control(
1035	'author_image_spacing',
1036	[
1037	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
1038	'type' => Controls_Manager::SLIDER,
1039	'range' => [
1040	'px' => [
1041	'min' => 0,
1042	'max' => 50,
1043	],
1044	],
1045	'selectors' => [
1046	'{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-author-img img' => 'margin-right: {{SIZE}}{{UNIT}};',
1047	],
1048	'condition' => [
1049	'show_author' => 'yes',
1050	],
1051	]
1052	);
1053
1054	$this->add_responsive_control(
1055	'author_image_radius',
1056	[
1057	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1058	'type' => Controls_Manager::DIMENSIONS,
1059	'size_units' => ['px', '%'],
1060	'selectors' => [
1061	'{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-author-img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1062	],
1063	'condition' => [
1064	'show_author' => 'yes',
1065	],
1066	]
1067	);
1068
1069	$this->end_controls_tab();
1070
1071	$this->start_controls_tab(
1072	'tab_author_name_normal',
1073	[
1074	'label' => esc_html__('Author Name', 'ultimate-post-kit'),
1075	'condition' => [
1076	'show_author' => 'yes',
1077	],
1078	]
1079	);
1080
1081	$this->add_control(
1082	'author_name_color',
1083	[
1084	'label' => esc_html__('Color', 'ultimate-post-kit'),
1085	'type' => Controls_Manager::COLOR,
1086	'selectors' => [
1087	'{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-author-name a' => 'color: {{VALUE}};',
1088	],
1089	'condition' => [
1090	'show_author' => 'yes',
1091	],
1092	]
1093	);
1094
1095	$this->add_control(
1096	'author_name_hover_color',
1097	[
1098	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
1099	'type' => Controls_Manager::COLOR,
1100	'selectors' => [
1101	'{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-author-name a:hover' => 'color: {{VALUE}};',
1102	],
1103	'condition' => [
1104	'show_author' => 'yes',
1105	],
1106	]
1107	);
1108
1109	$this->add_group_control(
1110	Group_Control_Typography::get_type(),
1111	[
1112	'name' => 'author_name_typography',
1113	'label' => esc_html__('Typography', 'ultimate-post-kit'),
1114	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-author-name a',
1115	'condition' => [
1116	'show_author' => 'yes',
1117	],
1118	]
1119	);
1120
1121	$this->end_controls_tab();
1122	$this->start_controls_tab(
1123	'tab_date_normal',
1124	[
1125	'label' => esc_html__('Date', 'ultimate-post-kit'),
1126	'conditions' => [
1127	'relation' => 'or',
1128	'terms' => [
1129	[
1130	'name' => 'show_date',
1131	'value' => 'yes'
1132	],
1133	[
1134	'name' => 'show_reading_time',
1135	'value' => 'yes'
1136	]
1137	]
1138	],
1139	]
1140	);
1141
1142	$this->add_control(
1143	'date_color',
1144	[
1145	'label' => esc_html__('Color', 'ultimate-post-kit'),
1146	'type' => Controls_Manager::COLOR,
1147	'selectors' => [
1148	'{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-date, {{WRAPPER}} .upk-alex-carousel .upk-meta .upk-post-time, {{WRAPPER}} .upk-alex-carousel .upk-meta .upk-reading-time' => 'color: {{VALUE}};',
1149	],
1150	'conditions' => [
1151	'relation' => 'or',
1152	'terms' => [
1153	[
1154	'name' => 'show_date',
1155	'value' => 'yes'
1156	],
1157	[
1158	'name' => 'show_reading_time',
1159	'value' => 'yes'
1160	]
1161	]
1162	],
1163	]
1164	);
1165
1166	$this->add_responsive_control(
1167	'meta_spacing',
1168	[
1169	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
1170	'type' => Controls_Manager::SLIDER,
1171	'range' => [
1172	'px' => [
1173	'min' => 0,
1174	'max' => 50,
1175	],
1176	],
1177	'selectors' => [
1178	'{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-date-reading-wrap > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
1179	],
1180	'condition' => [
1181	'show_reading_time' => 'yes',
1182	],
1183	]
1184	);
1185
1186	$this->add_group_control(
1187	Group_Control_Typography::get_type(),
1188	[
1189	'name' => 'date_typography',
1190	'label' => esc_html__('Typography', 'ultimate-post-kit'),
1191	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-meta .upk-date, {{WRAPPER}} .upk-alex-carousel .upk-meta .upk-post-time, {{WRAPPER}} .upk-alex-carousel .upk-meta .upk-reading-time',
1192	'conditions' => [
1193	'relation' => 'or',
1194	'terms' => [
1195	[
1196	'name' => 'show_date',
1197	'value' => 'yes'
1198	],
1199	[
1200	'name' => 'show_reading_time',
1201	'value' => 'yes'
1202	]
1203	]
1204	],
1205	]
1206	);
1207
1208	$this->end_controls_tab();
1209	$this->end_controls_tabs();
1210
1211	$this->end_controls_section();
1212
1213	$this->start_controls_section(
1214	'section_style_post_format',
1215	[
1216	'label' => esc_html__('Post Format', 'ultimate-post-kit'),
1217	'tab' => Controls_Manager::TAB_STYLE,
1218	'condition' => [
1219	'show_post_format' => 'yes'
1220	]
1221	]
1222	);
1223
1224	$this->add_control(
1225	'post_format_color',
1226	[
1227	'label' => esc_html__('Color', 'ultimate-post-kit'),
1228	'type' => Controls_Manager::COLOR,
1229	'selectors' => [
1230	'{{WRAPPER}} .upk-alex-carousel .upk-post-format a' => 'color: {{VALUE}};',
1231	],
1232	]
1233	);
1234
1235	$this->add_control(
1236	'overlay_blur_effect_post_format',
1237	[
1238	'label' => esc_html__('Glassmorphism', 'ultimate-post-kit'),
1239	'type' => Controls_Manager::SWITCHER,
1240	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
1241	'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1s look here %2s', 'ultimate-post-kit'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
1242	'default' => 'yes',
1243	'separator' => 'before'
1244	]
1245	);
1246
1247	$this->add_control(
1248	'overlay_blur_level_post_format',
1249	[
1250	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
1251	'type' => Controls_Manager::SLIDER,
1252	'range' => [
1253	'px' => [
1254	'min' => 0,
1255	'step' => 1,
1256	'max' => 50,
1257	]
1258	],
1259	'default' => [
1260	'size' => 10
1261	],
1262	'selectors' => [
1263	'{{WRAPPER}} .upk-alex-carousel .upk-post-format a' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
1264	],
1265	'condition' => [
1266	'overlay_blur_effect_post_format' => 'yes'
1267	]
1268	]
1269	);
1270
1271	$this->add_group_control(
1272	Group_Control_Background::get_type(),
1273	[
1274	'name' => 'post_format_background',
1275	'label' => esc_html__('Background', 'ultimate-post-kit'),
1276	'types' => ['classic', 'gradient'],
1277	'exclude' => ['image'],
1278	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-post-format a',
1279	'fields_options' => [
1280	'background' => [
1281	'default' => 'classic',
1282	],
1283	'color' => [
1284	'default' => 'rgba(43, 45, 66, 0.3)',
1285	],
1286	]
1287	]
1288	);
1289
1290	$this->add_group_control(
1291	Group_Control_Border::get_type(),
1292	[
1293	'name' => 'post_format_border',
1294	'selector' => '{{WRAPPER}} .upk-alex-carousel .upk-post-format a',
1295	'separator' => 'before'
1296	]
1297	);
1298
1299	$this->add_responsive_control(
1300	'post_format_border_radius',
1301	[
1302	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1303	'type' => Controls_Manager::DIMENSIONS,
1304	'size_units' => ['px', '%'],
1305	'selectors' => [
1306	'{{WRAPPER}} .upk-alex-carousel .upk-post-format a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1307	],
1308	]
1309	);
1310
1311	$this->add_responsive_control(
1312	'post_format_padding',
1313	[
1314	'label' => esc_html__('Padding', 'ultimate-post-kit'),
1315	'type' => Controls_Manager::DIMENSIONS,
1316	'size_units' => ['px', 'em', '%'],
1317	'selectors' => [
1318	'{{WRAPPER}} .upk-alex-carousel .upk-post-format a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1319	],
1320	]
1321	);
1322
1323	$this->add_responsive_control(
1324	'post_format_margin',
1325	[
1326	'label' => esc_html__('Margin', 'ultimate-post-kit'),
1327	'type' => Controls_Manager::DIMENSIONS,
1328	'size_units' => ['px', 'em', '%'],
1329	'selectors' => [
1330	'{{WRAPPER}} .upk-alex-carousel .upk-post-format' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1331	],
1332	]
1333	);
1334
1335	$this->add_responsive_control(
1336	'post_format_size',
1337	[
1338	'label' => esc_html__('Size', 'ultimate-post-kit'),
1339	'type' => Controls_Manager::SLIDER,
1340	'range' => [
1341	'px' => [
1342	'min' => 0,
1343	'max' => 50,
1344	],
1345	],
1346	'selectors' => [
1347	'{{WRAPPER}} .upk-alex-carousel .upk-post-format a' => 'font-size: {{SIZE}}{{UNIT}};',
1348	],
1349	]
1350	);
1351
1352	$this->end_controls_section();
1353
1354	//Navigation Global Controls
1355	$this->register_navigation_style('swiper');
1356	}
1357
1358	/**
1359	* Main query render for this widget
1360	* @param $posts_per_page number item query limit
1361	*/
1362	public function query_posts($posts_per_page) {
1363
1364	$default = $this->getGroupControlQueryArgs();
1365	$args = [];
1366	if ($posts_per_page) {
1367	$args['posts_per_page'] = $posts_per_page;
1368	// $args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
1369	}
1370	$args = array_merge($default, $args);
1371	$this->_query = new WP_Query($args);
1372	}
1373
1374	public function render_readmore() {
1375
1376	if (!$this->get_settings('show_readmore')) {
1377	return;
1378	}
1379
1380	?>
1381	<div class="upk-button-wrap">
1382	<a
1383	href="<?php echo esc_url(get_permalink()); ?>"
1384	class="upk-readmore"
1385	aria-label="<?php echo esc_attr__( 'Read More Button', 'ultimate-post-kit' ); ?>"
1386	>
1387	<span class="upk-readmore-icon"><span></span></span>
1388	</a>
1389	</div>
1390	<?php
1391	}
1392
1393	public function render_author_date() {
1394	$settings = $this->get_settings_for_display();
1395
1396	if ($settings['show_author'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
1397	<div class="upk-meta">
1398	<?php if ($settings['show_author']) : ?>
1399	<div class="upk-author-img">
1400	<?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
1401	</div>
1402	<?php endif; ?>
1403	<div>
1404	<?php if ($settings['show_author']) : ?>
1405	<div class="upk-author-name">
1406	<a
1407	href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>"
1408	aria-label="<?php echo esc_attr( 'View all posts by ' . get_the_author() ); ?>"
1409	>
1410	<?php echo esc_html( get_the_author() ) ?>
1411	</a>
1412	</div>
1413	<?php endif; ?>
1414
1415	<div class="upk-flex upk-flex-middle upk-date-reading-wrap">
1416	<?php if ('yes' === $settings['show_date']) : ?>
1417	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1418	<?php $this->render_date(); ?>
1419	</div>
1420	<?php endif; ?>
1421
1422	<?php if (_is_upk_pro_activated()) :
1423	if ('yes' === $settings['show_reading_time']) : ?>
1424	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1425	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
1426	</div>
1427	<?php endif; ?>
1428	<?php endif; ?>
1429	</div>
1430	</div>
1431	</div>
1432	<?php endif;
1433	}
1434
1435	public function render_header() {
1436
1437	$settings = $this->get_settings_for_display();
1438
1439	//Global Function
1440	$this->render_header_attribute('alex');
1441
1442	?>
1443	<div <?php $this->print_render_attribute_string('carousel'); ?>>
1444	<div class="upk-alex-wrap upk-content-<?php echo esc_html($settings['content_position']) ?>">
1445	<div <?php $this->print_render_attribute_string('swiper'); ?>>
1446	<div class="swiper-wrapper">
1447	<?php
1448	}
1449
1450	public function render_post_grid_item($post_id, $image_size) {
1451	$settings = $this->get_settings_for_display();
1452
1453	if ('yes' == $settings['global_link']) {
1454
1455	$this->add_render_attribute('grid-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
1456	}
1457
1458	$this->add_render_attribute('grid-item', 'class', 'upk-item swiper-slide', true);
1459
1460	?>
1461	<div <?php $this->print_render_attribute_string('grid-item'); ?>>
1462	<div class="upk-image-wrap">
1463	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1464
1465	<?php $this->render_author_date(); ?>
1466
1467	<?php $this->render_post_format(); ?>
1468
1469	<div class="upk-content-wrap">
1470
1471	<div class="upk-content">
1472	<?php $this->render_category(); ?>
1473	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1474	</div>
1475	<?php $this->render_readmore(); ?>
1476
1477
1478	</div>
1479	</div>
1480	</div>
1481	<?php
1482	}
1483
1484	public function render() {
1485	$settings = $this->get_settings_for_display();
1486
1487	$this->query_posts($settings['item_limit']['size']);
1488	$wp_query = $this->get_query();
1489
1490	if (!$wp_query->found_posts) {
1491	return;
1492	}
1493
1494	$this->render_header();
1495
1496	while ($wp_query->have_posts()) {
1497	$wp_query->the_post();
1498	$thumbnail_size = $settings['primary_thumbnail_size'];
1499	$this->render_post_grid_item(get_the_ID(), $thumbnail_size);
1500	}
1501
1502	wp_reset_postdata();
1503
1504	$this->render_footer();
1505	}
1506	}
1507