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

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

981 lines 27.5 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\CategoryCarousel\Widgets;
4
5	use UltimatePostKit\Base\Module_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Typography;
9	use Elementor\Group_Control_Box_Shadow;
10	use Elementor\Group_Control_Image_Size;
11	use Elementor\Group_Control_Background;
12	use Elementor\Utils;
13	use Elementor\Plugin;
14	use UltimatePostKit\Traits\Global_Widget_Controls;
15	use UltimatePostKit\Traits\Global_Widget_Functions;
16	use UltimatePostKit\Traits\Global_Swiper_Functions;
17
18	if (!defined('ABSPATH')) {
19	exit;
20	} // Exit if accessed directly
21
22	class Category_Carousel extends Module_Base {
23	use Global_Widget_Controls;
24	use Global_Widget_Functions;
25	use Global_Swiper_Functions;
26	private $_query = null;
27
28	public function get_name() {
29	return 'upk-category-carousel';
30	}
31
32	public function get_title() {
33	return BDTUPK . esc_html__('Category Carousel', 'ultimate-post-kit');
34	}
35
36	public function get_icon() {
37	return 'upk-widget-icon upk-icon-category-carousel';
38	}
39
40	public function get_categories() {
41	return ['ultimate-post-kit'];
42	}
43
44	public function get_keywords() {
45	return ['post', 'carousel', 'blog', 'recent', 'news', 'elite'];
46	}
47
48	public function get_style_depends() {
49	if ($this->upk_is_edit_mode()) {
50	return ['swiper', 'upk-all-styles'];
51	} else {
52	return ['swiper', 'upk-font', 'upk-category-carousel'];
53	}
54	}
55
56	public function get_script_depends() {
57	if ($this->upk_is_edit_mode()) {
58	return ['swiper', 'upk-all-scripts'];
59	} else {
60	return ['swiper', 'upk-category-carousel'];
61	}
62	}
63
64	public function get_custom_help_url() {
65	return 'https://youtu.be/kNA3mYIMkLM';
66	}
67
68
69	public function get_query() {
70	return $this->_query;
71	}
72
73	public function has_widget_inner_wrapper(): bool {
74	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
75	}
76
77
78	protected function register_controls() {
79	$image_settings = ultimate_post_kit_option('category_image', 'ultimate_post_kit_other_settings', 'off');
80	$this->start_controls_section(
81	'section_content_layout',
82	[
83	'label' => esc_html__('Layout', 'ultimate-post-kit'),
84	]
85	);
86
87	$this->add_control(
88	'skin_layout',
89	[
90	'label' => __('Skin', 'ultimate-post-kit'),
91	'type' => Controls_Manager::SELECT,
92	'default' => 'style-1',
93	'options' => [
94	'style-1' => __('Style 1', 'ultimate-post-kit'),
95	'style-2' => __('Style 2', 'ultimate-post-kit'),
96	'style-3' => __('Style 3', 'ultimate-post-kit'),
97	'style-4' => __('Style 4', 'ultimate-post-kit'),
98	'style-5' => __('Style 5', 'ultimate-post-kit'),
99	// 'style-6' => __('Style 6', 'ultimate-post-kit'),
100	],
101	]
102	);
103	$this->add_responsive_control(
104	'columns',
105	[
106	'label' => __('Columns', 'ultimate-post-kit'),
107	'type' => Controls_Manager::SELECT,
108	'default' => 3,
109	'tablet_default' => 2,
110	'mobile_default' => 1,
111	'options' => [
112	1 => '1',
113	2 => '2',
114	3 => '3',
115	4 => '4',
116	5 => '5',
117	6 => '6',
118	],
119	]
120	);
121
122	$this->add_responsive_control(
123	'item_gap',
124	[
125	'label' => __('Item Gap', 'ultimate-post-kit'),
126	'type' => Controls_Manager::SLIDER,
127	'default' => [
128	'size' => 20,
129	],
130	'tablet_default' => [
131	'size' => 20,
132	],
133	'mobile_default' => [
134	'size' => 20,
135	],
136	'range' => [
137	'px' => [
138	'min' => 0,
139	'max' => 100,
140	],
141	],
142	]
143	);
144	$this->add_responsive_control(
145	'item_height',
146	[
147	'label' => esc_html__('Item Height(px)', 'ultimate-post-kit'),
148	'type' => Controls_Manager::SLIDER,
149	'range' => [
150	'px' => [
151	'min' => 0,
152	'max' => 1000,
153	],
154	],
155	'selectors' => [
156	'{{WRAPPER}} .upk-category-carousel .upk-item' => 'height: {{SIZE}}{{UNIT}};',
157	'{{WRAPPER}} .upk-category-carousel .upk-category-carousel-image' => 'height: {{SIZE}}{{UNIT}};'
158	],
159	'condition' => [
160	'skin_layout!' => 'style-3'
161	]
162	]
163	);
164	$this->add_responsive_control(
165	'item_height_skin_3',
166	[
167	'label' => esc_html__('Item Height(px)', 'ultimate-post-kit'),
168	'type' => Controls_Manager::SLIDER,
169	'range' => [
170	'px' => [
171	'min' => 0,
172	'max' => 1000,
173	],
174	],
175	'selectors' => [
176	'{{WRAPPER}} .upk-category-carousel .upk-category-carousel-image' => 'height: {{SIZE}}{{UNIT}};'
177	],
178	'condition' => [
179	'skin_layout' => 'style-3'
180	]
181	]
182	);
183
184	$this->add_group_control(
185	Group_Control_Image_Size::get_type(),
186	[
187	'name' => 'primary_thumbnail',
188	'exclude' => ['custom'],
189	'default' => 'medium',
190	]
191	);
192
193	$this->end_controls_section();
194	$this->start_controls_section(
195	'section_post_grid_query',
196	[
197	'label' => esc_html__('Query', 'ultimate-post-kit'),
198	]
199	);
200
201	// $this->add_control(
202	// 'item_limit',
203	// [
204	// 'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
205	// 'type' => Controls_Manager::SLIDER,
206	// 'range' => [
207	// 'px' => [
208	// 'min' => 1,
209	// 'max' => 50,
210	// ],
211	// ],
212	// 'default' => [
213	// 'size' => 6,
214	// ],
215	// ]
216	// );
217
218	$this->add_control(
219	'taxonomy',
220	[
221	'label' => esc_html__('Taxonomy', 'ultimate-post-kit'),
222	'type' => Controls_Manager::SELECT,
223	'default' => 'category',
224	'options' => ultimate_post_kit_get_taxonomies(),
225	]
226	);
227
228	$this->add_control(
229	'orderby',
230	[
231	'label' => esc_html__('Order By', 'ultimate-post-kit'),
232	'type' => Controls_Manager::SELECT,
233	'default' => 'name',
234	'options' => [
235	'name' => esc_html__('Name', 'ultimate-post-kit'),
236	'post_date' => esc_html__('Date', 'ultimate-post-kit'),
237	'post_title' => esc_html__('Title', 'ultimate-post-kit'),
238	'menu_order' => esc_html__('Menu Order', 'ultimate-post-kit'),
239	'rand' => esc_html__('Random', 'ultimate-post-kit'),
240	],
241	]
242	);
243
244	$this->add_control(
245	'order',
246	[
247	'label' => esc_html__('Order', 'ultimate-post-kit'),
248	'type' => Controls_Manager::SELECT,
249	'default' => 'asc',
250	'options' => [
251	'asc' => esc_html__('ASC', 'ultimate-post-kit'),
252	'desc' => esc_html__('DESC', 'ultimate-post-kit'),
253	],
254	]
255	);
256	// $this->add_control(
257	// 'include',
258	// [
259	// 'label' => esc_html__('Include', 'ultimate-post-kit'),
260	// 'type' => Controls_Manager::TEXT,
261	// 'placeholder' => __('Category ID: 12,3,1', 'ultimate-post-kit'),
262	// ]
263	// );
264	$this->add_control(
265	'exclude',
266	[
267	'label' => esc_html__('Exclude', 'ultimate-post-kit'),
268	'type' => Controls_Manager::TEXT,
269	'placeholder' => __('Category ID: 12,3,1', 'ultimate-post-kit'),
270	]
271	);
272	$this->add_control(
273	'parent',
274	[
275	'label' => esc_html__('Parent', 'ultimate-post-kit'),
276	'type' => Controls_Manager::TEXT,
277	'placeholder' => __('Category ID: 12', 'ultimate-post-kit'),
278	]
279	);
280	// $this->add_control(
281	// 'hide_empty',
282	// [
283	// 'label' => esc_html__('Hide Empty', 'ultimate-post-kit'),
284	// 'type' => Controls_Manager::SWITCHER,
285	// ]
286	// );
287
288
289	$this->end_controls_section();
290	$this->start_controls_section(
291	'section_content_additional',
292	[
293	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
294	]
295	);
296
297	$this->add_control(
298	'show_image',
299	[
300	'label' => esc_html__('Show Image', 'ultimate-post-kit'),
301	'type' => Controls_Manager::SWITCHER,
302	'default' => 'yes',
303	]
304	);
305
306	$this->add_control(
307	'show_count',
308	[
309	'label' => esc_html__('Show Count', 'ultimate-post-kit'),
310	'type' => Controls_Manager::SWITCHER,
311	'default' => 'yes',
312	]
313	);
314	$this->add_control(
315	'show_text',
316	[
317	'label' => esc_html__('Show Text', 'ultimate-post-kit'),
318	'type' => Controls_Manager::SWITCHER,
319	'default' => 'yes',
320	]
321	);
322	$this->add_control(
323	'count_text_label',
324	[
325	'label' => esc_html__('Count Label', 'ultimate-post-kit'),
326	'type' => Controls_Manager::TEXT,
327	'placeholder' => esc_html__('Posts', 'ultimate-post-kit'),
328	'default' => esc_html__('Posts', 'ultimate-post-kit'),
329	'condition' => [
330	'show_text' => 'yes'
331	]
332	]
333	);
334	$this->add_control(
335	'item_match_height',
336	[
337	'label' => __('Item Match Height', 'ultimate-post-kit'),
338	'type' => Controls_Manager::SWITCHER,
339	'default' => 'yes',
340	'prefix_class' => 'upk-item-match-height--',
341	'separator' => 'before'
342	]
343	);
344
345	$this->end_controls_section();
346
347	//Navigaation Global Controls
348	$this->register_navigation_controls('category');
349
350	//Style
351	$this->start_controls_section(
352	'section_style_item',
353	[
354	'label' => esc_html__('Item', 'ultimate-post-kit'),
355	'tab' => Controls_Manager::TAB_STYLE,
356	]
357	);
358	$this->start_controls_tabs(
359	'item_tabs'
360	);
361	$this->start_controls_tab(
362	'item_tab_normal',
363	[
364	'label' => esc_html__('Normal', 'ultimate-post-kit'),
365	]
366	);
367	$this->add_group_control(
368	Group_Control_Background::get_type(),
369	[
370	'name' => 'items_background',
371	'label' => esc_html__('Backgrund', 'ultimate-post-kit'),
372	'types' => ['classic', 'gradient'],
373	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-category-carousel-image',
374	]
375	);
376	$this->add_control(
377	'item_overlay',
378	[
379	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
380	'type' => Controls_Manager::COLOR,
381	'selectors' => [
382	'{{WRAPPER}} .upk-category-carousel .upk-item-overlay' => 'background: {{VALUE}}',
383	],
384	'condition' => [
385	'skin_layout!' => ['style-3']
386	]
387	]
388	);
389	$this->add_control(
390	'item_overlay_blur_effect',
391	[
392	'label' => esc_html__('Glassmorphism', 'ultimate-post-kit'),
393	'type' => Controls_Manager::SWITCHER,
394	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
395	'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>'),
396	'default' => 'yes',
397	'condition' => [
398	'skin_layout' => [
399	'style-5',
400	]
401	]
402	]
403	);
404
405	$this->add_control(
406	'item_overlay_blur_level',
407	[
408	'label' => __('Blur Level', 'ultimate-post-kit'),
409	'type' => Controls_Manager::SLIDER,
410	'range' => [
411	'px' => [
412	'min' => 0,
413	'step' => 1,
414	'max' => 50,
415	]
416	],
417	'default' => [
418	'size' => 10
419	],
420	'selectors' => [
421	'{{WRAPPER}} .upk-category-carousel.style-5 .upk-category-carousel-image:before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
422	],
423	'condition' => [
424	'item_overlay_blur_effect' => 'yes',
425	'skin_layout' => [
426	'style-5'
427	]
428	]
429	]
430	);
431
432	$this->add_group_control(
433	Group_Control_Background::get_type(),
434	[
435	'name' => 'item_background',
436	'selector' => '{{WRAPPER}} .upk-category-carousel.style-5 .upk-category-carousel-image:before',
437	'condition' => [
438	'skin_layout' => [
439	'style-5'
440	]
441	]
442	]
443	);
444	$this->add_responsive_control(
445	'item_padding',
446	[
447	'label' => esc_html__('Padding', 'ultimate-post-kit'),
448	'type' => Controls_Manager::DIMENSIONS,
449	'size_units' => ['px', '%', 'em'],
450	'selectors' => [
451	'{{WRAPPER}} .upk-category-carousel .upk-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
452	],
453	]
454	);
455	$this->add_responsive_control(
456	'item_margin',
457	[
458	'label' => esc_html__('Margin', 'ultimate-post-kit'),
459	'type' => Controls_Manager::DIMENSIONS,
460	'size_units' => ['px', '%', 'em'],
461	'selectors' => [
462	'{{WRAPPER}} .upk-category-carousel .upk-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
463	],
464	]
465	);
466	$this->add_group_control(
467	Group_Control_Border::get_type(),
468	[
469	'name' => 'item_border',
470	'label' => esc_html__('Border', 'ultimate-post-kit'),
471	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item',
472	]
473	);
474	$this->add_responsive_control(
475	'item_radius',
476	[
477	'label' => esc_html__('Radius', 'ultimate-post-kit'),
478	'type' => Controls_Manager::DIMENSIONS,
479	'size_units' => ['px', '%', 'em'],
480	'selectors' => [
481	'{{WRAPPER}} .upk-category-carousel .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
482	],
483	]
484	);
485
486	// $this->add_group_control(
487	// Group_Control_Box_Shadow::get_type(),
488	// [
489	// 'name' => 'item_shadow',
490	// 'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item',
491	// ]
492	// );
493	$this->end_controls_tab();
494	$this->start_controls_tab(
495	'item_tab_hover',
496	[
497	'label' => esc_html__('Hover', 'ultimate-post-kit'),
498	]
499	);
500	$this->add_group_control(
501	Group_Control_Background::get_type(),
502	[
503	'name' => 'items_hover_background',
504	'label' => esc_html__('Backgrund', 'ultimate-post-kit'),
505	'types' => ['classic', 'gradient'],
506	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item:hover .upk-category-carousel-image',
507	'condition' => [
508	'skin_layout!' => 'style-5'
509	]
510	]
511	);
512	$this->add_control(
513	'item_overlay_hover',
514	[
515	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
516	'type' => Controls_Manager::COLOR,
517	'selectors' => [
518	'{{WRAPPER}} .upk-category-carousel .upk-item:hover .upk-item-overlay' => 'background: {{VALUE}}',
519	],
520	'condition' => [
521	'skin_layout!' => ['style-3']
522	]
523	]
524	);
525	$this->add_control(
526	'item_hover_border_color',
527	[
528	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
529	'type' => Controls_Manager::COLOR,
530	'selectors' => [
531	'{{WRAPPER}} .upk-category-carousel .upk-item:hover' => 'border-color: {{VALUE}}',
532	],
533	]
534	);
535	$this->end_controls_tab();
536	$this->end_controls_tabs();
537	$this->end_controls_section();
538
539	$this->start_controls_section(
540	'section_style_content',
541	[
542	'label' => esc_html__('Content', 'ultimate-post-kit'),
543	'tab' => Controls_Manager::TAB_STYLE,
544	'condition' => [
545	'skin_layout' => [
546	'style-1'
547	]
548	]
549	]
550	);
551	$this->start_controls_tabs(
552	'content_tabs'
553	);
554	$this->start_controls_tab(
555	'content_tab_normal',
556	[
557	'label' => esc_html__('Normal', 'ultimate-post-kit'),
558	]
559	);
560
561	$this->add_group_control(
562	Group_Control_Background::get_type(),
563	[
564	'name' => 'content_background',
565	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content',
566	'condition' => [
567	'skin_layout' => 'style-1'
568	]
569	]
570	);
571
572	$this->add_responsive_control(
573	'content_padding',
574	[
575	'label' => esc_html__('Padding', 'ultimate-post-kit'),
576	'type' => Controls_Manager::DIMENSIONS,
577	'size_units' => ['px', '%', 'em'],
578	'selectors' => [
579	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
580	],
581	]
582	);
583	$this->add_responsive_control(
584	'content_margin',
585	[
586	'label' => esc_html__('Margin', 'ultimate-post-kit'),
587	'type' => Controls_Manager::DIMENSIONS,
588	'size_units' => ['px', '%', 'em'],
589	'selectors' => [
590	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
591	],
592	]
593	);
594	$this->add_group_control(
595	Group_Control_Border::get_type(),
596	[
597	'name' => 'content_border',
598	'label' => esc_html__('Border', 'ultimate-post-kit'),
599	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content',
600	]
601	);
602	$this->add_responsive_control(
603	'content_radius',
604	[
605	'label' => esc_html__('Radius', 'ultimate-post-kit'),
606	'type' => Controls_Manager::DIMENSIONS,
607	'size_units' => ['px', '%', 'em'],
608	'selectors' => [
609	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
610	],
611	]
612	);
613
614	$this->add_group_control(
615	Group_Control_Box_Shadow::get_type(),
616	[
617	'name' => 'content_shadow',
618	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content',
619	]
620	);
621	$this->end_controls_tab();
622	$this->start_controls_tab(
623	'content_tab_hover',
624	[
625	'label' => esc_html__('Hover', 'ultimate-post-kit'),
626	]
627	);
628	$this->add_control(
629	'content_hover_border_color',
630	[
631	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
632	'type' => Controls_Manager::COLOR,
633	'selectors' => [
634	'{{WRAPPER}} .upk-category-carousel .upk-item:hover .upk-content' => 'border-color: {{VALUE}}',
635	],
636	]
637	);
638	$this->add_group_control(
639	Group_Control_Box_Shadow::get_type(),
640	[
641	'name' => 'content_hover_shadow',
642	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item:hover .upk-content',
643	]
644	);
645	$this->end_controls_tab();
646	$this->end_controls_tabs();
647	$this->end_controls_section();
648	$this->start_controls_section(
649	'section_style_category',
650	[
651	'label' => esc_html__('Category', 'ultimate-post-kit'),
652	'tab' => Controls_Manager::TAB_STYLE,
653	]
654	);
655	// $this->add_responsive_control(
656	// 'category_title_spacing',
657	// [
658	// 'label' => esc_html__('Bottom Spacing', 'ultimate-post-kit'),
659	// 'type' => Controls_Manager::SLIDER,
660	// 'size_units' => ['px'],
661	// 'selectors' => [
662	// '{{WRAPPER}} .upk-cateogry-carousel .title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
663	// ],
664	// ]
665	// );
666	$this->start_controls_tabs(
667	'category_tabs'
668	);
669	$this->start_controls_tab(
670	'category_tab_normal',
671	[
672	'label' => esc_html__('Normal', 'ultimate-post-kit'),
673	]
674	);
675	$this->add_control(
676	'category_color',
677	[
678	'label' => esc_html__('Color', 'ultimate-post-kit'),
679	'type' => Controls_Manager::COLOR,
680	'selectors' => [
681	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .title' => 'color: {{VALUE}}',
682	],
683	]
684	);
685	$this->add_group_control(
686	Group_Control_Background::get_type(),
687	[
688	'name' => 'style_5_category_bg',
689	'label' => esc_html__('Backgorund', 'ultimate-post-kit'),
690	'types' => ['classic', 'gradient'],
691	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .title',
692	'condition' => [
693	'skin_layout' => [
694	'style-5'
695	]
696	]
697	]
698	);
699	$this->add_group_control(
700	Group_Control_Background::get_type(),
701	[
702	'name' => 'style_6_category_bg',
703	'label' => esc_html__('Background', 'ultimate-post-kit'),
704	'types' => ['classic', 'gradient'],
705	'selector' => '{{WRAPPER}} .upk-category-carousel.style-5 .upk-category-carousel-image:before',
706	'condition' => [
707	'skin_layout' => [
708	'style-6'
709	]
710	]
711	]
712	);
713	$this->add_responsive_control(
714	'category_margin',
715	[
716	'label' => esc_html__('Margin', 'ultimate-post-kit'),
717	'type' => Controls_Manager::DIMENSIONS,
718	'size_units' => ['px', '%'],
719	'selectors' => [
720	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
721	],
722	]
723	);
724	$this->add_responsive_control(
725	'category_padding',
726	[
727	'label' => esc_html__('Padding', 'ultimate-post-kit'),
728	'type' => Controls_Manager::DIMENSIONS,
729	'size_units' => ['px', '%'],
730	'selectors' => [
731	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
732	],
733	'condition' => [
734	'skin_layout' => [
735	'style-4'
736	]
737	]
738	]
739	);
740
741	$this->add_group_control(
742	Group_Control_Typography::get_type(),
743	[
744	'name' => 'category_typography',
745	'label' => esc_html__('Typography', 'ultimate-post-kit'),
746	'exclude' => ['line_height'],
747	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .title',
748	]
749	);
750	$this->end_controls_tab();
751	$this->start_controls_tab(
752	'category_tab_hover',
753	[
754	'label' => esc_html__('Hover', 'ultimate-post-kit'),
755	'condition' => [
756	'skin_layout!' => 'style-5'
757	]
758	]
759	);
760	$this->add_control(
761	'hover_category_color',
762	[
763	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
764	'type' => Controls_Manager::COLOR,
765	'selectors' => [
766	'{{WRAPPER}} .upk-category-carousel .upk-item:hover .upk-content .title' => 'color: {{VALUE}};',
767	],
768	]
769	);
770	$this->end_controls_tab();
771	$this->end_controls_tabs();
772	$this->end_controls_section();
773	$this->start_controls_section(
774	'section_style_count',
775	[
776	'label' => esc_html__('Count', 'ultimate-post-kit'),
777	'tab' => Controls_Manager::TAB_STYLE,
778	]
779	);
780	$this->start_controls_tabs(
781	'count_tabs'
782	);
783	$this->start_controls_tab(
784	'count_tab_normal',
785	[
786	'label' => esc_html__('Normal', 'ultimate-post-kit'),
787	'condition' => [
788	'skin_layout!' => [
789	'style-5'
790	]
791	]
792	]
793	);
794	$this->add_control(
795	'count_color',
796	[
797	'label' => esc_html__('Color', 'ultimate-post-kit'),
798	'type' => Controls_Manager::COLOR,
799	'selectors' => [
800	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .upk-category-count > *' => 'color: {{VALUE}};',
801	],
802	]
803	);
804	$this->add_group_control(
805	Group_Control_Background::get_type(),
806	[
807	'name' => 'count_background',
808	'label' => esc_html__('Background', 'ultimate-post-kit'),
809	'types' => ['classic', 'gradient'],
810	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .upk-category-count > *',
811	'condition' => [
812	'skin_layout' => [
813	'style-2'
814	]
815	]
816	]
817	);
818	$this->add_responsive_control(
819	'count_number_size',
820	[
821	'label' => esc_html__('Size', 'ultimate-post-kit'),
822	'type' => Controls_Manager::SLIDER,
823	'size_units' => ['px'],
824	'default' => [
825	'unit' => 'px',
826	'size' => 30,
827	],
828	'selectors' => [
829	'{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .upk-category-count > *' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
830	],
831	'condition' => [
832	'skin_layout' => [
833	'style-2'
834	]
835	]
836	]
837	);
838	// $this->add_responsive_control(
839	// 'count_padding',
840	// [
841	// 'label' => __('Padding', 'ultimate-post-kit'),
842	// 'type' => Controls_Manager::DIMENSIONS,
843	// 'size_units' => ['px', 'em', '%'],
844	// 'selectors' => [
845	// '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .upk-category-count > *' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
846	// ],
847	// ]
848	// );
849	$this->add_group_control(
850	Group_Control_Typography::get_type(),
851	[
852	'name' => 'count_typography',
853	'label' => esc_html__('Typography', 'ultimate-post-kit'),
854	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item .upk-content .upk-category-count > *',
855	]
856	);
857	$this->end_controls_tab();
858	$this->start_controls_tab(
859	'count_tab_hover',
860	[
861	'label' => esc_html__('Hover', 'ultimate-post-kit'),
862	]
863	);
864	$this->add_control(
865	'count_color_hover',
866	[
867	'label' => esc_html__('Color', 'ultimate-post-kit'),
868	'type' => Controls_Manager::COLOR,
869	'selectors' => [
870	'{{WRAPPER}} .upk-category-carousel .upk-item:hover .upk-content .upk-category-count > *' => 'color: {{VALUE}};',
871	],
872	]
873	);
874	$this->add_group_control(
875	Group_Control_Background::get_type(),
876	[
877	'name' => 'count_hover_background',
878	'label' => esc_html__('Background', 'ultimate-post-kit'),
879	'types' => ['classic', 'gradient'],
880	'selector' => '{{WRAPPER}} .upk-category-carousel .upk-item:hover .upk-content .upk-category-count > *',
881	'condition' => [
882	'skin_layout' => [
883	'style-2'
884	]
885	]
886	]
887	);
888	$this->end_controls_tab();
889	$this->end_controls_tabs();
890	$this->end_controls_section();
891	$this->register_navigation_style('swiper');
892	}
893
894	public function get_taxonomies() {
895	$taxonomies = get_taxonomies(['show_in_nav_menus' => true], 'objects');
896
897	$options = ['' => ''];
898
899	foreach ($taxonomies as $taxonomy) {
900	$options[$taxonomy->name] = $taxonomy->label;
901	}
902
903	return $options;
904	}
905
906	public function render_image($image_id, $size) {
907	$placeholder_image_src = Utils::get_placeholder_image_src();
908	$image_src = wp_get_attachment_image_src($image_id, $size);
909	if (!$image_src) {
910	return;
911	} else {
912	$image_src = $image_src[0];
913	}
914
915	?>
916	<img class="upk-category-carousel-img" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_html(get_the_title()); ?>">
917	<?php
918	}
919
920	public function render_header() {
921	$id = 'upk-category-carousel-' . $this->get_id();
922	$settings = $this->get_settings_for_display();
923	$this->add_render_attribute('carousel', 'class', ['upk-category-carousel', $settings['skin_layout']]);
924	$this->render_header_attribute('category');
925
926	$skin_layout = $settings['skin_layout'];
927	$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper upk-category-carousel-wrap upk-category-carousel-' . $skin_layout );
928	?>
929	<div <?php $this->print_render_attribute_string('carousel'); ?>>
930	<div class="upk-category-carousel-wrapper">
931	<div <?php $this->print_render_attribute_string('swiper'); ?>>
932	<div class="swiper-wrapper">
933	<?php
934	}
935
936	public function render_carousel_category_item() {
937	$settings = $this->get_settings_for_display();
938	$categories = get_categories(
939	[
940	'taxonomy' => $settings["taxonomy"],
941	'orderby' => $settings["orderby"],
942	'order' => $settings["order"],
943	// 'include' => explode(',', esc_attr($settings["include"])),
944	'exclude' => explode(',', esc_attr($settings["exclude"])),
945	'parent' => $settings["parent"],
946	'hide_empty' => 0,
947	]
948	);
949	if (!empty($categories)) :
950	foreach ($categories as $item_index => $cat) :
951	$this->add_render_attribute('category-item', 'class', ['swiper-slide', 'upk-item', 'category-link'], true);
952	$this->add_render_attribute('category-item', 'href', get_category_link($cat->cat_ID), true);
953	$category_image_id = get_term_meta($cat->cat_ID, 'upk-category-image-id', true); ?>
954	<a <?php $this->print_render_attribute_string('category-item'); ?>>
955	<div class="upk-category-carousel-image">
956	<?php $this->render_image($category_image_id, $settings['primary_thumbnail_size']); ?>
957	</div>
958	<div class="upk-content">
959	<h3 class="title"><?php echo esc_html($cat->cat_name); ?></h3>
960	<?php if ($settings['show_count'] === 'yes') : ?>
961	<p class="upk-category-count">
962	<?php printf('<span class="upk-count-number">%s</span>', esc_html($cat->category_count));
963	if ($settings['show_text'] === 'yes') :
964	printf('<span class="upk-count-text">%s</span>', esc_html($settings['count_text_label']));
965	endif;
966	endif; ?>
967	</p>
968	</div>
969	<div class="upk-item-overlay"></div>
970	</a>
971	<?php
972	endforeach;
973	endif;
974	}
975	public function render() {
976	$this->render_header();
977	$this->render_carousel_category_item();
978	$this->render_footer();
979	}
980	}
981