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 trunk, at modules/news-ticker/widgets/news-ticker.php

721 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	'condition' => [
298	'autoplay' => 'yes',
299	],
300	]
301	);
302
303	$this->add_control(
304	'speed',
305	[
306	'label' => esc_html__( 'Animation Speed', 'ultimate-post-kit' ),
307	'type' => Controls_Manager::NUMBER,
308	'default' => 500,
309	]
310	);
311
312	$this->add_control(
313	'scroll_speed',
314	[
315	'label' => __( 'Scroll Speed', 'ultimate-post-kit' ),
316	'type' => Controls_Manager::SLIDER,
317	'default' => [
318	'size' => 1,
319	],
320	'range' => [
321	'px' => [
322	'min' => 1,
323	'max' => 10,
324	],
325	],
326	'condition' => [
327	'slider_animations' => 'scroll',
328	],
329	]
330	);
331
332	$this->end_controls_section();
333
334	$this->start_controls_section(
335	'section_style_news_ticker',
336	[
337	'label' => esc_html__( 'News Ticker', 'ultimate-post-kit' ),
338	'tab' => Controls_Manager::TAB_STYLE,
339	]
340	);
341
342	$this->add_control(
343	'heading_label',
344	[
345	'label' => esc_html__( 'Label', 'ultimate-post-kit' ),
346	'type' => Controls_Manager::HEADING,
347	'condition' => [
348	'show_label' => 'yes'
349	]
350	]
351	);
352
353	$this->add_control(
354	'label_color',
355	[
356	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
357	'separator' => 'before',
358	'type' => Controls_Manager::COLOR,
359	'selectors' => [
360	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label-inner' => 'color: {{VALUE}};',
361	],
362	'condition' => [
363	'show_label' => 'yes'
364	]
365	]
366	);
367
368	$border_side = is_rtl() ? 'right' : 'left';
369
370	$this->add_control(
371	'label_background',
372	[
373	'label' => esc_html__( 'Background', 'ultimate-post-kit' ),
374	'type' => Controls_Manager::COLOR,
375	'selectors' => [
376	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label' => 'background-color: {{VALUE}};',
377	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label:after' => 'border-' . $border_side . '-color: {{VALUE}};',
378	],
379	'condition' => [
380	'show_label' => 'yes'
381	]
382	]
383	);
384
385	$this->add_group_control(
386	Group_Control_Typography::get_type(),
387	[
388	'name' => 'label_typography',
389	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
390	//'scheme' => Schemes\Typography::TYPOGRAPHY_1,
391	'selector' => '{{WRAPPER}} .upk-news-ticker .upk-news-ticker-label-inner',
392	'condition' => [
393	'show_label' => 'yes'
394	]
395	]
396	);
397
398	$this->add_control(
399	'heading_content',
400	[
401	'label' => esc_html__( 'Content', 'ultimate-post-kit' ),
402	'type' => Controls_Manager::HEADING,
403	]
404	);
405
406	$this->add_control(
407	'content_color',
408	[
409	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
410	'type' => Controls_Manager::COLOR,
411	'separator' => 'before',
412	'selectors' => [
413	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-content a' => 'color: {{VALUE}};',
414	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-content span' => 'color: {{VALUE}};',
415	],
416	]
417	);
418
419	$this->add_control(
420	'content_background',
421	[
422	'label' => esc_html__( 'Background', 'ultimate-post-kit' ),
423	'type' => Controls_Manager::COLOR,
424	'selectors' => [
425	'{{WRAPPER}} .upk-news-ticker' => 'background-color: {{VALUE}};',
426	'{{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}};',
427	],
428	]
429	);
430
431	$this->add_group_control(
432	Group_Control_Typography::get_type(),
433	[
434	'name' => 'content_typography',
435	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
436	'selector' => '{{WRAPPER}} .upk-news-ticker .upk-news-ticker-content',
437	]
438	);
439
440	$this->end_controls_section();
441
442	$this->start_controls_section(
443	'section_style_navigation',
444	[
445	'label' => esc_html__( 'Navigation', 'ultimate-post-kit' ),
446	'tab' => Controls_Manager::TAB_STYLE,
447	'condition' => [
448	'show_navigation' => 'yes'
449	]
450	]
451	);
452
453	$this->add_control(
454	'navigation_background',
455	[
456	'label' => esc_html__( 'Navigation Background', 'ultimate-post-kit' ),
457	'type' => Controls_Manager::COLOR,
458	'selectors' => [
459	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-navigation' => 'background-color: {{VALUE}}',
460	],
461	]
462	);
463
464	$this->start_controls_tabs( 'tabs_arrow_style' );
465
466	$this->start_controls_tab(
467	'tab_arrow_normal',
468	[
469	'label' => esc_html__( 'Normal', 'ultimate-post-kit' ),
470	]
471	);
472
473	$this->add_control(
474	'navigation_color',
475	[
476	'label' => esc_html__( 'Navigation Color', 'ultimate-post-kit' ),
477	'type' => Controls_Manager::COLOR,
478	'selectors' => [
479	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-navigation button span svg' => 'color: {{VALUE}}',
480	],
481	]
482	);
483
484	$this->end_controls_tab();
485
486	$this->start_controls_tab(
487	'tab_arrow_hover',
488	[
489	'label' => esc_html__( 'Hover', 'ultimate-post-kit' ),
490	]
491	);
492
493	$this->add_control(
494	'hover_color',
495	[
496	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
497	'type' => Controls_Manager::COLOR,
498	'selectors' => [
499	'{{WRAPPER}} .upk-news-ticker .upk-news-ticker-navigation button:hover span svg' => 'color: {{VALUE}};',
500	],
501	]
502	);
503
504	$this->end_controls_tab();
505
506	$this->end_controls_tabs();
507
508	$this->end_controls_section();
509	}
510
511	/**
512	* Main query render for this widget
513	* @param $posts_per_page number item query limit
514	*/
515	public function query_posts( $posts_per_page ) {
516
517	$default = $this->getGroupControlQueryArgs();
518	if ( $posts_per_page ) {
519	$args['posts_per_page'] = $posts_per_page;
520	}
521	$args = array_merge( $default, $args );
522	$this->_query = new WP_Query( $args );
523	}
524
525	public function render() {
526	$settings = $this->get_settings_for_display();
527
528	$this->query_posts( $settings['posts_limit'] );
529
530	$wp_query = $this->get_query();
531
532	if ( ! $wp_query->found_posts ) {
533	return;
534	}
535
536	$this->render_header($settings);
537
538	while ( $wp_query->have_posts() ) {
539	$wp_query->the_post();
540
541	$this->render_loop_item($settings);
542	}
543
544	$this->render_footer();
545
546	wp_reset_postdata();
547
548	}
549
550	protected function render_title() {
551	$classes = ['upk-news-ticker-content-title'];
552	?>
553
554	<a href="<?php echo esc_url(get_permalink()); ?>">
555	<?php $this->render_date(); ?>
556
557	<?php $this->render_time(); ?>
558
559	<?php the_title() ?>
560	</a>
561	<?php
562	}
563
564
565	protected function render_excerpt() {
566
567	?>
568	<a href="<?php echo esc_url(get_permalink()); ?>">
569	<?php the_excerpt(); ?>
570	</a>
571	<?php
572	}
573
574	protected function render_header($settings) {
575
576	$this->add_render_attribute(
577	[
578	'slider-settings' => [
579	'class' => [
580	'upk-news-ticker',
581	],
582	'data-settings' => [
583	wp_json_encode(array_filter([
584	"effect" => $settings["slider_animations"],
585	"autoPlay" => ($settings["autoplay"]) ? true : false,
586	"interval" => $settings["autoplay_interval"],
587	"pauseOnHover" => ($settings["pause_on_hover"]) ? true : false,
588	"scrollSpeed" => (isset( $settings["scroll_speed"]["size"]) ? $settings["scroll_speed"]["size"] : 1),
589	"direction" => (is_rtl()) ? 'rtl' : false
590	]))
591	],
592	]
593	]
594	);
595
596	?>
597	<div id="newsTicker1" <?php $this->print_render_attribute_string( 'slider-settings' ); ?>>
598	<?php if ( 'yes' == $settings['show_label'] ) : ?>
599	<div class="upk-news-ticker-label">
600	<div class="upk-news-ticker-label-inner">
601	<?php echo wp_kses( $settings['news_label'], ultimate_post_kit_allow_tags('title') ); ?>
602	</div>
603	</div>
604	<?php endif; ?>
605	<div class="upk-news-ticker-content">
606	<ul>
607	<?php
608	}
609
610	public function render_date() {
611	$settings = $this->get_settings_for_display();
612
613	if ( ! $this->get_settings('show_date') ) {
614	return;
615	}
616
617	$news_month = get_the_date('m');
618	$news_day = get_the_date('d');
619
620	?>
621
622	<span class="upk-news-ticker-date bdt-margin-small-right" title="<?php esc_attr_e( 'Published on:', 'ultimate-post-kit' ); ?> <?php echo esc_attr( get_the_date() ); ?>">
623	<?php if ('yes' == $settings['date_reverse']) : ?>
624	<span class="upk-news-ticker-date-day"><?php echo wp_kses_post( $news_day ); ?></span>
625	<span class="upk-news-ticker-date-sep">/</span>
626	<span class="upk-news-ticker-date-month"><?php echo wp_kses_post( $news_month ); ?></span>
627	<?php else: ?>
628	<span class="upk-news-ticker-date-month"><?php echo wp_kses_post( $news_month ); ?></span>
629	<span class="upk-news-ticker-date-sep">/</span>
630	<span class="upk-news-ticker-date-day"><?php echo wp_kses_post( $news_day ); ?></span>
631	<?php endif; ?>
632	<span>:</span>
633	</span>
634
635	<?php
636	}
637
638	public function render_time() {
639
640	if ( ! $this->get_settings('show_time') ) {
641	return;
642	}
643
644	$news_hour = get_the_time();
645
646	?>
647
648	<span class="upk-news-ticker-time bdt-margin-small-right" title="<?php esc_attr_e( 'Published on:', 'ultimate-post-kit' ); ?> <?php echo esc_attr( get_the_date() ); ?> <?php echo esc_attr( get_the_time() ); ?>">
649	<span class="bdt-text-uppercase"><?php echo wp_kses_post( $news_hour ); ?></span>
650	<span>:</span>
651	</span>
652
653	<?php
654	}
655
656	protected function render_footer() {
657	$settings = $this->get_settings_for_display();
658	?>
659
660
661	</ul>
662	</div>
663	<?php if ( $settings['show_navigation'] ) : ?>
664	<div class="upk-news-ticker-controls upk-news-ticker-navigation">
665
666	<button class="bdt-visible@m">
667	<span class="upk-news-ticker-arrow upk-news-ticker-prev bdt-icon">
668	<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-left">
669	<polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline>
670	</svg>
671	</span>
672	</button>
673
674	<?php if ($settings['play_pause']) : ?>
675	<button class="bdt-visible@m">
676	<span class="upk-news-ticker-action bdt-icon">
677	<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">
678	<polygon fill="none" stroke="#000" points="4.9,3 16.1,10 4.9,17 "></polygon>
679
680	<rect x="6" y="2" width="1" height="16"/>
681	<rect x="13" y="2" width="1" height="16"/>
682	</svg>
683	</span>
684	</button>
685	<?php endif ?>
686
687	<button>
688	<span class="upk-news-ticker-arrow upk-news-ticker-next bdt-icon">
689	<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-right">
690	<polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline>
691	</svg>
692	</span>
693	</button>
694
695	</div>
696
697	<?php endif; ?>
698	</div>
699
700	<?php
701	}
702
703	protected function render_loop_item($settings) {
704	?>
705	<li class="upk-news-ticker-item">
706
707
708	<?php if( 'title' == $settings['news_content'] ) : ?>
709	<?php $this->render_title(substr($this->get_name(), 4)); ?>
710	<?php endif; ?>
711
712	<?php if( 'excerpt' == $settings['news_content'] ) : ?>
713	<?php $this->render_excerpt(); ?>
714	<?php endif; ?>
715
716
717	</li>
718	<?php
719	}
720	}
721