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

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