ultimate-post-kit / modules / skide-slider / widgets / skide-slider.php

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

1,208 lines 29.7 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\SkideSlider\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_Text_Stroke;
11	use Elementor\Group_Control_Image_Size;
12	use Elementor\Group_Control_Background;
13	use Elementor\Plugin;
14	use UltimatePostKit\Utils;
15
16	use UltimatePostKit\Traits\Global_Widget_Controls;
17	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
18	use UltimatePostKit\Includes\Controls\SelectInput\Dynamic_Select;
19	use WP_Query;
20
21	if (!defined('ABSPATH')) exit; // Exit if accessed directly
22
23	class Skide_Slider extends Group_Control_Query {
24
25	use Global_Widget_Controls;
26
27	private $_query = null;
28
29	public function get_name() {
30	return 'upk-skide-slider';
31	}
32
33	public function get_title() {
34	return BDTUPK . esc_html__('Skide Slider', 'ultimate-post-kit');
35	}
36
37	public function get_icon() {
38	return 'upk-widget-icon upk-icon-skide-slider';
39	}
40
41	public function get_categories() {
42	return ['ultimate-post-kit'];
43	}
44
45	public function get_keywords() {
46	return ['post', 'carousel', 'blog', 'recent', 'news', 'slider', 'skide'];
47	}
48
49	public function get_style_depends() {
50	if ($this->upk_is_edit_mode()) {
51	return ['swiper', 'upk-all-styles'];
52	} else {
53	return ['swiper', 'upk-font', 'upk-skide-slider'];
54	}
55	}
56
57	public function get_script_depends() {
58	if ($this->upk_is_edit_mode()) {
59	return ['swiper', 'upk-all-scripts'];
60	} else {
61	return ['swiper', 'upk-skide-slider'];
62	}
63	}
64
65	public function get_custom_help_url() {
66	return 'https://youtu.be/7-7PbdFi_Ks';
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	$this->start_controls_section(
80	'section_content_layout',
81	[
82	'label' => esc_html__('Layout', 'ultimate-post-kit'),
83	]
84	);
85
86	$this->add_responsive_control(
87	'item_height',
88	[
89	'label' => esc_html__('Height', 'ultimate-post-kit'),
90	'type' => Controls_Manager::SLIDER,
91	'size_units' => ['px', 'vh'],
92	'range' => [
93	'px' => [
94	'min' => 200,
95	'max' => 1080,
96	],
97	'vh' => [
98	'min' => 10,
99	'max' => 100,
100	],
101	],
102	'selectors' => [
103	'{{WRAPPER}} .upk-skide-slider .upk-skide-item' => 'height: {{SIZE}}{{UNIT}};',
104	],
105	]
106	);
107	$this->add_responsive_control(
108	'content_max_width',
109	[
110	'label' => esc_html__('Content Max Width', 'ultimate-post-kit'),
111	'type' => Controls_Manager::SLIDER,
112	'size_units' => ['px', 'vw', '%'],
113	'range' => [
114	'px' => [
115	'min' => 200,
116	'max' => 1080,
117	],
118	'vw' => [
119	'min' => 10,
120	'max' => 100,
121	],
122	'%' => [
123	'min' => 10,
124	'max' => 100,
125	],
126	],
127	'selectors' => [
128	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'max-width: {{SIZE}}{{UNIT}};',
129	],
130	]
131	);
132
133	$this->add_responsive_control(
134	'content_alignment',
135	[
136	'label' => __('Alignment', 'ultimate-post-kit'),
137	'type' => Controls_Manager::CHOOSE,
138	'options' => [
139	'left' => [
140	'title' => __('Left', 'ultimate-post-kit'),
141	'icon' => 'eicon-h-align-left',
142	],
143	'center' => [
144	'title' => __('Center', 'ultimate-post-kit'),
145	'icon' => 'eicon-h-align-center',
146	],
147	'right' => [
148	'title' => __('Right', 'ultimate-post-kit'),
149	'icon' => 'eicon-h-align-right',
150	],
151	],
152	'selectors' => [
153	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'text-align: {{VALUE}};',
154	],
155	]
156	);
157
158	$this->add_group_control(
159	Group_Control_Image_Size::get_type(),
160	[
161	'name' => 'primary_thumbnail',
162	// phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude -- Elementor widget query built from user-configured controls; expected behaviour.
163	'exclude' => ['custom'],
164	'default' => 'full',
165	]
166	);
167
168	$this->add_control(
169	'hr_1',
170	[
171	'type' => Controls_Manager::DIVIDER,
172	]
173	);
174
175	//Global Title Controls
176	$this->register_title_controls();
177
178	$this->add_control(
179	'show_category',
180	[
181	'label' => esc_html__('Show Category', 'ultimate-post-kit'),
182	'type' => Controls_Manager::SWITCHER,
183	'default' => 'yes',
184	]
185	);
186
187	$this->add_control(
188	'show_author',
189	[
190	'label' => esc_html__('Show Author', 'ultimate-post-kit'),
191	'type' => Controls_Manager::SWITCHER,
192	'default' => 'yes',
193	'separator' => 'before'
194	]
195	);
196
197	$this->add_control(
198	'meta_separator',
199	[
200	'label' => __('Separator', 'ultimate-post-kit'),
201	'type' => Controls_Manager::TEXT,
202	'default' => '//',
203	'label_block' => false,
204	]
205	);
206
207	//Global Date Controls
208	$this->register_date_controls();
209
210	//Global Reading Time Controls
211	$this->register_reading_time_controls();
212
213	$this->add_control(
214	'show_comments',
215	[
216	'label' => esc_html__('Show Comments', 'ultimate-post-kit'),
217	'type' => Controls_Manager::SWITCHER,
218	'default' => 'yes',
219	'separator' => 'before'
220	]
221	);
222
223	$this->add_control(
224	'show_top_stories',
225	[
226	'label' => esc_html__('Show Top Stories', 'ultimate-post-kit') . BDTUPK_PC,
227	'type' => Controls_Manager::SWITCHER,
228	'separator' => 'before',
229	'return_value' => 'yes',
230	'classes' => BDTUPK_IS_PC
231	]
232	);
233
234	$this->add_control(
235	'top_stories_query_heading',
236	[
237	'label' => __('Top Stories Item', 'ultimate-post-kit') . BDTUPK_NC,
238	'type' => Controls_Manager::HEADING,
239	'condition' => [
240	'show_top_stories' => 'yes'
241	]
242	]
243	);
244
245	$this->add_control(
246	'top_stories_selected_ids',
247	[
248	'label' => __('Select Posts', 'ultimate-post-kit'),
249	'type' => Dynamic_Select::TYPE,
250	'multiple' => true,
251	'label_block' => true,
252	'condition' => [
253	'show_top_stories' => 'yes'
254	]
255	]
256	);
257
258	$this->end_controls_section();
259
260	// Query Settings
261	$this->start_controls_section(
262	'section_post_query_builder',
263	[
264	'label' => __('Query', 'ultimate-post-kit'),
265	'tab' => Controls_Manager::TAB_CONTENT,
266	]
267	);
268
269	$this->add_control(
270	'item_limit',
271	[
272	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
273	'type' => Controls_Manager::SLIDER,
274	'range' => [
275	'px' => [
276	'min' => 1,
277	'max' => 20,
278	],
279	],
280	'default' => [
281	'size' => 12,
282	],
283	'condition' => [
284	'posts_source!' => 'current_query',
285	]
286	]
287	);
288
289	$this->register_query_builder_controls();
290
291	$this->end_controls_section();
292
293	$this->start_controls_section(
294	'section_carousel_settings',
295	[
296	'label' => __('Slider Settings', 'ultimate-post-kit'),
297	]
298	);
299
300	$this->add_control(
301	'autoplay',
302	[
303	'label' => __('Autoplay', 'ultimate-post-kit'),
304	'type' => Controls_Manager::SWITCHER,
305	'default' => 'yes',
306
307	]
308	);
309
310	$this->add_control(
311	'autoplay_speed',
312	[
313	'label' => esc_html__('Autoplay Speed', 'ultimate-post-kit'),
314	'type' => Controls_Manager::NUMBER,
315	'default' => 5000,
316	'condition' => [
317	'autoplay' => 'yes',
318	],
319	]
320	);
321
322	$this->add_control(
323	'pauseonhover',
324	[
325	'label' => esc_html__('Pause on Hover', 'ultimate-post-kit'),
326	'type' => Controls_Manager::SWITCHER,
327	'condition' => [
328	'autoplay' => 'yes',
329	],
330	]
331	);
332
333	$this->add_control(
334	'grab_cursor',
335	[
336	'label' => __('Grab Cursor', 'ultimate-post-kit'),
337	'type' => Controls_Manager::SWITCHER,
338	]
339	);
340
341	$this->add_control(
342	'loop',
343	[
344	'label' => __('Loop', 'ultimate-post-kit'),
345	'type' => Controls_Manager::SWITCHER,
346	'default' => 'yes',
347
348	]
349	);
350
351	$this->add_control(
352	'speed',
353	[
354	'label' => __('Animation Speed (ms)', 'ultimate-post-kit'),
355	'type' => Controls_Manager::SLIDER,
356	'default' => [
357	'size' => 500,
358	],
359	'range' => [
360	'px' => [
361	'min' => 100,
362	'max' => 5000,
363	'step' => 50,
364	],
365	],
366	]
367	);
368
369	$this->add_control(
370	'observer',
371	[
372	'label' => __('Observer', 'ultimate-post-kit'),
373	'description' => __('When you use carousel in any hidden place (in tabs, accordion etc) keep it yes.', 'ultimate-post-kit'),
374	'type' => Controls_Manager::SWITCHER,
375	]
376	);
377
378	$this->end_controls_section();
379
380	//Style
381	$this->start_controls_section(
382	'upk_section_style',
383	[
384	'label' => esc_html__('Items', 'ultimate-post-kit'),
385	'tab' => Controls_Manager::TAB_STYLE,
386	]
387	);
388
389	$this->add_responsive_control(
390	'item_padding',
391	[
392	'label' => __('Padding', 'ultimate-post-kit'),
393	'type' => Controls_Manager::DIMENSIONS,
394	'size_units' => ['px', 'em', '%'],
395	'selectors' => [
396	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
397	],
398	]
399	);
400
401	$this->add_responsive_control(
402	'item_margin',
403	[
404	'label' => __('Margin', 'ultimate-post-kit'),
405	'type' => Controls_Manager::DIMENSIONS,
406	'size_units' => ['px', 'em', '%'],
407	'selectors' => [
408	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
409	],
410	]
411	);
412
413	$this->end_controls_section();
414
415	$this->start_controls_section(
416	'section_style_title',
417	[
418	'label' => esc_html__('Title', 'ultimate-post-kit'),
419	'tab' => Controls_Manager::TAB_STYLE,
420	'condition' => [
421	'show_title' => 'yes',
422	],
423	]
424	);
425
426	$this->add_control(
427	'title_color',
428	[
429	'label' => esc_html__('Color', 'ultimate-post-kit'),
430	'type' => Controls_Manager::COLOR,
431	'selectors' => [
432	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'color: {{VALUE}};',
433	],
434	]
435	);
436
437	$this->add_control(
438	'title_hover_color',
439	[
440	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
441	'type' => Controls_Manager::COLOR,
442	'selectors' => [
443	'{{WRAPPER}} .upk-skide-slider .upk-title a:hover' => 'color: {{VALUE}};',
444	],
445	]
446	);
447
448	$this->add_group_control(
449	Group_Control_Background::get_type(),
450	[
451	'name' => 'title_background',
452	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
453	]
454	);
455
456	$this->add_responsive_control(
457	'title_border_radius',
458	[
459	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
460	'type' => Controls_Manager::DIMENSIONS,
461	'size_units' => ['px', '%'],
462	'selectors' => [
463	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
464	],
465	]
466	);
467
468	$this->add_responsive_control(
469	'title_padding',
470	[
471	'label' => __('Padding', 'ultimate-post-kit'),
472	'type' => Controls_Manager::DIMENSIONS,
473	'size_units' => ['px', 'em', '%'],
474	'selectors' => [
475	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
476	],
477	]
478	);
479
480	$this->add_responsive_control(
481	'title_spacing',
482	[
483	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
484	'type' => Controls_Manager::SLIDER,
485	'range' => [
486	'px' => [
487	'min' => 0,
488	'max' => 100,
489	],
490	],
491	'selectors' => [
492	'{{WRAPPER}} .upk-skide-slider .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
493	],
494	]
495	);
496
497	$this->add_group_control(
498	Group_Control_Typography::get_type(),
499	[
500	'name' => 'title_typography',
501	'label' => esc_html__('Typography', 'ultimate-post-kit'),
502	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title',
503	]
504	);
505
506	$this->add_group_control(
507	Group_Control_Text_Shadow::get_type(),
508	[
509	'name' => 'title_text_shadow',
510	'label' => __('Text Shadow', 'ultimate-post-kit'),
511	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
512	]
513	);
514
515	$this->add_group_control(
516	Group_Control_Text_Stroke::get_type(),
517	[
518	'name' => 'title_text_stroke',
519	'label' => __('Text Stroke', 'ultimate-post-kit') . BDTUPK_NC,
520	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
521	]
522	);
523
524	$this->end_controls_section();
525
526	$this->start_controls_section(
527	'section_style_meta',
528	[
529	'label' => esc_html__('Meta', 'ultimate-post-kit'),
530	'tab' => Controls_Manager::TAB_STYLE,
531	'conditions' => [
532	'relation' => 'or',
533	'terms' => [
534	[
535	'name' => 'show_author',
536	'value' => 'yes'
537	],
538	[
539	'name' => 'show_date',
540	'value' => 'yes'
541	],
542	[
543	'name' => 'show_comments',
544	'value' => 'yes'
545	],
546	]
547	],
548	]
549	);
550
551	$this->add_control(
552	'meta_color',
553	[
554	'label' => esc_html__('Color', 'ultimate-post-kit'),
555	'type' => Controls_Manager::COLOR,
556	'selectors' => [
557	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments, {{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a' => 'color: {{VALUE}};',
558	],
559	]
560	);
561
562	$this->add_control(
563	'meta_hover_color',
564	[
565	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
566	'type' => Controls_Manager::COLOR,
567	'selectors' => [
568	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a:hover' => 'color: {{VALUE}};',
569	],
570	]
571	);
572
573	$this->add_responsive_control(
574	'meta_space_between',
575	[
576	'label' => esc_html__('Space Between', '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-skide-slider .upk-meta .upk-date-comments > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
586	],
587	]
588	);
589
590	$this->add_group_control(
591	Group_Control_Typography::get_type(),
592	[
593	'name' => 'meta_author_typography',
594	'label' => esc_html__('Author Typography', 'ultimate-post-kit'),
595	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a',
596	'condition' => [
597	'show_author' => 'yes',
598	],
599	]
600	);
601
602	$this->add_group_control(
603	Group_Control_Typography::get_type(),
604	[
605	'name' => 'meta_date_typography',
606	'label' => esc_html__('Date/Comments Typography', 'ultimate-post-kit'),
607	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments',
608	]
609	);
610
611	$this->end_controls_section();
612
613	$this->start_controls_section(
614	'section_style_category',
615	[
616	'label' => esc_html__('Category', 'ultimate-post-kit'),
617	'tab' => Controls_Manager::TAB_STYLE,
618	'condition' => [
619	'show_category' => 'yes'
620	],
621	]
622	);
623
624	$this->add_responsive_control(
625	'category_bottom_spacing',
626	[
627	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
628	'type' => Controls_Manager::SLIDER,
629	'range' => [
630	'px' => [
631	'min' => 0,
632	'max' => 50,
633	],
634	],
635	'selectors' => [
636	'{{WRAPPER}} .upk-skide-slider .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
637	],
638	]
639	);
640
641	$this->start_controls_tabs('tabs_category_style');
642
643	$this->start_controls_tab(
644	'tab_category_normal',
645	[
646	'label' => esc_html__('Normal', 'ultimate-post-kit'),
647	]
648	);
649
650	$this->add_control(
651	'category_color',
652	[
653	'label' => esc_html__('Color', 'ultimate-post-kit'),
654	'type' => Controls_Manager::COLOR,
655	'selectors' => [
656	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'color: {{VALUE}};',
657	],
658	]
659	);
660
661	$this->add_group_control(
662	Group_Control_Background::get_type(),
663	[
664	'name' => 'category_background',
665	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
666	]
667	);
668
669	$this->add_group_control(
670	Group_Control_Border::get_type(),
671	[
672	'name' => 'category_border',
673	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
674	]
675	);
676
677	$this->add_responsive_control(
678	'category_border_radius',
679	[
680	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
681	'type' => Controls_Manager::DIMENSIONS,
682	'size_units' => ['px', '%'],
683	'selectors' => [
684	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
685	],
686	]
687	);
688
689	$this->add_responsive_control(
690	'category_padding',
691	[
692	'label' => esc_html__('Padding', 'ultimate-post-kit'),
693	'type' => Controls_Manager::DIMENSIONS,
694	'size_units' => ['px', 'em', '%'],
695	'selectors' => [
696	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
697	],
698	]
699	);
700
701	$this->add_responsive_control(
702	'category_spacing',
703	[
704	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
705	'type' => Controls_Manager::SLIDER,
706	'range' => [
707	'px' => [
708	'min' => 0,
709	'max' => 50,
710	],
711	],
712	'selectors' => [
713	'{{WRAPPER}} .upk-skide-slider .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
714	],
715	]
716	);
717
718	$this->add_group_control(
719	Group_Control_Box_Shadow::get_type(),
720	[
721	'name' => 'category_shadow',
722	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
723	]
724	);
725
726	$this->add_group_control(
727	Group_Control_Typography::get_type(),
728	[
729	'name' => 'category_typography',
730	'label' => esc_html__('Typography', 'ultimate-post-kit'),
731	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
732	]
733	);
734
735	$this->end_controls_tab();
736
737	$this->start_controls_tab(
738	'tab_category_hover',
739	[
740	'label' => esc_html__('Hover', 'ultimate-post-kit'),
741	'condition' => [
742	'show_category' => 'yes'
743	]
744	]
745	);
746
747	$this->add_control(
748	'category_hover_color',
749	[
750	'label' => esc_html__('Color', 'ultimate-post-kit'),
751	'type' => Controls_Manager::COLOR,
752	'selectors' => [
753	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'color: {{VALUE}};',
754	],
755	]
756	);
757
758	$this->add_group_control(
759	Group_Control_Background::get_type(),
760	[
761	'name' => 'category_hover_background',
762	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a:hover',
763	]
764	);
765
766	$this->add_control(
767	'category_hover_border_color',
768	[
769	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
770	'type' => Controls_Manager::COLOR,
771	'condition' => [
772	'category_border_border!' => '',
773	],
774	'selectors' => [
775	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'border-color: {{VALUE}};',
776	],
777	]
778	);
779
780	$this->end_controls_tab();
781
782	$this->end_controls_tabs();
783
784	$this->end_controls_section();
785
786	$this->start_controls_section(
787	'section_style_thumbs',
788	[
789	'label' => esc_html__('Thumbs', 'ultimate-post-kit'),
790	'tab' => Controls_Manager::TAB_STYLE,
791	]
792	);
793
794	$this->start_controls_tabs('tabs_thumbs_style');
795
796	$this->start_controls_tab(
797	'tab_thumbs_image',
798	[
799	'label' => esc_html__('Image', 'ultimate-post-kit'),
800	]
801	);
802
803	$this->add_group_control(
804	Group_Control_Border::get_type(),
805	[
806	'name' => 'thumbs_image_border',
807	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img',
808	]
809	);
810
811	$this->add_responsive_control(
812	'thumbs_image_border_radius',
813	[
814	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
815	'type' => Controls_Manager::DIMENSIONS,
816	'size_units' => ['px', '%'],
817	'selectors' => [
818	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
819	],
820	]
821	);
822
823	$this->add_responsive_control(
824	'thumbs_img_margin',
825	[
826	'label' => __('Margin', 'ultimate-post-kit'),
827	'type' => Controls_Manager::DIMENSIONS,
828	'size_units' => ['px', 'em', '%'],
829	'selectors' => [
830	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
831	],
832	]
833	);
834
835	$this->end_controls_tab();
836
837	$this->start_controls_tab(
838	'tab_thumbs_title',
839	[
840	'label' => esc_html__('Title', 'ultimate-post-kit'),
841	]
842	);
843
844	$this->add_control(
845	'thumbs_title_color',
846	[
847	'label' => esc_html__('Color', 'ultimate-post-kit'),
848	'type' => Controls_Manager::COLOR,
849	'selectors' => [
850	'{{WRAPPER}} .upk-skide-thumbs .upk-title a' => 'color: {{VALUE}};',
851	],
852	]
853	);
854
855	$this->add_responsive_control(
856	'thumbs_title_margin',
857	[
858	'label' => __('Margin', 'ultimate-post-kit'),
859	'type' => Controls_Manager::DIMENSIONS,
860	'size_units' => ['px', 'em', '%'],
861	'selectors' => [
862	'{{WRAPPER}} .upk-skide-thumbs .upk-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
863	],
864	]
865	);
866
867	$this->add_group_control(
868	Group_Control_Typography::get_type(),
869	[
870	'name' => 'thumbs_title_typography',
871	'label' => esc_html__('Typography', 'ultimate-post-kit'),
872	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-title',
873	]
874	);
875
876	$this->end_controls_tab();
877
878	$this->end_controls_tabs();
879
880	$this->end_controls_section();
881	}
882
883	/**
884	* Main query render for this widget
885	* @param $posts_per_page number item query limit
886	*/
887	public function query_posts($posts_per_page) {
888
889	$default = $this->getGroupControlQueryArgs();
890	$args = [];
891	if ($posts_per_page) {
892	$args['posts_per_page'] = $posts_per_page;
893	}
894	$args = array_merge($default, $args);
895	$this->_query = new WP_Query($args);
896	}
897
898	public function render_image($image_id, $size) {
899	$placeholder_image_src = Utils::get_placeholder_image_src();
900
901	$image_src = wp_get_attachment_image_src($image_id, $size);
902
903	if (!$image_src) {
904	$image_src = $placeholder_image_src;
905	} else {
906	$image_src = $image_src[0];
907	}
908
909	?>
910
911	<img class="upk-img swiper-lazy" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
912
913	<?php
914	}
915
916	public function render_title() {
917	$settings = $this->get_settings_for_display();
918
919	if (!$this->get_settings('show_title')) {
920	return;
921	}
922
923	$title = get_the_title();
924	printf('<%1$s class="upk-title"><a href="%2$s" title="%4$s">%3$s</a></%1$s>', esc_attr(Utils::get_valid_html_tag($settings['title_tags'])), esc_url( get_permalink() ), esc_html( $title ), esc_attr( $title ));
925	}
926
927	public function render_excerpt($excerpt_length) {
928
929	if (!$this->get_settings('show_excerpt')) {
930	return;
931	}
932	$strip_shortcode = $this->get_settings_for_display('strip_shortcode');
933	?>
934	<div class="upk-skide-desc" data-swiper-parallax-y="-80" data-swiper-parallax-duration="900">
935	<?php
936	if (has_excerpt()) {
937	the_excerpt();
938	} else {
939	echo wp_kses_post( ultimate_post_kit_custom_excerpt($excerpt_length, $strip_shortcode) );
940	}
941	?>
942	</div>
943
944	<?php
945	}
946
947	public function render_category() {
948
949	if (!$this->get_settings('show_category')) {
950	return;
951	}
952	?>
953	<div class="upk-category" data-swiper-parallax="-300">
954	<?php echo wp_kses_post( get_the_category_list(' ') ); ?>
955	</div>
956	<?php
957	}
958
959	public function render_date() {
960	$settings = $this->get_settings_for_display();
961
962
963	if (!$this->get_settings('show_date')) {
964	return;
965	}
966
967	?>
968	<div class="upk-date upk-flex upk-flex-middle">
969	<div class="upk-date">
970	<?php if ($settings['human_diff_time'] == 'yes') {
971	echo esc_html( ultimate_post_kit_post_time_diff( ($settings['human_diff_time_short'] == 'yes') ? 'short' : '' ) );
972	} else {
973	echo get_the_date();
974	} ?>
975	</div>
976	<?php if ($settings['show_time']) : ?>
977	<div class="upk-post-time">
978	<i class="upk-icon-clock" aria-hidden="true"></i>
979	<?php echo esc_html( get_the_time() ); ?>
980	</div>
981	<?php endif; ?>
982	</div>
983
984	<?php
985	}
986
987	public function render_author() {
988
989	if (!$this->get_settings('show_author')) {
990	return;
991	}
992	?>
993	<div class="upk-author-wrap">
994	<span class="upk-by"><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit'); ?></span>
995	<a class="upk-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
996	<?php echo esc_html( get_the_author() ); ?>
997	</a>
998	</div>
999	<?php
1000	}
1001
1002	public function render_comments($id = 0) {
1003
1004	if (!$this->get_settings('show_comments')) {
1005	return;
1006	}
1007
1008	?>
1009	<div class="upk-comments">
1010	<?php echo esc_html( Utils::get_formatted_comments_count( $id ) ); ?>
1011	</div>
1012	<?php
1013	}
1014
1015	public function render_header() {
1016	$id = 'upk-skide-slider-' . $this->get_id();
1017	$settings = $this->get_settings_for_display();
1018
1019	$this->add_render_attribute('skide-slider', 'id', $id);
1020	$this->add_render_attribute('skide-slider', 'class', ['upk-skide-slider']);
1021
1022	$this->add_render_attribute(
1023	[
1024	'skide-slider' => [
1025	'data-settings' => [
1026	wp_json_encode(array_filter([
1027	"autoplay" => ("yes" == $settings["autoplay"]) ? ["delay" => $settings["autoplay_speed"]] : false,
1028	"loop" => ($settings["loop"] == "yes") ? true : false,
1029	"speed" => $settings["speed"]["size"],
1030	"effect" => 'fade',
1031	"fadeEffect" => ['crossFade' => true],
1032	"lazy" => true,
1033	"parallax" => true,
1034	"grabCursor" => ($settings["grab_cursor"] === "yes") ? true : false,
1035	"pauseOnHover" => ("yes" == $settings["pauseonhover"]) ? true : false,
1036	"slidesPerView" => 1,
1037	"observer" => ($settings["observer"]) ? true : false,
1038	"observeParents" => ($settings["observer"]) ? true : false,
1039	"loopedSlides" => 4,
1040	"lazy" => [
1041	"loadPrevNext" => "true",
1042	],
1043	]))
1044	]
1045	]
1046	]
1047	);
1048
1049	$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper');
1050
1051	?>
1052	<div <?php $this->print_render_attribute_string('skide-slider'); ?>>
1053	<div <?php $this->print_render_attribute_string('swiper'); ?>>
1054	<div class="swiper-wrapper">
1055	<?php
1056	}
1057
1058	public function render_footer() {
1059	$settings = $this->get_settings_for_display();
1060
1061	?>
1062
1063	</div>
1064	</div>
1065	</div>
1066
1067	<?php
1068	}
1069
1070	public function render_post_grid_item($post_id, $image_size) {
1071	$settings = $this->get_settings_for_display();
1072
1073	$this->add_render_attribute('slider-item', 'class', 'upk-skide-item swiper-slide', true);
1074
1075	?>
1076	<div <?php $this->print_render_attribute_string('slider-item'); ?>>
1077	<div class="upk-image-wrap">
1078	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1079	</div>
1080	<div class="upk-content">
1081
1082	<?php $this->render_category(); ?>
1083
1084	<?php if ($settings['show_title']) : ?>
1085	<div data-swiper-parallax="-200">
1086	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1087	</div>
1088	<?php endif; ?>
1089
1090	<div class="upk-meta" data-swiper-parallax="-100">
1091	<?php if ('yes' === $settings['show_author']) : ?>
1092	<div class="upk-author-img">
1093	<?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
1094	</div>
1095	<?php endif; ?>
1096	<div class="upk-meta-info">
1097	<?php if ('yes' === $settings['show_author']) : ?>
1098	<div class="upk-author-name">
1099	<a href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
1100	<?php echo esc_html( get_the_author() ); ?>
1101	</a>
1102	</div>
1103	<?php endif; ?>
1104	<?php if ($settings['show_comments'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
1105	<div class="upk-date-comments">
1106	<?php $this->render_date(); ?>
1107
1108	<?php if ($settings['show_comments']) : ?>
1109	<div data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1110	<?php $this->render_comments($post_id); ?>
1111	</div>
1112	<?php endif; ?>
1113
1114	<?php if (_is_upk_pro_activated()) :
1115	if ('yes' === $settings['show_reading_time']) : ?>
1116	<div class="upk-reading-time" data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1117	<?php echo esc_html( ultimate_post_kit_reading_time(get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no') ); ?>
1118	</div>
1119	<?php endif; ?>
1120	<?php endif; ?>
1121	</div>
1122	<?php endif; ?>
1123
1124	</div>
1125	</div>
1126
1127	</div>
1128	</div>
1129	<?php
1130	}
1131
1132	public function render_thumbnav($post_id, $image_size) {
1133	$settings = $this->get_settings_for_display();
1134
1135	$this->add_render_attribute('thumb-item', 'class', 'upk-skide-thumb-item swiper-slide', true);
1136
1137	?>
1138	<div <?php $this->print_render_attribute_string('thumb-item'); ?>>
1139	<div class="upk-thumbs-img">
1140	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1141	</div>
1142	<div class="upk-thumbs-content">
1143	<h3 class="upk-title">
1144	<a href="javascript:void(0);"><?php echo esc_html(get_the_title()); ?></a>
1145	</h3>
1146	</div>
1147	</div>
1148	<?php
1149	}
1150
1151	public function render() {
1152	$settings = $this->get_settings_for_display();
1153
1154	$this->query_posts($settings['item_limit']['size']);
1155	$wp_query = $this->get_query();
1156
1157	if (!$wp_query->found_posts) {
1158	return;
1159	}
1160
1161	$this->add_render_attribute('swiper-thumbs', 'class', 'upk-skide-thumbs swiper');
1162
1163	?>
1164	<div class="upk-skide-slider-wrap">
1165	<?php
1166
1167	$this->render_header();
1168
1169	while ($wp_query->have_posts()) {
1170	$wp_query->the_post();
1171	$thumbnail_size = $settings['primary_thumbnail_size'];
1172
1173	$this->render_post_grid_item(get_the_ID(), $thumbnail_size);
1174	}
1175	wp_reset_postdata();
1176
1177	$this->render_footer();
1178
1179
1180	?>
1181	<div thumbsSlider="" <?php $this->print_render_attribute_string('swiper-thumbs'); ?>>
1182	<div class="swiper-wrapper">
1183	<?php
1184
1185	while ($wp_query->have_posts()) {
1186	$wp_query->the_post();
1187	$thumbnail_size = $settings['primary_thumbnail_size'];
1188
1189	$this->render_thumbnav(get_the_ID(), $thumbnail_size);
1190	}
1191	wp_reset_postdata();
1192
1193	?>
1194	</div>
1195	</div>
1196	<?php
1197	if (_is_upk_pro_activated()) {
1198	// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- established hook name relied on across the plugin family; renaming would break integration.
1199	apply_filters('show_top_stories', $this);
1200	}
1201	?>
1202
1203	</div>
1204
1205	<?php
1206	}
1207	}
1208