ablocks / includes / blocks / marquee / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.15.0, at includes/blocks/marquee/block.php

117 lines 4.0 KB

Raw Download Zip

1	<?php
2	namespace ABlocks\Blocks\Marquee;
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\Range;
12
13
14	class Block extends BlockBaseAbstract {
15	protected $block_name = 'marquee';
16
17	public function build_css_v1( $attributes ) {
18	// Generate CSS start
19	$css_generator = new CssGenerator( $attributes, $this->block_name );
20
21	$css_generator->add_class_styles(
22	'{{WRAPPER}} .ablocks-block-marquee .ablocks-block-marquee__children',
23	$this->get_inner_block_css( $attributes ),
24	$this->get_inner_block_css( $attributes, 'Tablet' ),
25	$this->get_inner_block_css( $attributes, 'Mobile' ),
26	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_block_css( $attributes, $device ); } )
27	);
28
29	$css_generator->add_class_styles(
30	'{{WRAPPER}}',
31	$this->get_marquee_height_css( $attributes ),
32	$this->get_marquee_height_css( $attributes, 'Tablet' ),
33	$this->get_marquee_height_css( $attributes, 'Mobile' ),
34	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_marquee_height_css( $attributes, $device ); } )
35	);
36
37	return $css_generator->generate_css();
38	}
39	public function build_css_v2( $attributes ) {
40	// Generate CSS start
41	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
42
43	$css_generator->add_class_styles(
44	'{{WRAPPER}} .ablocks-block-marquee .ablocks-block-marquee__children',
45	$this->get_inner_block_css( $attributes ),
46	$this->get_inner_block_css( $attributes, 'Tablet' ),
47	$this->get_inner_block_css( $attributes, 'Mobile' ),
48	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_block_css( $attributes, $device ); } )
49	);
50
51	$css_generator->add_class_styles(
52	'{{WRAPPER}}',
53	$this->get_marquee_height_css( $attributes ),
54	$this->get_marquee_height_css( $attributes, 'Tablet' ),
55	$this->get_marquee_height_css( $attributes, 'Mobile' ),
56	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_marquee_height_css( $attributes, $device ); } )
57	);
58
59	return $css_generator->generate_css();
60	}
61
62	public function build_css( $attributes ) {
63	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
64	return $this->build_css_v2( $attributes );
65	}
66	return $this->build_css_v1( $attributes );
67	}
68
69	public function get_inner_block_css( $attributes, $device = '' ) {
70	$css = [];
71	if ( ! empty( $attributes['gap'][ 'value' . $device ] ) ) {
72	$gap_value = $attributes['gap'][ 'value' . $device ];
73	$gap_unit = ! empty( $attributes['gap'][ 'valueUnit' . $device ] )
74	? $attributes['gap'][ 'valueUnit' . $device ]
75	: 'px';
76
77	$css['gap'] = $gap_value . $gap_unit;
78	}
79	return array_merge(
80	Range::get_css([
81	'attributeValue' => $attributes['gap'],
82	'attribute_object_key' => 'value',
83	'isResponsive' => true,
84	'defaultValue' => 12,
85	'hasUnit' => false,
86	'unitDefaultValue' => 'px',
87	'property' => 'gap',
88	'device' => $device,
89	]),
90	$css
91	);
92	}
93
94	/**
95	* Viewport height of an Up/Down marquee, read by style.css through
96	* --ablocks-marquee-height (falls back to 200px there). Mirrors
97	* getMarqueeHeightCSS() in src/blocks/marquee/styling.js.
98	*/
99	public function get_marquee_height_css( $attributes, $device = '' ) {
100	$direction = isset( $attributes['marqueeDirection'] ) ? $attributes['marqueeDirection'] : '';
101	if ( 'up' !== $direction && 'down' !== $direction ) {
102	return [];
103	}
104	return Range::get_css([
105	'attributeValue' => isset( $attributes['marqueeHeight'] ) ? $attributes['marqueeHeight'] : [],
106	'attributeObjectKey' => 'value',
107	'isResponsive' => true,
108	'defaultValue' => 200,
109	'hasUnit' => true,
110	'unitDefaultValue' => 'px',
111	'property' => '--ablocks-marquee-height',
112	'device' => $device,
113	]);
114	}
115
116	}
117