PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.14.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.14.0
2.14.0 2.13.0 2.13.1 2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 All 81 releases
ablocks / includes / blocks / news-ticker / block.php

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

449 lines 18.1 KB
No matching file
Up and down to move Enter to open Esc to close
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 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_label_css( $attributes, $device ); } )
29 );
30
31 $css_generator->add_class_styles(
32 '{{WRAPPER}} .ablocks-block-news-ticker__label:hover',
33 $this->get_label_color_hover_css( $attributes ),
34 $this->get_label_color_hover_css( $attributes, 'Tablet' ),
35 $this->get_label_color_hover_css( $attributes, 'Mobile' ),
36 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_label_color_hover_css( $attributes, $device ); } )
37 );
38
39 $css_generator->add_class_styles(
40 '{{WRAPPER}} .ablocks-block-news-ticker',
41 $this->get_ticker_content_css( $attributes ),
42 $this->get_ticker_content_css( $attributes, 'Tablet' ),
43 $this->get_ticker_content_css( $attributes, 'Mobile' ),
44 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_ticker_content_css( $attributes, $device ); } )
45 );
46
47 $css_generator->add_class_styles(
48 '{{WRAPPER}} .ablocks-block-news-ticker__marquee',
49 $this->get_ticker_color_css( $attributes ),
50 $this->get_ticker_color_css( $attributes, 'Tablet' ),
51 $this->get_ticker_color_css( $attributes, 'Mobile' ),
52 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_ticker_color_css( $attributes, $device ); } )
53 );
54
55 $css_generator->add_class_styles(
56 '{{WRAPPER}} .ablocks-block-news-ticker__marquee:hover',
57 $this->get_ticker_color_hover_css( $attributes ),
58 $this->get_ticker_color_hover_css( $attributes, 'Tablet' ),
59 $this->get_ticker_color_hover_css( $attributes, 'Mobile' ),
60 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_ticker_color_hover_css( $attributes, $device ); } )
61 );
62
63 $css_generator->add_class_styles(
64 '{{WRAPPER}} .ablocks-block-news-ticker--icons',
65 $this->get_navigator_css( $attributes )
66 );
67 $css_generator->add_class_styles(
68 '{{WRAPPER}} .ablocks-block-news-ticker--icons__prev',
69 $this->get_navigator_color_css( $attributes )
70 );
71 $css_generator->add_class_styles(
72 '{{WRAPPER}} .ablocks-block-news-ticker--icons__next',
73 $this->get_navigator_color_css( $attributes )
74 );
75 $css_generator->add_class_styles(
76 '{{WRAPPER}} .ablocks-block-news-ticker--icons__pause',
77 $this->get_navigator_color_css( $attributes )
78 );
79 $css_generator->add_class_styles(
80 '{{WRAPPER}} .ablocks-block-news-ticker--icons__resume',
81 $this->get_navigator_color_css( $attributes )
82 );
83 $css_generator->add_class_styles(
84 '{{WRAPPER}} .ablocks-block-news-ticker__list',
85 $this->get_ticker_list_styles_css( $attributes ),
86 $this->get_ticker_list_styles_css( $attributes, 'Tablet' ),
87 $this->get_ticker_list_styles_css( $attributes, 'Mobile' ),
88 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_ticker_list_styles_css( $attributes, $device ); } )
89 );
90
91 $css_generator->add_class_styles(
92 '{{WRAPPER}} .ablocks-block-news-ticker--date',
93 $this->get_show_time_css( $attributes )
94 );
95
96 return $css_generator->generate_css();
97 }
98
99 public function get_label_css( $attributes, $device = '' ) {
100 $label_css = [];
101 if ( isset( $attributes['isShowLabel'] ) && $attributes['isShowLabel'] ) {
102 $label_css['display'] = 'flex';
103 } else {
104 $label_css['display'] = 'none';
105 }
106
107 if ( isset( $attributes['labelPosition'] ) && $attributes['labelPosition'] === 'right' ) {
108 $label_css['right'] = '0';
109 $label_css['left'] = 'auto';
110 } else {
111 $label_css['left'] = '0';
112 $label_css['right'] = 'auto';
113 }
114
115 if ( ! empty( $attributes['tickerLabelShape'] ) ) {
116 switch ( $attributes['tickerLabelShape'] ) {
117 case 'small':
118 $label_css['clip-path'] = 'polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%)';
119 break;
120
121 case 'medium':
122 $label_css['clip-path'] = 'polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%)';
123 break;
124
125 case 'large':
126 $label_css['clip-path'] = 'polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%)';
127 break;
128
129 default:
130 $label_css['clip-path'] = '';
131 break;
132 }
133 }
134 $typographyValueGlobal = ! empty( $attributes['labelTypographyGlobal'] ) ? $attributes['labelTypographyGlobal'] : array();
135 $typography_css = ! empty( $attributes['labelTypography'] ) ? Typography::get_css( $attributes['labelTypography'], '', $device, $typographyValueGlobal ) : array();
136 $textShadowCss = ! empty( $attributes['labelTextShadow'] ) ? TextShadow::get_css( $attributes['labelTextShadow'], '', $device ) : array();
137 $textStrokeCss = ! empty( $attributes['labelTextStroke'] ) ? TextStroke::get_css( $attributes['labelTextStroke'], '', $device ) : array();
138 return array_merge(
139 [ 'color' => Color::get_css( isset( $attributes['labelColor'] ) ? $attributes['labelColor'] : '' ) ],
140 [ 'background' => Color::get_css( isset( $attributes['labelBackgroundColor'] ) ? $attributes['labelBackgroundColor'] : '' ) ],
141 Range::get_css([
142 'attributeValue' => $attributes['labelPadding'],
143 'attribute_object_key' => 'value',
144 'isResponsive' => true,
145 'defaultValue' => 10,
146 'hasUnit' => true,
147 'unitDefaultValue' => 'px',
148 'property' => 'padding',
149 'device' => $device,
150 ]),
151 $label_css,
152 $typography_css,
153 $textShadowCss,
154 $textStrokeCss
155 );
156 }
157
158
159 public function get_label_color_hover_css( $attributes ) {
160 return array_merge(
161 [ 'color' => Color::get_css( isset( $attributes['labelColorH'] ) ? $attributes['labelColorH'] : '' ) ],
162 [ 'background' => Color::get_css( isset( $attributes['labelBackgroundColorH'] ) ? $attributes['labelBackgroundColorH'] : '' ) ],
163 Range::get_css([
164 'attributeValue' => $attributes['labelColorTransition'],
165 'attribute_object_key' => 'value',
166 'defaultValue' => 0,
167 'unitDefaultValue' => 's',
168 'property' => 'transition-duration',
169 ]),
170 );
171 }
172
173 public function get_ticker_content_css( $attributes, $device = '' ) {
174 $ticker_content_css = [];
175
176 if ( isset( $attributes['isPositionSticky'] ) && $attributes['isPositionSticky'] ) {
177 if ( isset( $attributes['stickyPosition'] ) && $attributes['stickyPosition'] === 'up' ) {
178 $ticker_content_css['position'] = 'fixed';
179 $ticker_content_css['top'] = '32px';
180 $ticker_content_css['left'] = '0';
181 $ticker_content_css['width'] = '100%';
182
183 } elseif ( isset( $attributes['stickyPosition'] ) && $attributes['stickyPosition'] === 'down' ) {
184 $ticker_content_css['position'] = 'fixed';
185 $ticker_content_css['bottom'] = '0';
186 $ticker_content_css['left'] = '0';
187 $ticker_content_css['width'] = '100%';
188 }
189 }
190
191 return array_merge(
192 Range::get_css([
193 'attributeValue' => $attributes['tickerHeight'],
194 'attribute_object_key' => 'value',
195 'isResponsive' => true,
196 'defaultValue' => 50,
197 'hasUnit' => true,
198 'unitDefaultValue' => 'px',
199 'property' => 'height',
200 'device' => $device,
201 ]),
202 $ticker_content_css
203 );
204 }
205
206 public function get_ticker_list_styles_css( $attributes, $device = '' ) {
207 $ticker_list_styles_css = [];
208 if ( isset( $attributes['tickerListStyle'] ) ) {
209 switch ( $attributes['tickerListStyle'] ) {
210 case 'none':
211 $ticker_list_styles_css['list-style'] = 'none';
212 break;
213 case 'circle':
214 $ticker_list_styles_css['list-style'] = 'circle';
215 break;
216 case 'box':
217 $ticker_list_styles_css['list-style'] = 'square';
218 break;
219 default:
220 $ticker_list_styles_css['list-style'] = 'none';
221 }
222 }
223 $typographyValueGlobal = ! empty( $attributes['tickerTypographyGlobal'] ) ? $attributes['tickerTypographyGlobal'] : array();
224 $typography_css = ! empty( $attributes['tickerTypography'] ) ? Typography::get_css( $attributes['tickerTypography'], '', $device, $typographyValueGlobal ) : array();
225 $textShadowCss = ! empty( $attributes['tickerTextShadow'] ) ? TextShadow::get_css( $attributes['tickerTextShadow'], '', $device ) : array();
226 $textStrokeCss = ! empty( $attributes['tickerTextStroke'] ) ? TextStroke::get_css( $attributes['tickerTextStroke'], '', $device ) : array();
227
228 return array_merge(
229 $ticker_list_styles_css,
230 $typography_css,
231 $textShadowCss,
232 $textStrokeCss );
233 }
234
235 public function get_ticker_color_css( $attributes ) {
236 return array_merge(
237 [ 'color' => Color::get_css( isset( $attributes['tickerColor'] ) ? $attributes['tickerColor'] : '' ) ],
238 [ 'background' => Color::get_css( isset( $attributes['tickerBgColor'] ) ? $attributes['tickerBgColor'] : '' ) ],
239 );
240 }
241
242 public function get_ticker_color_hover_css( $attributes ) {
243 return array_merge(
244 [ 'color' => Color::get_css( isset( $attributes['tickerColorH'] ) ? $attributes['tickerColorH'] : '' ) ],
245 [ 'background' => Color::get_css( isset( $attributes['tickerBgColorH'] ) ? $attributes['tickerBgColorH'] : '' ) ],
246 Range::get_css([
247 'attributeValue' => $attributes['tickerColorTransition'],
248 'attribute_object_key' => 'value',
249 'defaultValue' => 0,
250 'unitDefaultValue' => 's',
251 'property' => 'transition-duration',
252 ])
253 );
254 }
255
256 public function get_navigator_css( $attributes ) {
257 $navigator_css = [];
258
259 if ( isset( $attributes['showTickerNavigator'] ) && $attributes['showTickerNavigator'] ) {
260 $navigator_css['display'] = 'flex';
261 } else {
262 $navigator_css['display'] = 'none';
263 }
264 if ( isset( $attributes['navigatorPosition'] ) && $attributes['navigatorPosition'] === 'right' ) {
265 $navigator_css['right'] = '0';
266 $navigator_css['left'] = 'auto';
267 } else {
268 $navigator_css['left'] = '0';
269 $navigator_css['right'] = 'auto';
270 }
271
272 return $navigator_css;
273 }
274 public function get_navigator_color_css( $attributes ) {
275 return [ 'background' => Color::get_css( isset( $attributes['navigatorBgColor'] ) ? $attributes['navigatorBgColor'] : '' ) ];
276
277 }
278
279 public function get_show_time_css( $attributes ) {
280 $time_show_css = [];
281
282 if ( isset( $attributes['isShowTime'] ) && $attributes['isShowTime'] ) {
283 $time_show_css['display'] = 'inline';
284 } else {
285 $time_show_css['display'] = 'none';
286 }
287
288 return $time_show_css;
289 }
290
291
292 public function render_block_content( $attributes, $content, $block_instance ) {
293 $sticky_label = sanitize_text_field( $attributes['stickyLabel'] ?? 'Breaking News' );
294 $sticky_label_tag = sanitize_html_class( $attributes['stickyLabelTag'] ?? 'span' );
295 $selected_posts = array_map( 'absint', $attributes['selectedPosts'] ?? [] );
296 $selected_pages = array_map( 'absint', $attributes['selectedPages'] ?? [] );
297 $slide_speed = sanitize_text_field( $attributes['slideSpeed'] ?? '2' );
298 $is_pause_on_over = filter_var( $attributes['isPauseOnOver'] ?? false, FILTER_VALIDATE_BOOLEAN );
299 $show_ticker_navigator = filter_var( $attributes['showTickerNavigator'] ?? false, FILTER_VALIDATE_BOOLEAN );
300 $custom_text = sanitize_text_field( $attributes['customText'] ?? '' );
301 $query_type = sanitize_text_field( $attributes['queryType'] ?? '' );
302 $navigator_color = Color::get_css( isset( $attributes['navigatorColor'] ) ? $attributes['navigatorColor'] : '' );
303 $slide_direction = sanitize_text_field( $attributes['slideDirection'] ?? 'left' );
304 $post_type = ! empty( $selected_pages ) ? 'page' : 'post';
305 $selected_items = ! empty( $selected_pages ) ? $selected_pages : $selected_posts;
306
307 $args = [
308 'post_type' => $post_type,
309 'post__in' => $selected_items,
310 'orderby' => 'post__in',
311 'posts_per_page' => -1,
312 ];
313
314 $query = new \WP_Query( $args );
315
316 ob_start();
317 ?>
318 <div class="ablocks-block-news-ticker"
319 data-slide-speed="<?php echo esc_attr( $slide_speed ); ?>"
320 data-slide-direction="<?php echo esc_attr( $slide_direction ); ?>"
321 data-pause-on-hover="<?php echo esc_attr( $is_pause_on_over ? 'true' : 'false' ); ?>"
322 data-navigator-color="<?php echo esc_attr( $navigator_color ); ?>">
323 <<?php echo esc_attr( $sticky_label_tag ); ?> class="ablocks-block-news-ticker__label">
324 <?php echo esc_html( $sticky_label ); ?>
325 </<?php echo esc_attr( $sticky_label_tag ); ?>>
326 <div class="ablocks-block-news-ticker__marquee">
327 <div class="ablocks-block-news-ticker_marquee--content">
328 <ul class="ablocks-block-news-ticker__list">
329 <?php if ( $query_type === 'customText' && ! empty( $attributes['lists'] ) ) : ?>
330 <?php foreach ( $attributes['lists'] as $item ) : ?>
331 <?php
332 $text = sanitize_text_field( $item['text'] ?? '' );
333 $href = esc_url( $item['link']['href'] ?? '' );
334 $target = ! empty( $item['link']['linkTarget'] ) ? 'target="_blank" rel="noopener noreferrer"' : '';
335 ?>
336 <li class="ablocks-block-news-ticker__item">
337 <span class="ablocks-block-news-ticker__custom-text">
338 <?php if ( ! empty( $href ) ) : ?>
339 <a href="<?php echo esc_url( $href ); ?>" <?php echo esc_html( $target ); ?>>
340 <?php echo esc_html( $text ); ?>
341 </a>
342 <?php else : ?>
343 <?php echo esc_html( $text ); ?>
344 <?php endif; ?>
345 </span>
346 </li>
347 <?php endforeach; ?>
348 <?php elseif ( ! empty( $selected_items ) ) : ?>
349 <?php if ( $query->have_posts() ) :
350 while ( $query->have_posts() ) :
351 $query->the_post();
352 $has_link = ! empty( $attributes['pageLink'] ) || ! empty( $attributes['postLink'] );
353 $post_link = get_permalink();
354 $link_target = '_blank';
355 $title = get_the_title();
356 $date = esc_html( $this->get_relative_time( get_the_date() ) );
357 ?>
358 <?php if ( $has_link ) : ?>
359 <a href="<?php echo esc_url( $post_link ); ?>" target="<?php echo esc_attr( $link_target ); ?>">
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 </a>
365 <?php else : ?>
366 <li class="ablocks-block-news-ticker__item">
367 <?php echo esc_html( $title ); ?>
368 <span class="ablocks-block-news-ticker--date"><?php echo esc_html( $date ); ?></span>
369 </li>
370 <?php endif; ?>
371 <?php endwhile; ?>
372 <?php else : ?>
373 <li><?php
374 /* translators: %s template */
375 echo esc_html( sprintf( __( 'No %s found in the selection', 'ablocks' ), $post_type . 's' ) ); ?></li>
376 <?php endif; ?>
377 <?php else : ?>
378 <li><?php esc_html_e( 'No items selected', 'ablocks' ); ?></li>
379 <?php endif; ?>
380 </ul>
381 </div>
382
383 <?php if ( $show_ticker_navigator ) : ?>
384 <div class="ablocks-block-news-ticker--icons">
385 <button class="ablocks-block-news-ticker--icons__prev">
386 <svg
387 width="24"
388 height="50"
389 viewBox="0 0 28 28"
390 fill="none"
391 xmlns="http://www.w3.org/2000/svg"
392 >
393 <path
394 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"
395 fill="<?php echo esc_attr( $navigator_color ); ?>"
396 />
397 </svg>
398 </button>
399 <button
400 aria-label="Pause Button"
401 title="Pause Button"
402 class="ablocks-block-news-ticker--icons__pause">
403 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="50" fill="currentColor">
404 <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
405 </svg>
406 </button>
407 <button
408 aria-label="Next Button"
409 title="Next Button"
410 class="ablocks-block-news-ticker--icons__next">
411 <svg
412 width="24"
413 height="50"
414 viewBox="0 0 28 28"
415 fill="none"
416 xmlns="http://www.w3.org/2000/svg"
417 >
418 <path
419 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"
420 fill="<?php echo esc_attr( $navigator_color ); ?>"
421 />
422 </svg>
423 </button>
424 </div>
425 <?php endif; ?>
426 </div>
427 </div>
428 <?php
429
430 wp_reset_postdata();
431
432 return ob_get_clean();
433 }
434
435
436 private function get_relative_time( $date_string ) {
437 $post_date = new \DateTime( $date_string );
438 $now = new \DateTime();
439 $interval = $now->diff( $post_date );
440 $weeks = floor( $interval->days / 7 );
441
442 if ( $weeks >= 1 ) {
443 return $weeks . ' week' . ( $weeks > 1 ? 's' : '' ) . ' ago';
444 }
445 return 'Less than a week ago';
446 }
447
448 }
449