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

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