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

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

1,271 lines 32.2 KB

Raw Download Zip

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