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

1,202 lines 29.3 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	]
283	);
284
285	$this->register_query_builder_controls();
286
287	$this->end_controls_section();
288
289	$this->start_controls_section(
290	'section_carousel_settings',
291	[
292	'label' => __('Slider Settings', 'ultimate-post-kit'),
293	]
294	);
295
296	$this->add_control(
297	'autoplay',
298	[
299	'label' => __('Autoplay', 'ultimate-post-kit'),
300	'type' => Controls_Manager::SWITCHER,
301	'default' => 'yes',
302
303	]
304	);
305
306	$this->add_control(
307	'autoplay_speed',
308	[
309	'label' => esc_html__('Autoplay Speed', 'ultimate-post-kit'),
310	'type' => Controls_Manager::NUMBER,
311	'default' => 5000,
312	'condition' => [
313	'autoplay' => 'yes',
314	],
315	]
316	);
317
318	$this->add_control(
319	'pauseonhover',
320	[
321	'label' => esc_html__('Pause on Hover', 'ultimate-post-kit'),
322	'type' => Controls_Manager::SWITCHER,
323	]
324	);
325
326	$this->add_control(
327	'grab_cursor',
328	[
329	'label' => __('Grab Cursor', 'ultimate-post-kit'),
330	'type' => Controls_Manager::SWITCHER,
331	]
332	);
333
334	$this->add_control(
335	'loop',
336	[
337	'label' => __('Loop', 'ultimate-post-kit'),
338	'type' => Controls_Manager::SWITCHER,
339	'default' => 'yes',
340
341	]
342	);
343
344	$this->add_control(
345	'speed',
346	[
347	'label' => __('Animation Speed (ms)', 'ultimate-post-kit'),
348	'type' => Controls_Manager::SLIDER,
349	'default' => [
350	'size' => 500,
351	],
352	'range' => [
353	'px' => [
354	'min' => 100,
355	'max' => 5000,
356	'step' => 50,
357	],
358	],
359	]
360	);
361
362	$this->add_control(
363	'observer',
364	[
365	'label' => __('Observer', 'ultimate-post-kit'),
366	'description' => __('When you use carousel in any hidden place (in tabs, accordion etc) keep it yes.', 'ultimate-post-kit'),
367	'type' => Controls_Manager::SWITCHER,
368	]
369	);
370
371	$this->end_controls_section();
372
373	//Style
374	$this->start_controls_section(
375	'upk_section_style',
376	[
377	'label' => esc_html__('Items', 'ultimate-post-kit'),
378	'tab' => Controls_Manager::TAB_STYLE,
379	]
380	);
381
382	$this->add_responsive_control(
383	'item_padding',
384	[
385	'label' => __('Padding', 'ultimate-post-kit'),
386	'type' => Controls_Manager::DIMENSIONS,
387	'size_units' => ['px', 'em', '%'],
388	'selectors' => [
389	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
390	],
391	]
392	);
393
394	$this->add_responsive_control(
395	'item_margin',
396	[
397	'label' => __('Margin', 'ultimate-post-kit'),
398	'type' => Controls_Manager::DIMENSIONS,
399	'size_units' => ['px', 'em', '%'],
400	'selectors' => [
401	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
402	],
403	]
404	);
405
406	$this->end_controls_section();
407
408	$this->start_controls_section(
409	'section_style_title',
410	[
411	'label' => esc_html__('Title', 'ultimate-post-kit'),
412	'tab' => Controls_Manager::TAB_STYLE,
413	'condition' => [
414	'show_title' => 'yes',
415	],
416	]
417	);
418
419	$this->add_control(
420	'title_color',
421	[
422	'label' => esc_html__('Color', 'ultimate-post-kit'),
423	'type' => Controls_Manager::COLOR,
424	'selectors' => [
425	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'color: {{VALUE}};',
426	],
427	]
428	);
429
430	$this->add_control(
431	'title_hover_color',
432	[
433	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
434	'type' => Controls_Manager::COLOR,
435	'selectors' => [
436	'{{WRAPPER}} .upk-skide-slider .upk-title a:hover' => 'color: {{VALUE}};',
437	],
438	]
439	);
440
441	$this->add_group_control(
442	Group_Control_Background::get_type(),
443	[
444	'name' => 'title_background',
445	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
446	]
447	);
448
449	$this->add_responsive_control(
450	'title_border_radius',
451	[
452	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
453	'type' => Controls_Manager::DIMENSIONS,
454	'size_units' => ['px', '%'],
455	'selectors' => [
456	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
457	],
458	]
459	);
460
461	$this->add_responsive_control(
462	'title_padding',
463	[
464	'label' => __('Padding', 'ultimate-post-kit'),
465	'type' => Controls_Manager::DIMENSIONS,
466	'size_units' => ['px', 'em', '%'],
467	'selectors' => [
468	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
469	],
470	]
471	);
472
473	$this->add_responsive_control(
474	'title_spacing',
475	[
476	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
477	'type' => Controls_Manager::SLIDER,
478	'range' => [
479	'px' => [
480	'min' => 0,
481	'max' => 100,
482	],
483	],
484	'selectors' => [
485	'{{WRAPPER}} .upk-skide-slider .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
486	],
487	]
488	);
489
490	$this->add_group_control(
491	Group_Control_Typography::get_type(),
492	[
493	'name' => 'title_typography',
494	'label' => esc_html__('Typography', 'ultimate-post-kit'),
495	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title',
496	]
497	);
498
499	$this->add_group_control(
500	Group_Control_Text_Shadow::get_type(),
501	[
502	'name' => 'title_text_shadow',
503	'label' => __('Text Shadow', 'ultimate-post-kit'),
504	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
505	]
506	);
507
508	$this->add_group_control(
509	Group_Control_Text_Stroke::get_type(),
510	[
511	'name' => 'title_text_stroke',
512	'label' => __('Text Stroke', 'ultimate-post-kit') . BDTUPK_NC,
513	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
514	]
515	);
516
517	$this->end_controls_section();
518
519	$this->start_controls_section(
520	'section_style_meta',
521	[
522	'label' => esc_html__('Meta', 'ultimate-post-kit'),
523	'tab' => Controls_Manager::TAB_STYLE,
524	'conditions' => [
525	'relation' => 'or',
526	'terms' => [
527	[
528	'name' => 'show_author',
529	'value' => 'yes'
530	],
531	[
532	'name' => 'show_date',
533	'value' => 'yes'
534	],
535	[
536	'name' => 'show_comments',
537	'value' => 'yes'
538	],
539	]
540	],
541	]
542	);
543
544	$this->add_control(
545	'meta_color',
546	[
547	'label' => esc_html__('Color', 'ultimate-post-kit'),
548	'type' => Controls_Manager::COLOR,
549	'selectors' => [
550	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments, {{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a' => 'color: {{VALUE}};',
551	],
552	]
553	);
554
555	$this->add_control(
556	'meta_hover_color',
557	[
558	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
559	'type' => Controls_Manager::COLOR,
560	'selectors' => [
561	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a:hover' => 'color: {{VALUE}};',
562	],
563	]
564	);
565
566	$this->add_responsive_control(
567	'meta_space_between',
568	[
569	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
570	'type' => Controls_Manager::SLIDER,
571	'range' => [
572	'px' => [
573	'min' => 0,
574	'max' => 50,
575	],
576	],
577	'selectors' => [
578	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
579	],
580	]
581	);
582
583	$this->add_group_control(
584	Group_Control_Typography::get_type(),
585	[
586	'name' => 'meta_author_typography',
587	'label' => esc_html__('Author Typography', 'ultimate-post-kit'),
588	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a',
589	'condition' => [
590	'show_author' => 'yes',
591	],
592	]
593	);
594
595	$this->add_group_control(
596	Group_Control_Typography::get_type(),
597	[
598	'name' => 'meta_date_typography',
599	'label' => esc_html__('Date/Comments Typography', 'ultimate-post-kit'),
600	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments',
601	]
602	);
603
604	$this->end_controls_section();
605
606	$this->start_controls_section(
607	'section_style_category',
608	[
609	'label' => esc_html__('Category', 'ultimate-post-kit'),
610	'tab' => Controls_Manager::TAB_STYLE,
611	'condition' => [
612	'show_category' => 'yes'
613	],
614	]
615	);
616
617	$this->add_responsive_control(
618	'category_bottom_spacing',
619	[
620	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
621	'type' => Controls_Manager::SLIDER,
622	'range' => [
623	'px' => [
624	'min' => 0,
625	'max' => 50,
626	],
627	],
628	'selectors' => [
629	'{{WRAPPER}} .upk-skide-slider .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
630	],
631	]
632	);
633
634	$this->start_controls_tabs('tabs_category_style');
635
636	$this->start_controls_tab(
637	'tab_category_normal',
638	[
639	'label' => esc_html__('Normal', 'ultimate-post-kit'),
640	]
641	);
642
643	$this->add_control(
644	'category_color',
645	[
646	'label' => esc_html__('Color', 'ultimate-post-kit'),
647	'type' => Controls_Manager::COLOR,
648	'selectors' => [
649	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'color: {{VALUE}};',
650	],
651	]
652	);
653
654	$this->add_group_control(
655	Group_Control_Background::get_type(),
656	[
657	'name' => 'category_background',
658	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
659	]
660	);
661
662	$this->add_group_control(
663	Group_Control_Border::get_type(),
664	[
665	'name' => 'category_border',
666	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
667	]
668	);
669
670	$this->add_responsive_control(
671	'category_border_radius',
672	[
673	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
674	'type' => Controls_Manager::DIMENSIONS,
675	'size_units' => ['px', '%'],
676	'selectors' => [
677	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
678	],
679	]
680	);
681
682	$this->add_responsive_control(
683	'category_padding',
684	[
685	'label' => esc_html__('Padding', 'ultimate-post-kit'),
686	'type' => Controls_Manager::DIMENSIONS,
687	'size_units' => ['px', 'em', '%'],
688	'selectors' => [
689	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
690	],
691	]
692	);
693
694	$this->add_responsive_control(
695	'category_spacing',
696	[
697	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
698	'type' => Controls_Manager::SLIDER,
699	'range' => [
700	'px' => [
701	'min' => 0,
702	'max' => 50,
703	],
704	],
705	'selectors' => [
706	'{{WRAPPER}} .upk-skide-slider .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
707	],
708	]
709	);
710
711	$this->add_group_control(
712	Group_Control_Box_Shadow::get_type(),
713	[
714	'name' => 'category_shadow',
715	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
716	]
717	);
718
719	$this->add_group_control(
720	Group_Control_Typography::get_type(),
721	[
722	'name' => 'category_typography',
723	'label' => esc_html__('Typography', 'ultimate-post-kit'),
724	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
725	]
726	);
727
728	$this->end_controls_tab();
729
730	$this->start_controls_tab(
731	'tab_category_hover',
732	[
733	'label' => esc_html__('Hover', 'ultimate-post-kit'),
734	'condition' => [
735	'show_category' => 'yes'
736	]
737	]
738	);
739
740	$this->add_control(
741	'category_hover_color',
742	[
743	'label' => esc_html__('Color', 'ultimate-post-kit'),
744	'type' => Controls_Manager::COLOR,
745	'selectors' => [
746	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'color: {{VALUE}};',
747	],
748	]
749	);
750
751	$this->add_group_control(
752	Group_Control_Background::get_type(),
753	[
754	'name' => 'category_hover_background',
755	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a:hover',
756	]
757	);
758
759	$this->add_control(
760	'category_hover_border_color',
761	[
762	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
763	'type' => Controls_Manager::COLOR,
764	'condition' => [
765	'category_border_border!' => '',
766	],
767	'selectors' => [
768	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'border-color: {{VALUE}};',
769	],
770	]
771	);
772
773	$this->end_controls_tab();
774
775	$this->end_controls_tabs();
776
777	$this->end_controls_section();
778
779	$this->start_controls_section(
780	'section_style_thumbs',
781	[
782	'label' => esc_html__('Thumbs', 'ultimate-post-kit'),
783	'tab' => Controls_Manager::TAB_STYLE,
784	]
785	);
786
787	$this->start_controls_tabs('tabs_thumbs_style');
788
789	$this->start_controls_tab(
790	'tab_thumbs_image',
791	[
792	'label' => esc_html__('Image', 'ultimate-post-kit'),
793	]
794	);
795
796	$this->add_group_control(
797	Group_Control_Border::get_type(),
798	[
799	'name' => 'thumbs_image_border',
800	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img',
801	]
802	);
803
804	$this->add_responsive_control(
805	'thumbs_image_border_radius',
806	[
807	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
808	'type' => Controls_Manager::DIMENSIONS,
809	'size_units' => ['px', '%'],
810	'selectors' => [
811	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
812	],
813	]
814	);
815
816	$this->add_responsive_control(
817	'thumbs_img_margin',
818	[
819	'label' => __('Margin', 'ultimate-post-kit'),
820	'type' => Controls_Manager::DIMENSIONS,
821	'size_units' => ['px', 'em', '%'],
822	'selectors' => [
823	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
824	],
825	]
826	);
827
828	$this->end_controls_tab();
829
830	$this->start_controls_tab(
831	'tab_thumbs_title',
832	[
833	'label' => esc_html__('Title', 'ultimate-post-kit'),
834	]
835	);
836
837	$this->add_control(
838	'thumbs_title_color',
839	[
840	'label' => esc_html__('Color', 'ultimate-post-kit'),
841	'type' => Controls_Manager::COLOR,
842	'selectors' => [
843	'{{WRAPPER}} .upk-skide-thumbs .upk-title a' => 'color: {{VALUE}};',
844	],
845	]
846	);
847
848	$this->add_responsive_control(
849	'thumbs_title_margin',
850	[
851	'label' => __('Margin', 'ultimate-post-kit'),
852	'type' => Controls_Manager::DIMENSIONS,
853	'size_units' => ['px', 'em', '%'],
854	'selectors' => [
855	'{{WRAPPER}} .upk-skide-thumbs .upk-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
856	],
857	]
858	);
859
860	$this->add_group_control(
861	Group_Control_Typography::get_type(),
862	[
863	'name' => 'thumbs_title_typography',
864	'label' => esc_html__('Typography', 'ultimate-post-kit'),
865	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-title',
866	]
867	);
868
869	$this->end_controls_tab();
870
871	$this->end_controls_tabs();
872
873	$this->end_controls_section();
874	}
875
876	/**
877	* Main query render for this widget
878	* @param $posts_per_page number item query limit
879	*/
880	public function query_posts($posts_per_page) {
881
882	$default = $this->getGroupControlQueryArgs();
883	$args = [];
884	if ($posts_per_page) {
885	$args['posts_per_page'] = $posts_per_page;
886	// $args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
887	}
888	$args = array_merge($default, $args);
889	$this->_query = new WP_Query($args);
890	}
891
892	public function render_image($image_id, $size) {
893	$placeholder_image_src = Utils::get_placeholder_image_src();
894
895	$image_src = wp_get_attachment_image_src($image_id, $size);
896
897	if (!$image_src) {
898	$image_src = $placeholder_image_src;
899	} else {
900	$image_src = $image_src[0];
901	}
902
903	?>
904
905	<img class="upk-img swiper-lazy" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
906
907	<?php
908	}
909
910	public function render_title() {
911	$settings = $this->get_settings_for_display();
912
913	if (!$this->get_settings('show_title')) {
914	return;
915	}
916
917	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() ));
918	}
919
920	public function render_excerpt($excerpt_length) {
921
922	if (!$this->get_settings('show_excerpt')) {
923	return;
924	}
925	$strip_shortcode = $this->get_settings_for_display('strip_shortcode');
926	?>
927	<div class="upk-skide-desc" data-swiper-parallax-y="-80" data-swiper-parallax-duration="900">
928	<?php
929	if (has_excerpt()) {
930	the_excerpt();
931	} else {
932	echo ultimate_post_kit_custom_excerpt($excerpt_length, $strip_shortcode);
933	}
934	?>
935	</div>
936
937	<?php
938	}
939
940	public function render_category() {
941
942	if (!$this->get_settings('show_category')) {
943	return;
944	}
945	?>
946	<div class="upk-category" data-swiper-parallax="-300">
947	<?php echo get_the_category_list(' '); ?>
948	</div>
949	<?php
950	}
951
952	public function render_date() {
953	$settings = $this->get_settings_for_display();
954
955
956	if (!$this->get_settings('show_date')) {
957	return;
958	}
959
960	?>
961	<div class="upk-date upk-flex upk-flex-middle">
962	<div class="upk-date">
963	<?php if ($settings['human_diff_time'] == 'yes') {
964	echo esc_html( ultimate_post_kit_post_time_diff( ($settings['human_diff_time_short'] == 'yes') ? 'short' : '' ) );
965	} else {
966	echo get_the_date();
967	} ?>
968	</div>
969	<?php if ($settings['show_time']) : ?>
970	<div class="upk-post-time">
971	<i class="upk-icon-clock" aria-hidden="true"></i>
972	<?php echo esc_html( get_the_time() ); ?>
973	</div>
974	<?php endif; ?>
975	</div>
976
977	<?php
978	}
979
980	public function render_author() {
981
982	if (!$this->get_settings('show_author')) {
983	return;
984	}
985	?>
986	<div class="upk-author-wrap">
987	<span class="upk-by"><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit'); ?></span>
988	<a class="upk-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
989	<?php echo esc_html( get_the_author() ); ?>
990	</a>
991	</div>
992	<?php
993	}
994
995	public function render_comments($id = 0) {
996
997	if (!$this->get_settings('show_comments')) {
998	return;
999	}
1000	?>
1001
1002	<div class="upk-comments">
1003	<?php echo get_comments_number($id) ?>
1004	<?php echo esc_html__('Comments', 'ultimate-post-kit') ?>
1005	</div>
1006
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