← All changes | includes/blocks/counter/block.php +366 -0 2.7.7 → 2.13.0 View file →

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