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

1,195 lines 29.0 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	]
590	);
591
592	$this->add_group_control(
593	Group_Control_Typography::get_type(),
594	[
595	'name' => 'meta_date_typography',
596	'label' => esc_html__('Date/Comments Typography', 'ultimate-post-kit'),
597	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments',
598	]
599	);
600
601	$this->end_controls_section();
602
603	$this->start_controls_section(
604	'section_style_category',
605	[
606	'label' => esc_html__('Category', 'ultimate-post-kit'),
607	'tab' => Controls_Manager::TAB_STYLE,
608	'condition' => [
609	'show_category' => 'yes'
610	],
611	]
612	);
613
614	$this->add_responsive_control(
615	'category_bottom_spacing',
616	[
617	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
618	'type' => Controls_Manager::SLIDER,
619	'range' => [
620	'px' => [
621	'min' => 0,
622	'max' => 50,
623	],
624	],
625	'selectors' => [
626	'{{WRAPPER}} .upk-skide-slider .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
627	],
628	]
629	);
630
631	$this->start_controls_tabs('tabs_category_style');
632
633	$this->start_controls_tab(
634	'tab_category_normal',
635	[
636	'label' => esc_html__('Normal', 'ultimate-post-kit'),
637	]
638	);
639
640	$this->add_control(
641	'category_color',
642	[
643	'label' => esc_html__('Color', 'ultimate-post-kit'),
644	'type' => Controls_Manager::COLOR,
645	'selectors' => [
646	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'color: {{VALUE}};',
647	],
648	]
649	);
650
651	$this->add_group_control(
652	Group_Control_Background::get_type(),
653	[
654	'name' => 'category_background',
655	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
656	]
657	);
658
659	$this->add_group_control(
660	Group_Control_Border::get_type(),
661	[
662	'name' => 'category_border',
663	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
664	]
665	);
666
667	$this->add_responsive_control(
668	'category_border_radius',
669	[
670	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
671	'type' => Controls_Manager::DIMENSIONS,
672	'size_units' => ['px', '%'],
673	'selectors' => [
674	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
675	],
676	]
677	);
678
679	$this->add_responsive_control(
680	'category_padding',
681	[
682	'label' => esc_html__('Padding', 'ultimate-post-kit'),
683	'type' => Controls_Manager::DIMENSIONS,
684	'size_units' => ['px', 'em', '%'],
685	'selectors' => [
686	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
687	],
688	]
689	);
690
691	$this->add_responsive_control(
692	'category_spacing',
693	[
694	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
695	'type' => Controls_Manager::SLIDER,
696	'range' => [
697	'px' => [
698	'min' => 0,
699	'max' => 50,
700	],
701	],
702	'selectors' => [
703	'{{WRAPPER}} .upk-skide-slider .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
704	],
705	]
706	);
707
708	$this->add_group_control(
709	Group_Control_Box_Shadow::get_type(),
710	[
711	'name' => 'category_shadow',
712	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
713	]
714	);
715
716	$this->add_group_control(
717	Group_Control_Typography::get_type(),
718	[
719	'name' => 'category_typography',
720	'label' => esc_html__('Typography', 'ultimate-post-kit'),
721	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
722	]
723	);
724
725	$this->end_controls_tab();
726
727	$this->start_controls_tab(
728	'tab_category_hover',
729	[
730	'label' => esc_html__('Hover', 'ultimate-post-kit'),
731	'condition' => [
732	'show_category' => 'yes'
733	]
734	]
735	);
736
737	$this->add_control(
738	'category_hover_color',
739	[
740	'label' => esc_html__('Color', 'ultimate-post-kit'),
741	'type' => Controls_Manager::COLOR,
742	'selectors' => [
743	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'color: {{VALUE}};',
744	],
745	]
746	);
747
748	$this->add_group_control(
749	Group_Control_Background::get_type(),
750	[
751	'name' => 'category_hover_background',
752	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a:hover',
753	]
754	);
755
756	$this->add_control(
757	'category_hover_border_color',
758	[
759	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
760	'type' => Controls_Manager::COLOR,
761	'condition' => [
762	'category_border_border!' => '',
763	],
764	'selectors' => [
765	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'border-color: {{VALUE}};',
766	],
767	]
768	);
769
770	$this->end_controls_tab();
771
772	$this->end_controls_tabs();
773
774	$this->end_controls_section();
775
776	$this->start_controls_section(
777	'section_style_thumbs',
778	[
779	'label' => esc_html__('Thumbs', 'ultimate-post-kit'),
780	'tab' => Controls_Manager::TAB_STYLE,
781	]
782	);
783
784	$this->start_controls_tabs('tabs_thumbs_style');
785
786	$this->start_controls_tab(
787	'tab_thumbs_image',
788	[
789	'label' => esc_html__('Image', 'ultimate-post-kit'),
790	]
791	);
792
793	$this->add_group_control(
794	Group_Control_Border::get_type(),
795	[
796	'name' => 'thumbs_image_border',
797	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img',
798	]
799	);
800
801	$this->add_responsive_control(
802	'thumbs_image_border_radius',
803	[
804	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
805	'type' => Controls_Manager::DIMENSIONS,
806	'size_units' => ['px', '%'],
807	'selectors' => [
808	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
809	],
810	]
811	);
812
813	$this->add_responsive_control(
814	'thumbs_img_margin',
815	[
816	'label' => __('Margin', 'ultimate-post-kit'),
817	'type' => Controls_Manager::DIMENSIONS,
818	'size_units' => ['px', 'em', '%'],
819	'selectors' => [
820	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
821	],
822	]
823	);
824
825	$this->end_controls_tab();
826
827	$this->start_controls_tab(
828	'tab_thumbs_title',
829	[
830	'label' => esc_html__('Title', 'ultimate-post-kit'),
831	]
832	);
833
834	$this->add_control(
835	'thumbs_title_color',
836	[
837	'label' => esc_html__('Color', 'ultimate-post-kit'),
838	'type' => Controls_Manager::COLOR,
839	'selectors' => [
840	'{{WRAPPER}} .upk-skide-thumbs .upk-title a' => 'color: {{VALUE}};',
841	],
842	]
843	);
844
845	$this->add_responsive_control(
846	'thumbs_title_margin',
847	[
848	'label' => __('Margin', 'ultimate-post-kit'),
849	'type' => Controls_Manager::DIMENSIONS,
850	'size_units' => ['px', 'em', '%'],
851	'selectors' => [
852	'{{WRAPPER}} .upk-skide-thumbs .upk-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
853	],
854	]
855	);
856
857	$this->add_group_control(
858	Group_Control_Typography::get_type(),
859	[
860	'name' => 'thumbs_title_typography',
861	'label' => esc_html__('Typography', 'ultimate-post-kit'),
862	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-title',
863	]
864	);
865
866	$this->end_controls_tab();
867
868	$this->end_controls_tabs();
869
870	$this->end_controls_section();
871	}
872
873	/**
874	* Main query render for this widget
875	* @param $posts_per_page number item query limit
876	*/
877	public function query_posts($posts_per_page) {
878
879	$default = $this->getGroupControlQueryArgs();
880	if ($posts_per_page) {
881	$args['posts_per_page'] = $posts_per_page;
882	// $args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
883	}
884	$args = array_merge($default, $args);
885	$this->_query = new WP_Query($args);
886	}
887
888	public function render_image($image_id, $size) {
889	$placeholder_image_src = Utils::get_placeholder_image_src();
890
891	$image_src = wp_get_attachment_image_src($image_id, $size);
892
893	if (!$image_src) {
894	$image_src = $placeholder_image_src;
895	} else {
896	$image_src = $image_src[0];
897	}
898
899	?>
900
901	<img class="upk-img swiper-lazy" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
902
903	<?php
904	}
905
906	public function render_title() {
907	$settings = $this->get_settings_for_display();
908
909	if (!$this->get_settings('show_title')) {
910	return;
911	}
912
913	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() ));
914	}
915
916	public function render_excerpt($excerpt_length) {
917
918	if (!$this->get_settings('show_excerpt')) {
919	return;
920	}
921	$strip_shortcode = $this->get_settings_for_display('strip_shortcode');
922	?>
923	<div class="upk-skide-desc" data-swiper-parallax-y="-80" data-swiper-parallax-duration="900">
924	<?php
925	if (has_excerpt()) {
926	the_excerpt();
927	} else {
928	echo ultimate_post_kit_custom_excerpt($excerpt_length, $strip_shortcode);
929	}
930	?>
931	</div>
932
933	<?php
934	}
935
936	public function render_category() {
937
938	if (!$this->get_settings('show_category')) {
939	return;
940	}
941	?>
942	<div class="upk-category" data-swiper-parallax="-300">
943	<?php echo get_the_category_list(' '); ?>
944	</div>
945	<?php
946	}
947
948	public function render_date() {
949	$settings = $this->get_settings_for_display();
950
951
952	if (!$this->get_settings('show_date')) {
953	return;
954	}
955
956	?>
957	<div class="upk-date upk-flex upk-flex-middle">
958	<div class="upk-date">
959	<?php if ($settings['human_diff_time'] == 'yes') {
960	echo esc_html( ultimate_post_kit_post_time_diff( ($settings['human_diff_time_short'] == 'yes') ? 'short' : '' ) );
961	} else {
962	echo get_the_date();
963	} ?>
964	</div>
965	<?php if ($settings['show_time']) : ?>
966	<div class="upk-post-time">
967	<i class="upk-icon-clock" aria-hidden="true"></i>
968	<?php echo esc_html( get_the_time() ); ?>
969	</div>
970	<?php endif; ?>
971	</div>
972
973	<?php
974	}
975
976	public function render_author() {
977
978	if (!$this->get_settings('show_author')) {
979	return;
980	}
981	?>
982	<div class="upk-author-wrap">
983	<span class="upk-by"><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit'); ?></span>
984	<a class="upk-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
985	<?php echo esc_html( get_the_author() ); ?>
986	</a>
987	</div>
988	<?php
989	}
990
991	public function render_comments($id = 0) {
992
993	if (!$this->get_settings('show_comments')) {
994	return;
995	}
996	?>
997
998	<div class="upk-comments">
999	<?php echo get_comments_number($id) ?>
1000	<?php echo esc_html__('Comments', 'ultimate-post-kit') ?>
1001	</div>
1002
1003	<?php
1004	}
1005
1006	public function render_header() {
1007	$id = 'upk-skide-slider-' . $this->get_id();
1008	$settings = $this->get_settings_for_display();
1009
1010	$this->add_render_attribute('skide-slider', 'id', $id);
1011	$this->add_render_attribute('skide-slider', 'class', ['upk-skide-slider']);
1012
1013	$this->add_render_attribute(
1014	[
1015	'skide-slider' => [
1016	'data-settings' => [
1017	wp_json_encode(array_filter([
1018	"autoplay" => ("yes" == $settings["autoplay"]) ? ["delay" => $settings["autoplay_speed"]] : false,
1019	"loop" => ($settings["loop"] == "yes") ? true : false,
1020	"speed" => $settings["speed"]["size"],
1021	"effect" => 'fade',
1022	"fadeEffect" => ['crossFade' => true],
1023	"lazy" => true,
1024	"parallax" => true,
1025	"grabCursor" => ($settings["grab_cursor"] === "yes") ? true : false,
1026	"pauseOnHover" => ("yes" == $settings["pauseonhover"]) ? true : false,
1027	"slidesPerView" => 1,
1028	"observer" => ($settings["observer"]) ? true : false,
1029	"observeParents" => ($settings["observer"]) ? true : false,
1030	"loopedSlides" => 4,
1031	"lazy" => [
1032	"loadPrevNext" => "true",
1033	],
1034	]))
1035	]
1036	]
1037	]
1038	);
1039
1040	$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper');
1041
1042	?>
1043	<div <?php $this->print_render_attribute_string('skide-slider'); ?>>
1044	<div <?php echo $this->get_render_attribute_string('swiper'); ?>>
1045	<div class="swiper-wrapper">
1046	<?php
1047	}
1048
1049	public function render_footer() {
1050	$settings = $this->get_settings_for_display();
1051
1052	?>
1053
1054	</div>
1055	</div>
1056	</div>
1057
1058	<?php
1059	}
1060
1061	public function render_post_grid_item($post_id, $image_size) {
1062	$settings = $this->get_settings_for_display();
1063
1064	$this->add_render_attribute('slider-item', 'class', 'upk-skide-item swiper-slide', true);
1065
1066	?>
1067	<div <?php $this->print_render_attribute_string('slider-item'); ?>>
1068	<div class="upk-image-wrap">
1069	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1070	</div>
1071	<div class="upk-content">
1072
1073	<?php $this->render_category(); ?>
1074
1075	<?php if ($settings['show_title']) : ?>
1076	<div data-swiper-parallax="-200">
1077	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1078	</div>
1079	<?php endif; ?>
1080
1081	<div class="upk-meta" data-swiper-parallax="-100">
1082	<div class="upk-author-img">
1083	<?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
1084	</div>
1085	<div class="upk-meta-info">
1086	<div class="upk-author-name">
1087	<a href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
1088	<?php echo esc_html( get_the_author() ); ?>
1089	</a>
1090	</div>
1091
1092	<?php if ($settings['show_comments'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
1093	<div class="upk-date-comments">
1094	<?php $this->render_date(); ?>
1095
1096	<?php if ($settings['show_comments']) : ?>
1097	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1098	<?php $this->render_comments($post_id); ?>
1099	</div>
1100	<?php endif; ?>
1101
1102	<?php if (_is_upk_pro_activated()) :
1103	if ('yes' === $settings['show_reading_time']) : ?>
1104	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1105	<?php echo esc_html( ultimate_post_kit_reading_time(get_the_content(), $settings['avg_reading_speed']) ); ?>
1106	</div>
1107	<?php endif; ?>
1108	<?php endif; ?>
1109	</div>
1110	<?php endif; ?>
1111
1112	</div>
1113	</div>
1114
1115	</div>
1116	</div>
1117	<?php
1118	}
1119
1120	public function render_thumbnav($post_id, $image_size) {
1121	$settings = $this->get_settings_for_display();
1122
1123	$this->add_render_attribute('thumb-item', 'class', 'upk-skide-thumb-item swiper-slide', true);
1124
1125	?>
1126	<div <?php $this->print_render_attribute_string('thumb-item'); ?>>
1127	<div class="upk-thumbs-img">
1128	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1129	</div>
1130	<div class="upk-thumbs-content">
1131	<h3 class="upk-title">
1132	<a href="javascript:void(0);"><?php echo esc_html(get_the_title()); ?></a>
1133	</h3>
1134	</div>
1135	</div>
1136	<?php
1137	}
1138
1139	public function render() {
1140	$settings = $this->get_settings_for_display();
1141
1142	$this->query_posts($settings['item_limit']['size']);
1143	$wp_query = $this->get_query();
1144
1145	if (!$wp_query->found_posts) {
1146	return;
1147	}
1148
1149	$this->add_render_attribute('swiper-thumbs', 'class', 'upk-skide-thumbs swiper');
1150
1151	?>
1152	<div class="upk-skide-slider-wrap">
1153	<?php
1154
1155	$this->render_header();
1156
1157	while ($wp_query->have_posts()) {
1158	$wp_query->the_post();
1159	$thumbnail_size = $settings['primary_thumbnail_size'];
1160
1161	$this->render_post_grid_item(get_the_ID(), $thumbnail_size);
1162	}
1163	wp_reset_postdata();
1164
1165	$this->render_footer();
1166
1167
1168	?>
1169	<div thumbsSlider="" <?php $this->print_render_attribute_string('swiper-thumbs'); ?>>
1170	<div class="swiper-wrapper">
1171	<?php
1172
1173	while ($wp_query->have_posts()) {
1174	$wp_query->the_post();
1175	$thumbnail_size = $settings['primary_thumbnail_size'];
1176
1177	$this->render_thumbnav(get_the_ID(), $thumbnail_size);
1178	}
1179	wp_reset_postdata();
1180
1181	?>
1182	</div>
1183	</div>
1184	<?php
1185	if (_is_upk_pro_activated()) {
1186	apply_filters('show_top_stories', $this);
1187	}
1188	?>
1189
1190	</div>
1191
1192	<?php
1193	}
1194	}
1195