ultimate-post-kit / modules / news-ticker / widgets / news-ticker.php

news-ticker.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.1.0, at modules/news-ticker/widgets/news-ticker.php

719 lines 17.7 KB

Raw Download Zip

1	<?php
2	namespace UltimatePostKit\Modules\NewsTicker\Widgets;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Group_Control_Typography;
6
7	use UltimatePostKit\Traits\Global_Widget_Controls;
8	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
9	use WP_Query;
10
11	if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
12
13	/**
14	* Class News Ticker
15	*/
16	class News_Ticker extends Group_Control_Query {
17
18	use Global_Widget_Controls;
19
20	/**
21	* @var \WP_Query
22	*/
23	private $_query = null;
24
25	public function get_name() {
26	return 'upk-news-ticker';
27	}
28
29	public function get_title() {
30	return BDTUPK . esc_html__( 'News Ticker', 'ultimate-post-kit' );
31	}
32
33	public function get_icon() {
34	return 'upk-widget-icon upk-icon-news-ticker';
35	}
36
37	public function get_categories() {
38	return [ 'ultimate-post-kit' ];
39	}
40
41	public function get_keywords() {
42	return [ 'news', 'ticker', 'report', 'message', 'information', 'blog' ];
43	}
44
45	public function get_style_depends() {
46	if ( $this->upk_is_edit_mode() ) {
47	return [ 'upk-all-styles' ];
48	} else {
49	return [ 'upk-news-ticker' ];
50	}
51	}
52
53	public function get_script_depends() {
54	if ( $this->upk_is_edit_mode() ) {
55	return [ 'upk-all-scripts' ];
56	} else {
57	return [ 'news-ticker-js', 'upk-news-ticker' ];
58	}
59	}
60
61	public function get_custom_help_url() {
62	return 'https://youtu.be/xiKwQActvwk';
63	}
64
65	public function get_query() {
66	return $this->_query;
67	}
68
69	public function has_widget_inner_wrapper(): bool {
70	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
71	}
72
73
74	protected function register_controls() {
75	$this->start_controls_section(
76	'section_content_layout',
77	[
78	'label' => esc_html__( 'Layout', 'ultimate-post-kit' ),
79	]
80	);
81
82	$this->add_control(
83	'show_label',
84	[
85	'label' => esc_html__( 'Label', 'ultimate-post-kit' ),
86	'type' => Controls_Manager::SWITCHER,
87	'default' => 'yes'
88	]
89	);
90
91	$this->add_control(
92	'news_label',
93	[
94	'label' => esc_html__( 'Label', 'ultimate-post-kit' ),
95	'type' => Controls_Manager::TEXT,
96	'dynamic' => [ 'active' => true ],
97	'default' => esc_html__( 'LATEST NEWS', 'ultimate-post-kit' ),
98	'placeholder' => esc_html__( 'LATEST NEWS', 'ultimate-post-kit' ),
99	'condition' => [
100	'show_label' => 'yes'
101	]
102	]
103	);
104
105	$this->add_control(
106	'news_content',
107	[
108	'label' => esc_html__( 'News Content', 'ultimate-post-kit' ),
109	'type' => Controls_Manager::SELECT,
110	'default' => 'title',
111	'options' => [
112	'title' => esc_html__( 'Title', 'ultimate-post-kit' ),
113	'excerpt' => esc_html__( 'Excerpt', 'ultimate-post-kit' ),
114	],
115	]
116	);
117
118	$this->add_control(
119	'show_date',
120	[
121	'label' => esc_html__( 'Date', 'ultimate-post-kit' ),
122	'type' => Controls_Manager::SWITCHER,
123	'condition' => [
124	'news_content' => 'title'
125	],
126	]
127	);
128
129	$this->add_control(
130	'date_reverse',
131	[
132	'label' => esc_html__( 'Date Reverse', 'ultimate-post-kit' ),
133	'type' => Controls_Manager::SWITCHER,
134	'condition' => [
135	'show_date' => 'yes'
136	],
137	]
138	);
139
140	$this->add_control(
141	'show_time',
142	[
143	'label' => esc_html__( 'Time', 'ultimate-post-kit' ),
144	'type' => Controls_Manager::SWITCHER,
145	'condition' => [
146	'news_content' => 'title'
147	],
148	]
149	);
150
151	$this->add_responsive_control(
152	'news_ticker_height',
153	[
154	'label' => __( 'Height', 'ultimate-post-kit' ),
155	'type' => Controls_Manager::SLIDER,
156	'default' => [
157	'size' => 42,
158	],
159	'range' => [
160	'px' => [
161	'min' => 25,
162	'max' => 200,
163	],
164	],
165	'selectors' => [
166	'{{WRAPPER}} .upk-news-ticker' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}}',
167	],
168	]
169	);
170
171	$this->end_controls_section();
172
173	$this->start_controls_section(
174	'section_content_navigation',
175	[
176	'label' => esc_html__( 'Navigation', 'ultimate-post-kit' ),
177	]
178	);
179
180	$this->add_control(
181	'show_navigation',
182	[
183	'label' => esc_html__( 'Navigation', 'ultimate-post-kit' ),
184	'type' => Controls_Manager::SWITCHER,
185	'default' => 'yes'
186	]
187	);
188
189	$this->add_control(
190	'play_pause',
191	[
192	'label' => esc_html__( 'Play/Pause Button', 'ultimate-post-kit' ),
193	'type' => Controls_Manager::SWITCHER,
194	]
195	);
196
197	$this->add_control(
198	'navigation_size',
199	[
200	'label' => esc_html__( 'Navigation Size', 'ultimate-post-kit' ),
201	'type' => Controls_Manager::SLIDER,
202	'default' => [
203	'size' => 14,
204	],
205	'range' => [
206	'px' => [
207	'min' => 10,
208	'max' => 20,
209	],
210	],
211	'selectors' => [
212	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-navigation svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
213	],
214	'condition' => [
215	'show_navigation' => 'yes'
216	]
217	]
218	);
219
220	$this->end_controls_section();
221
222	// Query Settings
223	$this->start_controls_section(
224	'section_post_query_builder',
225	[
226	'label' => __( 'Query', 'ultimate-post-kit' ) . BDTUPK_NC,
227	'tab' => Controls_Manager::TAB_CONTENT,
228	]
229	);
230
231	$this->add_control(
232	'posts_limit',
233	[
234	'label' => esc_html__( 'Posts Limit', 'ultimate-post-kit' ),
235	'type' => Controls_Manager::NUMBER,
236	'default' => 5,
237	]
238	);
239
240	$this->register_query_builder_controls();
241
242	$this->end_controls_section();
243
244	$this->start_controls_section(
245	'section_style_animation',
246	[
247	'label' => esc_html__( 'Animation', 'ultimate-post-kit' ),
248	]
249	);
250
251	$this->add_control(
252	'slider_animations',
253	[
254	'label' => esc_html__( 'Animations', 'ultimate-post-kit' ),
255	'type' => Controls_Manager::SELECT,
256	'default' => 'fade',
257	'options' => [
258	'scroll' => esc_html__( 'Scroll', 'ultimate-post-kit' ),
259	'slide-left' => esc_html__( 'Slide Left', 'ultimate-post-kit' ),
260	'slide-up' => esc_html__( 'Slide Up', 'ultimate-post-kit' ),
261	'slide-right' => esc_html__( 'Slide Right', 'ultimate-post-kit' ),
262	'slide-down' => esc_html__( 'Slide Down', 'ultimate-post-kit' ),
263	'fade' => esc_html__( 'Fade', 'ultimate-post-kit' ),
264	'typography' => esc_html__( 'Typography', 'ultimate-post-kit' ),
265	],
266	]
267	);
268
269	$this->add_control(
270	'autoplay',
271	[
272	'label' => esc_html__( 'Autoplay', 'ultimate-post-kit' ),
273	'type' => Controls_Manager::SWITCHER,
274	'default' => 'yes',
275	]
276	);
277
278
279	$this->add_control(
280	'autoplay_interval',
281	[
282	'label' => esc_html__( 'Autoplay Interval', 'ultimate-post-kit' ),
283	'type' => Controls_Manager::NUMBER,
284	'default' => 5000,
285	'condition' => [
286	'autoplay' => 'yes',
287	],
288	]
289	);
290
291	$this->add_control(
292	'pause_on_hover',
293	[
294	'label' => esc_html__( 'Pause on Hover', 'ultimate-post-kit' ),
295	'type' => Controls_Manager::SWITCHER,
296	'default' => 'yes',
297	]
298	);
299
300	$this->add_control(
301	'speed',
302	[
303	'label' => esc_html__( 'Animation Speed', 'ultimate-post-kit' ),
304	'type' => Controls_Manager::NUMBER,
305	'default' => 500,
306	]
307	);
308
309	$this->add_control(
310	'scroll_speed',
311	[
312	'label' => __( 'Scroll Speed', 'ultimate-post-kit' ),
313	'type' => Controls_Manager::SLIDER,
314	'default' => [
315	'size' => 1,
316	],
317	'range' => [
318	'px' => [
319	'min' => 1,
320	'max' => 10,
321	],
322	],
323	'condition' => [
324	'slider_animations' => 'scroll',
325	],
326	]
327	);
328
329	$this->end_controls_section();
330
331	$this->start_controls_section(
332	'section_style_news_ticker',
333	[
334	'label' => esc_html__( 'News Ticker', 'ultimate-post-kit' ),
335	'tab' => Controls_Manager::TAB_STYLE,
336	]
337	);
338
339	$this->add_control(
340	'heading_label',
341	[
342	'label' => esc_html__( 'Label', 'ultimate-post-kit' ),
343	'type' => Controls_Manager::HEADING,
344	'condition' => [
345	'show_label' => 'yes'
346	]
347	]
348	);
349
350	$this->add_control(
351	'label_color',
352	[
353	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
354	'separator' => 'before',
355	'type' => Controls_Manager::COLOR,
356	'selectors' => [
357	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label-inner' => 'color: {{VALUE}};',
358	],
359	'condition' => [
360	'show_label' => 'yes'
361	]
362	]
363	);
364
365	$border_side = is_rtl() ? 'right' : 'left';
366
367	$this->add_control(
368	'label_background',
369	[
370	'label' => esc_html__( 'Background', 'ultimate-post-kit' ),
371	'type' => Controls_Manager::COLOR,
372	'selectors' => [
373	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label' => 'background-color: {{VALUE}};',
374	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label:after' => 'border-' . $border_side . '-color: {{VALUE}};',
375	],
376	'condition' => [
377	'show_label' => 'yes'
378	]
379	]
380	);
381
382	$this->add_group_control(
383	Group_Control_Typography::get_type(),
384	[
385	'name' => 'label_typography',
386	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
387	//'scheme' => Schemes\Typography::TYPOGRAPHY_1,
388	'selector' => '{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label-inner',
389	'condition' => [
390	'show_label' => 'yes'
391	]
392	]
393	);
394
395	$this->add_control(
396	'heading_content',
397	[
398	'label' => esc_html__( 'Content', 'ultimate-post-kit' ),
399	'type' => Controls_Manager::HEADING,
400	]
401	);
402
403	$this->add_control(
404	'content_color',
405	[
406	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
407	'type' => Controls_Manager::COLOR,
408	'separator' => 'before',
409	'selectors' => [
410	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-content a' => 'color: {{VALUE}};',
411	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-content span' => 'color: {{VALUE}};',
412	],
413	]
414	);
415
416	$this->add_control(
417	'content_background',
418	[
419	'label' => esc_html__( 'Background', 'ultimate-post-kit' ),
420	'type' => Controls_Manager::COLOR,
421	'selectors' => [
422	'{{WRAPPER}} .upk-news-ticker' => 'background-color: {{VALUE}};',
423	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-content:before, {{WRAPPER}} .upk-news-ticker .upk-news-ticker-content:after' => 'box-shadow: 0 0 12px 12px {{VALUE}};',
424	],
425	]
426	);
427
428	$this->add_group_control(
429	Group_Control_Typography::get_type(),
430	[
431	'name' => 'content_typography',
432	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
433	'selector' => '{{WRAPPER}} .upk-news-ticker .upk-news-ticker-content',
434	]
435	);
436
437	$this->end_controls_section();
438
439	$this->start_controls_section(
440	'section_style_navigation',
441	[
442	'label' => esc_html__( 'Navigation', 'ultimate-post-kit' ),
443	'tab' => Controls_Manager::TAB_STYLE,
444	'condition' => [
445	'show_navigation' => 'yes'
446	]
447	]
448	);
449
450	$this->add_control(
451	'navigation_background',
452	[
453	'label' => esc_html__( 'Navigation Background', 'ultimate-post-kit' ),
454	'type' => Controls_Manager::COLOR,
455	'selectors' => [
456	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-navigation' => 'background-color: {{VALUE}}',
457	],
458	]
459	);
460
461	$this->start_controls_tabs( 'tabs_arrow_style' );
462
463	$this->start_controls_tab(
464	'tab_arrow_normal',
465	[
466	'label' => esc_html__( 'Normal', 'ultimate-post-kit' ),
467	]
468	);
469
470	$this->add_control(
471	'navigation_color',
472	[
473	'label' => esc_html__( 'Navigation Color', 'ultimate-post-kit' ),
474	'type' => Controls_Manager::COLOR,
475	'selectors' => [
476	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-navigation button span svg' => 'color: {{VALUE}}',
477	],
478	]
479	);
480
481	$this->end_controls_tab();
482
483	$this->start_controls_tab(
484	'tab_arrow_hover',
485	[
486	'label' => esc_html__( 'Hover', 'ultimate-post-kit' ),
487	]
488	);
489
490	$this->add_control(
491	'hover_color',
492	[
493	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
494	'type' => Controls_Manager::COLOR,
495	'selectors' => [
496	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-navigation button:hover span svg' => 'color: {{VALUE}};',
497	],
498	]
499	);
500
501	$this->end_controls_tab();
502
503	$this->end_controls_tabs();
504
505	$this->end_controls_section();
506	}
507
508	/**
509	* Main query render for this widget
510	* @param $posts_per_page number item query limit
511	*/
512	public function query_posts( $posts_per_page ) {
513
514	$default = $this->getGroupControlQueryArgs();
515	if ( $posts_per_page ) {
516	$args['posts_per_page'] = $posts_per_page;
517	$args['paged'] = max( 1, get_query_var( 'paged' ), get_query_var( 'page' ) );
518	}
519	$args = array_merge( $default, $args );
520	$this->_query = new WP_Query( $args );
521	}
522
523	public function render() {
524	$settings = $this->get_settings_for_display();
525
526	$this->query_posts( $settings['posts_limit'] );
527
528	$wp_query = $this->get_query();
529
530	if ( ! $wp_query->found_posts ) {
531	return;
532	}
533
534	$this->render_header($settings);
535
536	while ( $wp_query->have_posts() ) {
537	$wp_query->the_post();
538
539	$this->render_loop_item($settings);
540	}
541
542	$this->render_footer();
543
544	wp_reset_postdata();
545
546	}
547
548	protected function render_title() {
549	$classes = ['upk-news-ticker-content-title'];
550	?>
551
552	<a href="<?php echo esc_url(get_permalink()); ?>">
553	<?php $this->render_date(); ?>
554
555	<?php $this->render_time(); ?>
556
557	<?php the_title() ?>
558	</a>
559	<?php
560	}
561
562
563	protected function render_excerpt() {
564
565	?>
566	<a href="<?php echo esc_url(get_permalink()); ?>">
567	<?php the_excerpt(); ?>
568	</a>
569	<?php
570	}
571
572	protected function render_header($settings) {
573
574	$this->add_render_attribute(
575	[
576	'slider-settings' => [
577	'class' => [
578	'upk-news-ticker',
579	],
580	'data-settings' => [
581	wp_json_encode(array_filter([
582	"effect" => $settings["slider_animations"],
583	"autoPlay" => ($settings["autoplay"]) ? true : false,
584	"interval" => $settings["autoplay_interval"],
585	"pauseOnHover" => ($settings["pause_on_hover"]) ? true : false,
586	"scrollSpeed" => (isset( $settings["scroll_speed"]["size"]) ? $settings["scroll_speed"]["size"] : 1),
587	"direction" => (is_rtl()) ? 'rtl' : false
588	]))
589	],
590	]
591	]
592	);
593
594	?>
595	<div id="newsTicker1" <?php $this->print_render_attribute_string( 'slider-settings' ); ?>>
596	<?php if ( 'yes' == $settings['show_label'] ) : ?>
597	<div class="upk-news-ticker-label">
598	<div class="upk-news-ticker-label-inner">
599	<?php echo wp_kses( $settings['news_label'], ultimate_post_kit_allow_tags('title') ); ?>
600	</div>
601	</div>
602	<?php endif; ?>
603	<div class="upk-news-ticker-content">
604	<ul>
605	<?php
606	}
607
608	public function render_date() {
609	$settings = $this->get_settings_for_display();
610
611	if ( ! $this->get_settings('show_date') ) {
612	return;
613	}
614
615	$news_month = get_the_date('m');
616	$news_day = get_the_date('d');
617
618	?>
619
620	<span class="upk-news-ticker-date bdt-margin-small-right" title="<?php esc_html_e( 'Published on:', 'ultimate-post-kit' ); ?> <?php echo get_the_date(); ?>">
621	<?php if ('yes' == $settings['date_reverse']) : ?>
622	<span class="upk-news-ticker-date-day"><?php echo wp_kses_post( $news_day ); ?></span>
623	<span class="upk-news-ticker-date-sep">/</span>
624	<span class="upk-news-ticker-date-month"><?php echo wp_kses_post( $news_month ); ?></span>
625	<?php else: ?>
626	<span class="upk-news-ticker-date-month"><?php echo wp_kses_post( $news_month ); ?></span>
627	<span class="upk-news-ticker-date-sep">/</span>
628	<span class="upk-news-ticker-date-day"><?php echo wp_kses_post( $news_day ); ?></span>
629	<?php endif; ?>
630	<span>:</span>
631	</span>
632
633	<?php
634	}
635
636	public function render_time() {
637
638	if ( ! $this->get_settings('show_time') ) {
639	return;
640	}
641
642	$news_hour = get_the_time();
643
644	?>
645
646	<span class="upk-news-ticker-time bdt-margin-small-right" title="<?php esc_html_e( 'Published on:', 'ultimate-post-kit' ); ?> <?php echo get_the_date(); ?> <?php echo esc_attr( get_the_time() ); ?>">
647	<span class="bdt-text-uppercase"><?php echo wp_kses_post( $news_hour ); ?></span>
648	<span>:</span>
649	</span>
650
651	<?php
652	}
653
654	protected function render_footer() {
655	$settings = $this->get_settings_for_display();
656	?>
657
658
659	</ul>
660	</div>
661	<?php if ( $settings['show_navigation'] ) : ?>
662	<div class="upk-news-ticker-controls upk-news-ticker-navigation">
663
664	<button class="bdt-visible@m">
665	<span class="upk-news-ticker-arrow upk-news-ticker-prev bdt-icon">
666	<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-left">
667	<polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline>
668	</svg>
669	</span>
670	</button>
671
672	<?php if ($settings['play_pause']) : ?>
673	<button class="bdt-visible@m">
674	<span class="upk-news-ticker-action bdt-icon">
675	<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="play" class="upk-news-ticker-play-pause">
676	<polygon fill="none" stroke="#000" points="4.9,3 16.1,10 4.9,17 "></polygon>
677
678	<rect x="6" y="2" width="1" height="16"/>
679	<rect x="13" y="2" width="1" height="16"/>
680	</svg>
681	</span>
682	</button>
683	<?php endif ?>
684
685	<button>
686	<span class="upk-news-ticker-arrow upk-news-ticker-next bdt-icon">
687	<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-right">
688	<polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>
689	</svg>
690	</span>
691	</button>
692
693	</div>
694
695	<?php endif; ?>
696	</div>
697
698	<?php
699	}
700
701	protected function render_loop_item($settings) {
702	?>
703	<li class="upk-news-ticker-item">
704
705
706	<?php if( 'title' == $settings['news_content'] ) : ?>
707	<?php $this->render_title(substr($this->get_name(), 4)); ?>
708	<?php endif; ?>
709
710	<?php if( 'excerpt' == $settings['news_content'] ) : ?>
711	<?php $this->render_excerpt(); ?>
712	<?php endif; ?>
713
714
715	</li>
716	<?php
717	}
718	}
719