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

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