ablocks / includes / blocks / news-ticker / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.11.1, at includes/blocks/news-ticker/block.php

443 lines 17.2 KB

Raw Download Zip

1	<?php
2	namespace ABlocks\Blocks\NewsTicker;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit;
6	}
7
8	use ABlocks\Classes\BlockBaseAbstract;
9	use ABlocks\Classes\CssGenerator;
10	use ABlocks\Classes\CssGeneratorV2;
11	use ABlocks\Controls\Typography;
12	use ABlocks\Controls\TextShadow;
13	use ABlocks\Controls\TextStroke;
14	use ABlocks\Controls\Range;
15	use ABlocks\Controls\Color;
16
17	class Block extends BlockBaseAbstract {
18	protected $block_name = 'news-ticker';
19
20	public function build_css( $attributes ) {
21	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
22
23	$css_generator->add_class_styles(
24	'{{WRAPPER}} .ablocks-block-news-ticker__label',
25	$this->get_label_css( $attributes ),
26	$this->get_label_css( $attributes, 'Tablet' ),
27	$this->get_label_css( $attributes, 'Mobile' )
28	);
29
30	$css_generator->add_class_styles(
31	'{{WRAPPER}} .ablocks-block-news-ticker__label:hover',
32	$this->get_label_color_hover_css( $attributes ),
33	$this->get_label_color_hover_css( $attributes, 'Tablet' ),
34	$this->get_label_color_hover_css( $attributes, 'Mobile' )
35	);
36
37	$css_generator->add_class_styles(
38	'{{WRAPPER}} .ablocks-block-news-ticker',
39	$this->get_ticker_content_css( $attributes ),
40	$this->get_ticker_content_css( $attributes, 'Tablet' ),
41	$this->get_ticker_content_css( $attributes, 'Mobile' )
42	);
43
44	$css_generator->add_class_styles(
45	'{{WRAPPER}} .ablocks-block-news-ticker__marquee',
46	$this->get_ticker_color_css( $attributes ),
47	$this->get_ticker_color_css( $attributes, 'Tablet' ),
48	$this->get_ticker_color_css( $attributes, 'Mobile' )
49	);
50
51	$css_generator->add_class_styles(
52	'{{WRAPPER}} .ablocks-block-news-ticker__marquee:hover',
53	$this->get_ticker_color_hover_css( $attributes ),
54	$this->get_ticker_color_hover_css( $attributes, 'Tablet' ),
55	$this->get_ticker_color_hover_css( $attributes, 'Mobile' )
56	);
57
58	$css_generator->add_class_styles(
59	'{{WRAPPER}} .ablocks-block-news-ticker--icons',
60	$this->get_navigator_css( $attributes )
61	);
62	$css_generator->add_class_styles(
63	'{{WRAPPER}} .ablocks-block-news-ticker--icons__prev',
64	$this->get_navigator_color_css( $attributes )
65	);
66	$css_generator->add_class_styles(
67	'{{WRAPPER}} .ablocks-block-news-ticker--icons__next',
68	$this->get_navigator_color_css( $attributes )
69	);
70	$css_generator->add_class_styles(
71	'{{WRAPPER}} .ablocks-block-news-ticker--icons__pause',
72	$this->get_navigator_color_css( $attributes )
73	);
74	$css_generator->add_class_styles(
75	'{{WRAPPER}} .ablocks-block-news-ticker--icons__resume',
76	$this->get_navigator_color_css( $attributes )
77	);
78	$css_generator->add_class_styles(
79	'{{WRAPPER}} .ablocks-block-news-ticker__list',
80	$this->get_ticker_list_styles_css( $attributes ),
81	$this->get_ticker_list_styles_css( $attributes, 'Tablet' ),
82	$this->get_ticker_list_styles_css( $attributes, 'Mobile' )
83	);
84
85	$css_generator->add_class_styles(
86	'{{WRAPPER}} .ablocks-block-news-ticker--date',
87	$this->get_show_time_css( $attributes )
88	);
89
90	return $css_generator->generate_css();
91	}
92
93	public function get_label_css( $attributes, $device = '' ) {
94	$label_css = [];
95	if ( isset( $attributes['isShowLabel'] ) && $attributes['isShowLabel'] ) {
96	$label_css['display'] = 'flex';
97	} else {
98	$label_css['display'] = 'none';
99	}
100
101	if ( isset( $attributes['labelPosition'] ) && $attributes['labelPosition'] === 'right' ) {
102	$label_css['right'] = '0';
103	$label_css['left'] = 'auto';
104	} else {
105	$label_css['left'] = '0';
106	$label_css['right'] = 'auto';
107	}
108
109	if ( ! empty( $attributes['tickerLabelShape'] ) ) {
110	switch ( $attributes['tickerLabelShape'] ) {
111	case 'small':
112	$label_css['clip-path'] = 'polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%)';
113	break;
114
115	case 'medium':
116	$label_css['clip-path'] = 'polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%)';
117	break;
118
119	case 'large':
120	$label_css['clip-path'] = 'polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%)';
121	break;
122
123	default:
124	$label_css['clip-path'] = '';
125	break;
126	}
127	}
128	$typographyValueGlobal = ! empty( $attributes['labelTypographyGlobal'] ) ? $attributes['labelTypographyGlobal'] : array();
129	$typography_css = ! empty( $attributes['labelTypography'] ) ? Typography::get_css( $attributes['labelTypography'], '', $device, $typographyValueGlobal ) : array();
130	$textShadowCss = ! empty( $attributes['labelTextShadow'] ) ? TextShadow::get_css( $attributes['labelTextShadow'], '', $device ) : array();
131	$textStrokeCss = ! empty( $attributes['labelTextStroke'] ) ? TextStroke::get_css( $attributes['labelTextStroke'], '', $device ) : array();
132	return array_merge(
133	[ 'color' => Color::get_css( isset( $attributes['labelColor'] ) ? $attributes['labelColor'] : '' ) ],
134	[ 'background' => Color::get_css( isset( $attributes['labelBackgroundColor'] ) ? $attributes['labelBackgroundColor'] : '' ) ],
135	Range::get_css([
136	'attributeValue' => $attributes['labelPadding'],
137	'attribute_object_key' => 'value',
138	'isResponsive' => true,
139	'defaultValue' => 10,
140	'hasUnit' => true,
141	'unitDefaultValue' => 'px',
142	'property' => 'padding',
143	'device' => $device,
144	]),
145	$label_css,
146	$typography_css,
147	$textShadowCss,
148	$textStrokeCss
149	);
150	}
151
152
153	public function get_label_color_hover_css( $attributes ) {
154	return array_merge(
155	[ 'color' => Color::get_css( isset( $attributes['labelColorH'] ) ? $attributes['labelColorH'] : '' ) ],
156	[ 'background' => Color::get_css( isset( $attributes['labelBackgroundColorH'] ) ? $attributes['labelBackgroundColorH'] : '' ) ],
157	Range::get_css([
158	'attributeValue' => $attributes['labelColorTransition'],
159	'attribute_object_key' => 'value',
160	'defaultValue' => 0,
161	'unitDefaultValue' => 's',
162	'property' => 'transition-duration',
163	]),
164	);
165	}
166
167	public function get_ticker_content_css( $attributes, $device = '' ) {
168	$ticker_content_css = [];
169
170	if ( isset( $attributes['isPositionSticky'] ) && $attributes['isPositionSticky'] ) {
171	if ( isset( $attributes['stickyPosition'] ) && $attributes['stickyPosition'] === 'up' ) {
172	$ticker_content_css['position'] = 'fixed';
173	$ticker_content_css['top'] = '32px';
174	$ticker_content_css['left'] = '0';
175	$ticker_content_css['width'] = '100%';
176
177	} elseif ( isset( $attributes['stickyPosition'] ) && $attributes['stickyPosition'] === 'down' ) {
178	$ticker_content_css['position'] = 'fixed';
179	$ticker_content_css['bottom'] = '0';
180	$ticker_content_css['left'] = '0';
181	$ticker_content_css['width'] = '100%';
182	}
183	}
184
185	return array_merge(
186	Range::get_css([
187	'attributeValue' => $attributes['tickerHeight'],
188	'attribute_object_key' => 'value',
189	'isResponsive' => true,
190	'defaultValue' => 50,
191	'hasUnit' => true,
192	'unitDefaultValue' => 'px',
193	'property' => 'height',
194	'device' => $device,
195	]),
196	$ticker_content_css
197	);
198	}
199
200	public function get_ticker_list_styles_css( $attributes, $device = '' ) {
201	$ticker_list_styles_css = [];
202	if ( isset( $attributes['tickerListStyle'] ) ) {
203	switch ( $attributes['tickerListStyle'] ) {
204	case 'none':
205	$ticker_list_styles_css['list-style'] = 'none';
206	break;
207	case 'circle':
208	$ticker_list_styles_css['list-style'] = 'circle';
209	break;
210	case 'box':
211	$ticker_list_styles_css['list-style'] = 'square';
212	break;
213	default:
214	$ticker_list_styles_css['list-style'] = 'none';
215	}
216	}
217	$typographyValueGlobal = ! empty( $attributes['tickerTypographyGlobal'] ) ? $attributes['tickerTypographyGlobal'] : array();
218	$typography_css = ! empty( $attributes['tickerTypography'] ) ? Typography::get_css( $attributes['tickerTypography'], '', $device, $typographyValueGlobal ) : array();
219	$textShadowCss = ! empty( $attributes['tickerTextShadow'] ) ? TextShadow::get_css( $attributes['tickerTextShadow'], '', $device ) : array();
220	$textStrokeCss = ! empty( $attributes['tickerTextStroke'] ) ? TextStroke::get_css( $attributes['tickerTextStroke'], '', $device ) : array();
221
222	return array_merge(
223	$ticker_list_styles_css,
224	$typography_css,
225	$textShadowCss,
226	$textStrokeCss );
227	}
228
229	public function get_ticker_color_css( $attributes ) {
230	return array_merge(
231	[ 'color' => Color::get_css( isset( $attributes['tickerColor'] ) ? $attributes['tickerColor'] : '' ) ],
232	[ 'background' => Color::get_css( isset( $attributes['tickerBgColor'] ) ? $attributes['tickerBgColor'] : '' ) ],
233	);
234	}
235
236	public function get_ticker_color_hover_css( $attributes ) {
237	return array_merge(
238	[ 'color' => Color::get_css( isset( $attributes['tickerColorH'] ) ? $attributes['tickerColorH'] : '' ) ],
239	[ 'background' => Color::get_css( isset( $attributes['tickerBgColorH'] ) ? $attributes['tickerBgColorH'] : '' ) ],
240	Range::get_css([
241	'attributeValue' => $attributes['tickerColorTransition'],
242	'attribute_object_key' => 'value',
243	'defaultValue' => 0,
244	'unitDefaultValue' => 's',
245	'property' => 'transition-duration',
246	])
247	);
248	}
249
250	public function get_navigator_css( $attributes ) {
251	$navigator_css = [];
252
253	if ( isset( $attributes['showTickerNavigator'] ) && $attributes['showTickerNavigator'] ) {
254	$navigator_css['display'] = 'flex';
255	} else {
256	$navigator_css['display'] = 'none';
257	}
258	if ( isset( $attributes['navigatorPosition'] ) && $attributes['navigatorPosition'] === 'right' ) {
259	$navigator_css['right'] = '0';
260	$navigator_css['left'] = 'auto';
261	} else {
262	$navigator_css['left'] = '0';
263	$navigator_css['right'] = 'auto';
264	}
265
266	return $navigator_css;
267	}
268	public function get_navigator_color_css( $attributes ) {
269	return [ 'background' => Color::get_css( isset( $attributes['navigatorBgColor'] ) ? $attributes['navigatorBgColor'] : '' ) ];
270
271	}
272
273	public function get_show_time_css( $attributes ) {
274	$time_show_css = [];
275
276	if ( isset( $attributes['isShowTime'] ) && $attributes['isShowTime'] ) {
277	$time_show_css['display'] = 'inline';
278	} else {
279	$time_show_css['display'] = 'none';
280	}
281
282	return $time_show_css;
283	}
284
285
286	public function render_block_content( $attributes, $content, $block_instance ) {
287	$sticky_label = sanitize_text_field( $attributes['stickyLabel'] ?? 'Breaking News' );
288	$sticky_label_tag = sanitize_html_class( $attributes['stickyLabelTag'] ?? 'span' );
289	$selected_posts = array_map( 'absint', $attributes['selectedPosts'] ?? [] );
290	$selected_pages = array_map( 'absint', $attributes['selectedPages'] ?? [] );
291	$slide_speed = sanitize_text_field( $attributes['slideSpeed'] ?? '2' );
292	$is_pause_on_over = filter_var( $attributes['isPauseOnOver'] ?? false, FILTER_VALIDATE_BOOLEAN );
293	$show_ticker_navigator = filter_var( $attributes['showTickerNavigator'] ?? false, FILTER_VALIDATE_BOOLEAN );
294	$custom_text = sanitize_text_field( $attributes['customText'] ?? '' );
295	$query_type = sanitize_text_field( $attributes['queryType'] ?? '' );
296	$navigator_color = Color::get_css( isset( $attributes['navigatorColor'] ) ? $attributes['navigatorColor'] : '' );
297	$slide_direction = sanitize_text_field( $attributes['slideDirection'] ?? 'left' );
298	$post_type = ! empty( $selected_pages ) ? 'page' : 'post';
299	$selected_items = ! empty( $selected_pages ) ? $selected_pages : $selected_posts;
300
301	$args = [
302	'post_type' => $post_type,
303	'post__in' => $selected_items,
304	'orderby' => 'post__in',
305	'posts_per_page' => -1,
306	];
307
308	$query = new \WP_Query( $args );
309
310	ob_start();
311	?>
312	<div class="ablocks-block-news-ticker"
313	data-slide-speed="<?php echo esc_attr( $slide_speed ); ?>"
314	data-slide-direction="<?php echo esc_attr( $slide_direction ); ?>"
315	data-pause-on-hover="<?php echo esc_attr( $is_pause_on_over ? 'true' : 'false' ); ?>"
316	data-navigator-color="<?php echo esc_attr( $navigator_color ); ?>">
317	<<?php echo esc_attr( $sticky_label_tag ); ?> class="ablocks-block-news-ticker__label">
318	<?php echo esc_html( $sticky_label ); ?>
319	</<?php echo esc_attr( $sticky_label_tag ); ?>>
320	<div class="ablocks-block-news-ticker__marquee">
321	<div class="ablocks-block-news-ticker_marquee--content">
322	<ul class="ablocks-block-news-ticker__list">
323	<?php if ( $query_type === 'customText' && ! empty( $attributes['lists'] ) ) : ?>
324	<?php foreach ( $attributes['lists'] as $item ) : ?>
325	<?php
326	$text = sanitize_text_field( $item['text'] ?? '' );
327	$href = esc_url( $item['link']['href'] ?? '' );
328	$target = ! empty( $item['link']['linkTarget'] ) ? 'target="_blank" rel="noopener noreferrer"' : '';
329	?>
330	<li class="ablocks-block-news-ticker__item">
331	<span class="ablocks-block-news-ticker__custom-text">
332	<?php if ( ! empty( $href ) ) : ?>
333	<a href="<?php echo esc_url( $href ); ?>" <?php echo esc_html( $target ); ?>>
334	<?php echo esc_html( $text ); ?>
335	</a>
336	<?php else : ?>
337	<?php echo esc_html( $text ); ?>
338	<?php endif; ?>
339	</span>
340	</li>
341	<?php endforeach; ?>
342	<?php elseif ( ! empty( $selected_items ) ) : ?>
343	<?php if ( $query->have_posts() ) :
344	while ( $query->have_posts() ) :
345	$query->the_post();
346	$has_link = ! empty( $attributes['pageLink'] ) \|\| ! empty( $attributes['postLink'] );
347	$post_link = get_permalink();
348	$link_target = '_blank';
349	$title = get_the_title();
350	$date = esc_html( $this->get_relative_time( get_the_date() ) );
351	?>
352	<?php if ( $has_link ) : ?>
353	<a href="<?php echo esc_url( $post_link ); ?>" target="<?php echo esc_attr( $link_target ); ?>">
354	<li class="ablocks-block-news-ticker__item">
355	<?php echo esc_html( $title ); ?>
356	<span class="ablocks-block-news-ticker--date"><?php echo esc_html( $date ); ?></span>
357	</li>
358	</a>
359	<?php else : ?>
360	<li class="ablocks-block-news-ticker__item">
361	<?php echo esc_html( $title ); ?>
362	<span class="ablocks-block-news-ticker--date"><?php echo esc_html( $date ); ?></span>
363	</li>
364	<?php endif; ?>
365	<?php endwhile; ?>
366	<?php else : ?>
367	<li><?php
368	/* translators: %s template */
369	echo esc_html( sprintf( __( 'No %s found in the selection', 'ablocks' ), $post_type . 's' ) ); ?></li>
370	<?php endif; ?>
371	<?php else : ?>
372	<li><?php esc_html_e( 'No items selected', 'ablocks' ); ?></li>
373	<?php endif; ?>
374	</ul>
375	</div>
376
377	<?php if ( $show_ticker_navigator ) : ?>
378	<div class="ablocks-block-news-ticker--icons">
379	<button class="ablocks-block-news-ticker--icons__prev">
380	<svg
381	width="24"
382	height="50"
383	viewBox="0 0 28 28"
384	fill="none"
385	xmlns="http://www.w3.org/2000/svg"
386	>
387	<path
388	d="M18.119 22.1309C18.2003 22.2122 18.2648 22.3087 18.3088 22.415C18.3528 22.5212 18.3755 22.635 18.3755 22.75C18.3755 22.865 18.3528 22.9788 18.3088 23.085C18.2648 23.1913 18.2003 23.2878 18.119 23.3691C18.0378 23.4504 17.9412 23.5148 17.835 23.5588C17.7288 23.6028 17.615 23.6255 17.5 23.6255C17.385 23.6255 17.2712 23.6028 17.165 23.5588C17.0587 23.5148 16.9622 23.4504 16.8809 23.3691L8.13092 14.6191C8.04957 14.5378 7.98503 14.4413 7.941 14.3351C7.89696 14.2288 7.8743 14.115 7.8743 14C7.8743 13.885 7.89696 13.7712 7.941 13.6649C7.98503 13.5587 8.04957 13.4622 8.13092 13.3809L16.8809 4.63094C17.0451 4.46675 17.2678 4.37451 17.5 4.37451C17.7322 4.37451 17.9549 4.46675 18.119 4.63094C18.2832 4.79512 18.3755 5.01781 18.3755 5.25C18.3755 5.48219 18.2832 5.70488 18.119 5.86906L9.98702 14L18.119 22.1309Z"
389	fill="<?php echo esc_attr( $navigator_color ); ?>"
390	/>
391	</svg>
392	</button>
393	<button
394	aria-label="Pause Button"
395	title="Pause Button"
396	class="ablocks-block-news-ticker--icons__pause">
397	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="50" fill="currentColor">
398	<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
399	</svg>
400	</button>
401	<button
402	aria-label="Next Button"
403	title="Next Button"
404	class="ablocks-block-news-ticker--icons__next">
405	<svg
406	width="24"
407	height="50"
408	viewBox="0 0 28 28"
409	fill="none"
410	xmlns="http://www.w3.org/2000/svg"
411	>
412	<path
413	d="M19.8691 14.6191L11.1191 23.3691C11.0378 23.4504 10.9413 23.5148 10.835 23.5588C10.7288 23.6028 10.615 23.6255 10.5 23.6255C10.385 23.6255 10.2712 23.6028 10.165 23.5588C10.0587 23.5148 9.96223 23.4504 9.88094 23.3691C9.79964 23.2878 9.73515 23.1913 9.69115 23.085C9.64716 22.9788 9.62451 22.865 9.62451 22.75C9.62451 22.635 9.64716 22.5212 9.69115 22.415C9.73515 22.3087 9.79964 22.2122 9.88094 22.1309L18.013 14L9.88094 5.86906C9.71675 5.70488 9.62451 5.48219 9.62451 5.25C9.62451 5.01781 9.71675 4.79512 9.88094 4.63094C10.0451 4.46675 10.2678 4.37451 10.5 4.37451C10.7322 4.37451 10.9549 4.46675 11.1191 4.63094L19.8691 13.3809C19.9504 13.4622 20.015 13.5587 20.059 13.6649C20.103 13.7712 20.1257 13.885 20.1257 14C20.1257 14.115 20.103 14.2288 20.059 14.3351C20.015 14.4413 19.9504 14.5378 19.8691 14.6191Z"
414	fill="<?php echo esc_attr( $navigator_color ); ?>"
415	/>
416	</svg>
417	</button>
418	</div>
419	<?php endif; ?>
420	</div>
421	</div>
422	<?php
423
424	wp_reset_postdata();
425
426	return ob_get_clean();
427	}
428
429
430	private function get_relative_time( $date_string ) {
431	$post_date = new \DateTime( $date_string );
432	$now = new \DateTime();
433	$interval = $now->diff( $post_date );
434	$weeks = floor( $interval->days / 7 );
435
436	if ( $weeks >= 1 ) {
437	return $weeks . ' week' . ( $weeks > 1 ? 's' : '' ) . ' ago';
438	}
439	return 'Less than a week ago';
440	}
441
442	}
443