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

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