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

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

1,767 lines 45.1 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\CrystalSlider\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
15	use UltimatePostKit\Utils;
16	use UltimatePostKit\Traits\Global_Widget_Controls;
17	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
18	use WP_Query;
19
20	if (!defined('ABSPATH')) exit; // Exit if accessed directly
21
22	class Crystal_Slider extends Group_Control_Query {
23
24	use Global_Widget_Controls;
25
26	private $_query = null;
27
28	public function get_name() {
29	return 'upk-crystal-slider';
30	}
31
32	public function get_title() {
33	return BDTUPK . esc_html__('Crystal Slider', 'ultimate-post-kit');
34	}
35
36	public function get_icon() {
37	return 'upk-widget-icon upk-icon-crystal-slider';
38	}
39
40	public function get_categories() {
41	return ['ultimate-post-kit'];
42	}
43
44	public function get_keywords() {
45	return ['post', 'carousel', 'blog', 'recent', 'news', 'slider', 'crystal'];
46	}
47
48	public function get_style_depends() {
49	if ($this->upk_is_edit_mode()) {
50	return ['swiper', 'upk-all-styles'];
51	} else {
52	return ['swiper', 'upk-font', 'upk-crystal-slider'];
53	}
54	}
55
56	public function get_script_depends() {
57	if ($this->upk_is_edit_mode()) {
58	return ['swiper', 'upk-all-scripts'];
59	} else {
60	return ['swiper', 'upk-crystal-slider'];
61	}
62	}
63
64	public function get_custom_help_url() {
65	return 'https://youtu.be/wZNw_prt-uI';
66	}
67
68
69	public function get_query() {
70	return $this->_query;
71	}
72
73	public function has_widget_inner_wrapper(): bool {
74	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
75	}
76
77
78	protected function register_controls() {
79	$this->start_controls_section(
80	'section_content_layout',
81	[
82	'label' => esc_html__('Layout', 'ultimate-post-kit'),
83	]
84	);
85
86	$this->add_responsive_control(
87	'item_height',
88	[
89	'label' => esc_html__('Height', 'ultimate-post-kit'),
90	'type' => Controls_Manager::SLIDER,
91	'size_units' => ['px', 'vh'],
92	'range' => [
93	'px' => [
94	'min' => 200,
95	'max' => 1080,
96	],
97	'vh' => [
98	'min' => 10,
99	'max' => 100,
100	],
101	],
102	'selectors' => [
103	'{{WRAPPER}} .upk-crystal-slider .swiper-carousel' => 'height: {{SIZE}}{{UNIT}};',
104	],
105	]
106	);
107
108	$this->add_responsive_control(
109	'slide_spacing',
110	[
111	'label' => esc_html__('Slide Bottom Spacing', 'ultimate-post-kit'),
112	'type' => Controls_Manager::SLIDER,
113	'range' => [
114	'px' => [
115	'min' => 0,
116	'max' => 200,
117	],
118	],
119	'selectors' => [
120	'{{WRAPPER}} .upk-crystal-slider .swiper-carousel' => 'padding-bottom: {{SIZE}}{{UNIT}};',
121	],
122	]
123	);
124
125	$this->add_responsive_control(
126	'content_alignment',
127	[
128	'label' => esc_html__('Content Alignment', 'ultimate-post-kit'),
129	'type' => Controls_Manager::CHOOSE,
130	'default' => 'center',
131	'options' => [
132	'left' => [
133	'title' => esc_html__('Left', 'ultimate-post-kit'),
134	'icon' => 'eicon-text-align-left',
135	],
136	'center' => [
137	'title' => esc_html__('Center', 'ultimate-post-kit'),
138	'icon' => 'eicon-text-align-center',
139	],
140	'right' => [
141	'title' => esc_html__('Right', 'ultimate-post-kit'),
142	'icon' => 'eicon-text-align-right',
143	],
144	],
145	'selectors' => [
146	'{{WRAPPER}} .upk-crystal-slider .upk-content' => 'text-align: {{VALUE}};',
147	],
148	]
149	);
150
151	$this->add_group_control(
152	Group_Control_Image_Size::get_type(),
153	[
154	'name' => 'primary_thumbnail',
155	'exclude' => ['custom'],
156	'default' => 'full',
157	]
158	);
159
160	$this->add_control(
161	'hr_1',
162	[
163	'type' => Controls_Manager::DIVIDER,
164	]
165	);
166
167	//Global Title Controls
168	$this->register_title_controls();
169
170	$this->add_control(
171	'show_category',
172	[
173	'label' => esc_html__('Show Category', 'ultimate-post-kit'),
174	'type' => Controls_Manager::SWITCHER,
175	'default' => 'yes',
176	]
177	);
178
179	$this->add_control(
180	'strip_shortcode',
181	[
182	'label' => esc_html__('Strip Shortcode', 'ultimate-post-kit'),
183	'type' => Controls_Manager::SWITCHER,
184	'default' => 'yes',
185	'condition' => [
186	'show_excerpt' => 'yes',
187	],
188	]
189	);
190
191	$this->add_control(
192	'show_author',
193	[
194	'label' => esc_html__('Show Author', 'ultimate-post-kit'),
195	'type' => Controls_Manager::SWITCHER,
196	'default' => 'yes',
197	'separator' => 'before'
198	]
199	);
200
201	$this->add_control(
202	'meta_separator',
203	[
204	'label' => __('Separator', 'ultimate-post-kit'),
205	'type' => Controls_Manager::TEXT,
206	'default' => '//',
207	'label_block' => false,
208	]
209	);
210
211	//Global Date Controls
212	$this->register_date_controls();
213
214	//Global Reading Time Controls
215	$this->register_reading_time_controls();
216
217	$this->add_control(
218	'show_readmore',
219	[
220	'label' => esc_html__('Read more', 'ultimate-post-kit'),
221	'type' => Controls_Manager::SWITCHER,
222	'default' => 'no',
223	'separator' => 'before'
224	]
225	);
226
227	$this->end_controls_section();
228
229	// Query Settings
230	$this->start_controls_section(
231	'section_post_query_builder',
232	[
233	'label' => __('Query', 'ultimate-post-kit'),
234	'tab' => Controls_Manager::TAB_CONTENT,
235	]
236	);
237
238	$this->add_control(
239	'item_limit',
240	[
241	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
242	'type' => Controls_Manager::SLIDER,
243	'range' => [
244	'px' => [
245	'min' => 1,
246	'max' => 20,
247	],
248	],
249	'default' => [
250	'size' => 3,
251	],
252	]
253	);
254
255	$this->register_query_builder_controls();
256
257	$this->end_controls_section();
258
259	$this->start_controls_section(
260	'section_carousel_settings',
261	[
262	'label' => __('Slider Settings', 'ultimate-post-kit'),
263	]
264	);
265
266	$this->add_control(
267	'autoplay',
268	[
269	'label' => __('Autoplay', 'ultimate-post-kit'),
270	'type' => Controls_Manager::SWITCHER,
271	'default' => 'yes',
272
273	]
274	);
275
276	$this->add_control(
277	'autoplay_speed',
278	[
279	'label' => esc_html__('Autoplay Speed', 'ultimate-post-kit'),
280	'type' => Controls_Manager::NUMBER,
281	'default' => 5000,
282	'condition' => [
283	'autoplay' => 'yes',
284	],
285	]
286	);
287
288	$this->add_control(
289	'pauseonhover',
290	[
291	'label' => esc_html__('Pause on Hover', 'ultimate-post-kit'),
292	'type' => Controls_Manager::SWITCHER,
293	]
294	);
295
296	$this->add_control(
297	'grab_cursor',
298	[
299	'label' => __('Grab Cursor', 'ultimate-post-kit'),
300	'type' => Controls_Manager::SWITCHER,
301	]
302	);
303
304	$this->add_control(
305	'loop',
306	[
307	'label' => __('Loop', 'ultimate-post-kit'),
308	'type' => Controls_Manager::SWITCHER,
309	'default' => 'yes',
310
311	]
312	);
313
314
315	$this->add_control(
316	'speed',
317	[
318	'label' => __('Animation Speed (ms)', 'ultimate-post-kit'),
319	'type' => Controls_Manager::SLIDER,
320	'default' => [
321	'size' => 500,
322	],
323	'range' => [
324	'px' => [
325	'min' => 100,
326	'max' => 5000,
327	'step' => 50,
328	],
329	],
330	]
331	);
332
333	$this->add_control(
334	'observer',
335	[
336	'label' => __('Observer', 'ultimate-post-kit'),
337	'description' => __('When you use carousel in any hidden place (in tabs, accordion etc) keep it yes.', 'ultimate-post-kit'),
338	'type' => Controls_Manager::SWITCHER,
339	]
340	);
341
342	$this->add_control(
343	'show_navigation',
344	[
345	'label' => esc_html__('Show Navigation', 'ultimate-post-kit'),
346	'type' => Controls_Manager::SWITCHER,
347	'default' => 'yes',
348	'separator' => 'before'
349	]
350	);
351
352	$this->add_control(
353	'nav_arrows_icon',
354	[
355	'label' => esc_html__('Arrows Icon', 'ultimate-post-kit'),
356	'type' => Controls_Manager::SELECT,
357	'default' => '0',
358	'options' => [
359	'0' => esc_html__('Default', 'ultimate-post-kit'),
360	'1' => esc_html__('Style 1', 'ultimate-post-kit'),
361	'2' => esc_html__('Style 2', 'ultimate-post-kit'),
362	'3' => esc_html__('Style 3', 'ultimate-post-kit'),
363	'4' => esc_html__('Style 4', 'ultimate-post-kit'),
364	'5' => esc_html__('Style 5', 'ultimate-post-kit'),
365	'6' => esc_html__('Style 6', 'ultimate-post-kit'),
366	'7' => esc_html__('Style 7', 'ultimate-post-kit'),
367	'8' => esc_html__('Style 8', 'ultimate-post-kit'),
368	'9' => esc_html__('Style 9', 'ultimate-post-kit'),
369	'10' => esc_html__('Style 10', 'ultimate-post-kit'),
370	'11' => esc_html__('Style 11', 'ultimate-post-kit'),
371	'12' => esc_html__('Style 12', 'ultimate-post-kit'),
372	'13' => esc_html__('Style 13', 'ultimate-post-kit'),
373	'14' => esc_html__('Style 14', 'ultimate-post-kit'),
374	'15' => esc_html__('Style 15', 'ultimate-post-kit'),
375	'16' => esc_html__('Style 16', 'ultimate-post-kit'),
376	'17' => esc_html__('Style 17', 'ultimate-post-kit'),
377	'18' => esc_html__('Style 18', 'ultimate-post-kit'),
378	'circle-1' => esc_html__('Style 19', 'ultimate-post-kit'),
379	'circle-2' => esc_html__('Style 20', 'ultimate-post-kit'),
380	'circle-3' => esc_html__('Style 21', 'ultimate-post-kit'),
381	'circle-4' => esc_html__('Style 22', 'ultimate-post-kit'),
382	'square-1' => esc_html__('Style 23', 'ultimate-post-kit'),
383	],
384	'condition' => [
385	'show_navigation' => 'yes',
386	],
387	]
388	);
389
390	$this->add_control(
391	'show_pagination',
392	[
393	'label' => esc_html__('Show Pagination', 'ultimate-post-kit'),
394	'type' => Controls_Manager::SWITCHER,
395	'default' => 'yes',
396	'separator' => 'before'
397	]
398	);
399
400	$this->end_controls_section();
401
402	//Style
403	$this->start_controls_section(
404	'section_style_content',
405	[
406	'label' => esc_html__('Content', 'ultimate-post-kit'),
407	'tab' => Controls_Manager::TAB_STYLE,
408	]
409	);
410
411	$this->add_group_control(
412	Group_Control_Background::get_type(),
413	[
414	'name' => 'Content_background',
415	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-content',
416	]
417	);
418
419	$this->add_group_control(
420	Group_Control_Border::get_type(),
421	[
422	'name' => 'content_border',
423	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-content',
424	]
425	);
426
427	$this->add_responsive_control(
428	'content_border_radius',
429	[
430	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
431	'type' => Controls_Manager::DIMENSIONS,
432	'size_units' => ['px', '%'],
433	'selectors' => [
434	'{{WRAPPER}} .upk-crystal-slider .upk-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
435	],
436	]
437	);
438
439	$this->add_responsive_control(
440	'content_padding',
441	[
442	'label' => __('Padding', 'ultimate-post-kit'),
443	'type' => Controls_Manager::DIMENSIONS,
444	'size_units' => ['px', 'em', '%'],
445	'selectors' => [
446	'{{WRAPPER}} .upk-crystal-slider .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
447	],
448	]
449	);
450
451	$this->add_responsive_control(
452	'content_max_width',
453	[
454	'label' => esc_html__('Max Width', 'ultimate-post-kit'),
455	'type' => Controls_Manager::SLIDER,
456	'size_units' => ['px', '%'],
457	'range' => [
458	'px' => [
459	'min' => 0,
460	'max' => 1200,
461	'step' => 5,
462	],
463	'%' => [
464	'min' => 0,
465	'max' => 200,
466	],
467	],
468	'default' => [
469	'unit' => '%',
470	],
471	'selectors' => [
472	'{{WRAPPER}} .upk-crystal-slider .upk-content' => 'max-width: {{SIZE}}{{UNIT}};',
473	],
474	]
475	);
476
477	$this->add_responsive_control(
478	'content_vertical_offset',
479	[
480	'label' => esc_html__('Vertical Offset', 'ultimate-post-kit'),
481	'type' => Controls_Manager::SLIDER,
482	'size_units' => ['px', '%'],
483	'range' => [
484	'px' => [
485	'min' => -500,
486	'max' => 500,
487	],
488	'%' => [
489	'min' => -200,
490	'max' => 200,
491	],
492	],
493	'%' => [
494	'min' => -0,
495	'max' => 100,
496	],
497	'default' => [
498	'unit' => '%',
499	],
500	'selectors' => [
501	'{{WRAPPER}} .upk-crystal-slider .upk-content' => 'bottom: {{SIZE}}{{UNIT}};',
502	],
503	]
504	);
505
506	$this->add_group_control(
507	Group_Control_Box_Shadow::get_type(),
508	[
509	'name' => 'content_shadow',
510	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-content',
511	]
512	);
513
514	$this->end_controls_section();
515
516	$this->start_controls_section(
517	'section_style_title',
518	[
519	'label' => esc_html__('Title', 'ultimate-post-kit'),
520	'tab' => Controls_Manager::TAB_STYLE,
521	'condition' => [
522	'show_title' => 'yes',
523	],
524	]
525	);
526
527	$this->add_control(
528	'title_color',
529	[
530	'label' => esc_html__('Color', 'ultimate-post-kit'),
531	'type' => Controls_Manager::COLOR,
532	'selectors' => [
533	'{{WRAPPER}} .upk-crystal-slider .upk-title a' => 'color: {{VALUE}};',
534	],
535	]
536	);
537
538	$this->add_control(
539	'title_hover_color',
540	[
541	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
542	'type' => Controls_Manager::COLOR,
543	'selectors' => [
544	'{{WRAPPER}} .upk-crystal-slider .upk-title a:hover' => 'color: {{VALUE}};',
545	],
546	]
547	);
548
549	$this->add_responsive_control(
550	'title_spacing',
551	[
552	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
553	'type' => Controls_Manager::SLIDER,
554	'range' => [
555	'px' => [
556	'min' => 0,
557	'max' => 100,
558	],
559	],
560	'selectors' => [
561	'{{WRAPPER}} .upk-crystal-slider .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
562	],
563	]
564	);
565
566	$this->add_group_control(
567	Group_Control_Typography::get_type(),
568	[
569	'name' => 'title_typography',
570	'label' => esc_html__('Typography', 'ultimate-post-kit'),
571	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-title',
572	]
573	);
574
575	$this->add_group_control(
576	Group_Control_Text_Shadow::get_type(),
577	[
578	'name' => 'title_text_shadow',
579	'label' => __('Text Shadow', 'ultimate-post-kit'),
580	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-title a',
581	]
582	);
583
584	$this->add_group_control(
585	Group_Control_Text_Stroke::get_type(),
586	[
587	'name' => 'title_text_stroke',
588	'label' => __('Text Stroke', 'ultimate-post-kit') . BDTUPK_NC,
589	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-title a',
590	]
591	);
592
593	$this->end_controls_section();
594
595	$this->start_controls_section(
596	'section_style_meta',
597	[
598	'label' => esc_html__('Meta', 'ultimate-post-kit'),
599	'tab' => Controls_Manager::TAB_STYLE,
600	'conditions' => [
601	'relation' => 'or',
602	'terms' => [
603	[
604	'name' => 'show_author',
605	'value' => 'yes'
606	],
607	[
608	'name' => 'show_date',
609	'value' => 'yes'
610	],
611	[
612	'name' => 'show_comments',
613	'value' => 'yes'
614	]
615	]
616	],
617	]
618	);
619
620	$this->add_control(
621	'meta_color',
622	[
623	'label' => esc_html__('Color', 'ultimate-post-kit'),
624	'type' => Controls_Manager::COLOR,
625	'selectors' => [
626	'{{WRAPPER}} .upk-crystal-slider .upk-meta,
627	{{WRAPPER}} .upk-crystal-slider .upk-meta .upk-author a' => 'color: {{VALUE}};',
628	],
629	]
630	);
631
632	$this->add_control(
633	'meta_hover_color',
634	[
635	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
636	'type' => Controls_Manager::COLOR,
637	'selectors' => [
638	'{{WRAPPER}} .upk-crystal-slider .upk-meta .upk-author a:hover' => 'color: {{VALUE}};',
639	],
640	]
641	);
642
643	$this->add_responsive_control(
644	'meta_space_between',
645	[
646	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
647	'type' => Controls_Manager::SLIDER,
648	'range' => [
649	'px' => [
650	'min' => 0,
651	'max' => 50,
652	],
653	],
654	'selectors' => [
655	'{{WRAPPER}} .upk-crystal-slider .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
656	],
657	]
658	);
659
660	$this->add_group_control(
661	Group_Control_Typography::get_type(),
662	[
663	'name' => 'meta_typography',
664	'label' => esc_html__('Typography', 'ultimate-post-kit'),
665	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-meta',
666	]
667	);
668
669	$this->end_controls_section();
670
671	$this->start_controls_section(
672	'section_style_category',
673	[
674	'label' => esc_html__('Category', 'ultimate-post-kit'),
675	'tab' => Controls_Manager::TAB_STYLE,
676	'condition' => [
677	'show_category' => 'yes'
678	],
679	]
680	);
681
682	$this->add_responsive_control(
683	'category_bottom_spacing',
684	[
685	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
686	'type' => Controls_Manager::SLIDER,
687	'range' => [
688	'px' => [
689	'min' => 0,
690	'max' => 50,
691	],
692	],
693	'selectors' => [
694	'{{WRAPPER}} .upk-crystal-slider .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
695	],
696	]
697	);
698
699	$this->start_controls_tabs('tabs_category_style');
700
701	$this->start_controls_tab(
702	'tab_category_normal',
703	[
704	'label' => esc_html__('Normal', 'ultimate-post-kit'),
705	]
706	);
707
708	$this->add_control(
709	'category_color',
710	[
711	'label' => esc_html__('Color', 'ultimate-post-kit'),
712	'type' => Controls_Manager::COLOR,
713	'selectors' => [
714	'{{WRAPPER}} .upk-crystal-slider .upk-category a' => 'color: {{VALUE}};',
715	],
716	]
717	);
718
719	$this->add_group_control(
720	Group_Control_Background::get_type(),
721	[
722	'name' => 'category_background',
723	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-category a',
724	]
725	);
726
727	$this->add_group_control(
728	Group_Control_Border::get_type(),
729	[
730	'name' => 'category_border',
731	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-category a',
732	]
733	);
734
735	$this->add_responsive_control(
736	'category_border_radius',
737	[
738	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
739	'type' => Controls_Manager::DIMENSIONS,
740	'size_units' => ['px', '%'],
741	'selectors' => [
742	'{{WRAPPER}} .upk-crystal-slider .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
743	],
744	]
745	);
746
747	$this->add_responsive_control(
748	'category_padding',
749	[
750	'label' => esc_html__('Padding', 'ultimate-post-kit'),
751	'type' => Controls_Manager::DIMENSIONS,
752	'size_units' => ['px', 'em', '%'],
753	'selectors' => [
754	'{{WRAPPER}} .upk-crystal-slider .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
755	],
756	]
757	);
758
759	$this->add_responsive_control(
760	'category_spacing',
761	[
762	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
763	'type' => Controls_Manager::SLIDER,
764	'range' => [
765	'px' => [
766	'min' => 0,
767	'max' => 50,
768	],
769	],
770	'selectors' => [
771	'{{WRAPPER}} .upk-crystal-slider .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
772	],
773	]
774	);
775
776	$this->add_group_control(
777	Group_Control_Box_Shadow::get_type(),
778	[
779	'name' => 'category_shadow',
780	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-category a',
781	]
782	);
783
784	$this->add_group_control(
785	Group_Control_Typography::get_type(),
786	[
787	'name' => 'category_typography',
788	'label' => esc_html__('Typography', 'ultimate-post-kit'),
789	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-category a',
790	]
791	);
792
793	$this->end_controls_tab();
794
795	$this->start_controls_tab(
796	'tab_category_hover',
797	[
798	'label' => esc_html__('Hover', 'ultimate-post-kit'),
799	'condition' => [
800	'show_category' => 'yes'
801	]
802	]
803	);
804
805	$this->add_control(
806	'category_hover_color',
807	[
808	'label' => esc_html__('Color', 'ultimate-post-kit'),
809	'type' => Controls_Manager::COLOR,
810	'selectors' => [
811	'{{WRAPPER}} .upk-crystal-slider .upk-category a:hover' => 'color: {{VALUE}};',
812	],
813	]
814	);
815
816	$this->add_group_control(
817	Group_Control_Background::get_type(),
818	[
819	'name' => 'category_hover_background',
820	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-category a:hover',
821	]
822	);
823
824	$this->add_control(
825	'category_hover_border_color',
826	[
827	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
828	'type' => Controls_Manager::COLOR,
829	'condition' => [
830	'category_border_border!' => '',
831	],
832	'selectors' => [
833	'{{WRAPPER}} .upk-crystal-slider .upk-category a:hover' => 'border-color: {{VALUE}};',
834	],
835	]
836	);
837
838	$this->end_controls_tab();
839
840	$this->end_controls_tabs();
841
842	$this->end_controls_section();
843
844	//Read More Css
845	$this->start_controls_section(
846	'section_style_btn',
847	[
848	'label' => __('Read More', 'ultimate-post-kit'),
849	'tab' => Controls_Manager::TAB_STYLE,
850	'condition' => [
851	'show_readmore' => 'yes'
852	]
853	]
854	);
855
856	$this->start_controls_tabs('tabs_read_more_style');
857
858	$this->start_controls_tab(
859	'tabs_read_more_normal',
860	[
861	'label' => __('Normal', 'ultimate-post-kit'),
862	]
863	);
864
865	$this->add_control(
866	'button_icon_color',
867	[
868	'label' => __('Icon Color', 'ultimate-post-kit'),
869	'type' => Controls_Manager::COLOR,
870	'selectors' => [
871	'{{WRAPPER}} .upk-crystal-slider .upk-link-btn a' => 'color: {{VALUE}}',
872	],
873	]
874	);
875
876	$this->add_group_control(
877	Group_Control_Background::get_type(),
878	[
879	'name' => 'button_background',
880	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-link-btn a',
881	]
882	);
883
884	$this->add_group_control(
885	Group_Control_Border::get_type(),
886	[
887	'name' => 'button_border',
888	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-link-btn a',
889	]
890	);
891
892	$this->add_responsive_control(
893	'button_border_radius',
894	[
895	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
896	'type' => Controls_Manager::DIMENSIONS,
897	'size_units' => ['px', '%'],
898	'selectors' => [
899	'{{WRAPPER}} .upk-crystal-slider .upk-link-btn a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
900	],
901	]
902	);
903
904	$this->add_responsive_control(
905	'read_more_padding',
906	[
907	'label' => __('Padding', 'ultimate-post-kit'),
908	'type' => Controls_Manager::DIMENSIONS,
909	'size_units' => ['px', 'em', '%'],
910	'selectors' => [
911	'{{WRAPPER}} .upk-crystal-slider .upk-link-btn a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
912	],
913	]
914	);
915
916	$this->add_responsive_control(
917	'button_icon_size',
918	[
919	'label' => esc_html__('Icon Size', 'ultimate-post-kit'),
920	'type' => Controls_Manager::SLIDER,
921	'selectors' => [
922	'{{WRAPPER}} .upk-crystal-slider .upk-link-btn a' => 'font-size: {{SIZE}}{{UNIT}};',
923	],
924	]
925	);
926
927
928	$this->add_responsive_control(
929	'button_vertical_offset',
930	[
931	'label' => esc_html__('Vertical Offset', 'ultimate-post-kit'),
932	'type' => Controls_Manager::SLIDER,
933	'size_units' => ['px', '%'],
934	'range' => [
935	'px' => [
936	'min' => -1000,
937	'max' => 1000,
938	],
939	'%' => [
940	'min' => -100,
941	'max' => 100,
942	],
943	],
944	'%' => [
945	'min' => -0,
946	'max' => 100,
947	],
948	'default' => [
949	'unit' => '%',
950	],
951	'selectors' => [
952	'{{WRAPPER}} .upk-crystal-slider .upk-link-btn' => 'top: {{SIZE}}{{UNIT}};',
953	],
954	]
955	);
956
957	$this->add_responsive_control(
958	'button_horizontal_offset',
959	[
960	'label' => esc_html__('Horizontal Offset', 'ultimate-post-kit'),
961	'type' => Controls_Manager::SLIDER,
962	'size_units' => ['px', '%'],
963	'range' => [
964	'px' => [
965	'min' => -1000,
966	'max' => 1000,
967	],
968	'%' => [
969	'min' => -100,
970	'max' => 100,
971	],
972	],
973	'%' => [
974	'min' => -0,
975	'max' => 100,
976	],
977	'default' => [
978	'unit' => '%',
979	],
980	'selectors' => [
981	'{{WRAPPER}} .upk-crystal-slider .upk-link-btn' => 'left: {{SIZE}}{{UNIT}};',
982	],
983	]
984	);
985
986	$this->add_group_control(
987	Group_Control_Box_Shadow::get_type(),
988	[
989	'name' => 'button_shadow',
990	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-link-btn a',
991	]
992	);
993
994	$this->end_controls_tab();
995
996	$this->start_controls_tab(
997	'tabs_button_hover',
998	[
999	'label' => __('Hover', 'ultimate-post-kit'),
1000	]
1001	);
1002
1003	$this->add_control(
1004	'button_hover_color',
1005	[
1006	'label' => __('Color', 'ultimate-post-kit'),
1007	'type' => Controls_Manager::COLOR,
1008	'selectors' => [
1009	'{{WRAPPER}} .upk-crystal-slider .upk-content:hover .upk-link-btn a' => 'color: {{VALUE}}',
1010	],
1011	]
1012	);
1013
1014	$this->add_group_control(
1015	Group_Control_Background::get_type(),
1016	[
1017	'name' => 'button_hover_background',
1018	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-content:hover .upk-link-btn a',
1019	]
1020	);
1021
1022	$this->add_control(
1023	'button_hover_border_color',
1024	[
1025	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1026	'type' => Controls_Manager::COLOR,
1027	'condition' => [
1028	'arrows_border_border!' => '',
1029	],
1030	'selectors' => [
1031	'{{WRAPPER}} .upk-crystal-slider .upk-content:hover .upk-link-btn a' => 'border-color: {{VALUE}};',
1032	],
1033	]
1034	);
1035
1036	$this->add_group_control(
1037	Group_Control_Box_Shadow::get_type(),
1038	[
1039	'name' => 'button_hover_shadow',
1040	'selector' => '{{WRAPPER}}.upk-crystal-slider .upk-content:hover .upk-link-btn a',
1041	]
1042	);
1043
1044	$this->end_controls_tab();
1045
1046	$this->end_controls_tabs();
1047
1048	$this->end_controls_section();
1049
1050	//Navigation Css
1051	$this->start_controls_section(
1052	'section_style_navigation',
1053	[
1054	'label' => __('Navigation', 'ultimate-post-kit'),
1055	'tab' => Controls_Manager::TAB_STYLE,
1056	]
1057	);
1058
1059	$this->start_controls_tabs('tabs_navigation_arrows_style');
1060
1061	$this->start_controls_tab(
1062	'tabs_nav_arrows_normal',
1063	[
1064	'label' => __('Normal', 'ultimate-post-kit'),
1065	]
1066	);
1067
1068	$this->add_control(
1069	'arrows_color',
1070	[
1071	'label' => __('Color', 'ultimate-post-kit'),
1072	'type' => Controls_Manager::COLOR,
1073	'selectors' => [
1074	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev' => 'color: {{VALUE}}',
1075	],
1076	]
1077	);
1078
1079	$this->add_group_control(
1080	Group_Control_Background::get_type(),
1081	[
1082	'name' => 'arrows_background',
1083	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev',
1084	]
1085	);
1086
1087	$this->add_group_control(
1088	Group_Control_Border::get_type(),
1089	[
1090	'name' => 'arrows_border',
1091	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev',
1092	]
1093	);
1094
1095	$this->add_responsive_control(
1096	'arrows_border_radius',
1097	[
1098	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1099	'type' => Controls_Manager::DIMENSIONS,
1100	'size_units' => ['px', '%'],
1101	'selectors' => [
1102	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1103	],
1104	]
1105	);
1106
1107	$this->add_responsive_control(
1108	'arrows_size',
1109	[
1110	'label' => esc_html__('Size', 'ultimate-post-kit'),
1111	'type' => Controls_Manager::SLIDER,
1112	'selectors' => [
1113	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev' => 'font-size: {{SIZE}}{{UNIT}};',
1114	],
1115	]
1116	);
1117
1118	$this->add_responsive_control(
1119	'navigation_padding',
1120	[
1121	'label' => __('Padding', 'ultimate-post-kit'),
1122	'type' => Controls_Manager::DIMENSIONS,
1123	'size_units' => ['px', 'em', '%'],
1124	'selectors' => [
1125	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider
1126	.upk-navigation-wrap .upk-navigation-prev' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1127	],
1128	]
1129	);
1130
1131	$this->add_group_control(
1132	Group_Control_Box_Shadow::get_type(),
1133	[
1134	'name' => 'arrows_shadow',
1135	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev',
1136	]
1137	);
1138
1139	$this->add_responsive_control(
1140	'vertical_offset',
1141	[
1142	'label' => esc_html__('Vertical Offset', 'ultimate-post-kit'),
1143	'type' => Controls_Manager::SLIDER,
1144	'selectors' => [
1145	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev' => 'top: {{SIZE}}%;',
1146	],
1147	]
1148	);
1149
1150	$this->add_responsive_control(
1151	'horizontal_offset_next',
1152	[
1153	'label' => esc_html__('Horizontal Offset', 'ultimate-post-kit'),
1154	'type' => Controls_Manager::SLIDER,
1155	'size_units' => ['px', '%'],
1156	'default' => [
1157	'unit' => '%',
1158	],
1159	'selectors' => [
1160	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next' => 'left: {{SIZE}}{{UNIT}};',
1161	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev' => 'right: {{SIZE}}{{UNIT}};',
1162	],
1163	]
1164	);
1165
1166	$this->end_controls_tab();
1167
1168	$this->start_controls_tab(
1169	'tabs_nav_arrows_hover',
1170	[
1171	'label' => __('Hover', 'ultimate-post-kit'),
1172	]
1173	);
1174
1175	$this->add_control(
1176	'arrows_hover_color',
1177	[
1178	'label' => __('Color', 'ultimate-post-kit'),
1179	'type' => Controls_Manager::COLOR,
1180	'selectors' => [
1181	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next:hover, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev:hover' => 'color: {{VALUE}}',
1182	],
1183	]
1184	);
1185
1186	$this->add_group_control(
1187	Group_Control_Background::get_type(),
1188	[
1189	'name' => 'arrows_hover_background',
1190	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next:hover, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev:hover',
1191	]
1192	);
1193
1194	$this->add_control(
1195	'arrows_hover_border_color',
1196	[
1197	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1198	'type' => Controls_Manager::COLOR,
1199	'condition' => [
1200	'arrows_border_border!' => '',
1201	],
1202	'selectors' => [
1203	'{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next:hover, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev:hover' => 'border-color: {{VALUE}};',
1204	],
1205	]
1206	);
1207
1208	$this->add_group_control(
1209	Group_Control_Box_Shadow::get_type(),
1210	[
1211	'name' => 'arrows_hover_shadow',
1212	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-next:hover, {{WRAPPER}} .upk-crystal-slider .upk-navigation-wrap .upk-navigation-prev:hover',
1213	]
1214	);
1215
1216	$this->end_controls_tab();
1217
1218	$this->end_controls_tabs();
1219
1220	$this->end_controls_section();
1221
1222	//Pagination Css
1223	$this->start_controls_section(
1224	'section_style_pagination',
1225	[
1226	'label' => __('Pagination', 'ultimate-post-kit'),
1227	'tab' => Controls_Manager::TAB_STYLE,
1228	'condition' => [
1229	'show_pagination' => 'yes'
1230	]
1231	]
1232	);
1233
1234	$this->add_responsive_control(
1235	'dots_nny_position',
1236	[
1237	'label' => __('Dots Vertical Offset', 'ultimate-post-kit'),
1238	'type' => Controls_Manager::SLIDER,
1239	'range' => [
1240	'px' => [
1241	'min' => -200,
1242	'max' => 200,
1243	],
1244	],
1245	'selectors' => [
1246	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap' => 'bottom: {{SIZE}}px;'
1247	],
1248	]
1249	);
1250
1251	$this->start_controls_tabs('tabs_navigation_dots_style');
1252
1253	$this->start_controls_tab(
1254	'tabs_nav_dots_normal',
1255	[
1256	'label' => __('Normal', 'ultimate-post-kit'),
1257	]
1258	);
1259
1260	$this->add_control(
1261	'dots_color',
1262	[
1263	'label' => __('Color', 'ultimate-post-kit'),
1264	'type' => Controls_Manager::COLOR,
1265	'selectors' => [
1266	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet' => 'background-color: {{VALUE}}',
1267	],
1268	]
1269	);
1270
1271	$this->add_responsive_control(
1272	'dots_space_between',
1273	[
1274	'label' => __('Space Between', 'ultimate-post-kit'),
1275	'type' => Controls_Manager::SLIDER,
1276	'selectors' => [
1277	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .upk-pagination ' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
1278	],
1279	]
1280	);
1281
1282	$this->add_responsive_control(
1283	'dots_size',
1284	[
1285	'label' => __('Size', 'ultimate-post-kit'),
1286	'type' => Controls_Manager::SLIDER,
1287	'range' => [
1288	'px' => [
1289	'min' => 5,
1290	'max' => 20,
1291	],
1292	],
1293	'selectors' => [
1294	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1295	],
1296	'condition' => [
1297	'advanced_dots_size' => ''
1298	],
1299	]
1300	);
1301
1302	$this->add_control(
1303	'advanced_dots_size',
1304	[
1305	'label' => __('Advanced Size', 'ultimate-post-kit'),
1306	'type' => Controls_Manager::SWITCHER,
1307	]
1308	);
1309
1310	$this->add_responsive_control(
1311	'advanced_dots_width',
1312	[
1313	'label' => __('Width(px)', 'ultimate-post-kit'),
1314	'type' => Controls_Manager::SLIDER,
1315	'range' => [
1316	'px' => [
1317	'min' => 1,
1318	'max' => 50,
1319	],
1320	],
1321	'selectors' => [
1322	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}};',
1323	],
1324	'condition' => [
1325	'advanced_dots_size' => 'yes'
1326	],
1327	]
1328	);
1329
1330	$this->add_responsive_control(
1331	'advanced_dots_height',
1332	[
1333	'label' => __('Height(px)', 'ultimate-post-kit'),
1334	'type' => Controls_Manager::SLIDER,
1335	'range' => [
1336	'px' => [
1337	'min' => 1,
1338	'max' => 50,
1339	],
1340	],
1341	'selectors' => [
1342	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet' => 'height: {{SIZE}}{{UNIT}};',
1343	],
1344	'condition' => [
1345	'advanced_dots_size' => 'yes'
1346	],
1347	]
1348	);
1349
1350	$this->add_responsive_control(
1351	'advanced_dots_radius',
1352	[
1353	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1354	'type' => Controls_Manager::DIMENSIONS,
1355	'size_units' => ['px', '%'],
1356	'selectors' => [
1357	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1358	],
1359	'condition' => [
1360	'advanced_dots_size' => 'yes'
1361	],
1362	]
1363	);
1364
1365	$this->add_group_control(
1366	Group_Control_Box_Shadow::get_type(),
1367	[
1368	'name' => 'dots_box_shadow',
1369	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet',
1370	]
1371	);
1372
1373	$this->end_controls_tab();
1374
1375	$this->start_controls_tab(
1376	'tabs_nav_dots_active',
1377	[
1378	'label' => __('Active', 'ultimate-post-kit'),
1379	]
1380	);
1381
1382	$this->add_control(
1383	'active_dot_color',
1384	[
1385	'label' => __('Color', 'ultimate-post-kit'),
1386	'type' => Controls_Manager::COLOR,
1387	'selectors' => [
1388	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet' => 'background-color: {{VALUE}}',
1389	],
1390	]
1391	);
1392
1393	$this->add_responsive_control(
1394	'active_dots_size',
1395	[
1396	'label' => __('Size', 'ultimate-post-kit'),
1397	'type' => Controls_Manager::SLIDER,
1398	'range' => [
1399	'px' => [
1400	'min' => 5,
1401	'max' => 20,
1402	],
1403	],
1404	'selectors' => [
1405	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet-active' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};',
1406	'{{WRAPPER}}' => '--ps-swiper-dots-active-height: {{SIZE}}{{UNIT}};',
1407	],
1408	'condition' => [
1409	'advanced_dots_size' => ''
1410	],
1411	]
1412	);
1413
1414	$this->add_responsive_control(
1415	'active_advanced_dots_width',
1416	[
1417	'label' => __('Width(px)', 'ultimate-post-kit'),
1418	'type' => Controls_Manager::SLIDER,
1419	'range' => [
1420	'px' => [
1421	'min' => 1,
1422	'max' => 50,
1423	],
1424	],
1425	'selectors' => [
1426	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet-active' => 'width: {{SIZE}}{{UNIT}};',
1427	],
1428	'condition' => [
1429	'advanced_dots_size' => 'yes'
1430	],
1431	]
1432	);
1433
1434	$this->add_responsive_control(
1435	'active_advanced_dots_height',
1436	[
1437	'label' => __('Height(px)', 'ultimate-post-kit'),
1438	'type' => Controls_Manager::SLIDER,
1439	'range' => [
1440	'px' => [
1441	'min' => 1,
1442	'max' => 50,
1443	],
1444	],
1445	'selectors' => [
1446	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet-active' => 'height: {{SIZE}}{{UNIT}};',
1447	'{{WRAPPER}}' => '--ps-swiper-dots-active-height: {{SIZE}}{{UNIT}};',
1448	],
1449	'condition' => [
1450	'advanced_dots_size' => 'yes'
1451	],
1452	]
1453	);
1454
1455	$this->add_responsive_control(
1456	'active_advanced_dots_radius',
1457	[
1458	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1459	'type' => Controls_Manager::DIMENSIONS,
1460	'size_units' => ['px', '%'],
1461	'selectors' => [
1462	'{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1463	],
1464	'condition' => [
1465	'advanced_dots_size' => 'yes'
1466	],
1467	]
1468	);
1469
1470	$this->add_responsive_control(
1471	'active_advanced_dots_align',
1472	[
1473	'label' => __('Alignment', 'ultimate-post-kit'),
1474	'type' => Controls_Manager::CHOOSE,
1475	'options' => [
1476	'flex-start' => [
1477	'title' => __('Top', 'ultimate-post-kit'),
1478	'icon' => 'eicon-v-align-top',
1479	],
1480	'center' => [
1481	'title' => __('Center', 'ultimate-post-kit'),
1482	'icon' => 'eicon-v-align-middle',
1483	],
1484	'flex-end' => [
1485	'title' => __('Bottom', 'ultimate-post-kit'),
1486	'icon' => 'eicon-v-align-bottom',
1487	],
1488	],
1489	'selectors' => [
1490	'{{WRAPPER}}' => '--ps-swiper-dots-align: {{VALUE}};',
1491	],
1492	'condition' => [
1493	'advanced_dots_size' => 'yes'
1494	],
1495	]
1496	);
1497
1498	$this->add_group_control(
1499	Group_Control_Box_Shadow::get_type(),
1500	[
1501	'name' => 'dots_active_box_shadow',
1502	'selector' => '{{WRAPPER}} .upk-crystal-slider .upk-pagination-wrap .swiper-pagination-bullet-active',
1503	]
1504	);
1505
1506	$this->end_controls_tab();
1507
1508	$this->end_controls_tabs();
1509
1510	$this->end_controls_section();
1511	}
1512
1513	/**
1514	* Main query render for this widget
1515	* @param $posts_per_page number item query limit
1516	*/
1517	public function query_posts($posts_per_page) {
1518
1519	$default = $this->getGroupControlQueryArgs();
1520	if ($posts_per_page) {
1521	$args['posts_per_page'] = $posts_per_page;
1522	// $args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
1523	}
1524	$args = array_merge($default, $args);
1525	$this->_query = new WP_Query($args);
1526	}
1527
1528	public function render_image($image_id, $size) {
1529	$placeholder_image_src = Utils::get_placeholder_image_src();
1530
1531	$image_src = wp_get_attachment_image_src($image_id, $size);
1532
1533	if (!$image_src) {
1534	$image_src = $placeholder_image_src;
1535	} else {
1536	$image_src = $image_src[0];
1537	}
1538
1539	?>
1540
1541	<img class="upk-img swiper-lazy" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
1542
1543	<?php
1544	}
1545
1546	public function render_title() {
1547	$settings = $this->get_settings_for_display();
1548
1549	if (!$this->get_settings('show_title')) {
1550	return;
1551	}
1552
1553	printf('<%1$s class="upk-title"><a href="%2$s" title="%3$s">%3$s</a></%1$s>', esc_attr(Utils::get_valid_html_tag($settings['title_tags'])), esc_url( get_permalink() ), esc_html( get_the_title() ));
1554	}
1555
1556	public function render_category() {
1557
1558	if (!$this->get_settings('show_category')) {
1559	return;
1560	}
1561	?>
1562	<div class="upk-category" data-swiper-parallax-x="-150" data-swiper-parallax-duration="1000">
1563	<?php echo upk_get_category($this->get_settings('posts_source')); ?>
1564	</div>
1565	<?php
1566	}
1567
1568	public function render_date() {
1569	$settings = $this->get_settings_for_display();
1570
1571
1572	if (!$this->get_settings('show_date')) {
1573	return;
1574	}
1575
1576	?>
1577	<div class="upk-date-and-time upk-flex upk-flex-middle">
1578	<div class="upk-date">
1579	<i class="upk-icon-calendar" aria-hidden="true"></i>
1580	<span>
1581	<?php if ($settings['human_diff_time'] == 'yes') {
1582	echo esc_html( ultimate_post_kit_post_time_diff( ( $settings['human_diff_time_short'] == 'yes' ) ? 'short' : '' ) );
1583	} else {
1584	echo get_the_date();
1585	} ?>
1586	</span>
1587
1588	</div>
1589	<?php if ($settings['show_time']) : ?>
1590	<div class="upk-post-time">
1591	<i class="upk-icon-clock" aria-hidden="true"></i>
1592	<?php echo esc_html( get_the_time() ); ?>
1593	</div>
1594	<?php endif; ?>
1595	</div>
1596
1597	<?php
1598	}
1599
1600	public function render_author() {
1601
1602	if (!$this->get_settings('show_author')) {
1603	return;
1604	}
1605	?>
1606	<div class="upk-author">
1607	<i class="upk-icon-user" aria-hidden="true"></i>
1608	<a href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
1609	<?php echo esc_html( get_the_author() ) ?>
1610	</a>
1611	</div>
1612	<?php
1613	}
1614
1615	public function render_header() {
1616	$id = 'upk-crystal-slider-' . $this->get_id();
1617	$settings = $this->get_settings_for_display();
1618
1619	$this->add_render_attribute('crystal-slider', 'id', $id);
1620	$this->add_render_attribute('crystal-slider', 'class', ['upk-crystal-slider']);
1621
1622	$this->add_render_attribute(
1623	[
1624	'crystal-slider' => [
1625	'data-settings' => [
1626	wp_json_encode(array_filter([
1627	"autoplay" => ("yes" == $settings["autoplay"]) ? ["delay" => $settings["autoplay_speed"]] : false,
1628	"loop" => ($settings["loop"] == "yes") ? true : false,
1629	"speed" => $settings["speed"]["size"],
1630	"effect" => 'slide',
1631	"lazy" => true,
1632	"parallax" => true,
1633	"grabCursor" => ($settings["grab_cursor"] === "yes") ? true : false,
1634	"pauseOnHover" => ("yes" == $settings["pauseonhover"]) ? true : false,
1635	"slidesPerView" => 1,
1636	"observer" => ($settings["observer"]) ? true : false,
1637	"observeParents" => ($settings["observer"]) ? true : false,
1638	"navigation" => [
1639	"nextEl" => "#" . $id . " .upk-navigation-next",
1640	"prevEl" => "#" . $id . " .upk-navigation-prev",
1641	],
1642	"pagination" => [
1643	"el" => "#" . $id . " .upk-pagination",
1644	"clickable" => "true",
1645	],
1646	"lazy" => [
1647	"loadPrevNext" => "true",
1648	],
1649	]))
1650	]
1651	]
1652	]
1653	);
1654
1655	$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper');
1656
1657	?>
1658	<div <?php $this->print_render_attribute_string('crystal-slider'); ?>>
1659	<div <?php echo $this->get_render_attribute_string('swiper'); ?>>
1660	<div class="swiper-wrapper">
1661	<?php
1662	}
1663
1664	public function render_footer() {
1665	$settings = $this->get_settings_for_display();
1666
1667	?>
1668	</div>
1669	<?php if ($settings['show_navigation']) : ?>
1670	<div class="upk-navigation-wrap">
1671	<div class="upk-navigation-prev">
1672	<i class="upk-icon-arrow-left-<?php echo esc_html($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
1673	</div>
1674	<div class="upk-navigation-next">
1675	<i class="upk-icon-arrow-right-<?php echo esc_html($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
1676	</div>
1677	</div>
1678	<?php endif; ?>
1679
1680	<?php if ($settings['show_pagination']) : ?>
1681	<div class="upk-pagination-wrap">
1682	<div class="upk-pagination"></div>
1683	</div>
1684	<?php endif; ?>
1685	</div>
1686	</div>
1687
1688	<?php
1689	}
1690
1691	public function render_post_grid_item($post_id, $image_size) {
1692	$settings = $this->get_settings_for_display();
1693
1694	$this->add_render_attribute('slider-item', 'class', 'upk-item swiper-slide', true);
1695
1696	?>
1697
1698	<div <?php $this->print_render_attribute_string('slider-item'); ?>>
1699	<div class="upk-img-wrap">
1700	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1701	</div>
1702	<div class="upk-content">
1703	<div class="bdt-inner-content" data-swiper-parallax-x="-250" data-swiper-parallax-duration="1000">
1704	<?php $this->render_category(); ?>
1705
1706	<div data-swiper-parallax-x="-250" data-swiper-parallax-duration="1200">
1707	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1708	</div>
1709
1710	<?php if ($settings['show_author'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
1711	<div class="upk-meta upk-flex upk-flex-middle" data-swiper-parallax-x="-300" data-swiper-parallax-duration="1400">
1712	<?php if ($settings['show_author']) : ?>
1713	<?php $this->render_author(); ?>
1714	<?php endif; ?>
1715	<?php if ($settings['show_date']) : ?>
1716	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1717	<?php $this->render_date(); ?>
1718	</div>
1719	<?php endif; ?>
1720	<?php if (_is_upk_pro_activated()) :
1721	if ('yes' === $settings['show_reading_time']) : ?>
1722	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1723	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'] ) ); ?>
1724	</div>
1725	<?php endif; ?>
1726	<?php endif; ?>
1727	</div>
1728	<?php endif; ?>
1729
1730	<?php if ($settings['show_readmore'] === 'yes') : ?>
1731	<div class="upk-link-btn">
1732	<a href="<?php echo esc_url(get_permalink()); ?>">
1733	<i class="upk-icon-plus"></i>
1734	</a>
1735	</div>
1736	<?php endif; ?>
1737	</div>
1738	</div>
1739	</div>
1740	<?php
1741	}
1742
1743	public function render() {
1744	$settings = $this->get_settings_for_display();
1745
1746	$this->query_posts($settings['item_limit']['size']);
1747	$wp_query = $this->get_query();
1748
1749	if (!$wp_query->found_posts) {
1750	return;
1751	}
1752
1753	$this->render_header();
1754
1755	while ($wp_query->have_posts()) {
1756	$wp_query->the_post();
1757	$thumbnail_size = $settings['primary_thumbnail_size'];
1758
1759	$this->render_post_grid_item(get_the_ID(), $thumbnail_size);
1760	}
1761
1762	$this->render_footer();
1763
1764	wp_reset_postdata();
1765	}
1766	}
1767