ultimate-post-kit / modules / alice-grid / widgets / alice-grid.php

alice-grid.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.1.1, at modules/alice-grid/widgets/alice-grid.php

1,129 lines 32.8 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\AliceGrid\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
13	use UltimatePostKit\Traits\Global_Widget_Controls;
14	use UltimatePostKit\Traits\Global_Widget_Functions;
15	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
16	use WP_Query;
17
18	if (!defined('ABSPATH')) exit; // Exit if accessed directly
19
20	class Alice_Grid extends Group_Control_Query {
21
22	use Global_Widget_Controls;
23	use Global_Widget_Functions;
24
25	private $_query = null;
26
27	public function get_name() {
28	return 'upk-alice-grid';
29	}
30
31	public function get_title() {
32	return BDTUPK . esc_html__('Alice Grid', 'ultimate-post-kit');
33	}
34
35	public function get_icon() {
36	return 'upk-widget-icon upk-icon-alice-grid';
37	}
38
39	public function get_categories() {
40	return ['ultimate-post-kit'];
41	}
42
43	public function get_keywords() {
44	return ['post', 'grid', 'blog', 'recent', 'news', 'alice'];
45	}
46
47	public function get_style_depends() {
48	if ($this->upk_is_edit_mode()) {
49	return ['upk-all-styles'];
50	} else {
51	return ['upk-font', 'upk-alice-grid'];
52	}
53	}
54
55	public function get_script_depends() {
56	if ($this->upk_is_edit_mode()) {
57	return ['upk-all-scripts'];
58	} else {
59	return ['upk-ajax-loadmore'];
60	}
61	}
62
63	public function get_custom_help_url() {
64	return 'https://youtu.be/E7W5WSAvxbA';
65	}
66
67
68	public function get_query() {
69	return $this->_query;
70	}
71
72	public function has_widget_inner_wrapper(): bool {
73	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
74	}
75
76
77	protected function register_controls() {
78	$this->start_controls_section(
79	'section_content_layout',
80	[
81	'label' => esc_html__('Layout', 'ultimate-post-kit'),
82	]
83	);
84
85	$this->add_control(
86	'grid_style',
87	[
88	'label' => esc_html__('Layout Style', 'ultimate-post-kit'),
89	'type' => Controls_Manager::SELECT,
90	'default' => '1',
91	'options' => [
92	'1' => esc_html__('01', 'ultimate-post-kit'),
93	'2' => esc_html__('02', 'ultimate-post-kit'),
94	'3' => esc_html__('03', 'ultimate-post-kit'),
95	'4' => esc_html__('04', 'ultimate-post-kit'),
96	],
97	]
98	);
99
100	$column_size = apply_filters('upk_column_size', '');
101
102	$this->add_responsive_control(
103	'columns',
104	[
105	'label' => esc_html__('Columns', 'ultimate-post-kit') . BDTUPK_PC,
106	'type' => Controls_Manager::SELECT,
107	'default' => '3',
108	'tablet_default' => '2',
109	'mobile_default' => '1',
110	'options' => [
111	'1' => esc_html__('1', 'ultimate-post-kit'),
112	'2' => esc_html__('2', 'ultimate-post-kit'),
113	'3' => esc_html__('3', 'ultimate-post-kit'),
114	'4' => esc_html__('4', 'ultimate-post-kit'),
115	'5' => esc_html__('5', 'ultimate-post-kit'),
116	'6' => esc_html__('6', 'ultimate-post-kit'),
117	],
118	'selectors' => [
119	'{{WRAPPER}} .upk-alice-grid .upk-style-1' => $column_size,
120	],
121	'condition' => [
122	'grid_style' => ['1']
123	],
124	'classes' => BDTUPK_IS_PC
125	]
126	);
127
128	$this->add_responsive_control(
129	'row_gap',
130	[
131	'label' => esc_html__('Row Gap', 'ultimate-post-kit'),
132	'type' => Controls_Manager::SLIDER,
133	'selectors' => [
134	'{{WRAPPER}} .upk-alice-grid .upk-alice-wrap' => 'grid-row-gap: {{SIZE}}{{UNIT}};',
135	],
136	]
137	);
138
139	$this->add_responsive_control(
140	'column_gap',
141	[
142	'label' => esc_html__('Column Gap', 'ultimate-post-kit'),
143	'type' => Controls_Manager::SLIDER,
144	'selectors' => [
145	'{{WRAPPER}} .upk-alice-grid .upk-alice-wrap' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
146	],
147	]
148	);
149
150	$this->add_responsive_control(
151	'default_item_height',
152	[
153	'label' => esc_html__('Default Item Height', 'ultimate-post-kit'),
154	'type' => Controls_Manager::SLIDER,
155	'range' => [
156	'px' => [
157	'min' => 200,
158	'max' => 800,
159	],
160	],
161	'selectors' => [
162	'{{WRAPPER}} .upk-alice-grid .upk-style-1 .upk-item, {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+1), {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+5)' => 'height: {{SIZE}}{{UNIT}};',
163	'(mobile){{WRAPPER}} .upk-alice-grid .upk-style-4 .upk-item:nth-child(5n+2)' => 'height: {{SIZE}}{{UNIT}};',
164	],
165	'condition' => [
166	'grid_style' => ['1', '4']
167	]
168	]
169	);
170
171	$this->add_responsive_control(
172	'primary_item_height',
173	[
174	'label' => esc_html__('Primary Item Height', 'ultimate-post-kit'),
175	'type' => Controls_Manager::SLIDER,
176	'range' => [
177	'px' => [
178	'min' => 200,
179	'max' => 800,
180	],
181	],
182	'selectors' => [
183	'{{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+1), {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+2), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+1)' => 'height: {{SIZE}}{{UNIT}};',
184	],
185	'condition' => [
186	'grid_style!' => ['1', '3', '4']
187	]
188	]
189	);
190
191	$this->add_responsive_control(
192	'secondary_item_height',
193	[
194	'label' => esc_html__('Secondary Item Height', 'ultimate-post-kit'),
195	'type' => Controls_Manager::SLIDER,
196	'range' => [
197	'px' => [
198	'min' => 200,
199	'max' => 800,
200	],
201	],
202	'selectors' => [
203	'{{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+3), {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+4), {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+5), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+2), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+3), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+4), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+5), {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+6)' => 'height: {{SIZE}}{{UNIT}};',
204	'(mobile){{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+1)' => 'height: {{SIZE}}{{UNIT}};',
205	],
206	'condition' => [
207	'grid_style!' => ['1', '4']
208	]
209	]
210	);
211
212	$this->add_control(
213	'content_position',
214	[
215	'label' => esc_html__('Content Position', 'ultimate-post-kit'),
216	'type' => Controls_Manager::CHOOSE,
217	'toggle' => false,
218	'default' => 'bottom-center',
219	'options' => [
220	'bottom-left' => [
221	'title' => esc_html__('Left', 'ultimate-post-kit'),
222	'icon' => 'eicon-text-align-left',
223	],
224	'bottom-center' => [
225	'title' => esc_html__('Center', 'ultimate-post-kit'),
226	'icon' => 'eicon-text-align-center',
227	],
228	'bottom-right' => [
229	'title' => esc_html__('Right', 'ultimate-post-kit'),
230	'icon' => 'eicon-text-align-right',
231	],
232	],
233	]
234	);
235
236	$this->add_group_control(
237	Group_Control_Image_Size::get_type(),
238	[
239	'name' => 'primary_thumbnail',
240	'exclude' => ['custom'],
241	'default' => 'medium',
242	]
243	);
244
245	$this->end_controls_section();
246
247	// Query Settings
248	$this->start_controls_section(
249	'section_post_query_builder',
250	[
251	'label' => esc_html__('Query', 'ultimate-post-kit'),
252	'tab' => Controls_Manager::TAB_CONTENT,
253	]
254	);
255
256	$this->add_control(
257	'item_limit',
258	[
259	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
260	'type' => Controls_Manager::SLIDER,
261	'range' => [
262	'px' => [
263	'min' => 0,
264	'max' => 21,
265	'step' => 3
266	],
267	],
268	'default' => [
269	'size' => 6,
270	],
271	'condition' => [
272	'grid_style' => ['1', '3']
273	]
274	]
275	);
276
277	$this->add_control(
278	'item_limit_2',
279	[
280	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
281	'type' => Controls_Manager::SLIDER,
282	'range' => [
283	'px' => [
284	'min' => 0,
285	'max' => 20,
286	'step' => 5
287	],
288	],
289	'default' => [
290	'size' => 5,
291	],
292	'condition' => [
293	'grid_style' => ['2', '4']
294	]
295	]
296	);
297
298	$this->register_query_builder_controls();
299
300	$this->end_controls_section();
301
302	$this->start_controls_section(
303	'section_content_additional',
304	[
305	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
306	]
307	);
308
309	//Global Title Controls
310	$this->register_title_controls();
311
312	$this->add_control(
313	'show_category',
314	[
315	'label' => esc_html__('Category', 'ultimate-post-kit'),
316	'type' => Controls_Manager::SWITCHER,
317	'default' => 'yes',
318	]
319	);
320
321	$this->add_control(
322	'show_author',
323	[
324	'label' => esc_html__('Author', 'ultimate-post-kit'),
325	'type' => Controls_Manager::SWITCHER,
326	'default' => 'yes',
327	]
328	);
329
330	//Global Date Controls
331	$this->register_date_controls();
332
333	//Global Reading Time Controls
334	$this->register_reading_time_controls();
335
336	$this->add_control(
337	'meta_separator',
338	[
339	'label' => esc_html__('Separator', 'ultimate-post-kit'),
340	'type' => Controls_Manager::TEXT,
341	'default' => '.',
342	'label_block' => false,
343	]
344	);
345
346	$this->add_control(
347	'show_pagination',
348	[
349	'label' => esc_html__('Pagination', 'ultimate-post-kit'),
350	'type' => Controls_Manager::SWITCHER,
351	'separator' => 'before'
352	]
353	);
354
355	//Global Ajax Controls
356	$this->register_ajax_loadmore_controls();
357
358	$this->add_control(
359	'global_link',
360	[
361	'label' => esc_html__('Item Wrapper Link', 'ultimate-post-kit'),
362	'type' => Controls_Manager::SWITCHER,
363	'prefix_class' => 'upk-global-link-',
364	'description' => esc_html__('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
365	]
366	);
367
368	$this->end_controls_section();
369
370	//Style
371	$this->start_controls_section(
372	'upk_section_style',
373	[
374	'label' => esc_html__('Items', 'ultimate-post-kit'),
375	'tab' => Controls_Manager::TAB_STYLE,
376	]
377	);
378
379	$this->add_responsive_control(
380	'content_padding',
381	[
382	'label' => esc_html__('Content Padding', 'ultimate-post-kit'),
383	'type' => Controls_Manager::DIMENSIONS,
384	'size_units' => ['px', 'em', '%'],
385	'selectors' => [
386	'{{WRAPPER}} .upk-alice-grid .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
387	],
388	]
389	);
390
391	$this->start_controls_tabs('tabs_item_style');
392
393	$this->start_controls_tab(
394	'tab_item_normal',
395	[
396	'label' => esc_html__('Normal', 'ultimate-post-kit'),
397	]
398	);
399
400	$this->add_control(
401	'overlay_blur_effect',
402	[
403	'label' => esc_html__('Glassmorphism', 'ultimate-post-kit'),
404	'type' => Controls_Manager::SWITCHER,
405	// translators: %1s: Opening anchor tag with link to MDN backdrop-filter documentation, %2s: Closing anchor tag
406	'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1s look here %2s', 'ultimate-post-kit'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),
407	]
408	);
409
410	$this->add_control(
411	'overlay_blur_level',
412	[
413	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
414	'type' => Controls_Manager::SLIDER,
415	'range' => [
416	'px' => [
417	'min' => 0,
418	'step' => 1,
419	'max' => 50,
420	]
421	],
422	'default' => [
423	'size' => 5
424	],
425	'selectors' => [
426	'{{WRAPPER}} .upk-alice-grid .upk-item-box::before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
427	],
428	'condition' => [
429	'overlay_blur_effect' => 'yes'
430	]
431	]
432	);
433
434	$this->add_control(
435	'item_overlay_color',
436	[
437	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
438	'type' => Controls_Manager::COLOR,
439	'selectors' => [
440	'{{WRAPPER}} .upk-alice-grid .upk-item-box::before' => 'background: {{VALUE}};',
441	],
442	]
443	);
444
445	$this->add_group_control(
446	Group_Control_Border::get_type(),
447	[
448	'name' => 'item_border',
449	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item',
450	]
451	);
452
453	$this->add_responsive_control(
454	'item_border_radius',
455	[
456	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
457	'type' => Controls_Manager::DIMENSIONS,
458	'size_units' => ['px', '%'],
459	'selectors' => [
460	'{{WRAPPER}} .upk-alice-grid .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
461	],
462	]
463	);
464
465	$this->add_responsive_control(
466	'item_padding',
467	[
468	'label' => esc_html__('Padding', 'ultimate-post-kit'),
469	'type' => Controls_Manager::DIMENSIONS,
470	'size_units' => ['px', 'em', '%'],
471	'selectors' => [
472	'{{WRAPPER}} .upk-alice-grid .upk-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
473	],
474	]
475	);
476
477	$this->add_group_control(
478	Group_Control_Box_Shadow::get_type(),
479	[
480	'name' => 'item_box_shadow',
481	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item',
482	]
483	);
484
485	$this->end_controls_tab();
486
487	$this->start_controls_tab(
488	'tab_item_hover',
489	[
490	'label' => esc_html__('Hover', 'ultimate-post-kit'),
491	]
492	);
493
494	$this->add_control(
495	'overlay_blur_level_hover',
496	[
497	'label' => esc_html__('Blur Level', 'ultimate-post-kit'),
498	'type' => Controls_Manager::SLIDER,
499	'range' => [
500	'px' => [
501	'min' => 0,
502	'step' => 1,
503	'max' => 50,
504	]
505	],
506	'default' => [
507	'size' => 0
508	],
509	'selectors' => [
510	'{{WRAPPER}} .upk-alice-grid .upk-item:hover .upk-item-box::before' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
511	],
512	'condition' => [
513	'overlay_blur_effect' => 'yes'
514	]
515	]
516	);
517
518	$this->add_control(
519	'item_overlay_hover_color',
520	[
521	'label' => esc_html__('Overlay Color', 'ultimate-post-kit'),
522	'type' => Controls_Manager::COLOR,
523	'selectors' => [
524	'{{WRAPPER}} .upk-alice-grid .upk-item:hover .upk-item-box::before' => 'background: {{VALUE}};',
525	],
526	]
527	);
528
529	$this->add_control(
530	'item_hover_border_color',
531	[
532	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
533	'type' => Controls_Manager::COLOR,
534	'condition' => [
535	'item_border_border!' => '',
536	],
537	'selectors' => [
538	'{{WRAPPER}} .upk-alice-grid .upk-item:hover' => 'border-color: {{VALUE}};',
539	],
540	]
541	);
542
543	$this->add_group_control(
544	Group_Control_Box_Shadow::get_type(),
545	[
546	'name' => 'item_hover_box_shadow',
547	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item:hover',
548	]
549	);
550
551	$this->end_controls_tab();
552
553	$this->end_controls_tabs();
554
555	$this->end_controls_section();
556
557	$this->start_controls_section(
558	'section_style_title',
559	[
560	'label' => esc_html__('Title', 'ultimate-post-kit'),
561	'tab' => Controls_Manager::TAB_STYLE,
562	'condition' => [
563	'show_title' => 'yes',
564	],
565	]
566	);
567
568	$this->add_control(
569	'title_style',
570	[
571	'label' => esc_html__('Style', 'ultimate-post-kit'),
572	'type' => Controls_Manager::SELECT,
573	'default' => 'underline',
574	'options' => [
575	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
576	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
577	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
578	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
579	],
580	]
581	);
582
583	$this->add_control(
584	'title_color',
585	[
586	'label' => esc_html__('Color', 'ultimate-post-kit'),
587	'type' => Controls_Manager::COLOR,
588	'selectors' => [
589	'{{WRAPPER}} .upk-alice-grid .upk-title a' => 'color: {{VALUE}};',
590	],
591	]
592	);
593
594	$this->add_control(
595	'title_hover_color',
596	[
597	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
598	'type' => Controls_Manager::COLOR,
599	'selectors' => [
600	'{{WRAPPER}} .upk-alice-grid .upk-title a:hover' => 'color: {{VALUE}};',
601	],
602	]
603	);
604
605	$this->add_responsive_control(
606	'title_spacing',
607	[
608	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
609	'type' => Controls_Manager::SLIDER,
610	'range' => [
611	'px' => [
612	'min' => 0,
613	'max' => 50,
614	],
615	],
616	'selectors' => [
617	'{{WRAPPER}} .upk-alice-grid .upk-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
618	],
619	]
620	);
621
622	$this->add_group_control(
623	Group_Control_Typography::get_type(),
624	[
625	'name' => 'title_typography',
626	'label' => esc_html__('Typography', 'ultimate-post-kit'),
627	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-item .upk-title',
628	]
629	);
630
631	$this->add_group_control(
632	Group_Control_Typography::get_type(),
633	[
634	'name' => 'secondary_title_typography',
635	'label' => esc_html__('Secondary Typography', 'ultimate-post-kit'),
636	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+3) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+4) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-2 .upk-item:nth-child(5n+5) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+2) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+3) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+4) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+5) .upk-title, {{WRAPPER}} .upk-alice-grid .upk-style-3 .upk-item:nth-child(6n+6) .upk-title',
637	'condition' => [
638	'grid_style!' => ['1', '4']
639	]
640	]
641	);
642
643	$this->add_group_control(
644	Group_Control_Text_Shadow::get_type(),
645	[
646	'name' => 'title_text_shadow',
647	'label' => esc_html__('Text Shadow', 'ultimate-post-kit'),
648	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-title a',
649	]
650	);
651
652	$this->end_controls_section();
653
654	$this->start_controls_section(
655	'section_style_author',
656	[
657	'label' => esc_html__('Meta', 'ultimate-post-kit'),
658	'tab' => Controls_Manager::TAB_STYLE,
659	'conditions' => [
660	'relation' => 'or',
661	'terms' => [
662	[
663	'name' => 'show_author',
664	'value' => 'yes'
665	],
666	[
667	'name' => 'show_date',
668	'value' => 'yes'
669	]
670	]
671	],
672	]
673	);
674
675	$this->add_control(
676	'author_color',
677	[
678	'label' => esc_html__('Color', 'ultimate-post-kit'),
679	'type' => Controls_Manager::COLOR,
680	'selectors' => [
681	'{{WRAPPER}} .upk-alice-grid .upk-meta *' => 'color: {{VALUE}};',
682	],
683	]
684	);
685
686	$this->add_control(
687	'author_hover_color',
688	[
689	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
690	'type' => Controls_Manager::COLOR,
691	'selectors' => [
692	'{{WRAPPER}} .upk-alice-grid .upk-meta .upk-author a:hover' => 'color: {{VALUE}};',
693	],
694	]
695	);
696
697	// $this->add_control(
698	// 'date_divider_color',
699	// [
700	// 'label' => esc_html__('Divider Color', 'ultimate-post-kit'),
701	// 'type' => Controls_Manager::COLOR,
702	// 'selectors' => [
703	// '{{WRAPPER}} .upk-alice-grid .upk-meta .upk-date:before' => 'background: {{VALUE}};',
704	// ],
705	// ]
706	// );
707
708	// $this->add_responsive_control(
709	// 'date_spacing',
710	// [
711	// 'label' => esc_html__('Spacing', 'ultimate-post-kit'),
712	// 'type' => Controls_Manager::SLIDER,
713	// 'range' => [
714	// 'px' => [
715	// 'min' => 0,
716	// 'max' => 50,
717	// 'step' => 2,
718	// ],
719	// ],
720	// 'selectors' => [
721	// '{{WRAPPER}} .upk-alice-grid .upk-meta .upk-date' => 'margin-left: {{SIZE}}{{UNIT}}; padding-left: {{SIZE}}{{UNIT}};',
722	// ],
723	// ]
724	// );
725	$this->add_responsive_control(
726	'date_spacing',
727	[
728	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
729	'type' => Controls_Manager::SLIDER,
730	'range' => [
731	'px' => [
732	'min' => 0,
733	'max' => 50,
734	],
735	],
736	'selectors' => [
737	'{{WRAPPER}} .upk-alice-grid .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
738	],
739	]
740	);
741
742	$this->add_group_control(
743	Group_Control_Typography::get_type(),
744	[
745	'name' => 'author_typography',
746	'label' => esc_html__('Typography', 'ultimate-post-kit'),
747	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-meta *',
748	]
749	);
750
751	$this->end_controls_section();
752
753	$this->start_controls_section(
754	'section_style_category',
755	[
756	'label' => esc_html__('Category', 'ultimate-post-kit'),
757	'tab' => Controls_Manager::TAB_STYLE,
758	'condition' => [
759	'show_category' => 'yes',
760	],
761	]
762	);
763
764	$this->add_responsive_control(
765	'category_bottom_spacing',
766	[
767	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
768	'type' => Controls_Manager::SLIDER,
769	'range' => [
770	'px' => [
771	'min' => 0,
772	'max' => 50,
773	],
774	],
775	'selectors' => [
776	'{{WRAPPER}} .upk-alice-grid .upk-category' => 'margin: {{SIZE}}{{UNIT}};',
777	],
778	]
779	);
780
781	$this->start_controls_tabs('tabs_category_style');
782
783	$this->start_controls_tab(
784	'tab_category_normal',
785	[
786	'label' => esc_html__('Normal', 'ultimate-post-kit'),
787	]
788	);
789
790	$this->add_control(
791	'category_color',
792	[
793	'label' => esc_html__('Color', 'ultimate-post-kit'),
794	'type' => Controls_Manager::COLOR,
795	'selectors' => [
796	'{{WRAPPER}} .upk-alice-grid .upk-category a' => 'color: {{VALUE}};',
797	],
798	]
799	);
800
801	$this->add_group_control(
802	Group_Control_Background::get_type(),
803	[
804	'name' => 'category_background',
805	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
806	]
807	);
808
809	$this->add_group_control(
810	Group_Control_Border::get_type(),
811	[
812	'name' => 'category_border',
813	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
814	]
815	);
816
817	$this->add_responsive_control(
818	'category_border_radius',
819	[
820	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
821	'type' => Controls_Manager::DIMENSIONS,
822	'size_units' => ['px', '%'],
823	'selectors' => [
824	'{{WRAPPER}} .upk-alice-grid .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
825	],
826	]
827	);
828
829	$this->add_responsive_control(
830	'category_padding',
831	[
832	'label' => esc_html__('Padding', 'ultimate-post-kit'),
833	'type' => Controls_Manager::DIMENSIONS,
834	'size_units' => ['px', 'em', '%'],
835	'selectors' => [
836	'{{WRAPPER}} .upk-alice-grid .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
837	],
838	]
839	);
840
841	$this->add_responsive_control(
842	'category_spacing',
843	[
844	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
845	'type' => Controls_Manager::SLIDER,
846	'range' => [
847	'px' => [
848	'min' => 0,
849	'max' => 50,
850	'step' => 1,
851	],
852	],
853	'selectors' => [
854	'{{WRAPPER}} .upk-alice-grid .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
855	],
856	]
857	);
858
859
860	$this->add_group_control(
861	Group_Control_Box_Shadow::get_type(),
862	[
863	'name' => 'category_shadow',
864	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
865	]
866	);
867
868	$this->add_group_control(
869	Group_Control_Typography::get_type(),
870	[
871	'name' => 'category_typography',
872	'label' => esc_html__('Typography', 'ultimate-post-kit'),
873	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a',
874	]
875	);
876
877	$this->end_controls_tab();
878
879	$this->start_controls_tab(
880	'tab_category_hover',
881	[
882	'label' => esc_html__('Hover', 'ultimate-post-kit'),
883	]
884	);
885
886	$this->add_control(
887	'category_hover_color',
888	[
889	'label' => esc_html__('Color', 'ultimate-post-kit'),
890	'type' => Controls_Manager::COLOR,
891	'selectors' => [
892	'{{WRAPPER}} .upk-alice-grid .upk-category a:hover' => 'color: {{VALUE}};',
893	],
894	]
895	);
896
897	$this->add_group_control(
898	Group_Control_Background::get_type(),
899	[
900	'name' => 'category_hover_background',
901	'selector' => '{{WRAPPER}} .upk-alice-grid .upk-category a:hover',
902	]
903	);
904
905	$this->add_control(
906	'category_hover_border_color',
907	[
908	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
909	'type' => Controls_Manager::COLOR,
910	'condition' => [
911	'category_border_border!' => '',
912	],
913	'selectors' => [
914	'{{WRAPPER}} .upk-alice-grid .upk-category a:hover' => 'border-color: {{VALUE}};',
915	],
916	]
917	);
918
919	$this->end_controls_tab();
920
921	$this->end_controls_tabs();
922
923	$this->end_controls_section();
924
925	//Global Pagination Controls
926	$this->register_pagination_controls();
927
928	//Global ajax style controls
929	$this->register_ajax_loadmore_style_controls();
930	}
931
932	/**
933	* Main query render for this widget
934	* @param $posts_per_page number item query limit
935	*/
936	public function query_posts($posts_per_page) {
937
938	$default = $this->getGroupControlQueryArgs();
939	$args = [];
940	if ($posts_per_page) {
941	$args['posts_per_page'] = $posts_per_page;
942	$args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
943	}
944
945	$args = array_merge($default, $args);
946	$this->_query = new WP_Query($args);
947	}
948
949	public function render_author() {
950
951	if (!$this->get_settings('show_author')) {
952	return;
953	}
954
955	?>
956
957	<div class="upk-author">
958	<span><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit') ?></span>
959	<a
960	href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>"
961	aria-label="<?php echo esc_attr( 'View all posts by ' . get_the_author() ); ?>"
962	>
963	<?php echo esc_html( get_the_author() ) ?>
964	</a>
965	</div>
966	<?php
967	}
968
969	public function render_post_grid_item($post_id, $image_size) {
970	$settings = $this->get_settings_for_display();
971
972	if ('yes' == $settings['global_link']) {
973
974	$this->add_render_attribute('grid-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
975	}
976	$this->add_render_attribute('grid-item', 'class', 'upk-item', true);
977
978	?>
979	<div <?php $this->print_render_attribute_string('grid-item'); ?>>
980	<div class="upk-item-box">
981	<div class="upk-img-wrap">
982	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
983	</div>
984	<?php $this->render_category(); ?>
985	<div class="upk-content">
986	<?php $this->render_title(substr($this->get_name(), 4)); ?>
987
988	<?php if ($settings['show_author'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
989	<div class="upk-meta">
990	<?php $this->render_author(); ?>
991	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
992	<?php $this->render_date(); ?>
993	</div>
994	<?php if (_is_upk_pro_activated()) :
995	if ('yes' === $settings['show_reading_time']) : ?>
996	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
997	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
998	</div>
999	<?php endif; ?>
1000	<?php endif; ?>
1001	</div>
1002	<?php endif; ?>
1003
1004	</div>
1005	</div>
1006	</div>
1007	<?php
1008	}
1009
1010	protected function render() {
1011	$settings = $this->get_settings_for_display();
1012
1013
1014	if ($settings['grid_style'] == '2' or $settings['grid_style'] == '4') {
1015	$this->query_posts($settings['item_limit_2']['size']);
1016	} else {
1017	$this->query_posts($settings['item_limit']['size']);
1018	}
1019
1020	$wp_query = $this->get_query();
1021
1022	if (!$wp_query->found_posts) {
1023	return;
1024	}
1025
1026	$this->add_render_attribute('grid-wrap', 'class', 'upk-alice-wrap upk-ajax-grid-wrap');
1027	$this->add_render_attribute('grid-wrap', 'class', 'upk-content-' . $settings['content_position']);
1028	$this->add_render_attribute('grid-wrap', 'class', 'upk-style-' . $settings['grid_style']);
1029
1030	$this->add_render_attribute(
1031	[
1032	'upk-alice-grid' => [
1033	'class' => 'upk-alice-grid upk-ajax-grid',
1034	'data-loadmore' => [
1035	wp_json_encode(array_filter([
1036	'loadmore_enable' => $settings['ajax_loadmore_enable'],
1037	'loadmore_btn' => $settings['ajax_loadmore_btn'],
1038	'infinite_scroll' => $settings['ajax_loadmore_infinite_scroll'],
1039	]))
1040
1041	]
1042	]
1043	]
1044	);
1045
1046	if (isset($settings['ajax_loadmore_enable']) && $settings['ajax_loadmore_enable'] == 'yes') {
1047
1048	$ajax_settings = [
1049	'posts_source' => isset($settings['posts_source']) ? $settings['posts_source'] : 'post',
1050	'posts_per_page' => isset($posts_load) ? $posts_load : 6,
1051	'ajax_item_load' => isset($settings['ajax_loadmore_items']) ? $settings['ajax_loadmore_items'] : 3,
1052	'posts_selected_ids' => isset($settings['posts_selected_ids']) ? $settings['posts_selected_ids'] : '',
1053	'posts_include_by' => isset($settings['posts_include_by']) ? $settings['posts_include_by'] : '',
1054	'posts_include_author_ids' => isset($settings['posts_include_author_ids']) ? $settings['posts_include_author_ids'] : '',
1055	'posts_include_term_ids' => isset($settings['posts_include_term_ids']) ? $settings['posts_include_term_ids'] : '',
1056	'posts_exclude_by' => isset($settings['posts_exclude_by']) ? $settings['posts_exclude_by'] : '',
1057	'posts_exclude_ids' => isset($settings['posts_exclude_ids']) ? $settings['posts_exclude_ids'] : '',
1058	'posts_exclude_author_ids' => isset($settings['posts_exclude_author_ids']) ? $settings['posts_exclude_author_ids'] : '',
1059	'posts_exclude_term_ids' => isset($settings['posts_exclude_term_ids']) ? $settings['posts_exclude_term_ids'] : '',
1060	'posts_offset' => isset($settings['posts_offset']) ? $settings['posts_offset'] : 0,
1061	'posts_select_date' => isset($settings['posts_select_date']) ? $settings['posts_select_date'] : '',
1062	'posts_date_before' => isset($settings['posts_date_before']) ? $settings['posts_date_before'] : '',
1063	'posts_date_after' => isset($settings['posts_date_after']) ? $settings['posts_date_after'] : '',
1064	'posts_orderby' => isset($settings['posts_orderby']) ? $settings['posts_orderby'] : 'date',
1065	'posts_order' => isset($settings['posts_order']) ? $settings['posts_order'] : 'DESC',
1066	'posts_ignore_sticky_posts' => isset($settings['posts_ignore_sticky_posts']) ? $settings['posts_ignore_sticky_posts'] : 'no',
1067	'posts_only_with_featured_image' => isset($settings['posts_only_with_featured_image']) ? $settings['posts_only_with_featured_image'] : 'no',
1068	// Grid Settings
1069	'show_title' => isset($settings['show_title']) ? $settings['show_title'] : 'yes',
1070	'title_tags' => isset($settings['title_tags']) ? $settings['title_tags'] : 'h3',
1071	'show_author' => isset($settings['show_author']) ? $settings['show_author'] : 'yes',
1072	'show_date' => isset($settings['show_date']) ? $settings['show_date'] : 'yes',
1073	'show_time' => isset($settings['show_time']) ? $settings['show_time'] : 'no',
1074	'show_category' => isset($settings['show_category']) ? $settings['show_category'] : 'yes',
1075	'show_reading_time' => isset($settings['show_reading_time']) ? $settings['show_reading_time'] : 'no',
1076	'avg_reading_speed' => isset($settings['avg_reading_speed']) ? $settings['avg_reading_speed'] : 200,
1077	'hide_seconds' => isset($settings['hide_seconds']) ? $settings['hide_seconds'] : 'no',
1078	'hide_minutes' => isset($settings['hide_minutes']) ? $settings['hide_minutes'] : 'no',
1079	'meta_separator' => isset($settings['meta_separator']) ? $settings['meta_separator'] : '\|',
1080	'human_diff_time' => isset($settings['human_diff_time']) ? $settings['human_diff_time'] : 'no',
1081	'human_diff_time_short' => isset($settings['human_diff_time_short']) ? $settings['human_diff_time_short'] : 'no',
1082	'global_link' => isset($settings['global_link']) ? $settings['global_link'] : 'no',
1083	'title_style' => isset($settings['title_style']) ? $settings['title_style'] : 'underline',
1084	'upk_link_new_tab' => isset($settings['upk_link_new_tab']) ? $settings['upk_link_new_tab'] : 'no',
1085	];
1086
1087	$this->add_render_attribute(
1088	[
1089	'upk-alice-grid' => [
1090	'data-settings' => [
1091	wp_json_encode($ajax_settings)
1092	]
1093	]
1094	]
1095	);
1096	}
1097
1098	if (isset($settings['upk_in_animation_show']) && ($settings['upk_in_animation_show'] == 'yes')) {
1099	$this->add_render_attribute('grid-wrap', 'class', 'upk-in-animation');
1100	if (isset($settings['upk_in_animation_delay']['size'])) {
1101	$this->add_render_attribute('grid-wrap', 'data-in-animation-delay', $settings['upk_in_animation_delay']['size']);
1102	}
1103	}
1104
1105	?>
1106	<div <?php $this->print_render_attribute_string('upk-alice-grid'); ?>>
1107	<div <?php $this->print_render_attribute_string('grid-wrap'); ?>>
1108	<?php while ($wp_query->have_posts()) :
1109	$wp_query->the_post();
1110	$thumbnail_size = $settings['primary_thumbnail_size'];
1111	?>
1112	<?php $this->render_post_grid_item(get_the_ID(), $thumbnail_size); ?>
1113	<?php endwhile; ?>
1114	</div>
1115	</div>
1116
1117	<?php $this->render_ajax_loadmore(); ?>
1118
1119	<?php
1120	if ($settings['show_pagination']) { ?>
1121	<div class="ep-pagination">
1122	<?php ultimate_post_kit_post_pagination($wp_query, $this->get_id()); ?>
1123	</div>
1124	<?php
1125	}
1126	wp_reset_postdata();
1127	}
1128	}
1129