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

1,074 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	'condition' => [
249	'autoplay' => 'yes',
250	],
251	]
252	);
253
254	$this->add_control(
255	'grab_cursor',
256	[
257	'label' => __('Grab Cursor', 'ultimate-post-kit'),
258	'type' => Controls_Manager::SWITCHER,
259	]
260	);
261
262	$this->add_control(
263	'loop',
264	[
265	'label' => __('Loop', 'ultimate-post-kit'),
266	'type' => Controls_Manager::SWITCHER,
267	'default' => 'yes',
268
269	]
270	);
271
272
273	$this->add_control(
274	'speed',
275	[
276	'label' => __('Animation Speed (ms)', 'ultimate-post-kit'),
277	'type' => Controls_Manager::SLIDER,
278	'default' => [
279	'size' => 500,
280	],
281	'range' => [
282	'px' => [
283	'min' => 100,
284	'max' => 5000,
285	'step' => 50,
286	],
287	],
288	]
289	);
290
291	$this->add_control(
292	'observer',
293	[
294	'label' => __('Observer', 'ultimate-post-kit'),
295	'description' => __('When you use carousel in any hidden place (in tabs, accordion etc) keep it yes.', 'ultimate-post-kit'),
296	'type' => Controls_Manager::SWITCHER,
297	]
298	);
299
300	$this->end_controls_section();
301
302	//Style
303	$this->start_controls_section(
304	'upk_section_style',
305	[
306	'label' => esc_html__('Items', 'ultimate-post-kit'),
307	'tab' => Controls_Manager::TAB_STYLE,
308	]
309	);
310
311	$this->add_group_control(
312	Group_Control_Background::get_type(),
313	[
314	'name' => 'item_background',
315	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-item',
316	]
317	);
318
319	$this->add_responsive_control(
320	'item_padding',
321	[
322	'label' => __('Padding', 'ultimate-post-kit'),
323	'type' => Controls_Manager::DIMENSIONS,
324	'size_units' => ['px', 'em', '%'],
325	'selectors' => [
326	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
327	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation' => 'bottom: {{BOTTOM}}{{UNIT}}; right: {{RIGHT}}{{UNIT}};',
328	],
329	]
330	);
331
332	$this->end_controls_section();
333
334
335	$this->start_controls_section(
336	'section_style_title',
337	[
338	'label' => esc_html__('Title', 'ultimate-post-kit'),
339	'tab' => Controls_Manager::TAB_STYLE,
340	'condition' => [
341	'show_title' => 'yes',
342	],
343	]
344	);
345
346	$this->add_control(
347	'title_style',
348	[
349	'label' => esc_html__('Style', 'ultimate-post-kit'),
350	'type' => Controls_Manager::SELECT,
351	'default' => 'underline',
352	'options' => [
353	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
354	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
355	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
356	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
357	],
358	]
359	);
360
361	$this->add_control(
362	'title_color',
363	[
364	'label' => esc_html__('Color', 'ultimate-post-kit'),
365	'type' => Controls_Manager::COLOR,
366	'selectors' => [
367	'{{WRAPPER}} .upk-noxe-slider .upk-title a' => 'color: {{VALUE}};',
368	],
369	]
370	);
371
372	$this->add_control(
373	'title_hover_color',
374	[
375	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
376	'type' => Controls_Manager::COLOR,
377	'selectors' => [
378	'{{WRAPPER}} .upk-noxe-slider .upk-title a:hover' => 'color: {{VALUE}};',
379	],
380	]
381	);
382
383	$this->add_group_control(
384	Group_Control_Typography::get_type(),
385	[
386	'name' => 'title_typography',
387	'label' => esc_html__('Typography', 'ultimate-post-kit'),
388	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-title',
389	]
390	);
391
392	$this->add_group_control(
393	Group_Control_Text_Shadow::get_type(),
394	[
395	'name' => 'title_text_shadow',
396	'label' => __('Text Shadow', 'ultimate-post-kit'),
397	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-title',
398	]
399	);
400
401	$this->add_group_control(
402	Group_Control_Text_Stroke::get_type(),
403	[
404	'name' => 'title_text_stroke',
405	'label' => __('Text Stroke', 'ultimate-post-kit'),
406	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-title',
407	]
408	);
409
410	$this->add_responsive_control(
411	'title_spacing',
412	[
413	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
414	'type' => Controls_Manager::SLIDER,
415	'range' => [
416	'px' => [
417	'min' => 0,
418	'max' => 50,
419	],
420	],
421	'selectors' => [
422	'{{WRAPPER}} .upk-noxe-slider .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
423	],
424	]
425	);
426
427	$this->end_controls_section();
428
429	$this->start_controls_section(
430	'section_style_text',
431	[
432	'label' => esc_html__('Text', 'ultimate-post-kit'),
433	'tab' => Controls_Manager::TAB_STYLE,
434	'condition' => [
435	'show_excerpt' => 'yes',
436	],
437	]
438	);
439
440	$this->add_control(
441	'text_color',
442	[
443	'label' => esc_html__('Color', 'ultimate-post-kit'),
444	'type' => Controls_Manager::COLOR,
445	'selectors' => [
446	'{{WRAPPER}} .upk-noxe-slider .upk-text' => 'color: {{VALUE}};',
447	],
448	]
449	);
450
451
452	$this->add_responsive_control(
453	'text_margin',
454	[
455	'label' => __('Margin', 'ultimate-post-kit'),
456	'type' => Controls_Manager::DIMENSIONS,
457	'size_units' => ['px', 'em', '%'],
458	'selectors' => [
459	'{{WRAPPER}} .upk-noxe-slider .upk-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
460	],
461	]
462	);
463
464	$this->add_group_control(
465	Group_Control_Typography::get_type(),
466	[
467	'name' => 'text_typography',
468	'label' => esc_html__('Typography', 'ultimate-post-kit'),
469	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-text',
470	]
471	);
472
473	$this->end_controls_section();
474
475	$this->start_controls_section(
476	'section_style_date',
477	[
478	'label' => esc_html__('Date', 'ultimate-post-kit'),
479	'tab' => Controls_Manager::TAB_STYLE,
480	'condition' => [
481	'show_date' => 'yes',
482	],
483	]
484	);
485
486	$this->add_control(
487	'date_color',
488	[
489	'label' => esc_html__('Color', 'ultimate-post-kit'),
490	'type' => Controls_Manager::COLOR,
491	'selectors' => [
492	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap' => 'color: {{VALUE}};',
493	],
494	]
495	);
496
497	$this->add_group_control(
498	Group_Control_Background::get_type(),
499	[
500	'name' => 'date_background',
501	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap',
502	]
503	);
504
505	$this->add_responsive_control(
506	'date_padding',
507	[
508	'label' => __('Padding', 'ultimate-post-kit'),
509	'type' => Controls_Manager::DIMENSIONS,
510	'size_units' => ['px', 'em', '%'],
511	'selectors' => [
512	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
513	],
514	]
515	);
516
517	$this->add_group_control(
518	Group_Control_Typography::get_type(),
519	[
520	'name' => 'date_typography',
521	'label' => esc_html__('Typography', 'ultimate-post-kit'),
522	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-date-wrap',
523	]
524	);
525
526	$this->end_controls_section();
527
528	$this->start_controls_section(
529	'section_style_meta',
530	[
531	'label' => esc_html__('Meta', 'ultimate-post-kit'),
532	'tab' => Controls_Manager::TAB_STYLE,
533	'conditions' => [
534	'relation' => 'or',
535	'terms' => [
536	[
537	'name' => 'show_author',
538	'value' => 'yes'
539	],
540	[
541	'name' => 'show_comments',
542	'value' => 'yes'
543	]
544	]
545	],
546	]
547	);
548
549	$this->add_control(
550	'meta_color',
551	[
552	'label' => esc_html__('Color', 'ultimate-post-kit'),
553	'type' => Controls_Manager::COLOR,
554	'selectors' => [
555	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta, {{WRAPPER}} .upk-noxe-slider .upk-noxe-meta .upk-author-name-wrap .upk-author-name' => 'color: {{VALUE}};',
556	],
557	]
558	);
559
560	$this->add_control(
561	'meta_hover_color',
562	[
563	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
564	'type' => Controls_Manager::COLOR,
565	'selectors' => [
566	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta .upk-author-name-wrap .upk-author-name:hover' => 'color: {{VALUE}};',
567	],
568	]
569	);
570
571	$this->add_responsive_control(
572	'meta_space_between',
573	[
574	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
575	'type' => Controls_Manager::SLIDER,
576	'range' => [
577	'px' => [
578	'min' => 0,
579	'max' => 50,
580	],
581	],
582	'selectors' => [
583	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
584	],
585	]
586	);
587
588	$this->add_group_control(
589	Group_Control_Typography::get_type(),
590	[
591	'name' => 'meta_typography',
592	'label' => esc_html__('Typography', 'ultimate-post-kit'),
593	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-meta',
594	]
595	);
596
597	$this->end_controls_section();
598
599	$this->start_controls_section(
600	'section_style_category',
601	[
602	'label' => esc_html__('Category', 'ultimate-post-kit'),
603	'tab' => Controls_Manager::TAB_STYLE,
604	'condition' => [
605	'show_category' => 'yes'
606	],
607	]
608	);
609
610	$this->start_controls_tabs('tabs_category_style');
611
612	$this->start_controls_tab(
613	'tab_category_normal',
614	[
615	'label' => esc_html__('Normal', 'ultimate-post-kit'),
616	]
617	);
618
619	$this->add_control(
620	'category_color',
621	[
622	'label' => esc_html__('Color', 'ultimate-post-kit'),
623	'type' => Controls_Manager::COLOR,
624	'selectors' => [
625	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a' => 'color: {{VALUE}};',
626	],
627	]
628	);
629
630	$this->add_group_control(
631	Group_Control_Background::get_type(),
632	[
633	'name' => 'category_background',
634	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
635	]
636	);
637
638	$this->add_group_control(
639	Group_Control_Border::get_type(),
640	[
641	'name' => 'category_border',
642	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
643	]
644	);
645
646	$this->add_responsive_control(
647	'category_border_radius',
648	[
649	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
650	'type' => Controls_Manager::DIMENSIONS,
651	'size_units' => ['px', '%'],
652	'selectors' => [
653	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
654	],
655	]
656	);
657
658	$this->add_responsive_control(
659	'category_padding',
660	[
661	'label' => esc_html__('Padding', 'ultimate-post-kit'),
662	'type' => Controls_Manager::DIMENSIONS,
663	'size_units' => ['px', 'em', '%'],
664	'selectors' => [
665	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
666	],
667	]
668	);
669
670	$this->add_responsive_control(
671	'category_spacing',
672	[
673	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
674	'type' => Controls_Manager::SLIDER,
675	'range' => [
676	'px' => [
677	'min' => 0,
678	'max' => 50,
679	'step' => 2,
680	],
681	],
682	'selectors' => [
683	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
684	],
685	]
686	);
687
688	$this->add_group_control(
689	Group_Control_Box_Shadow::get_type(),
690	[
691	'name' => 'category_shadow',
692	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
693	]
694	);
695
696	$this->add_group_control(
697	Group_Control_Typography::get_type(),
698	[
699	'name' => 'category_typography',
700	'label' => esc_html__('Typography', 'ultimate-post-kit'),
701	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a',
702	]
703	);
704
705	$this->end_controls_tab();
706
707	$this->start_controls_tab(
708	'tab_category_hover',
709	[
710	'label' => esc_html__('Hover', 'ultimate-post-kit'),
711	'condition' => [
712	'show_category' => 'yes'
713	]
714	]
715	);
716
717	$this->add_control(
718	'category_hover_color',
719	[
720	'label' => esc_html__('Color', 'ultimate-post-kit'),
721	'type' => Controls_Manager::COLOR,
722	'selectors' => [
723	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a:hover' => 'color: {{VALUE}};',
724	],
725	]
726	);
727
728	$this->add_group_control(
729	Group_Control_Background::get_type(),
730	[
731	'name' => 'category_hover_background',
732	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a:hover',
733	]
734	);
735
736	$this->add_control(
737	'category_hover_border_color',
738	[
739	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
740	'type' => Controls_Manager::COLOR,
741	'condition' => [
742	'category_border_border!' => '',
743	],
744	'selectors' => [
745	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-category a:hover' => 'border-color: {{VALUE}};',
746	],
747	]
748	);
749
750	$this->end_controls_tab();
751
752	$this->end_controls_tabs();
753
754	$this->end_controls_section();
755
756	//Navigation Css
757	$this->start_controls_section(
758	'section_style_navigation',
759	[
760	'label' => __('Navigation', 'ultimate-post-kit'),
761	'tab' => Controls_Manager::TAB_STYLE,
762	]
763	);
764
765	$this->add_control(
766	'arrows_heading',
767	[
768	'label' => __('A R R O W S', 'ultimate-post-kit'),
769	'type' => Controls_Manager::HEADING,
770	'separator' => 'before'
771	]
772	);
773
774	$this->add_control(
775	'arrows_color',
776	[
777	'label' => __('Color', 'ultimate-post-kit'),
778	'type' => Controls_Manager::COLOR,
779	'selectors' => [
780	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation .upk-link--arrowed g' => 'color: {{VALUE}}',
781	],
782	]
783	);
784
785	$this->add_control(
786	'arrows_hover_color',
787	[
788	'label' => __('Hover Color', 'ultimate-post-kit'),
789	'type' => Controls_Manager::COLOR,
790	'selectors' => [
791	'{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation .upk-link--arrowed:hover g' => 'color: {{VALUE}}',
792	],
793	]
794	);
795
796	$this->add_responsive_control(
797	'arrows_spacing',
798	[
799	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
800	'type' => Controls_Manager::SLIDER,
801	'range' => [
802	'px' => [
803	'min' => 0,
804	'max' => 50,
805	],
806	],
807	'selectors' => [
808	'{{WRAPPER}} .upk-noxe-slider .upk-navigation-next' => 'margin-left: {{SIZE}}{{UNIT}};',
809	],
810	]
811	);
812
813	$this->add_group_control(
814	Group_Control_Typography::get_type(),
815	[
816	'name' => 'arrows_typography',
817	'label' => esc_html__('Typography', 'ultimate-post-kit'),
818	'selector' => '{{WRAPPER}} .upk-noxe-slider .upk-noxe-navigation .upk-link--arrowed',
819	]
820	);
821
822	$this->end_controls_section();
823	}
824
825	/**
826	* Main query render for this widget
827	* @param $posts_per_page number item query limit
828	*/
829	public function query_posts($posts_per_page) {
830
831	$default = $this->getGroupControlQueryArgs();
832	$args = [];
833	if ($posts_per_page) {
834	$args['posts_per_page'] = $posts_per_page;
835	}
836	$args = array_merge($default, $args);
837	$this->_query = new WP_Query($args);
838	}
839
840	public function render_image($image_id, $size) {
841	$placeholder_image_src = Utils::get_placeholder_image_src();
842
843	$image_src = wp_get_attachment_image_src($image_id, $size);
844
845	if (!$image_src) {
846	$image_src = $placeholder_image_src;
847	} else {
848	$image_src = $image_src[0];
849	}
850
851	?>
852
853	<img class="upk-noxe-img swiper-lazy" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
854
855	<?php
856	}
857
858	public function render_category() {
859
860	if (!$this->get_settings('show_category')) {
861	return;
862	}
863	?>
864	<div class="upk-noxe-category" data-swiper-parallax-opacity="0.5">
865	<?php echo upk_get_category($this->get_settings('posts_source')); ?>
866	</div>
867	<?php
868	}
869
870	public function render_author() {
871
872	if (!$this->get_settings('show_author')) {
873	return;
874	}
875	?>
876	<div class="upk-author-name-wrap">
877	<span class="upk-by"><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit') ?></span>
878	<a class="upk-author-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
879	<?php echo esc_html( get_the_author() ) ?>
880	</a>
881	</div>
882	<?php
883	}
884
885	public function render_comments($id = 0) {
886
887	if (!$this->get_settings('show_comments')) {
888	return;
889	}
890	?>
891
892	<div class="upk-noxe-comments">
893	<?php echo esc_html( $this->upk_get_formatted_comments_count( $id ) ); ?>
894	</div>
895
896	<?php
897	}
898
899	public function render_header() {
900	$id = 'upk-noxe-slider-' . $this->get_id();
901	$settings = $this->get_settings_for_display();
902
903	$this->add_render_attribute('noxe-slider', 'id', $id);
904	$this->add_render_attribute('noxe-slider', 'class', ['upk-noxe-slider']);
905
906	$this->add_render_attribute(
907	[
908	'noxe-slider' => [
909	'data-settings' => [
910	wp_json_encode(array_filter([
911	"autoplay" => ("yes" == $settings["autoplay"]) ? ["delay" => $settings["autoplay_speed"]] : false,
912	"loop" => ($settings["loop"] == "yes") ? true : false,
913	"speed" => $settings["speed"]["size"],
914	"effect" => 'fade',
915	"lazy" => true,
916	"parallax" => true,
917	"grabCursor" => ($settings["grab_cursor"] === "yes") ? true : false,
918	"pauseOnHover" => ("yes" == $settings["pauseonhover"]) ? true : false,
919	"slidesPerView" => 1,
920	"observer" => ($settings["observer"]) ? true : false,
921	"observeParents" => ($settings["observer"]) ? true : false,
922	"navigation" => [
923	"nextEl" => "#" . $id . " .upk-navigation-next",
924	"prevEl" => "#" . $id . " .upk-navigation-prev",
925	],
926	// "pagination" => [
927	// "el" => "#" . $id . " .swiper-pagination",
928	// "clickable" => "true",
929	// ],
930	"lazy" => [
931	"loadPrevNext" => "true",
932	],
933	]))
934	]
935	]
936	]
937	);
938
939	$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper');
940
941	?>
942	<div <?php $this->print_render_attribute_string('noxe-slider'); ?>>
943	<div class="upk-noxe-slider-wrapper">
944	<div <?php $this->print_render_attribute_string('swiper'); ?>>
945	<div class="swiper-wrapper">
946	<?php
947	}
948
949	public function render_footer() {
950	$settings = $this->get_settings_for_display();
951
952	?>
953	</div>
954	<!-- HTML EDIT BY ASIK START -->
955
956	<div class="upk-noxe-navigation" data-swiper-parallax-opacity="0.5">
957	<div class="upk-navigation-prev">
958	<a class="upk-link--arrowed" href="#">
959	<svg class="upk-arrow-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32">
960	<g fill="none" stroke="#ff215a" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
961	<circle class="upk-arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
962	<path class="upk-arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
963	</g>
964	</svg>
965	</a>
966	</div>
967
968	<div class="upk-navigation-next">
969	<a class="upk-link--arrowed" href="#">
970	<svg class="upk-arrow-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32">
971	<g fill="none" stroke="#ff215a" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
972	<circle class="upk-arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
973	<path class="upk-arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
974	</g>
975	</svg>
976	</a>
977	</div>
978	</div>
979
980	<!-- HTML EDIT BY ASIK END -->
981	</div>
982
983	</div>
984	</div>
985
986	<?php
987	}
988
989	public function render_post_grid_item($post_id, $image_size, $excerpt_length) {
990	$settings = $this->get_settings_for_display();
991
992	$this->add_render_attribute('slider-item', 'class', 'upk-noxe-item swiper-slide', true);
993
994	?>
995
996	<div <?php $this->print_render_attribute_string('slider-item'); ?>>
997	<div class="upk-noxe-item-box-wrap">
998	<div class="upk-noxe-image-wrap">
999	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1000	<?php $this->render_category(); ?>
1001	<?php if ($settings['show_date']) : ?>
1002	<div class="upk-noxe-date-wrap">
1003	<span class="upk-noxe-month" data-swiper-parallax-x="-40"><?php echo get_the_date('m/d'); ?></span>
1004	<span class="upk-noxe-year" data-swiper-parallax-x="-30"><?php echo get_the_date('Y'); ?></span>
1005	</div>
1006	<?php endif; ?>
1007	</div>
1008	<div class="upk-noxe-content">
1009	<div class="upk-noxe-inner-content">
1010	<?php if ($settings['show_title']) : ?>
1011	<div data-swiper-parallax-y="-150">
1012	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1013	</div>
1014	<?php endif; ?>
1015
1016	<?php if ($settings['show_author'] or $settings['show_comments'] or $settings['show_reading_time']) : ?>
1017	<div class="upk-noxe-meta" data-swiper-parallax-y="-80">
1018	<?php $this->render_author(); ?>
1019
1020	<?php if ($settings['show_comments'] == 'yes') : ?>
1021	<div data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1022	<?php $this->render_comments($post_id); ?>
1023	</div>
1024	<?php endif; ?>
1025
1026	<?php if (_is_upk_pro_activated()) :
1027	if ('yes' === $settings['show_reading_time']) : ?>
1028	<div class="upk-reading-time" data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1029	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
1030	</div>
1031	<?php endif; ?>
1032	<?php endif; ?>
1033	</div>
1034	<?php endif; ?>
1035
1036	</div>
1037
1038	<?php if ($settings['show_excerpt']) : ?>
1039	<div class="upk-text=wrap" data-swiper-parallax-y="-100">
1040	<?php $this->render_excerpt($excerpt_length); ?>
1041	</div>
1042	<?php endif; ?>
1043
1044	</div>
1045	</div>
1046	</div>
1047	<?php
1048	}
1049
1050	public function render() {
1051	$settings = $this->get_settings_for_display();
1052
1053	$this->query_posts($settings['item_limit']['size']);
1054	$wp_query = $this->get_query();
1055
1056	if (!$wp_query->found_posts) {
1057	return;
1058	}
1059
1060	$this->render_header();
1061
1062	while ($wp_query->have_posts()) {
1063	$wp_query->the_post();
1064	$thumbnail_size = $settings['primary_thumbnail_size'];
1065
1066	$this->render_post_grid_item(get_the_ID(), $thumbnail_size, $settings['excerpt_length']);
1067	}
1068
1069	$this->render_footer();
1070
1071	wp_reset_postdata();
1072	}
1073	}
1074