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.1.13, at modules/skide-slider/widgets/skide-slider.php

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