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

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

1,071 lines 26.9 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\NoxeSlider\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\Traits\Global_Widget_Functions;
18	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
19	use WP_Query;
20
21	if (!defined('ABSPATH')) exit; // Exit if accessed directly
22
23	class Noxe_Slider extends Group_Control_Query {
24
25	use Global_Widget_Controls;
26	use Global_Widget_Functions;
27
28	private $_query = null;
29
30	public function get_name() {
31	return 'upk-noxe-slider';
32	}
33
34	public function get_title() {
35	return BDTUPK . esc_html__('Noxe Slider', 'ultimate-post-kit');
36	}
37
38	public function get_icon() {
39	return 'upk-widget-icon upk-icon-noxe-slider';
40	}
41
42	public function get_categories() {
43	return ['ultimate-post-kit'];
44	}
45
46	public function get_keywords() {
47	return ['post', 'carousel', 'blog', 'recent', 'news', 'slider', 'noxe'];
48	}
49
50	public function get_style_depends() {
51	if ($this->upk_is_edit_mode()) {
52	return ['swiper', 'upk-all-styles'];
53	} else {
54	return ['swiper', 'upk-font', 'upk-noxe-slider'];
55	}
56	}
57
58	public function get_script_depends() {
59	if ($this->upk_is_edit_mode()) {
60	return ['swiper', 'upk-all-scripts'];
61	} else {
62	return ['swiper', 'upk-noxe-slider'];
63	}
64	}
65
66	public function get_custom_help_url() {
67	return 'https://youtu.be/CyhG4NK8_lo';
68	}
69
70	public function get_query() {
71	return $this->_query;
72	}
73
74	public function has_widget_inner_wrapper(): bool {
75	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
76	}
77
78
79	protected function register_controls() {
80	$this->start_controls_section(
81	'section_content_layout',
82	[
83	'label' => esc_html__('Layout', 'ultimate-post-kit'),
84	]
85	);
86
87	$this->add_responsive_control(
88	'item_height',
89	[
90	'label' => esc_html__('Item Height', 'ultimate-post-kit'),
91	'type' => Controls_Manager::SLIDER,
92	'size_units' => ['px', 'vh'],
93	'range' => [
94	'px' => [
95	'min' => 200,
96	'max' => 1080,
97	],
98	'vh' => [
99	'min' => 10,
100	'max' => 100,
101	],
102	],
103	'selectors' => [
104	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-item' => 'height: {{SIZE}}{{UNIT}};',
105	],
106	]
107	);
108
109	$this->add_group_control(
110	Group_Control_Image_Size::get_type(),
111	[
112	'name' => 'primary_thumbnail',
113	'exclude' => ['custom'],
114	'default' => 'full',
115	]
116	);
117
118	$this->add_control(
119	'hr_1',
120	[
121	'type' => Controls_Manager::DIVIDER,
122	]
123	);
124
125	//Global Title Controls
126	$this->register_title_controls();
127	$this->register_text_controls();
128
129	$this->add_control(
130	'show_category',
131	[
132	'label' => esc_html__('Show Category', 'ultimate-post-kit'),
133	'type' => Controls_Manager::SWITCHER,
134	'default' => 'yes',
135	]
136	);
137
138	$this->add_control(
139	'show_date',
140	[
141	'label' => esc_html__('Show Date', 'ultimate-post-kit'),
142	'type' => Controls_Manager::SWITCHER,
143	'default' => 'yes',
144	]
145	);
146
147	$this->add_control(
148	'show_author',
149	[
150	'label' => esc_html__('Show Author', 'ultimate-post-kit'),
151	'type' => Controls_Manager::SWITCHER,
152	'default' => 'yes',
153	'separator' => 'before'
154	]
155	);
156
157	$this->add_control(
158	'show_comments',
159	[
160	'label' => esc_html__('Show Comments', 'ultimate-post-kit'),
161	'type' => Controls_Manager::SWITCHER,
162	'default' => 'yes',
163	]
164	);
165
166	$this->add_control(
167	'meta_separator',
168	[
169	'label' => __('Separator', 'ultimate-post-kit'),
170	'type' => Controls_Manager::TEXT,
171	'default' => '\|',
172	'label_block' => false,
173	]
174	);
175
176	//Global Reading Time Controls
177	$this->register_reading_time_controls();
178
179	$this->end_controls_section();
180
181	// Query Settings
182	$this->start_controls_section(
183	'section_post_query_builder',
184	[
185	'label' => __('Query', 'ultimate-post-kit'),
186	'tab' => Controls_Manager::TAB_CONTENT,
187	]
188	);
189
190	$this->add_control(
191	'item_limit',
192	[
193	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
194	'type' => Controls_Manager::SLIDER,
195	'range' => [
196	'px' => [
197	'min' => 1,
198	'max' => 20,
199	],
200	],
201	'default' => [
202	'size' => 3,
203	],
204	'condition' => [
205	'posts_source!' => 'current_query',
206	]
207	]
208	);
209
210	$this->register_query_builder_controls();
211
212	$this->end_controls_section();
213
214	$this->start_controls_section(
215	'section_carousel_settings',
216	[
217	'label' => __('Slider Settings', 'ultimate-post-kit'),
218	]
219	);
220
221	$this->add_control(
222	'autoplay',
223	[
224	'label' => __('Autoplay', 'ultimate-post-kit'),
225	'type' => Controls_Manager::SWITCHER,
226	'default' => 'yes',
227
228	]
229	);
230
231	$this->add_control(
232	'autoplay_speed',
233	[
234	'label' => esc_html__('Autoplay Speed', 'ultimate-post-kit'),
235	'type' => Controls_Manager::NUMBER,
236	'default' => 5000,
237	'condition' => [
238	'autoplay' => 'yes',
239	],
240	]
241	);
242
243	$this->add_control(
244	'pauseonhover',
245	[
246	'label' => esc_html__('Pause on Hover', 'ultimate-post-kit'),
247	'type' => Controls_Manager::SWITCHER,
248	]
249	);
250
251	$this->add_control(
252	'grab_cursor',
253	[
254	'label' => __('Grab Cursor', 'ultimate-post-kit'),
255	'type' => Controls_Manager::SWITCHER,
256	]
257	);
258
259	$this->add_control(
260	'loop',
261	[
262	'label' => __('Loop', 'ultimate-post-kit'),
263	'type' => Controls_Manager::SWITCHER,
264	'default' => 'yes',
265
266	]
267	);
268
269
270	$this->add_control(
271	'speed',
272	[
273	'label' => __('Animation Speed (ms)', 'ultimate-post-kit'),
274	'type' => Controls_Manager::SLIDER,
275	'default' => [
276	'size' => 500,
277	],
278	'range' => [
279	'px' => [
280	'min' => 100,
281	'max' => 5000,
282	'step' => 50,
283	],
284	],
285	]
286	);
287
288	$this->add_control(
289	'observer',
290	[
291	'label' => __('Observer', 'ultimate-post-kit'),
292	'description' => __('When you use carousel in any hidden place (in tabs, accordion etc) keep it yes.', 'ultimate-post-kit'),
293	'type' => Controls_Manager::SWITCHER,
294	]
295	);
296
297	$this->end_controls_section();
298
299	//Style
300	$this->start_controls_section(
301	'upk_section_style',
302	[
303	'label' => esc_html__('Items', 'ultimate-post-kit'),
304	'tab' => Controls_Manager::TAB_STYLE,
305	]
306	);
307
308	$this->add_group_control(
309	Group_Control_Background::get_type(),
310	[
311	'name' => 'item_background',
312	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-item',
313	]
314	);
315
316	$this->add_responsive_control(
317	'item_padding',
318	[
319	'label' => __('Padding', 'ultimate-post-kit'),
320	'type' => Controls_Manager::DIMENSIONS,
321	'size_units' => ['px', 'em', '%'],
322	'selectors' => [
323	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
324	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation' => 'bottom: {{BOTTOM}}{{UNIT}}; right: {{RIGHT}}{{UNIT}};',
325	],
326	]
327	);
328
329	$this->end_controls_section();
330
331
332	$this->start_controls_section(
333	'section_style_title',
334	[
335	'label' => esc_html__('Title', 'ultimate-post-kit'),
336	'tab' => Controls_Manager::TAB_STYLE,
337	'condition' => [
338	'show_title' => 'yes',
339	],
340	]
341	);
342
343	$this->add_control(
344	'title_style',
345	[
346	'label' => esc_html__('Style', 'ultimate-post-kit'),
347	'type' => Controls_Manager::SELECT,
348	'default' => 'underline',
349	'options' => [
350	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
351	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
352	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
353	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
354	],
355	]
356	);
357
358	$this->add_control(
359	'title_color',
360	[
361	'label' => esc_html__('Color', 'ultimate-post-kit'),
362	'type' => Controls_Manager::COLOR,
363	'selectors' => [
364	'{{WRAPPER}} .upk-noxe-slider .upk-title a' => 'color: {{VALUE}};',
365	],
366	]
367	);
368
369	$this->add_control(
370	'title_hover_color',
371	[
372	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
373	'type' => Controls_Manager::COLOR,
374	'selectors' => [
375	'{{WRAPPER}} .upk-noxe-slider .upk-title a:hover' => 'color: {{VALUE}};',
376	],
377	]
378	);
379
380	$this->add_group_control(
381	Group_Control_Typography::get_type(),
382	[
383	'name' => 'title_typography',
384	'label' => esc_html__('Typography', 'ultimate-post-kit'),
385	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-title',
386	]
387	);
388
389	$this->add_group_control(
390	Group_Control_Text_Shadow::get_type(),
391	[
392	'name' => 'title_text_shadow',
393	'label' => __('Text Shadow', 'ultimate-post-kit'),
394	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-title',
395	]
396	);
397
398	$this->add_group_control(
399	Group_Control_Text_Stroke::get_type(),
400	[
401	'name' => 'title_text_stroke',
402	'label' => __('Text Stroke', 'ultimate-post-kit') . BDTUPK_NC,
403	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-title',
404	]
405	);
406
407	$this->add_responsive_control(
408	'title_spacing',
409	[
410	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
411	'type' => Controls_Manager::SLIDER,
412	'range' => [
413	'px' => [
414	'min' => 0,
415	'max' => 50,
416	],
417	],
418	'selectors' => [
419	'{{WRAPPER}} .upk-noxe-slider .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
420	],
421	]
422	);
423
424	$this->end_controls_section();
425
426	$this->start_controls_section(
427	'section_style_text',
428	[
429	'label' => esc_html__('Text', 'ultimate-post-kit'),
430	'tab' => Controls_Manager::TAB_STYLE,
431	'condition' => [
432	'show_excerpt' => 'yes',
433	],
434	]
435	);
436
437	$this->add_control(
438	'text_color',
439	[
440	'label' => esc_html__('Color', 'ultimate-post-kit'),
441	'type' => Controls_Manager::COLOR,
442	'selectors' => [
443	'{{WRAPPER}} .upk-noxe-slider .upk-text' => 'color: {{VALUE}};',
444	],
445	]
446	);
447
448
449	$this->add_responsive_control(
450	'text_margin',
451	[
452	'label' => __('Margin', 'ultimate-post-kit'),
453	'type' => Controls_Manager::DIMENSIONS,
454	'size_units' => ['px', 'em', '%'],
455	'selectors' => [
456	'{{WRAPPER}} .upk-noxe-slider .upk-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
457	],
458	]
459	);
460
461	$this->add_group_control(
462	Group_Control_Typography::get_type(),
463	[
464	'name' => 'text_typography',
465	'label' => esc_html__('Typography', 'ultimate-post-kit'),
466	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-text',
467	]
468	);
469
470	$this->end_controls_section();
471
472	$this->start_controls_section(
473	'section_style_date',
474	[
475	'label' => esc_html__('Date', 'ultimate-post-kit'),
476	'tab' => Controls_Manager::TAB_STYLE,
477	'condition' => [
478	'show_date' => 'yes',
479	],
480	]
481	);
482
483	$this->add_control(
484	'date_color',
485	[
486	'label' => esc_html__('Color', 'ultimate-post-kit'),
487	'type' => Controls_Manager::COLOR,
488	'selectors' => [
489	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap' => 'color: {{VALUE}};',
490	],
491	]
492	);
493
494	$this->add_group_control(
495	Group_Control_Background::get_type(),
496	[
497	'name' => 'date_background',
498	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap',
499	]
500	);
501
502	$this->add_responsive_control(
503	'date_padding',
504	[
505	'label' => __('Padding', 'ultimate-post-kit'),
506	'type' => Controls_Manager::DIMENSIONS,
507	'size_units' => ['px', 'em', '%'],
508	'selectors' => [
509	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
510	],
511	]
512	);
513
514	$this->add_group_control(
515	Group_Control_Typography::get_type(),
516	[
517	'name' => 'date_typography',
518	'label' => esc_html__('Typography', 'ultimate-post-kit'),
519	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap',
520	]
521	);
522
523	$this->end_controls_section();
524
525	$this->start_controls_section(
526	'section_style_meta',
527	[
528	'label' => esc_html__('Meta', 'ultimate-post-kit'),
529	'tab' => Controls_Manager::TAB_STYLE,
530	'conditions' => [
531	'relation' => 'or',
532	'terms' => [
533	[
534	'name' => 'show_author',
535	'value' => 'yes'
536	],
537	[
538	'name' => 'show_comments',
539	'value' => 'yes'
540	]
541	]
542	],
543	]
544	);
545
546	$this->add_control(
547	'meta_color',
548	[
549	'label' => esc_html__('Color', 'ultimate-post-kit'),
550	'type' => Controls_Manager::COLOR,
551	'selectors' => [
552	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta, {{WRAPPER}} .upk-noxe-slider .upk-noxe-meta .upk-author-name-wrap .upk-author-name' => 'color: {{VALUE}};',
553	],
554	]
555	);
556
557	$this->add_control(
558	'meta_hover_color',
559	[
560	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
561	'type' => Controls_Manager::COLOR,
562	'selectors' => [
563	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta .upk-author-name-wrap .upk-author-name:hover' => 'color: {{VALUE}};',
564	],
565	]
566	);
567
568	$this->add_responsive_control(
569	'meta_space_between',
570	[
571	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
572	'type' => Controls_Manager::SLIDER,
573	'range' => [
574	'px' => [
575	'min' => 0,
576	'max' => 50,
577	],
578	],
579	'selectors' => [
580	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
581	],
582	]
583	);
584
585	$this->add_group_control(
586	Group_Control_Typography::get_type(),
587	[
588	'name' => 'meta_typography',
589	'label' => esc_html__('Typography', 'ultimate-post-kit'),
590	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta',
591	]
592	);
593
594	$this->end_controls_section();
595
596	$this->start_controls_section(
597	'section_style_category',
598	[
599	'label' => esc_html__('Category', 'ultimate-post-kit'),
600	'tab' => Controls_Manager::TAB_STYLE,
601	'condition' => [
602	'show_category' => 'yes'
603	],
604	]
605	);
606
607	$this->start_controls_tabs('tabs_category_style');
608
609	$this->start_controls_tab(
610	'tab_category_normal',
611	[
612	'label' => esc_html__('Normal', 'ultimate-post-kit'),
613	]
614	);
615
616	$this->add_control(
617	'category_color',
618	[
619	'label' => esc_html__('Color', 'ultimate-post-kit'),
620	'type' => Controls_Manager::COLOR,
621	'selectors' => [
622	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a' => 'color: {{VALUE}};',
623	],
624	]
625	);
626
627	$this->add_group_control(
628	Group_Control_Background::get_type(),
629	[
630	'name' => 'category_background',
631	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
632	]
633	);
634
635	$this->add_group_control(
636	Group_Control_Border::get_type(),
637	[
638	'name' => 'category_border',
639	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
640	]
641	);
642
643	$this->add_responsive_control(
644	'category_border_radius',
645	[
646	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
647	'type' => Controls_Manager::DIMENSIONS,
648	'size_units' => ['px', '%'],
649	'selectors' => [
650	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
651	],
652	]
653	);
654
655	$this->add_responsive_control(
656	'category_padding',
657	[
658	'label' => esc_html__('Padding', 'ultimate-post-kit'),
659	'type' => Controls_Manager::DIMENSIONS,
660	'size_units' => ['px', 'em', '%'],
661	'selectors' => [
662	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
663	],
664	]
665	);
666
667	$this->add_responsive_control(
668	'category_spacing',
669	[
670	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
671	'type' => Controls_Manager::SLIDER,
672	'range' => [
673	'px' => [
674	'min' => 0,
675	'max' => 50,
676	'step' => 2,
677	],
678	],
679	'selectors' => [
680	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
681	],
682	]
683	);
684
685	$this->add_group_control(
686	Group_Control_Box_Shadow::get_type(),
687	[
688	'name' => 'category_shadow',
689	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
690	]
691	);
692
693	$this->add_group_control(
694	Group_Control_Typography::get_type(),
695	[
696	'name' => 'category_typography',
697	'label' => esc_html__('Typography', 'ultimate-post-kit'),
698	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
699	]
700	);
701
702	$this->end_controls_tab();
703
704	$this->start_controls_tab(
705	'tab_category_hover',
706	[
707	'label' => esc_html__('Hover', 'ultimate-post-kit'),
708	'condition' => [
709	'show_category' => 'yes'
710	]
711	]
712	);
713
714	$this->add_control(
715	'category_hover_color',
716	[
717	'label' => esc_html__('Color', 'ultimate-post-kit'),
718	'type' => Controls_Manager::COLOR,
719	'selectors' => [
720	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a:hover' => 'color: {{VALUE}};',
721	],
722	]
723	);
724
725	$this->add_group_control(
726	Group_Control_Background::get_type(),
727	[
728	'name' => 'category_hover_background',
729	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a:hover',
730	]
731	);
732
733	$this->add_control(
734	'category_hover_border_color',
735	[
736	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
737	'type' => Controls_Manager::COLOR,
738	'condition' => [
739	'category_border_border!' => '',
740	],
741	'selectors' => [
742	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a:hover' => 'border-color: {{VALUE}};',
743	],
744	]
745	);
746
747	$this->end_controls_tab();
748
749	$this->end_controls_tabs();
750
751	$this->end_controls_section();
752
753	//Navigation Css
754	$this->start_controls_section(
755	'section_style_navigation',
756	[
757	'label' => __('Navigation', 'ultimate-post-kit'),
758	'tab' => Controls_Manager::TAB_STYLE,
759	]
760	);
761
762	$this->add_control(
763	'arrows_heading',
764	[
765	'label' => __('A R R O W S', 'ultimate-post-kit'),
766	'type' => Controls_Manager::HEADING,
767	'separator' => 'before'
768	]
769	);
770
771	$this->add_control(
772	'arrows_color',
773	[
774	'label' => __('Color', 'ultimate-post-kit'),
775	'type' => Controls_Manager::COLOR,
776	'selectors' => [
777	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation .upk-link--arrowed g' => 'color: {{VALUE}}',
778	],
779	]
780	);
781
782	$this->add_control(
783	'arrows_hover_color',
784	[
785	'label' => __('Hover Color', 'ultimate-post-kit'),
786	'type' => Controls_Manager::COLOR,
787	'selectors' => [
788	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation .upk-link--arrowed:hover g' => 'color: {{VALUE}}',
789	],
790	]
791	);
792
793	$this->add_responsive_control(
794	'arrows_spacing',
795	[
796	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
797	'type' => Controls_Manager::SLIDER,
798	'range' => [
799	'px' => [
800	'min' => 0,
801	'max' => 50,
802	],
803	],
804	'selectors' => [
805	'{{WRAPPER}} .upk-noxe-slider .upk-navigation-next' => 'margin-left: {{SIZE}}{{UNIT}};',
806	],
807	]
808	);
809
810	$this->add_group_control(
811	Group_Control_Typography::get_type(),
812	[
813	'name' => 'arrows_typography',
814	'label' => esc_html__('Typography', 'ultimate-post-kit'),
815	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation .upk-link--arrowed',
816	]
817	);
818
819	$this->end_controls_section();
820	}
821
822	/**
823	* Main query render for this widget
824	* @param $posts_per_page number item query limit
825	*/
826	public function query_posts($posts_per_page) {
827
828	$default = $this->getGroupControlQueryArgs();
829	$args = [];
830	if ($posts_per_page) {
831	$args['posts_per_page'] = $posts_per_page;
832	}
833	$args = array_merge($default, $args);
834	$this->_query = new WP_Query($args);
835	}
836
837	public function render_image($image_id, $size) {
838	$placeholder_image_src = Utils::get_placeholder_image_src();
839
840	$image_src = wp_get_attachment_image_src($image_id, $size);
841
842	if (!$image_src) {
843	$image_src = $placeholder_image_src;
844	} else {
845	$image_src = $image_src[0];
846	}
847
848	?>
849
850	<img class="upk-noxe-img swiper-lazy" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
851
852	<?php
853	}
854
855	public function render_category() {
856
857	if (!$this->get_settings('show_category')) {
858	return;
859	}
860	?>
861	<div class="upk-noxe-category" data-swiper-parallax-opacity="0.5">
862	<?php echo upk_get_category($this->get_settings('posts_source')); ?>
863	</div>
864	<?php
865	}
866
867	public function render_author() {
868
869	if (!$this->get_settings('show_author')) {
870	return;
871	}
872	?>
873	<div class="upk-author-name-wrap">
874	<span class="upk-by"><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit') ?></span>
875	<a class="upk-author-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
876	<?php echo esc_html( get_the_author() ) ?>
877	</a>
878	</div>
879	<?php
880	}
881
882	public function render_comments($id = 0) {
883
884	if (!$this->get_settings('show_comments')) {
885	return;
886	}
887	?>
888
889	<div class="upk-noxe-comments">
890	<?php echo esc_html( $this->upk_get_formatted_comments_count( $id ) ); ?>
891	</div>
892
893	<?php
894	}
895
896	public function render_header() {
897	$id = 'upk-noxe-slider-' . $this->get_id();
898	$settings = $this->get_settings_for_display();
899
900	$this->add_render_attribute('noxe-slider', 'id', $id);
901	$this->add_render_attribute('noxe-slider', 'class', ['upk-noxe-slider']);
902
903	$this->add_render_attribute(
904	[
905	'noxe-slider' => [
906	'data-settings' => [
907	wp_json_encode(array_filter([
908	"autoplay" => ("yes" == $settings["autoplay"]) ? ["delay" => $settings["autoplay_speed"]] : false,
909	"loop" => ($settings["loop"] == "yes") ? true : false,
910	"speed" => $settings["speed"]["size"],
911	"effect" => 'fade',
912	"lazy" => true,
913	"parallax" => true,
914	"grabCursor" => ($settings["grab_cursor"] === "yes") ? true : false,
915	"pauseOnHover" => ("yes" == $settings["pauseonhover"]) ? true : false,
916	"slidesPerView" => 1,
917	"observer" => ($settings["observer"]) ? true : false,
918	"observeParents" => ($settings["observer"]) ? true : false,
919	"navigation" => [
920	"nextEl" => "#" . $id . " .upk-navigation-next",
921	"prevEl" => "#" . $id . " .upk-navigation-prev",
922	],
923	// "pagination" => [
924	// "el" => "#" . $id . " .swiper-pagination",
925	// "clickable" => "true",
926	// ],
927	"lazy" => [
928	"loadPrevNext" => "true",
929	],
930	]))
931	]
932	]
933	]
934	);
935
936	$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper');
937
938	?>
939	<div <?php $this->print_render_attribute_string('noxe-slider'); ?>>
940	<div class="upk-noxe-slider-wrapper">
941	<div <?php $this->print_render_attribute_string('swiper'); ?>>
942	<div class="swiper-wrapper">
943	<?php
944	}
945
946	public function render_footer() {
947	$settings = $this->get_settings_for_display();
948
949	?>
950	</div>
951	<!-- HTML EDIT BY ASIK START -->
952
953	<div class="upk-noxe-navigation" data-swiper-parallax-opacity="0.5">
954	<div class="upk-navigation-prev">
955	<a class="upk-link--arrowed" href="#">
956	<svg class="upk-arrow-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32">
957	<g fill="none" stroke="#ff215a" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
958	<circle class="upk-arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
959	<path class="upk-arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
960	</g>
961	</svg>
962	</a>
963	</div>
964
965	<div class="upk-navigation-next">
966	<a class="upk-link--arrowed" href="#">
967	<svg class="upk-arrow-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32">
968	<g fill="none" stroke="#ff215a" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
969	<circle class="upk-arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
970	<path class="upk-arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
971	</g>
972	</svg>
973	</a>
974	</div>
975	</div>
976
977	<!-- HTML EDIT BY ASIK END -->
978	</div>
979
980	</div>
981	</div>
982
983	<?php
984	}
985
986	public function render_post_grid_item($post_id, $image_size, $excerpt_length) {
987	$settings = $this->get_settings_for_display();
988
989	$this->add_render_attribute('slider-item', 'class', 'upk-noxe-item swiper-slide', true);
990
991	?>
992
993	<div <?php $this->print_render_attribute_string('slider-item'); ?>>
994	<div class="upk-noxe-item-box-wrap">
995	<div class="upk-noxe-image-wrap">
996	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
997	<?php $this->render_category(); ?>
998	<?php if ($settings['show_date']) : ?>
999	<div class="upk-noxe-date-wrap">
1000	<span class="upk-noxe-month" data-swiper-parallax-x="-40"><?php echo get_the_date('m/d'); ?></span>
1001	<span class="upk-noxe-year" data-swiper-parallax-x="-30"><?php echo get_the_date('Y'); ?></span>
1002	</div>
1003	<?php endif; ?>
1004	</div>
1005	<div class="upk-noxe-content">
1006	<div class="upk-noxe-inner-content">
1007	<?php if ($settings['show_title']) : ?>
1008	<div data-swiper-parallax-y="-150">
1009	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1010	</div>
1011	<?php endif; ?>
1012
1013	<?php if ($settings['show_author'] or $settings['show_comments'] or $settings['show_reading_time']) : ?>
1014	<div class="upk-noxe-meta" data-swiper-parallax-y="-80">
1015	<?php $this->render_author(); ?>
1016
1017	<?php if ($settings['show_comments'] == 'yes') : ?>
1018	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1019	<?php $this->render_comments($post_id); ?>
1020	</div>
1021	<?php endif; ?>
1022
1023	<?php if (_is_upk_pro_activated()) :
1024	if ('yes' === $settings['show_reading_time']) : ?>
1025	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1026	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
1027	</div>
1028	<?php endif; ?>
1029	<?php endif; ?>
1030	</div>
1031	<?php endif; ?>
1032
1033	</div>
1034
1035	<?php if ($settings['show_excerpt']) : ?>
1036	<div class="upk-text=wrap" data-swiper-parallax-y="-100">
1037	<?php $this->render_excerpt($excerpt_length); ?>
1038	</div>
1039	<?php endif; ?>
1040
1041	</div>
1042	</div>
1043	</div>
1044	<?php
1045	}
1046
1047	public function render() {
1048	$settings = $this->get_settings_for_display();
1049
1050	$this->query_posts($settings['item_limit']['size']);
1051	$wp_query = $this->get_query();
1052
1053	if (!$wp_query->found_posts) {
1054	return;
1055	}
1056
1057	$this->render_header();
1058
1059	while ($wp_query->have_posts()) {
1060	$wp_query->the_post();
1061	$thumbnail_size = $settings['primary_thumbnail_size'];
1062
1063	$this->render_post_grid_item(get_the_ID(), $thumbnail_size, $settings['excerpt_length']);
1064	}
1065
1066	$this->render_footer();
1067
1068	wp_reset_postdata();
1069	}
1070	}
1071