ultimate-post-kit / modules / timeline / widgets / timeline.php

timeline.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.2.0, at modules/timeline/widgets/timeline.php

1,185 lines 30.4 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\Timeline\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 Timeline 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-timeline';
32	}
33
34	public function get_title() {
35	return BDTUPK . esc_html__( 'Oras Timeline', 'ultimate-post-kit' );
36	}
37
38	public function get_icon() {
39	return 'upk-widget-icon upk-icon-timeline';
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', 'alter', 'oras' ];
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-timeline' ];
55	}
56	}
57
58	public function get_custom_help_url() {
59	return 'https://youtu.be/2iYuNgP4K0A';
60	}
61
62	public function get_query() {
63	return $this->_query;
64	}
65
66	public function has_widget_inner_wrapper(): bool {
67	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
68	}
69
70
71	protected function register_controls() {
72	$this->start_controls_section(
73	'section_content_layout',
74	[
75	'label' => esc_html__( 'Layout', 'ultimate-post-kit' ),
76	]
77	);
78
79	$this->add_control(
80	'show_image',
81	[
82	'label' => esc_html__( 'Show Image', 'ultimate-post-kit' ),
83	'type' => Controls_Manager::SWITCHER,
84	'default' => 'yes',
85	]
86	);
87
88	//Global Title Controls
89	$this->register_title_controls();
90	$this->register_text_controls();
91
92	$this->add_control(
93	'show_author',
94	[
95	'label' => esc_html__( 'Show Author', 'ultimate-post-kit' ),
96	'type' => Controls_Manager::SWITCHER,
97	'default' => 'yes',
98	]
99	);
100
101	$this->add_control(
102	'show_date',
103	[
104	'label' => esc_html__( 'Show Date', 'ultimate-post-kit' ),
105	'type' => Controls_Manager::SWITCHER,
106	'default' => 'yes',
107	'prefix_class' => 'upk-date-hide--',
108	]
109	);
110
111	$this->add_control(
112	'day_month_format',
113	[
114	'label' => esc_html__( 'Day & Month Format', 'ultimate-post-kit' ) . BDTUPK_PC,
115	'type' => Controls_Manager::TEXT,
116	'placeholder' => 'm/d',
117	'condition' => [
118	'show_date' => 'yes',
119	],
120	'classes' => BDTUPK_IS_PC
121	]
122	);
123	$this->add_control(
124	'year_format',
125	[
126	'label' => esc_html__( 'Year Format', 'ultimate-post-kit' ) . BDTUPK_PC,
127	'type' => Controls_Manager::TEXT,
128	'placeholder' => 'Y',
129	'condition' => [
130	'show_date' => 'yes',
131	],
132	'classes' => BDTUPK_IS_PC
133	]
134	);
135
136	$this->add_control(
137	'show_inline_date',
138	[
139	'label' => esc_html__( 'Show Inline Date', 'ultimate-post-kit' ),
140	'type' => Controls_Manager::SWITCHER,
141	'default' => 'yes',
142	'condition' => [
143	'show_date' => '',
144	],
145	]
146	);
147
148	$this->add_control(
149	'human_diff_time',
150	[
151	'label' => esc_html__( 'Human Different Time', 'ultimate-post-kit' ),
152	'type' => Controls_Manager::SWITCHER,
153	'condition' => [
154	'show_inline_date' => 'yes',
155	'show_date' => ''
156	]
157	]
158	);
159
160	$this->add_control(
161	'human_diff_time_short',
162	[
163	'label' => esc_html__( 'Time Short Format', 'ultimate-post-kit' ),
164	'description' => esc_html__( 'This will work for Hours, Minute and Seconds', 'ultimate-post-kit' ),
165	'type' => Controls_Manager::SWITCHER,
166	'condition' => [
167	'human_diff_time' => 'yes',
168	'show_inline_date' => 'yes'
169	]
170	]
171	);
172
173	$this->add_control(
174	'show_time',
175	[
176	'label' => esc_html__( 'Show Time', 'ultimate-post-kit' ),
177	'type' => Controls_Manager::SWITCHER,
178	'condition' => [
179	'human_diff_time' => '',
180	'show_inline_date' => 'yes',
181	'show_date' => ''
182	]
183	]
184	);
185
186	$this->add_control(
187	'show_category',
188	[
189	'label' => esc_html__( 'Show Category', 'ultimate-post-kit' ),
190	'type' => Controls_Manager::SWITCHER,
191	'default' => 'yes',
192	]
193	);
194
195	$this->add_control(
196	'show_comments',
197	[
198	'label' => esc_html__( 'Show Comments', 'ultimate-post-kit' ),
199	'type' => Controls_Manager::SWITCHER,
200	'default' => 'yes',
201	]
202	);
203
204	$this->add_control(
205	'meta_separator',
206	[
207	'label' => __( 'Separator', 'ultimate-post-kit' ),
208	'type' => Controls_Manager::TEXT,
209	'default' => '\|',
210	'label_block' => false,
211	]
212	);
213
214	$this->add_group_control(
215	Group_Control_Image_Size::get_type(),
216	[
217	'name' => 'primary_thumbnail',
218	'exclude' => [ 'custom' ],
219	'default' => 'medium',
220	]
221	);
222
223	$this->add_control(
224	'show_pagination',
225	[
226	'label' => esc_html__( 'Pagination', 'ultimate-post-kit' ),
227	'type' => Controls_Manager::SWITCHER,
228	'separator' => 'before'
229	]
230	);
231
232	$this->add_control(
233	'global_link',
234	[
235	'label' => __( 'Item Wrapper Link', 'ultimate-post-kit' ),
236	'type' => Controls_Manager::SWITCHER,
237	'prefix_class' => 'upk-global-link-',
238	'description' => __( 'Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit' ),
239	]
240	);
241
242	$this->end_controls_section();
243
244	// Query Settings
245	$this->start_controls_section(
246	'section_post_query_builder',
247	[
248	'label' => __( 'Query', 'ultimate-post-kit' ) . BDTUPK_NC,
249	'tab' => Controls_Manager::TAB_CONTENT,
250	]
251	);
252
253	$this->add_control(
254	'item_limit',
255	[
256	'label' => esc_html__( 'Item Limit', 'ultimate-post-kit' ),
257	'type' => Controls_Manager::SLIDER,
258	'range' => [
259	'px' => [
260	'min' => 1,
261	'max' => 20,
262	],
263	],
264	'default' => [
265	'size' => 6,
266	],
267	'condition' => [
268	'posts_source!' => 'current_query',
269	]
270	]
271	);
272
273	$this->register_query_builder_controls();
274
275	$this->end_controls_section();
276
277	//Style
278	$this->start_controls_section(
279	'upk_section_style',
280	[
281	'label' => esc_html__( 'Items', 'ultimate-post-kit' ),
282	'tab' => Controls_Manager::TAB_STYLE,
283	]
284	);
285
286	$this->add_responsive_control(
287	'item_padding',
288	[
289	'label' => esc_html__( 'Padding', 'ultimate-post-kit' ),
290	'type' => Controls_Manager::SLIDER,
291	'range' => [
292	'px' => [
293	'min' => 20,
294	'max' => 200,
295	],
296	],
297	'selectors' => [
298	'{{WRAPPER}} .upk-timeline .upk-item:nth-child(2n+1) .upk-image-and-content-wrapper' => 'padding: {{SIZE}}px {{SIZE}}px {{SIZE}}px 0;',
299	'{{WRAPPER}} .upk-timeline .upk-item:nth-child(2n+2) .upk-image-and-content-wrapper' => 'padding: {{SIZE}}px 0 {{SIZE}}px {{SIZE}}px;',
300	],
301	]
302	);
303
304	$this->add_control(
305	'item_line_heading',
306	[
307	'label' => esc_html__( 'Line', 'ultimate-post-kit' ),
308	'type' => Controls_Manager::HEADING,
309	'separator' => 'before'
310	]
311	);
312
313	$this->add_control(
314	'item_line_color',
315	[
316	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
317	'type' => Controls_Manager::COLOR,
318	'selectors' => [
319	'{{WRAPPER}}' => '--upk-line-color: {{VALUE}};'
320	],
321	]
322	);
323
324	$this->add_responsive_control(
325	'item_border_width',
326	[
327	'label' => esc_html__( 'Border Width', 'ultimate-post-kit' ),
328	'type' => Controls_Manager::SLIDER,
329	'range' => [
330	'px' => [
331	'min' => 0,
332	'max' => 50,
333	'step' => 2
334	],
335	],
336	'selectors' => [
337	'{{WRAPPER}}' => '--upk-border-width: {{SIZE}}px;'
338	],
339	]
340	);
341
342	$this->add_responsive_control(
343	'item_border_radius',
344	[
345	'label' => esc_html__( 'Border Radius', 'ultimate-post-kit' ),
346	'type' => Controls_Manager::SLIDER,
347	'range' => [
348	'px' => [
349	'min' => 0,
350	'max' => 500,
351	],
352	],
353	'selectors' => [
354	'{{WRAPPER}} .upk-timeline .upk-item .upk-line-right' => 'border-radius: 0 {{SIZE}}px {{SIZE}}px 0;',
355	'{{WRAPPER}} .upk-timeline .upk-item .upk-line-left' => 'border-radius: {{SIZE}}px 0 0 {{SIZE}}px',
356	],
357	]
358	);
359
360	$this->add_control(
361	'item_start_end_heading',
362	[
363	'label' => esc_html__( 'Start/End/Date', 'ultimate-post-kit' ),
364	'type' => Controls_Manager::HEADING,
365	'separator' => 'before'
366	]
367	);
368
369	$this->add_control(
370	'item_start_end_color',
371	[
372	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
373	'type' => Controls_Manager::COLOR,
374	'selectors' => [
375	'{{WRAPPER}} .upk-timeline .upk-item .upk-start-end-wrap, {{WRAPPER}} .upk-timeline .upk-item .upk-date-wrapper' => 'color: {{VALUE}};'
376	],
377	]
378	);
379
380	$this->add_control(
381	'item_start_end_bg_color',
382	[
383	'label' => esc_html__( 'Background', 'ultimate-post-kit' ),
384	'type' => Controls_Manager::COLOR,
385	'selectors' => [
386	'{{WRAPPER}} .upk-timeline .upk-item .upk-start-end-wrap, {{WRAPPER}} .upk-timeline .upk-item .upk-date-wrapper' => 'background: {{VALUE}};'
387	],
388	]
389	);
390
391	$this->add_responsive_control(
392	'item_start_end_border_radius',
393	[
394	'label' => esc_html__( 'Border Radius', 'ultimate-post-kit' ),
395	'type' => Controls_Manager::DIMENSIONS,
396	'size_units' => [ 'px', '%' ],
397	'selectors' => [
398	'{{WRAPPER}} .upk-timeline .upk-item .upk-start-end-wrap, {{WRAPPER}} .upk-timeline .upk-item .upk-date-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
399	],
400	]
401	);
402
403	$this->end_controls_section();
404
405	$this->start_controls_section(
406	'section_style_image',
407	[
408	'label' => esc_html__( 'Image', 'ultimate-post-kit' ),
409	'tab' => Controls_Manager::TAB_STYLE,
410	'condition' => [
411	'show_image' => 'yes',
412	],
413	]
414	);
415
416	$this->add_group_control(
417	Group_Control_Border::get_type(),
418	[
419	'name' => 'item_image_border',
420	'label' => __( 'Border', 'ultimate-post-kit' ),
421	'fields_options' => [
422	'border' => [
423	'default' => 'solid',
424	],
425	'width' => [
426	'default' => [
427	'top' => '10',
428	'right' => '10',
429	'bottom' => '10',
430	'left' => '10',
431	'isLinked' => false,
432	],
433	],
434	'color' => [
435	'default' => '#e1e7f0',
436	],
437	],
438	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-image-wrapper .upk-img',
439	]
440	);
441
442	$this->add_responsive_control(
443	'item_image_border_radius_odd',
444	[
445	'label' => esc_html__( 'Odd Border Radius', 'ultimate-post-kit' ),
446	'type' => Controls_Manager::DIMENSIONS,
447	'size_units' => [ 'px', '%' ],
448	'selectors' => [
449	'{{WRAPPER}} .upk-timeline .upk-item:nth-child(2n+1) .upk-image-wrapper .upk-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
450	],
451	]
452	);
453
454	$this->add_responsive_control(
455	'item_image_border_radius_even',
456	[
457	'label' => esc_html__( 'Even Border Radius', 'ultimate-post-kit' ),
458	'type' => Controls_Manager::DIMENSIONS,
459	'size_units' => [ 'px', '%' ],
460	'selectors' => [
461	'{{WRAPPER}} .upk-timeline .upk-item:nth-child(2n+2) .upk-image-wrapper .upk-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
462	],
463	]
464	);
465
466	$this->add_responsive_control(
467	'item_image_padding',
468	[
469	'label' => esc_html__( 'Padding', 'ultimate-post-kit' ),
470	'type' => Controls_Manager::DIMENSIONS,
471	'size_units' => [ 'px', 'em', '%' ],
472	'selectors' => [
473	'{{WRAPPER}} .upk-timeline .upk-item .upk-image-wrapper .upk-img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
474	],
475	]
476	);
477
478	$this->add_group_control(
479	Group_Control_Box_Shadow::get_type(),
480	[
481	'name' => 'item_image_shadow',
482	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-image-wrapper .upk-img',
483	]
484	);
485
486	$this->add_responsive_control(
487	'image_size',
488	[
489	'label' => esc_html__( 'Size', 'ultimate-post-kit' ),
490	'type' => Controls_Manager::SLIDER,
491	'range' => [
492	'px' => [
493	'min' => 200,
494	'max' => 600,
495	],
496	],
497	'selectors' => [
498	'{{WRAPPER}}' => '--upk-image-width: {{SIZE}}px;'
499	],
500	]
501	);
502
503	$this->add_responsive_control(
504	'image_spacing',
505	[
506	'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
507	'type' => Controls_Manager::SLIDER,
508	'selectors' => [
509	'{{WRAPPER}}' => '--upk-image-spacing: {{SIZE}}px;'
510	],
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_style',
529	[
530	'label' => esc_html__( 'Style', 'ultimate-post-kit' ),
531	'type' => Controls_Manager::SELECT,
532	'default' => 'underline',
533	'options' => [
534	'underline' => esc_html__( 'Underline', 'ultimate-post-kit' ),
535	'middle-underline' => esc_html__( 'Middle Underline', 'ultimate-post-kit' ),
536	'overline' => esc_html__( 'Overline', 'ultimate-post-kit' ),
537	'middle-overline' => esc_html__( 'Middle Overline', 'ultimate-post-kit' ),
538	],
539	]
540	);
541
542	$this->add_control(
543	'title_color',
544	[
545	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
546	'type' => Controls_Manager::COLOR,
547	'selectors' => [
548	'{{WRAPPER}} .upk-timeline .upk-item .upk-title a' => 'color: {{VALUE}};',
549	],
550	]
551	);
552
553	$this->add_control(
554	'title_hover_color',
555	[
556	'label' => esc_html__( 'Hover Color', 'ultimate-post-kit' ),
557	'type' => Controls_Manager::COLOR,
558	'selectors' => [
559	'{{WRAPPER}} .upk-timeline .upk-item .upk-title a:hover' => 'color: {{VALUE}};',
560	],
561	]
562	);
563
564	$this->add_group_control(
565	Group_Control_Typography::get_type(),
566	[
567	'name' => 'title_typography',
568	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
569	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-title',
570	]
571	);
572
573	$this->add_group_control(
574	Group_Control_Text_Shadow::get_type(),
575	[
576	'name' => 'title_text_shadow',
577	'label' => __( 'Text Shadow', 'ultimate-post-kit' ),
578	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-title',
579	]
580	);
581
582	$this->add_responsive_control(
583	'title_spacing',
584	[
585	'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
586	'type' => Controls_Manager::SLIDER,
587	'range' => [
588	'px' => [
589	'min' => 0,
590	'max' => 50,
591	],
592	],
593	'selectors' => [
594	'{{WRAPPER}} .upk-timeline .upk-item .upk-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
595	],
596	]
597	);
598
599	$this->end_controls_section();
600
601	$this->start_controls_section(
602	'section_style_text',
603	[
604	'label' => esc_html__( 'Text', 'ultimate-post-kit' ),
605	'tab' => Controls_Manager::TAB_STYLE,
606	'condition' => [
607	'show_excerpt' => 'yes',
608	],
609	]
610	);
611
612	$this->add_control(
613	'text_color',
614	[
615	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
616	'type' => Controls_Manager::COLOR,
617	'selectors' => [
618	'{{WRAPPER}} .upk-timeline .upk-item .upk-text' => 'color: {{VALUE}};',
619	],
620	]
621	);
622
623	$this->add_group_control(
624	Group_Control_Typography::get_type(),
625	[
626	'name' => 'text_typography',
627	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
628	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-text',
629	]
630	);
631
632	$this->add_responsive_control(
633	'text_margin',
634	[
635	'label' => __( 'Margin', 'ultimate-post-kit' ),
636	'type' => Controls_Manager::DIMENSIONS,
637	'size_units' => [ 'px', 'em', '%' ],
638	'selectors' => [
639	'{{WRAPPER}} .upk-timeline .upk-item .upk-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
640	]
641	]
642	);
643
644	$this->end_controls_section();
645
646	$this->start_controls_section(
647	'section_style_meta',
648	[
649	'label' => esc_html__( 'Meta', 'ultimate-post-kit' ),
650	'tab' => Controls_Manager::TAB_STYLE,
651	'conditions' => [
652	'relation' => 'or',
653	'terms' => [
654	[
655	'name' => 'show_author',
656	'value' => 'yes'
657	],
658	[
659	'name' => 'show_comments',
660	'value' => 'yes'
661	]
662	]
663	],
664	]
665	);
666
667	$this->add_control(
668	'meta_color',
669	[
670	'label' => esc_html__( 'Text Color', 'ultimate-post-kit' ),
671	'type' => Controls_Manager::COLOR,
672	'selectors' => [
673	'{{WRAPPER}} .upk-timeline .upk-item .upk-meta, {{WRAPPER}} .upk-timeline .upk-item .upk-meta .upk-author-name-wrap .upk-author-name' => 'color: {{VALUE}};',
674	],
675	]
676	);
677
678	$this->add_control(
679	'meta_hover_color',
680	[
681	'label' => esc_html__( 'Text Hover Color', 'ultimate-post-kit' ),
682	'type' => Controls_Manager::COLOR,
683	'selectors' => [
684	'{{WRAPPER}} .upk-timeline .upk-item .upk-meta .upk-author-name-wrap .upk-author-name:hover' => 'color: {{VALUE}};',
685	],
686	]
687	);
688
689	$this->add_group_control(
690	Group_Control_Typography::get_type(),
691	[
692	'name' => 'meta_typography',
693	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
694	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-meta',
695	]
696	);
697
698	$this->add_responsive_control(
699	'meta_spacing',
700	[
701	'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
702	'type' => Controls_Manager::SLIDER,
703	'range' => [
704	'px' => [
705	'min' => 0,
706	'max' => 50,
707	],
708	],
709	'selectors' => [
710	'{{WRAPPER}} .upk-timeline .upk-item .upk-meta .upk-separator' => 'margin: 0 {{SIZE}}{{UNIT}};',
711	],
712	]
713	);
714
715	$this->end_controls_section();
716
717	$this->start_controls_section(
718	'section_style_date',
719	[
720	'label' => esc_html__( 'Date', 'ultimate-post-kit' ),
721	'tab' => Controls_Manager::TAB_STYLE,
722	'conditions' => [
723	'relation' => 'or',
724	'terms' => [
725	[
726	'name' => 'show_date',
727	'value' => 'yes'
728	],
729	[
730	'name' => 'show_inline_date',
731	'value' => 'yes'
732	]
733	]
734	],
735	]
736	);
737
738	$this->add_control(
739	'date_color',
740	[
741	'label' => esc_html__( 'Text Color', 'ultimate-post-kit' ),
742	'type' => Controls_Manager::COLOR,
743	'selectors' => [
744	'{{WRAPPER}} .upk-timeline .upk-item .upk-responsive-date' => 'color: {{VALUE}};',
745	],
746	]
747	);
748
749	$this->add_group_control(
750	Group_Control_Typography::get_type(),
751	[
752	'name' => 'date_typography',
753	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
754	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-responsive-date',
755	]
756	);
757
758	$this->add_responsive_control(
759	'date_space_between',
760	[
761	'label' => esc_html__( 'Space Between', 'ultimate-post-kit' ),
762	'type' => Controls_Manager::SLIDER,
763	'range' => [
764	'px' => [
765	'min' => 0,
766	'max' => 50,
767	],
768	],
769	'selectors' => [
770	'{{WRAPPER}} .upk-timeline .upk-item .upk-responsive-date .upk-date' => 'padding-left: {{SIZE}}{{UNIT}};',
771	],
772	]
773	);
774
775	$this->add_responsive_control(
776	'date_margin',
777	[
778	'label' => __( 'Margin', 'ultimate-post-kit' ),
779	'type' => Controls_Manager::DIMENSIONS,
780	'size_units' => [ 'px', 'em', '%' ],
781	'selectors' => [
782	'{{WRAPPER}} .upk-timeline .upk-item .upk-responsive-date' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
783	]
784	]
785	);
786
787	$this->end_controls_section();
788
789	$this->start_controls_section(
790	'section_style_category',
791	[
792	'label' => esc_html__( 'Category', 'ultimate-post-kit' ),
793	'tab' => Controls_Manager::TAB_STYLE,
794	'condition' => [
795	'show_category' => 'yes',
796	],
797	]
798	);
799
800	$this->add_responsive_control(
801	'category_spacing',
802	[
803	'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
804	'type' => Controls_Manager::SLIDER,
805	'range' => [
806	'px' => [
807	'min' => 0,
808	'max' => 50,
809	],
810	],
811	'selectors' => [
812	'{{WRAPPER}} .upk-timeline .upk-item .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
813	],
814	]
815	);
816
817	$this->start_controls_tabs( 'tabs_category_style' );
818
819	$this->start_controls_tab(
820	'tab_category_normal',
821	[
822	'label' => esc_html__( 'Normal', 'ultimate-post-kit' ),
823	]
824	);
825
826	$this->add_control(
827	'category_color',
828	[
829	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
830	'type' => Controls_Manager::COLOR,
831	'selectors' => [
832	'{{WRAPPER}} .upk-timeline .upk-item .upk-category a' => 'color: {{VALUE}};',
833	],
834	]
835	);
836
837	$this->add_group_control(
838	Group_Control_Background::get_type(),
839	[
840	'name' => 'category_background',
841	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-category a',
842	]
843	);
844
845	$this->add_group_control(
846	Group_Control_Border::get_type(),
847	[
848	'name' => 'category_border',
849	'label' => __( 'Border', 'ultimate-post-kit' ),
850	'fields_options' => [
851	'border' => [
852	'default' => 'solid',
853	],
854	'width' => [
855	'default' => [
856	'top' => '1',
857	'right' => '1',
858	'bottom' => '1',
859	'left' => '1',
860	'isLinked' => false,
861	],
862	],
863	'color' => [
864	'default' => '#EF233C',
865	],
866	],
867	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-category a',
868	]
869	);
870
871	$this->add_responsive_control(
872	'category_border_radius',
873	[
874	'label' => esc_html__( 'Border Radius', 'ultimate-post-kit' ),
875	'type' => Controls_Manager::DIMENSIONS,
876	'size_units' => [ 'px', '%' ],
877	'selectors' => [
878	'{{WRAPPER}} .upk-timeline .upk-item .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
879	],
880	]
881	);
882
883	$this->add_responsive_control(
884	'category_padding',
885	[
886	'label' => esc_html__( 'Padding', 'ultimate-post-kit' ),
887	'type' => Controls_Manager::DIMENSIONS,
888	'size_units' => [ 'px', 'em', '%' ],
889	'selectors' => [
890	'{{WRAPPER}} .upk-timeline .upk-item .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
891	],
892	]
893	);
894
895	$this->add_responsive_control(
896	'category_spacing_between',
897	[
898	'label' => esc_html__( 'Space Between', 'ultimate-post-kit' ),
899	'type' => Controls_Manager::SLIDER,
900	'range' => [
901	'px' => [
902	'min' => 0,
903	'max' => 50,
904	],
905	],
906	'selectors' => [
907	'{{WRAPPER}} .upk-timeline .upk-item .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
908	],
909	]
910	);
911
912
913	$this->add_group_control(
914	Group_Control_Box_Shadow::get_type(),
915	[
916	'name' => 'category_shadow',
917	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-category a',
918	]
919	);
920
921	$this->add_group_control(
922	Group_Control_Typography::get_type(),
923	[
924	'name' => 'category_typography',
925	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
926	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-category a',
927	]
928	);
929
930	$this->end_controls_tab();
931
932	$this->start_controls_tab(
933	'tab_category_hover',
934	[
935	'label' => esc_html__( 'Hover', 'ultimate-post-kit' ),
936	]
937	);
938
939	$this->add_control(
940	'category_hover_color',
941	[
942	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
943	'type' => Controls_Manager::COLOR,
944	'selectors' => [
945	'{{WRAPPER}} .upk-timeline .upk-item .upk-category a:hover' => 'color: {{VALUE}};',
946	],
947	]
948	);
949
950	$this->add_group_control(
951	Group_Control_Background::get_type(),
952	[
953	'name' => 'category_hover_background',
954	'selector' => '{{WRAPPER}} .upk-timeline .upk-item .upk-category a:hover',
955	]
956	);
957
958	$this->add_control(
959	'category_hover_border_color',
960	[
961	'label' => esc_html__( 'Border Color', 'ultimate-post-kit' ),
962	'type' => Controls_Manager::COLOR,
963	'condition' => [
964	'category_border_border!' => '',
965	],
966	'selectors' => [
967	'{{WRAPPER}} .upk-timeline .upk-item .upk-category a:hover' => 'border-color: {{VALUE}};',
968	],
969	]
970	);
971
972	$this->end_controls_tab();
973
974	$this->end_controls_tabs();
975
976	$this->end_controls_section();
977
978	//Global Pagination Controls
979	$this->register_pagination_controls();
980	}
981
982	/**
983	* Get post query builder arguments
984	*/
985	public function query_posts( $posts_per_page ) {
986	$settings = $this->get_settings();
987	$posts_per_page = isset( $posts_per_page ) ? (int) $posts_per_page : 0;
988	$args = $this->getGroupControlQueryArgs();
989	$is_current_query = ( ! empty( $settings['posts_source'] ) && $settings['posts_source'] === 'current_query' );
990
991	if ( $is_current_query ) {
992	unset( $args['offset'] );
993	unset( $args['no_found_rows'] );
994	$posts_per_page = 0;
995	}
996
997	if ( $posts_per_page > 0 ) {
998	$args['posts_per_page'] = $posts_per_page;
999	} else {
1000	$args['posts_per_page'] = (int) get_option( 'posts_per_page', 10 );
1001	}
1002
1003	if ( $settings['show_pagination'] ) {
1004	$args['paged'] = max( 1, (int) get_query_var( 'paged' ), (int) get_query_var( 'page' ) );
1005	}
1006
1007	$this->_query = new \WP_Query( $args );
1008	}
1009
1010	public function render_author() {
1011
1012	if ( ! $this->get_settings( 'show_author' ) ) {
1013	return;
1014	}
1015	?>
1016	<div class="upk-author-name-wrap">
1017	<span class="upk-by"><?php echo esc_html_x( 'by', 'Frontend', 'ultimate-post-kit' ) ?></span>
1018	<a class="upk-author-name" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) ?>">
1019	<?php echo esc_html( get_the_author() ); ?>
1020	</a>
1021	</div>
1022	<?php
1023	}
1024
1025	public function render_comments( $id = 0 ) {
1026
1027	if ( ! $this->get_settings( 'show_comments' ) ) {
1028	return;
1029	}
1030	?>
1031
1032	<div class="upk-comments">
1033	<?php echo esc_html( $this->upk_get_formatted_comments_count( $id ) ); ?>
1034	</div>
1035
1036	<?php
1037	}
1038
1039	public function render_date() {
1040	$settings = $this->get_settings_for_display();
1041
1042	if ( ! $this->get_settings( 'show_inline_date' ) ) {
1043	return;
1044	}
1045
1046	if ( $settings['human_diff_time'] == 'yes' ) {
1047	echo esc_html( ultimate_post_kit_post_time_diff( ( $settings['human_diff_time_short'] == 'yes' ) ? 'short' : '' ) );
1048	} else {
1049	echo esc_html( get_the_date() );
1050	}
1051	}
1052
1053	public function render_post_grid_item( $post_id, $image_size, $excerpt_length, $class ) {
1054	$settings = $this->get_settings_for_display();
1055
1056	if ( 'yes' == $settings['global_link'] ) {
1057
1058	$this->add_render_attribute( 'timeline-item', 'onclick', "window.open('" . esc_url( get_permalink() ) . "', '_self')", true );
1059	}
1060	$this->add_render_attribute( 'timeline-item', 'class', 'upk-item', true );
1061	$this->add_render_attribute( 'timeline-item', 'class', $class );
1062
1063	?>
1064
1065	<div <?php $this->print_render_attribute_string( 'timeline-item' ); ?>>
1066	<div class="upk-item-box">
1067	<span class="upk-start-end-wrap">
1068	<span class="upk-start"><?php echo esc_html__( 'start', 'ultimate-post-kit' ) ?></span>
1069	<span class="upk-end"><?php echo esc_html__( 'end', 'ultimate-post-kit' ) ?></span>
1070	</span>
1071	<?php if ( _is_upk_pro_activated() ) : ?>
1072	<div class="upk-date-wrapper">
1073	<div class="upk-date-inner">
1074	<?php
1075	$day_month_format = isset( $settings['day_month_format'] ) && ! empty( $settings['day_month_format'] ) ? $settings['day_month_format'] : 'm/d';
1076	$year_format = isset( $settings['year_format'] ) && ! empty( $settings['year_format'] ) ? $settings['year_format'] : 'Y';
1077	?>
1078	<span class="upk-month"><?php echo esc_html( get_the_date( $day_month_format ) ); ?></span>
1079	<span class="upk-year"><?php echo esc_html( get_the_date( $year_format ) ); ?></span>
1080	</div>
1081	</div>
1082	<?php else : ?>
1083	<div class="upk-date-wrapper">
1084	<div class="upk-date-inner">
1085	<span class="upk-month"><?php echo esc_html( get_the_date( 'm/d' ) ); ?></span>
1086	<span class="upk-year"><?php echo esc_html( get_the_date( 'Y' ) ); ?></span>
1087	</div>
1088	</div>
1089	<?php endif; ?>
1090
1091	<div class="upk-image-and-content-wrapper">
1092	<?php if( 'yes' === $settings['show_image'] ) : ?>
1093	<div class="upk-image-wrapper">
1094	<?php $this->render_image( get_post_thumbnail_id( $post_id ), $image_size ); ?>
1095	</div>
1096	<?php endif; ?>
1097	<div class="upk-content-wrap">
1098
1099	<?php $this->render_category(); ?>
1100	<?php $this->render_title( substr( $this->get_name(), 4 ) ); ?>
1101
1102	<?php if ( $settings['show_date'] == 'yes' or $settings['show_inline_date'] == 'yes' ) : ?>
1103	<div class="upk-responsive-date">
1104	<span class="upk-publish"><?php echo esc_html__( 'publish on', 'ultimate-post-kit' ) ?></span>
1105	<span class="upk-date">
1106	<?php $this->render_date(); ?>
1107	</span>
1108	<?php if ( $settings['show_time'] ) : ?>
1109	<span class="upk-post-time">
1110	<i class="upk-icon-clock" aria-hidden="true"></i>
1111	<?php echo esc_html( get_the_time() ); ?>
1112	</span>
1113	<?php endif; ?>
1114	</div>
1115	<?php endif; ?>
1116
1117	<?php $this->render_excerpt( $excerpt_length ); ?>
1118
1119	<div class="upk-meta">
1120	<?php $this->render_author(); ?>
1121	<?php if( 'yes' === $settings['show_comments'] && 'yes' === $settings['show_author'] ) : ?>
1122	<span class="upk-separator"><?php echo esc_html( $settings['meta_separator'] ); ?></span>
1123	<?php endif; ?>
1124	<?php $this->render_comments( $post_id ); ?>
1125	</div>
1126	</div>
1127	</div>
1128
1129	<div class="upk-line-right"></div>
1130	<div class="upk-line-left"></div>
1131	</div>
1132	</div>
1133	<?php
1134	}
1135
1136	protected function render() {
1137	$settings = $this->get_settings_for_display();
1138
1139	$limit = $settings['item_limit']['size'];
1140
1141	$this->query_posts( $limit );
1142
1143	$wp_query = $this->get_query();
1144
1145	if ( ! $wp_query->found_posts ) {
1146	return;
1147	}
1148
1149	?>
1150
1151	<div class="upk-timeline">
1152	<div class="upk-wrapper">
1153
1154	<?php
1155
1156	while ( $wp_query->have_posts() ) :
1157	$limit--;
1158	$class = '';
1159	$wp_query->the_post();
1160	$thumbnail_size = $settings['primary_thumbnail_size'];
1161
1162	if ( $limit == 0 ) {
1163	$class = 'upk-last-even-item upk-last-odd-item';
1164	}
1165
1166	?>
1167
1168	<?php $this->render_post_grid_item( get_the_ID(), $thumbnail_size, $settings['excerpt_length'], $class ); ?>
1169
1170	<?php endwhile; ?>
1171	</div>
1172	</div>
1173
1174	<?php
1175
1176	if ( $settings['show_pagination'] ) { ?>
1177	<div class="ep-pagination">
1178	<?php ultimate_post_kit_post_pagination( $wp_query, $this->get_id() ); ?>
1179	</div>
1180	<?php
1181	}
1182	wp_reset_postdata();
1183	}
1184	}
1185