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
← All changes | includes/blocks/counter/block.php +383 -0 2.7.6 → 2.14.0 View file →
@@ -1,0 +1,383 @@
1 +<?php
2 +namespace ABlocks\Blocks\Counter;
3 +
4 +if ( ! defined( 'ABSPATH' ) ) {
5 + exit;
6 +}
7 +
8 +use ABlocks\Classes\BlockBaseAbstract;
9 +use ABlocks\Classes\CssGeneratorV2;
10 +use ABlocks\Classes\CssGenerator;
11 +use ABlocks\Controls\Alignment;
12 +use ABlocks\Controls\Typography;
13 +use ABlocks\Controls\Dimensions;
14 +use ABlocks\Controls\Icon;
15 +use ABlocks\Controls\Range;
16 +use ABlocks\Controls\Color;
17 +
18 +class Block extends BlockBaseAbstract {
19 + protected $block_name = 'counter';
20 +
21 + public function build_css_v1( $attributes ) {
22 + $css_generator = new CssGenerator( $attributes, $this->block_name );
23 + // wrapper css
24 + $css_generator->add_class_styles(
25 + '{{WRAPPER}}.ablocks-block--counter--number .ablocks-block-container',
26 + $this->get_number_wrapper_css( $attributes ),
27 + $this->get_number_wrapper_css( $attributes, 'Tablet' ),
28 + $this->get_number_wrapper_css( $attributes, 'Mobile' ),
29 + );
30 + // number text css
31 + $css_generator->add_class_styles(
32 + '{{WRAPPER}} .ablocks-counter__content',
33 + $this->get_number_text_css( $attributes ),
34 + $this->get_number_text_css( $attributes, 'Tablet' ),
35 + $this->get_number_text_css( $attributes, 'Mobile' ),
36 + );
37 + // heading text css
38 + $css_generator->add_class_styles(
39 + '{{WRAPPER}} .ablocks-counter__text',
40 + $this->get_heading_text_css( $attributes ),
41 + $this->get_heading_text_css( $attributes, 'Tablet' ),
42 + $this->get_heading_text_css( $attributes, 'Mobile' ),
43 + );
44 + // counter bar css
45 +
46 + // counter circle css
47 + $css_generator->add_class_styles(
48 + '{{WRAPPER}}.ablocks-block--counter--bar .ablocks-bar-counter__background',
49 + $this->get_counter_bar_bg_css( $attributes )
50 + );
51 +
52 + $css_generator->add_class_styles(
53 + '{{WRAPPER}}.ablocks-block--counter--bar .ablocks-bar-counter__progress',
54 + $this->get_counter_bar_progress_css( $attributes ),
55 + $this->get_counter_bar_progress_css( $attributes, 'Tablet' ),
56 + $this->get_counter_bar_progress_css( $attributes, 'Mobile' ),
57 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_counter_bar_progress_css( $attributes, $device ); } )
58 + );
59 + $css_generator->add_class_styles(
60 + '{{WRAPPER}}.ablocks-block--counter--circle',
61 + $this->get_counter_circle_css( $attributes ),
62 + $this->get_counter_circle_css( $attributes, 'Tablet' ),
63 + $this->get_counter_circle_css( $attributes, 'Mobile' ),
64 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_counter_circle_css( $attributes, $device ); } )
65 + );
66 + $css_generator->add_class_styles(
67 + '{{WRAPPER}}.ablocks-block--counter--circle .ablocks-circle-counter__background',
68 + $this->get_counter_circle_bg_css( $attributes )
69 + );
70 +
71 + $css_generator->add_class_styles(
72 + '{{WRAPPER}}.ablocks-block--counter--circle .ablocks-circle-counter__progress',
73 + $this->get_counter_circle_progress_css( $attributes )
74 + );
75 +
76 + $css_generator->add_class_styles(
77 + '{{WRAPPER}} .ablocks-icon-wrap',
78 + Icon::get_wrapper_css( $attributes ),
79 + Icon::get_wrapper_css( $attributes, 'Tablet' ),
80 + Icon::get_wrapper_css( $attributes, 'Mobile' ),
81 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
82 + );
83 + $css_generator->add_class_styles(
84 + '{{WRAPPER}} .ablocks-icon-wrap:hover',
85 + Icon::get_wrapper_hover_css( $attributes ),
86 + Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
87 + Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
88 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
89 + );
90 +
91 + $css_generator->add_class_styles(
92 + '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
93 + Icon::get_element_image_css( $attributes ),
94 + Icon::get_element_image_css( $attributes, 'Tablet' ),
95 + Icon::get_element_image_css( $attributes, 'Mobile' ),
96 + );
97 + $css_generator->add_class_styles(
98 + '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
99 + Icon::get_element_image_hover_css( $attributes ),
100 + Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
101 + Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
102 + );
103 + $css_generator->add_class_styles(
104 + '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
105 + Icon::get_element_css( $attributes ),
106 + Icon::get_element_css( $attributes, 'Tablet' ),
107 + Icon::get_element_css( $attributes, 'Mobile' ),
108 + );
109 + $css_generator->add_class_styles(
110 + '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
111 + Icon::get_element_image_hover_css( $attributes ),
112 + Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
113 + Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
114 + );
115 +
116 + return $css_generator->generate_css();
117 + }
118 + public function build_css_v2( $attributes ) {
119 + $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
120 + // wrapper css
121 + $css_generator->add_class_styles(
122 + '{{WRAPPER}}.ablocks-block--counter--bar:not(.ablocks-has-container),
123 + {{WRAPPER}}.ablocks-block--counter--bar .ablocks-block-container',
124 + $this->get_counter_bar_css( $attributes ),
125 + $this->get_counter_bar_css( $attributes, 'Tablet' ),
126 + $this->get_counter_bar_css( $attributes, 'Mobile' ),
127 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_counter_bar_css( $attributes, $device ); } )
128 + );
129 + $css_generator->add_class_styles(
130 + '{{WRAPPER}}.ablocks-block--counter--number:not(.ablocks-has-container),
131 + {{WRAPPER}}.ablocks-block--counter--number .ablocks-block-container',
132 + $this->get_number_wrapper_css( $attributes ),
133 + $this->get_number_wrapper_css( $attributes, 'Tablet' ),
134 + $this->get_number_wrapper_css( $attributes, 'Mobile' ),
135 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_number_wrapper_css( $attributes, $device ); } )
136 + );
137 + // number text css
138 + $css_generator->add_class_styles(
139 + '{{WRAPPER}} .ablocks-counter__content',
140 + $this->get_number_text_css( $attributes ),
141 + $this->get_number_text_css( $attributes, 'Tablet' ),
142 + $this->get_number_text_css( $attributes, 'Mobile' ),
143 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_number_text_css( $attributes, $device ); } )
144 + );
145 + // heading text css
146 + $css_generator->add_class_styles(
147 + '{{WRAPPER}} .ablocks-counter__text',
148 + $this->get_heading_text_css( $attributes ),
149 + $this->get_heading_text_css( $attributes, 'Tablet' ),
150 + $this->get_heading_text_css( $attributes, 'Mobile' ),
151 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_heading_text_css( $attributes, $device ); } )
152 + );
153 + // counter bar css
154 +
155 + // counter circle css
156 + $css_generator->add_class_styles(
157 + '{{WRAPPER}}.ablocks-block--counter--bar .ablocks-bar-counter__background',
158 + $this->get_counter_bar_bg_css( $attributes )
159 + );
160 +
161 + $css_generator->add_class_styles(
162 + '{{WRAPPER}}.ablocks-block--counter--bar .ablocks-bar-counter__progress',
163 + $this->get_counter_bar_progress_css( $attributes ),
164 + $this->get_counter_bar_progress_css( $attributes, 'Tablet' ),
165 + $this->get_counter_bar_progress_css( $attributes, 'Mobile' ),
166 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_counter_bar_progress_css( $attributes, $device ); } )
167 + );
168 +
169 + // double for transform rotate issue in frontend
170 + $css_generator->add_class_styles(
171 + '{{WRAPPER}}.ablocks-block--counter--circle:not(.ablocks-has-block-container)',
172 + $this->get_counter_circle_css( $attributes ),
173 + $this->get_counter_circle_css( $attributes, 'Tablet' ),
174 + $this->get_counter_circle_css( $attributes, 'Mobile' ),
175 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_counter_circle_css( $attributes, $device ); } )
176 + );
177 +
178 + $css_generator->add_class_styles(
179 + '{{WRAPPER}} .ablocks-block-container',
180 + $this->get_counter_circle_css( $attributes ),
181 + $this->get_counter_circle_css( $attributes, 'Tablet' ),
182 + $this->get_counter_circle_css( $attributes, 'Mobile' ),
183 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_counter_circle_css( $attributes, $device ); } )
184 + );
185 + $css_generator->add_class_styles(
186 + '{{WRAPPER}}.ablocks-block--counter--circle .ablocks-circle-counter__background',
187 + $this->get_counter_circle_bg_css( $attributes )
188 + );
189 +
190 + $css_generator->add_class_styles(
191 + '{{WRAPPER}}.ablocks-block--counter--circle .ablocks-circle-counter__progress',
192 + $this->get_counter_circle_progress_css( $attributes )
193 + );
194 +
195 + $css_generator->add_class_styles(
196 + '{{WRAPPER}} .ablocks-icon-wrap',
197 + Icon::get_wrapper_css( $attributes ),
198 + Icon::get_wrapper_css( $attributes, 'Tablet' ),
199 + Icon::get_wrapper_css( $attributes, 'Mobile' ),
200 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
201 + );
202 + $css_generator->add_class_styles(
203 + '{{WRAPPER}} .ablocks-icon-wrap:hover',
204 + Icon::get_wrapper_hover_css( $attributes ),
205 + Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
206 + Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
207 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
208 + );
209 + $css_generator->add_class_styles(
210 + '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
211 + Icon::get_element_image_css( $attributes ),
212 + Icon::get_element_image_css( $attributes, 'Tablet' ),
213 + Icon::get_element_image_css( $attributes, 'Mobile' ),
214 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
215 + );
216 + $css_generator->add_class_styles(
217 + '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
218 + Icon::get_element_image_hover_css( $attributes ),
219 + Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
220 + Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
221 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
222 + );
223 + $css_generator->add_class_styles(
224 + '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
225 + Icon::get_element_css( $attributes ),
226 + Icon::get_element_css( $attributes, 'Tablet' ),
227 + Icon::get_element_css( $attributes, 'Mobile' ),
228 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
229 + );
230 + $css_generator->add_class_styles(
231 + '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
232 + Icon::get_element_image_hover_css( $attributes ),
233 + Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
234 + Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
235 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
236 + );
237 +
238 + return $css_generator->generate_css();
239 + }
240 +
241 + public function build_css( $attributes ) {
242 + if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
243 + return $this->build_css_v2( $attributes );
244 + }
245 + return $this->build_css_v1( $attributes );
246 + }
247 +
248 + public function get_counter_bar_css( $attributes, $device = '' ) {
249 + $css = [];
250 +
251 + $alignment = isset( $attributes['alignment'] ) ? $attributes['alignment'] : [];
252 + $device_key = 'value' . $device;
253 +
254 + $alignment_value = isset( $alignment[ $device_key ] ) ? $alignment[ $device_key ] : ( $alignment['value'] ?? '' );
255 +
256 + if ( $alignment_value ) {
257 + $css['align-items'] = $alignment_value;
258 + }
259 +
260 + return $css;
261 + }
262 +
263 + public function get_number_wrapper_css( $attributes, $device = '' ) {
264 + $counterNumberWrapperCSS = [];
265 + $alignment = isset( $attributes['alignment'][ 'value' . $device ] )
266 + ? $attributes['alignment'][ 'value' . $device ]
267 + : '';
268 +
269 + if ( $alignment ) {
270 + $counterNumberWrapperCSS['justify-content'] = $alignment;
271 +
272 + if ( $alignment === 'center' ) {
273 + $counterNumberWrapperCSS['text-align'] = 'center';
274 + } elseif ( $alignment === 'flex-end' ) {
275 + $counterNumberWrapperCSS['text-align'] = 'right';
276 + }
277 + }
278 + return $counterNumberWrapperCSS;
279 + }
280 +
281 + public function get_number_text_css( $attributes, $device = '' ) {
282 + $css = [];
283 + if ( isset( $attributes['mediaPosition'] ) && $attributes['mediaPosition'] === 'leftOfNumber' || isset( $attributes['mediaPosition'] ) && $attributes['mediaPosition'] === 'rightOfNumber' || isset( $attributes['layout'] ) && $attributes['layout'] === 'bar' ) {
284 + $css['display'] = 'inline-flex';
285 + $css['align-items'] = 'center';
286 + $css['justify-content'] = 'center';
287 + } else {
288 + $css['display'] = 'block';
289 + }
290 + $typographyGlobal = ( isset( $attributes['numberTypographyGlobal'] ) ? $attributes['numberTypographyGlobal'] : '' );
291 + return array_merge(
292 + [ 'color' => Color::get_css( isset( $attributes['numberColor'] ) ? $attributes['numberColor'] : '' ) ],
293 + isset( $attributes['numberTypography'] ) ? Typography::get_css( $attributes['numberTypography'], '', $device, $typographyGlobal ) : [],
294 + isset( $attributes['numberMargin'] ) ? Dimensions::get_css( $attributes['numberMargin'], 'margin', '', $device ) : [],
295 + $css
296 + );
297 + }
298 +
299 + public function get_heading_text_css( $attributes, $device = '' ) {
300 + $typographyGlobal = ( isset( $attributes['headingTypographyGlobal'] ) ? $attributes['headingTypographyGlobal'] : '' );
301 + return array_merge(
302 + [ 'color' => Color::get_css( isset( $attributes['headingColor'] ) ? $attributes['headingColor'] : '' ) ],
303 + isset( $attributes['headingTypography'] ) ? Typography::get_css( $attributes['headingTypography'], '', $device, $typographyGlobal ) : [],
304 + isset( $attributes['headingMargin'] ) ? Dimensions::get_css( $attributes['headingMargin'], 'margin', $device ) : [],
305 + );
306 + }
307 +
308 +
309 + public function get_counter_bar_bg_css( $attributes ) {
310 + return [ 'background' => Color::get_css( isset( $attributes['barBackgroundColor'] ) ? $attributes['barBackgroundColor'] : '' ) ];
311 + }
312 +
313 + public function get_counter_bar_progress_css( $attributes, $device = '' ) {
314 + $counter_bar_progress_css = [];
315 + if ( ! empty( $attributes['barHeadingPosition'] ) ) {
316 + if ( $attributes['barHeadingPosition'] === 'inner' ) {
317 + $counter_bar_progress_css['justify-content'] = 'space-between';
318 + } elseif (
319 + $attributes['barHeadingPosition'] === 'top' ||
320 + $attributes['barHeadingPosition'] === 'bottom'
321 + ) {
322 + $counter_bar_progress_css['justify-content'] = 'right';
323 + }
324 + }
325 +
326 + return array_merge(
327 + [ 'background' => Color::get_css( isset( $attributes['barProgressColor'] ) ? $attributes['barProgressColor'] : '' ) ],
328 + Range::get_css([
329 + 'attributeValue' => $attributes['barSize'],
330 + 'attribute_object_key' => 'value',
331 + 'isResponsive' => true,
332 + 'defaultValue' => 40,
333 + 'hasUnit' => true,
334 + 'unitDefaultValue' => 'px',
335 + 'property' => 'height',
336 + 'device' => $device,
337 + ]),
338 + $counter_bar_progress_css,
339 + );
340 + }
341 +
342 + public function get_counter_circle_css( $attributes, $device = '' ) {
343 + $css = [];
344 +
345 + if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
346 + $css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
347 + $css['align-items'] = $attributes['alignment'][ 'value' . $device ];
348 + }
349 + return $css;
350 + }
351 +
352 +
353 + public function get_counter_circle_bg_css( $attributes ) {
354 + $counter_circle_bg_css = [];
355 + if ( ! empty( $attributes['circleStrokeSize'] ) ) {
356 + $counter_circle_bg_css['stroke-width'] = $attributes['circleStrokeSize'];
357 + }
358 +
359 + return array_merge(
360 + [ 'stroke' => Color::get_css( isset( $attributes['circleBackgroundColor'] ) ? $attributes['circleBackgroundColor'] : '' ) ],
361 + Range::get_css([
362 + 'attributeValue' => $attributes['circleStrokeSize'],
363 + 'attribute_object_key' => 'value',
364 + 'defaultValue' => 20,
365 + 'property' => 'stroke-width',
366 + ]),
367 + $counter_circle_bg_css,
368 + );
369 + }
370 +
371 + public function get_counter_circle_progress_css( $attributes ) {
372 + return array_merge(
373 + [ 'stroke' => Color::get_css( isset( $attributes['circleProgressColor'] ) ? $attributes['circleProgressColor'] : '' ) ],
374 + Range::get_css([
375 + 'attributeValue' => $attributes['circleStrokeSize'],
376 + 'attribute_object_key' => 'value',
377 + 'defaultValue' => 20,
378 + 'property' => 'stroke-width',
379 + ]),
380 + );
381 + }
382 +
383 +}