ultimate-post-kit / modules / fanel-list / widgets / fanel-list.php

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

1,369 lines 37.9 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\FanelList\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_Image_Size;
11	use Elementor\Group_Control_Background;
12	use UltimatePostKit\Utils;
13
14	use UltimatePostKit\Traits\Global_Widget_Controls;
15	use UltimatePostKit\Traits\Global_Widget_Functions;
16	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
17	use WP_Query;
18
19	if (!defined('ABSPATH')) {
20	exit;
21	} // Exit if accessed directly
22
23	class Fanel_List 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-fanel-list';
32	}
33
34	public function get_title() {
35	return BDTUPK . esc_html__('Fanel List', 'ultimate-post-kit');
36	}
37
38	public function get_icon() {
39	return 'upk-widget-icon upk-icon-fanel-list';
40	}
41
42	public function get_categories() {
43	return ['ultimate-post-kit'];
44	}
45
46	public function get_keywords() {
47	return ['post', 'grid', 'blog', 'recent', 'news', 'fanel', 'list'];
48	}
49
50	public function get_style_depends() {
51	if ($this->upk_is_edit_mode()) {
52	return ['upk-all-styles'];
53	} else {
54	return ['upk-font', 'upk-fanel-list'];
55	}
56	}
57
58	public function get_script_depends() {
59	if ($this->upk_is_edit_mode()) {
60	return ['upk-all-scripts'];
61	} else {
62	return ['upk-ajax-loadmore'];
63	}
64	}
65
66	public function get_custom_help_url() {
67	return 'https://youtu.be/nGAoLOoNYk4';
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	'columns',
89	[
90	'label' => __('Columns', 'ultimate-post-kit'),
91	'type' => Controls_Manager::SELECT,
92	'default' => '2',
93	'tablet_default' => '1',
94	'mobile_default' => '1',
95	'options' => [
96	'1' => '1',
97	'2' => '2',
98	],
99	'selectors' => [
100	'{{WRAPPER}} .upk-fanel-list' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
101	],
102	]
103	);
104
105	$this->add_responsive_control(
106	'row_gap',
107	[
108	'label' => esc_html__('Row Gap', 'ultimate-post-kit'),
109	'type' => Controls_Manager::SLIDER,
110	'default' => [
111	'size' => 20,
112	],
113	'selectors' => [
114	'{{WRAPPER}} .upk-fanel-list' => 'grid-row-gap: {{SIZE}}{{UNIT}};',
115	],
116	]
117	);
118
119	$this->add_responsive_control(
120	'column_gap',
121	[
122	'label' => esc_html__('Column Gap', 'ultimate-post-kit'),
123	'type' => Controls_Manager::SLIDER,
124	'default' => [
125	'size' => 20,
126	],
127	'selectors' => [
128	'{{WRAPPER}} .upk-fanel-list' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
129	],
130	]
131	);
132
133	$this->add_group_control(
134	Group_Control_Image_Size::get_type(),
135	[
136	'name' => 'primary_thumbnail',
137	'exclude' => ['custom'],
138	'default' => 'medium',
139	]
140	);
141
142	$this->end_controls_section();
143
144	// Query Settings
145	$this->start_controls_section(
146	'section_post_query_builder',
147	[
148	'label' => __('Query', 'ultimate-post-kit'),
149	'tab' => Controls_Manager::TAB_CONTENT,
150	]
151	);
152
153	$this->add_control(
154	'item_limit',
155	[
156	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
157	'type' => Controls_Manager::SLIDER,
158	'range' => [
159	'px' => [
160	'min' => 1,
161	'max' => 20,
162	],
163	],
164	'default' => [
165	'size' => 6,
166	],
167	]
168	);
169
170	$this->register_query_builder_controls();
171
172	$this->end_controls_section();
173
174	$this->start_controls_section(
175	'section_content_additional',
176	[
177	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
178	]
179	);
180
181	//Global Title Controls
182	$this->register_title_controls();
183
184	$this->add_control(
185	'show_category',
186	[
187	'label' => esc_html__('Show Category', 'ultimate-post-kit'),
188	'type' => Controls_Manager::SWITCHER,
189	'default' => 'yes',
190	]
191	);
192
193	$this->add_control(
194	'show_date',
195	[
196	'label' => esc_html__('Show Date', 'ultimate-post-kit'),
197	'type' => Controls_Manager::SWITCHER,
198	'default' => 'yes',
199	]
200	);
201
202	$this->add_control(
203	'show_readmore',
204	[
205	'label' => esc_html__('Show Readmore', 'ultimate-post-kit'),
206	'type' => Controls_Manager::SWITCHER,
207	]
208	);
209
210	$this->register_text_controls();
211
212	$this->add_control(
213	'show_author',
214	[
215	'label' => esc_html__('Show Author', 'ultimate-post-kit'),
216	'type' => Controls_Manager::SWITCHER,
217	'separator' => 'before'
218	]
219	);
220
221	$this->add_control(
222	'show_comments',
223	[
224	'label' => esc_html__('Show Comments', 'ultimate-post-kit'),
225	'type' => Controls_Manager::SWITCHER,
226	]
227	);
228
229	$this->add_control(
230	'meta_separator',
231	[
232	'label' => __('Separator', 'ultimate-post-kit'),
233	'type' => Controls_Manager::TEXT,
234	'default' => '//',
235	'label_block' => false,
236	]
237	);
238
239	//Global Reading Time Controls
240	$this->register_reading_time_controls();
241
242	$this->add_control(
243	'show_pagination',
244	[
245	'label' => esc_html__('Show Pagination', 'ultimate-post-kit'),
246	'type' => Controls_Manager::SWITCHER,
247	'separator' => 'before'
248	]
249	);
250
251	//Global Ajax Controls
252	$this->register_ajax_loadmore_controls();
253
254	$this->add_control(
255	'global_link',
256	[
257	'label' => __('Item Wrapper Link', 'ultimate-post-kit'),
258	'type' => Controls_Manager::SWITCHER,
259	'prefix_class' => 'upk-global-link-',
260	'description' => __('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
261	]
262	);
263
264	$this->end_controls_section();
265
266	$this->start_controls_section(
267	'upk_section_style',
268	[
269	'label' => esc_html__('Items', 'ultimate-post-kit'),
270	'tab' => Controls_Manager::TAB_STYLE,
271	]
272	);
273
274	$this->add_responsive_control(
275	'content_padding',
276	[
277	'label' => __('Content Padding', 'ultimate-post-kit'),
278	'type' => Controls_Manager::DIMENSIONS,
279	'size_units' => ['px', 'em', '%'],
280	'selectors' => [
281	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
282	],
283	]
284	);
285
286	$this->start_controls_tabs('tabs_item_style');
287
288	$this->start_controls_tab(
289	'tab_item_normal',
290	[
291	'label' => esc_html__('Normal', 'ultimate-post-kit'),
292	]
293	);
294
295	$this->add_group_control(
296	Group_Control_Background::get_type(),
297	[
298	'name' => 'item_background',
299	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item',
300	]
301	);
302
303	$this->add_group_control(
304	Group_Control_Border::get_type(),
305	[
306	'name' => 'item_border',
307	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item',
308	]
309	);
310
311	$this->add_responsive_control(
312	'item_border_radius',
313	[
314	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
315	'type' => Controls_Manager::DIMENSIONS,
316	'size_units' => ['px', '%'],
317	'selectors' => [
318	'{{WRAPPER}} .upk-fanel-list .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
319	],
320	]
321	);
322
323	$this->add_responsive_control(
324	'item_padding',
325	[
326	'label' => __('Padding', 'ultimate-post-kit'),
327	'type' => Controls_Manager::DIMENSIONS,
328	'size_units' => ['px', 'em', '%'],
329	'selectors' => [
330	'{{WRAPPER}} .upk-fanel-list .upk-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
331	],
332	]
333	);
334
335	$this->add_group_control(
336	Group_Control_Box_Shadow::get_type(),
337	[
338	'name' => 'item_box_shadow',
339	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item',
340	]
341	);
342
343	$this->end_controls_tab();
344
345	$this->start_controls_tab(
346	'tab_item_hover',
347	[
348	'label' => esc_html__('Hover', 'ultimate-post-kit'),
349	]
350	);
351
352	$this->add_group_control(
353	Group_Control_Background::get_type(),
354	[
355	'name' => 'item_hover_background',
356	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item:hover',
357	]
358	);
359
360	$this->add_control(
361	'item_hover_border_color',
362	[
363	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
364	'type' => Controls_Manager::COLOR,
365	'condition' => [
366	'item_border_border!' => '',
367	],
368	'selectors' => [
369	'{{WRAPPER}} .upk-fanel-list .upk-item:hover' => 'border-color: {{VALUE}};',
370	],
371	]
372	);
373
374	$this->add_group_control(
375	Group_Control_Box_Shadow::get_type(),
376	[
377	'name' => 'item_hover_box_shadow',
378	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item:hover',
379	]
380	);
381
382	$this->end_controls_tab();
383
384	$this->end_controls_tabs();
385
386	$this->end_controls_section();
387
388	$this->start_controls_section(
389	'section_style_image',
390	[
391	'label' => esc_html__('Image', 'ultimate-post-kit'),
392	'tab' => Controls_Manager::TAB_STYLE,
393	]
394	);
395
396	$this->add_group_control(
397	Group_Control_Border::get_type(),
398	[
399	'name' => 'item_image_border',
400	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-image-wrap',
401	]
402	);
403
404	$this->add_responsive_control(
405	'item_image_border_radius',
406	[
407	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
408	'type' => Controls_Manager::DIMENSIONS,
409	'size_units' => ['px', '%'],
410	'selectors' => [
411	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-image-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
412	],
413	]
414	);
415
416	// $this->add_responsive_control(
417	// 'item_image_size',
418	// [
419	// 'label' => esc_html__( 'Size(px)', 'ultimate-post-kit' ),
420	// 'type' => Controls_Manager::SLIDER,
421	// 'range' => [
422	// 'px' => [
423	// 'min' => 100,
424	// 'max' => 500,
425	// ],
426	// ],
427	// 'selectors' => [
428	// '{{WRAPPER}} .upk-fanel-list .upk-item .upk-item-box .upk-fanel-list-image' => 'max-width: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}};',
429	// ],
430	// ]
431	// );
432
433	$this->end_controls_section();
434
435	$this->start_controls_section(
436	'section_style_title',
437	[
438	'label' => esc_html__('Title', 'ultimate-post-kit'),
439	'tab' => Controls_Manager::TAB_STYLE,
440	'condition' => [
441	'show_title' => 'yes',
442	],
443	]
444	);
445
446	$this->add_control(
447	'title_style',
448	[
449	'label' => esc_html__('Style', 'ultimate-post-kit'),
450	'type' => Controls_Manager::SELECT,
451	'default' => 'underline',
452	'options' => [
453	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
454	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
455	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
456	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
457	],
458	]
459	);
460
461	$this->add_control(
462	'title_color',
463	[
464	'label' => esc_html__('Color', 'ultimate-post-kit'),
465	'type' => Controls_Manager::COLOR,
466	'selectors' => [
467	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-title a' => 'color: {{VALUE}};',
468	],
469	]
470	);
471
472	$this->add_control(
473	'title_hover_color',
474	[
475	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
476	'type' => Controls_Manager::COLOR,
477	'selectors' => [
478	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-title a:hover' => 'color: {{VALUE}};',
479	],
480	]
481	);
482
483	$this->add_group_control(
484	Group_Control_Typography::get_type(),
485	[
486	'name' => 'title_typography',
487	'label' => esc_html__('Typography', 'ultimate-post-kit'),
488	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-title',
489	]
490	);
491
492	$this->add_group_control(
493	Group_Control_Text_Shadow::get_type(),
494	[
495	'name' => 'title_text_shadow',
496	'label' => __('Text Shadow', 'ultimate-post-kit'),
497	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-title',
498	]
499	);
500
501	$this->end_controls_section();
502
503	$this->start_controls_section(
504	'section_style_text',
505	[
506	'label' => esc_html__('Text', 'ultimate-post-kit'),
507	'tab' => Controls_Manager::TAB_STYLE,
508	'condition' => [
509	'show_excerpt' => 'yes',
510	],
511	]
512	);
513
514	$this->add_control(
515	'text_color',
516	[
517	'label' => esc_html__('Color', 'ultimate-post-kit'),
518	'type' => Controls_Manager::COLOR,
519	'selectors' => [
520	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-text' => 'color: {{VALUE}};',
521	],
522	]
523	);
524
525	$this->add_group_control(
526	Group_Control_Typography::get_type(),
527	[
528	'name' => 'text_typography',
529	'label' => esc_html__('Typography', 'ultimate-post-kit'),
530	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-text',
531	]
532	);
533
534	$this->add_responsive_control(
535	'text_margin',
536	[
537	'label' => __('Margin', 'ultimate-post-kit'),
538	'type' => Controls_Manager::DIMENSIONS,
539	'size_units' => ['px', 'em', '%'],
540	'selectors' => [
541	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
542	]
543	]
544	);
545
546	$this->add_responsive_control(
547	'text_spacing',
548	[
549	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
550	'type' => Controls_Manager::SLIDER,
551	'range' => [
552	'px' => [
553	'min' => 0,
554	'max' => 50,
555	],
556	],
557	'selectors' => [
558	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-text' => 'padding-top: {{SIZE}}{{UNIT}};',
559	],
560	]
561	);
562
563	$this->end_controls_section();
564
565	$this->start_controls_section(
566	'section_style_date',
567	[
568	'label' => esc_html__('Date', 'ultimate-post-kit'),
569	'tab' => Controls_Manager::TAB_STYLE,
570	'condition' => [
571	'show_date' => 'yes',
572	],
573	]
574	);
575	$this->add_responsive_control(
576	'date_position',
577	[
578	'label' => esc_html__('Position', 'ultimate-post-kit'),
579	'type' => Controls_Manager::SELECT,
580	'default' => 'bottom-right',
581	'options' => [
582	'top-left' => esc_html__('Top Left', 'ultimate-post-kit'),
583	'top-right' => esc_html__('Top Right', 'ultimate-post-kit'),
584	'bottom-left' => esc_html__('Bottom Left', 'ultimate-post-kit'),
585	'bottom-right' => esc_html__('Bottom Right', 'ultimate-post-kit'),
586	],
587	'selectors_dictionary' => [
588	'top-left' => 'top: 0; left: 0; bottom: auto; right: auto;',
589	'top-right' => 'top: 0; left: auto; bottom: auto; right: 0;',
590	'bottom-left' => 'top: auto; left: 0; bottom: 0; right: auto;',
591	'bottom-right' => 'top: auto; left: auto; bottom: 0; right: 0;',
592	],
593	'selectors' => [
594	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap' => '{{VALUE}};',
595	],
596	]
597	);
598
599	$this->add_group_control(
600	Group_Control_Background::get_type(),
601	[
602	'name' => 'date_background',
603	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap',
604	'separator' => 'before'
605	]
606	);
607
608	$this->add_group_control(
609	Group_Control_Border::get_type(),
610	[
611	'name' => 'date_border',
612	'label' => esc_html__('Border', 'ultimate-post-kit'),
613	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap',
614	]
615	);
616
617	$this->add_responsive_control(
618	'date_border_radius',
619	[
620	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
621	'type' => Controls_Manager::DIMENSIONS,
622	'size_units' => ['px', '%'],
623	'selectors' => [
624	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
625	],
626	]
627	);
628
629	$this->add_responsive_control(
630	'date_padding',
631	[
632	'label' => esc_html__('Padding', 'ultimate-post-kit'),
633	'type' => Controls_Manager::DIMENSIONS,
634	'size_units' => ['px', '%'],
635	'selectors' => [
636	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
637	]
638	]
639	);
640
641	$this->add_responsive_control(
642	'date_margin',
643	[
644	'label' => __('Margin', 'ultimate-post-kit'),
645	'type' => Controls_Manager::DIMENSIONS,
646	'size_units' => ['px', 'em', '%'],
647	'selectors' => [
648	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
649	]
650	]
651	);
652
653	$this->add_control(
654	'date_day_heading',
655	[
656	'label' => esc_html__('Day', 'ultimate-post-kit'),
657	'type' => Controls_Manager::HEADING,
658	'separator' => 'before'
659	]
660	);
661
662	$this->add_control(
663	'date_day_color',
664	[
665	'label' => esc_html__('Color', 'ultimate-post-kit'),
666	'type' => Controls_Manager::COLOR,
667	'selectors' => [
668	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-date' => 'color: {{VALUE}};',
669	],
670	]
671	);
672
673	$this->add_group_control(
674	Group_Control_Typography::get_type(),
675	[
676	'name' => 'date_day_typography',
677	'label' => esc_html__('Typography', 'ultimate-post-kit'),
678	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-date',
679	]
680	);
681
682	$this->add_control(
683	'date_month_heading',
684	[
685	'label' => esc_html__('Month', 'ultimate-post-kit'),
686	'type' => Controls_Manager::HEADING,
687	'separator' => 'before'
688	]
689	);
690
691	$this->add_control(
692	'date_month_color',
693	[
694	'label' => esc_html__('Color', 'ultimate-post-kit'),
695	'type' => Controls_Manager::COLOR,
696	'selectors' => [
697	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-month' => 'color: {{VALUE}};',
698	],
699	]
700	);
701
702	$this->add_group_control(
703	Group_Control_Typography::get_type(),
704	[
705	'name' => 'date_month_typography',
706	'label' => esc_html__('Typography', 'ultimate-post-kit'),
707	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-month',
708	]
709	);
710
711	$this->end_controls_section();
712
713	$this->start_controls_section(
714	'section_style_readmore',
715	[
716	'label' => esc_html__('Read More', 'ultimate-post-kit'),
717	'tab' => Controls_Manager::TAB_STYLE,
718	'condition' => [
719	'show_readmore' => 'yes',
720	],
721	]
722	);
723
724	$this->start_controls_tabs('tabs_readmore_style');
725
726	$this->start_controls_tab(
727	'tab_readmore_normal',
728	[
729	'label' => esc_html__('Normal', 'ultimate-post-kit'),
730	]
731	);
732
733	$this->add_control(
734	'readmore_color',
735	[
736	'label' => esc_html__('Color', 'ultimate-post-kit'),
737	'type' => Controls_Manager::COLOR,
738	'selectors' => [
739	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more' => 'color: {{VALUE}};',
740	],
741	]
742	);
743
744	$this->add_group_control(
745	Group_Control_Background::get_type(),
746	[
747	'name' => 'readmore_background',
748	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more',
749	]
750	);
751
752	$this->add_group_control(
753	Group_Control_Border::get_type(),
754	[
755	'name' => 'readmore_border',
756	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more',
757	]
758	);
759
760	$this->add_responsive_control(
761	'readmore_border_radius',
762	[
763	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
764	'type' => Controls_Manager::DIMENSIONS,
765	'size_units' => ['px', '%'],
766	'selectors' => [
767	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
768	],
769	]
770	);
771	$this->add_responsive_control(
772	'readmore_margin',
773	[
774	'label' => __('Margin', 'ultimate-post-kit'),
775	'type' => Controls_Manager::DIMENSIONS,
776	'size_units' => ['px', 'em', '%'],
777	'selectors' => [
778	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
779	]
780	]
781	);
782
783	$this->add_responsive_control(
784	'readmore_size',
785	[
786	'label' => esc_html__('Icon Size', 'ultimate-post-kit'),
787	'type' => Controls_Manager::SLIDER,
788	'range' => [
789	'px' => [
790	'min' => 0,
791	'max' => 50,
792	],
793	],
794	'selectors' => [
795	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more' => 'font-size: {{SIZE}}{{UNIT}};',
796	],
797	]
798	);
799
800	$this->add_responsive_control(
801	'readmore_button_height',
802	[
803	'label' => esc_html__('Button Height', 'ultimate-post-kit'),
804	'type' => Controls_Manager::SLIDER,
805	'selectors' => [
806	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
807	],
808	]
809	);
810
811	$this->add_responsive_control(
812	'readmore_button_width',
813	[
814	'label' => esc_html__('Button Width', 'ultimate-post-kit'),
815	'type' => Controls_Manager::SLIDER,
816	'selectors' => [
817	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more' => 'width: {{SIZE}}{{UNIT}};',
818	],
819	]
820	);
821
822	$this->end_controls_tab();
823
824	$this->start_controls_tab(
825	'tab_readmore_hover',
826	[
827	'label' => esc_html__('Hover', 'ultimate-post-kit'),
828	]
829	);
830
831	$this->add_control(
832	'readmore_color_hover',
833	[
834	'label' => esc_html__('Color', 'ultimate-post-kit'),
835	'type' => Controls_Manager::COLOR,
836	'selectors' => [
837	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more:hover' => 'color: {{VALUE}};',
838	],
839	]
840	);
841
842	$this->add_group_control(
843	Group_Control_Background::get_type(),
844	[
845	'name' => 'readmore_background_hover',
846	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more:hover',
847	]
848	);
849
850	$this->add_control(
851	'readmore_hover_border_color',
852	[
853	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
854	'type' => Controls_Manager::COLOR,
855	'condition' => [
856	'readmore_border_border!' => '',
857	],
858	'selectors' => [
859	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-read-more:hover' => 'border-color: {{VALUE}};',
860	],
861	]
862	);
863
864	$this->end_controls_tab();
865
866	$this->end_controls_tabs();
867
868	$this->end_controls_section();
869
870	$this->start_controls_section(
871	'section_style_category',
872	[
873	'label' => esc_html__('Category', 'ultimate-post-kit'),
874	'tab' => Controls_Manager::TAB_STYLE,
875	'condition' => [
876	'show_category' => 'yes',
877	],
878	]
879	);
880
881	$this->add_responsive_control(
882	'category_bottom_spacing',
883	[
884	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
885	'type' => Controls_Manager::SLIDER,
886	'range' => [
887	'px' => [
888	'min' => 0,
889	'max' => 50,
890	],
891	],
892	'selectors' => [
893	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
894	],
895	]
896	);
897
898	$this->start_controls_tabs('tabs_category_style');
899
900	$this->start_controls_tab(
901	'tab_category_normal',
902	[
903	'label' => esc_html__('Normal', 'ultimate-post-kit'),
904	]
905	);
906
907	$this->add_control(
908	'category_color',
909	[
910	'label' => esc_html__('Color', 'ultimate-post-kit'),
911	'type' => Controls_Manager::COLOR,
912	'selectors' => [
913	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a' => 'color: {{VALUE}};',
914	],
915	]
916	);
917
918	$this->add_group_control(
919	Group_Control_Background::get_type(),
920	[
921	'name' => 'category_background',
922	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a',
923	]
924	);
925
926	$this->add_group_control(
927	Group_Control_Border::get_type(),
928	[
929	'name' => 'category_border',
930	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a',
931	]
932	);
933
934	$this->add_responsive_control(
935	'category_border_radius',
936	[
937	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
938	'type' => Controls_Manager::DIMENSIONS,
939	'size_units' => ['px', '%'],
940	'selectors' => [
941	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
942	],
943	]
944	);
945
946	$this->add_responsive_control(
947	'category_padding',
948	[
949	'label' => esc_html__('Padding', 'ultimate-post-kit'),
950	'type' => Controls_Manager::DIMENSIONS,
951	'size_units' => ['px', 'em', '%'],
952	'selectors' => [
953	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
954	],
955	]
956	);
957
958	$this->add_responsive_control(
959	'category_spacing',
960	[
961	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
962	'type' => Controls_Manager::SLIDER,
963	'range' => [
964	'px' => [
965	'min' => 0,
966	'max' => 50,
967	'step' => 2,
968	],
969	],
970	'selectors' => [
971	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
972	],
973	]
974	);
975
976
977	$this->add_group_control(
978	Group_Control_Box_Shadow::get_type(),
979	[
980	'name' => 'category_shadow',
981	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a',
982	]
983	);
984
985	$this->add_group_control(
986	Group_Control_Typography::get_type(),
987	[
988	'name' => 'category_typography',
989	'label' => esc_html__('Typography', 'ultimate-post-kit'),
990	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a',
991	]
992	);
993
994	$this->end_controls_tab();
995
996	$this->start_controls_tab(
997	'tab_category_hover',
998	[
999	'label' => esc_html__('Hover', 'ultimate-post-kit'),
1000	]
1001	);
1002
1003	$this->add_control(
1004	'category_hover_color',
1005	[
1006	'label' => esc_html__('Color', 'ultimate-post-kit'),
1007	'type' => Controls_Manager::COLOR,
1008	'selectors' => [
1009	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a:hover' => 'color: {{VALUE}};',
1010	],
1011	]
1012	);
1013
1014	$this->add_group_control(
1015	Group_Control_Background::get_type(),
1016	[
1017	'name' => 'category_hover_background',
1018	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a:hover',
1019	]
1020	);
1021
1022	$this->add_control(
1023	'category_hover_border_color',
1024	[
1025	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1026	'type' => Controls_Manager::COLOR,
1027	'condition' => [
1028	'category_border_border!' => '',
1029	],
1030	'selectors' => [
1031	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-category a:hover' => 'border-color: {{VALUE}};',
1032	],
1033	]
1034	);
1035
1036	$this->end_controls_tab();
1037
1038	$this->end_controls_tabs();
1039
1040	$this->end_controls_section();
1041
1042	$this->start_controls_section(
1043	'section_style_meta',
1044	[
1045	'label' => esc_html__('Meta', 'ultimate-post-kit'),
1046	'tab' => Controls_Manager::TAB_STYLE,
1047	'conditions' => [
1048	'relation' => 'or',
1049	'terms' => [
1050	[
1051	'name' => 'show_author',
1052	'value' => 'yes'
1053	],
1054	[
1055	'name' => 'show_comments',
1056	'value' => 'yes'
1057	]
1058	]
1059	],
1060	]
1061	);
1062
1063	$this->add_control(
1064	'meta_color',
1065	[
1066	'label' => esc_html__('Color', 'ultimate-post-kit'),
1067	'type' => Controls_Manager::COLOR,
1068	'selectors' => [
1069	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-meta, {{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap .upk-author-name' => 'color: {{VALUE}};',
1070	],
1071	]
1072	);
1073
1074	$this->add_control(
1075	'meta_hover_color',
1076	[
1077	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
1078	'type' => Controls_Manager::COLOR,
1079	'selectors' => [
1080	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap .upk-author-name:hover' => 'color: {{VALUE}};',
1081	],
1082	]
1083	);
1084
1085	$this->add_responsive_control(
1086	'meta_spacing',
1087	[
1088	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
1089	'type' => Controls_Manager::SLIDER,
1090	'range' => [
1091	'px' => [
1092	'min' => 0,
1093	'max' => 50,
1094	],
1095	],
1096	'selectors' => [
1097	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-meta' => 'padding-top: {{SIZE}}{{UNIT}};',
1098	],
1099	]
1100	);
1101
1102	$this->add_responsive_control(
1103	'meta_space_between',
1104	[
1105	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
1106	'type' => Controls_Manager::SLIDER,
1107	'range' => [
1108	'px' => [
1109	'min' => 0,
1110	'max' => 50,
1111	],
1112	],
1113	'selectors' => [
1114	'{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
1115	],
1116	]
1117	);
1118
1119	$this->add_group_control(
1120	Group_Control_Typography::get_type(),
1121	[
1122	'name' => 'meta_typography',
1123	'label' => esc_html__('Typography', 'ultimate-post-kit'),
1124	'selector' => '{{WRAPPER}} .upk-fanel-list .upk-item .upk-fanel-meta',
1125	]
1126	);
1127
1128	$this->end_controls_section();
1129
1130	//Global Pagination Controls
1131	$this->register_pagination_controls();
1132
1133	//Global Ajax Loadmore Style Controls
1134	$this->register_ajax_loadmore_style_controls();
1135	}
1136
1137	/**
1138	* Main query render for this widget
1139	* @param $posts_per_page number item query limit
1140	*/
1141	public function query_posts($posts_per_page) {
1142
1143	$default = $this->getGroupControlQueryArgs();
1144	if ($posts_per_page) {
1145	$args['posts_per_page'] = $posts_per_page;
1146	$args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
1147	}
1148	$args = array_merge($default, $args);
1149	$this->_query = new WP_Query($args);
1150	}
1151
1152	public function render_author() {
1153
1154	if (!$this->get_settings('show_author')) {
1155	return;
1156	}
1157	?>
1158	<div class="upk-author-name-wrap">
1159	<span class="upk-by"><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit') ?></span>
1160	<a class="upk-author-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
1161	<?php echo esc_html( get_the_author() ); ?>
1162	</a>
1163	</div>
1164	<?php
1165	}
1166
1167	public function render_comments($id = 0) {
1168
1169	if (!$this->get_settings('show_comments')) {
1170	return;
1171	}
1172	?>
1173
1174	<div class="upk-fanel-comments">
1175	<?php echo get_comments_number($id) ?>
1176	<?php echo esc_html_x('Comments', 'Frontend', 'ultimate-post-kit') ?>
1177	</div>
1178
1179	<?php
1180	}
1181
1182	public function render_post_grid_item($post_id, $image_size, $excerpt_length) {
1183	$settings = $this->get_settings_for_display();
1184
1185	if ('yes' == $settings['global_link']) {
1186
1187	$this->add_render_attribute('list-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
1188	}
1189	$this->add_render_attribute('list-item', 'class', 'upk-item', true);
1190
1191	if ('yes' == $settings['show_readmore']) {
1192	$this->add_render_attribute('list-box', 'class', 'upk-content upk-readmore--yes', true);
1193	} else {
1194	$this->add_render_attribute('list-box', 'class', 'upk-content', true);
1195	}
1196
1197	?>
1198	<div <?php $this->print_render_attribute_string('list-item'); ?>>
1199	<div class="upk-item-box">
1200	<div class="upk-image-wrap">
1201
1202	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1203
1204	<?php if ($settings['show_date'] == 'yes') : ?>
1205	<div class="upk-fanel-date-wrap">
1206	<span class="upk-fanel-date"><?php echo get_the_date('d'); ?></span>
1207	<span class="upk-fanel-month"><?php echo get_the_date('M'); ?></span>
1208	</div>
1209	<?php endif; ?>
1210
1211	</div>
1212
1213	<div <?php $this->print_render_attribute_string('list-box'); ?>>
1214	<?php $this->render_category(); ?>
1215
1216	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1217
1218	<?php $this->render_excerpt($excerpt_length); ?>
1219
1220	<?php if ($settings['show_author'] or $settings['show_comments'] or $settings['show_reading_time']) : ?>
1221	<div class="upk-fanel-meta">
1222	<?php if ($settings['show_author']) : ?>
1223	<?php $this->render_author(); ?>
1224	<?php endif; ?>
1225	<?php if ($settings['show_comments']) : ?>
1226	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1227	<?php $this->render_comments($post_id); ?>
1228	</div>
1229	<?php endif; ?>
1230
1231	<?php if (_is_upk_pro_activated()) :
1232	if ('yes' === $settings['show_reading_time']) : ?>
1233	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1234	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'] ) ); ?>
1235	</div>
1236	<?php endif; ?>
1237	<?php endif; ?>
1238	</div>
1239	<?php endif; ?>
1240
1241	</div>
1242	<?php if ($settings['show_readmore'] == 'yes') : ?>
1243	<a class="upk-fanel-read-more" href="<?php echo esc_url(get_permalink()) ?>">
1244	<i class="upk-icon-arrow-right-7" aria-hidden="true"></i>
1245	</a>
1246	<?php endif; ?>
1247	</div>
1248	</div>
1249
1250	<?php
1251	}
1252
1253	protected function render() {
1254	$settings = $this->get_settings_for_display();
1255
1256	$this->query_posts($settings['item_limit']['size']);
1257	$wp_query = $this->get_query();
1258
1259	if (!$wp_query->found_posts) {
1260	return;
1261	}
1262
1263	$this->add_render_attribute(
1264	[
1265	'upk-fanel-list' => [
1266	'class' => 'upk-fanel-list-container upk-ajax-grid',
1267	'data-loadmore' => [
1268	wp_json_encode(
1269	array_filter([
1270	'loadmore_enable' => $settings['ajax_loadmore_enable'],
1271	'loadmore_btn' => $settings['ajax_loadmore_btn'],
1272	'infinite_scroll' => $settings['ajax_loadmore_infinite_scroll'],
1273	])
1274	),
1275	],
1276	],
1277	]
1278	);
1279
1280	if ($settings['ajax_loadmore_enable'] == 'yes') {
1281	$ajax_settings = [
1282	'posts_source' => isset($settings['posts_source']) ? $settings['posts_source'] : 'post',
1283	'posts_per_page' => isset($settings['item_limit']['size']) ? $settings['item_limit']['size'] : 6,
1284	'ajax_item_load' => isset($settings['ajax_loadmore_items']) ? $settings['ajax_loadmore_items'] : 3,
1285	'posts_selected_ids' => isset($settings['posts_selected_ids']) ? $settings['posts_selected_ids'] : '',
1286	'posts_include_by' => isset($settings['posts_include_by']) ? $settings['posts_include_by'] : [],
1287	'posts_include_author_ids' => isset($settings['posts_include_author_ids']) ? $settings['posts_include_author_ids'] : '',
1288	'posts_include_term_ids' => isset($settings['posts_include_term_ids']) ? $settings['posts_include_term_ids'] : '',
1289	'posts_exclude_by' => isset($settings['posts_exclude_by']) ? $settings['posts_exclude_by'] : [],
1290	'posts_exclude_ids' => isset($settings['posts_exclude_ids']) ? $settings['posts_exclude_ids'] : '',
1291	'posts_exclude_author_ids' => isset($settings['posts_exclude_author_ids']) ? $settings['posts_exclude_author_ids'] : '',
1292	'posts_exclude_term_ids' => isset($settings['posts_exclude_term_ids']) ? $settings['posts_exclude_term_ids'] : '',
1293	'posts_offset' => isset($settings['posts_offset']) ? $settings['posts_offset'] : 0,
1294	'posts_select_date' => isset($settings['posts_select_date']) ? $settings['posts_select_date'] : '',
1295	'posts_date_before' => isset($settings['posts_date_before']) ? $settings['posts_date_before'] : '',
1296	'posts_date_after' => isset($settings['posts_date_after']) ? $settings['posts_date_after'] : '',
1297	'posts_orderby' => isset($settings['posts_orderby']) ? $settings['posts_orderby'] : 'date',
1298	'posts_order' => isset($settings['posts_order']) ? $settings['posts_order'] : 'DESC',
1299	'posts_ignore_sticky_posts' => isset($settings['posts_ignore_sticky_posts']) ? $settings['posts_ignore_sticky_posts'] : 'no',
1300	'posts_only_with_featured_image'=> isset($settings['posts_only_with_featured_image']) ? $settings['posts_only_with_featured_image'] : 'no',
1301	// List Settings
1302	'show_title' => isset($settings['show_title']) ? $settings['show_title'] : 'yes',
1303	'title_tags' => isset( $settings['title_tags'] ) ? $settings['title_tags'] : 'h3',
1304	'title_style' => isset($settings['title_style']) ? $settings['title_style'] : '',
1305	'show_category' => isset($settings['show_category']) ? $settings['show_category'] : 'yes',
1306	'show_date' => isset($settings['show_date']) ? $settings['show_date'] : 'yes',
1307	'show_readmore' => isset($settings['show_readmore']) ? $settings['show_readmore'] : 'no',
1308	'show_excerpt' => isset($settings['show_excerpt']) ? $settings['show_excerpt'] : 'no',
1309	'excerpt_length' => isset($settings['excerpt_length']) ? $settings['excerpt_length'] : 15,
1310	'show_author' => isset($settings['show_author']) ? $settings['show_author'] : 'no',
1311	'show_comments' => isset($settings['show_comments']) ? $settings['show_comments'] : 'no',
1312	'meta_separator' => isset($settings['meta_separator']) ? $settings['meta_separator'] : '//',
1313	'show_reading_time' => isset($settings['show_reading_time']) ? $settings['show_reading_time'] : 'no',
1314	'avg_reading_speed' => isset($settings['avg_reading_speed']) ? $settings['avg_reading_speed'] : 200,
1315	'primary_thumbnail_size' => isset($settings['primary_thumbnail_size']) ? $settings['primary_thumbnail_size'] : 'medium',
1316	'upk_link_new_tab' => isset($settings['upk_link_new_tab']) ? $settings['upk_link_new_tab'] : 'no',
1317	'global_link' => isset($settings['global_link']) ? $settings['global_link'] : 'no',
1318	];
1319
1320	$this->add_render_attribute(
1321	[
1322	'upk-fanel-list' => [
1323	'data-settings' => [
1324	wp_json_encode($ajax_settings)
1325	],
1326	],
1327	]
1328	);
1329	}
1330
1331	$this->add_render_attribute('list-wrap', 'class', 'upk-fanel-list upk-ajax-grid-wrap');
1332
1333	if (isset($settings['upk_in_animation_show']) && ($settings['upk_in_animation_show'] == 'yes')) {
1334	$this->add_render_attribute('list-wrap', 'class', 'upk-in-animation');
1335	if (isset($settings['upk_in_animation_delay']['size'])) {
1336	$this->add_render_attribute('list-wrap', 'data-in-animation-delay', $settings['upk_in_animation_delay']['size']);
1337	}
1338	}
1339
1340	?>
1341	<div <?php $this->print_render_attribute_string('upk-fanel-list'); ?>>
1342	<div <?php $this->print_render_attribute_string('list-wrap'); ?>>
1343	<?php while ($wp_query->have_posts()) :
1344	$wp_query->the_post();
1345
1346	$thumbnail_size = $settings['primary_thumbnail_size'];
1347
1348	?>
1349
1350	<?php $this->render_post_grid_item(get_the_ID(), $thumbnail_size, $settings['excerpt_length']); ?>
1351
1352	<?php endwhile; ?>
1353	</div>
1354	</div>
1355
1356	<?php $this->render_ajax_loadmore(); ?>
1357
1358	<?php
1359
1360	if ($settings['show_pagination']) { ?>
1361	<div class="ep-pagination">
1362	<?php ultimate_post_kit_post_pagination($wp_query, $this->get_id()); ?>
1363	</div>
1364	<?php
1365	}
1366	wp_reset_postdata();
1367	}
1368	}
1369