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.1.17, at modules/timeline/widgets/timeline.php

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