← All changes | includes/blocks/progress-tracker/block.php +86 -32 2.9.1 → 2.14.0 View file →

		@@ -6,8 +6,9 @@
6	6	}
7	7
8	8	use ABlocks\Classes\BlockBaseAbstract;
9	9	use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
10	11	use ABlocks\Controls\Alignment;
11	12	use ABlocks\Controls\TextShadow;
12	13	use ABlocks\Controls\TextStroke;
13	14	use ABlocks\Controls\Typography;
		@@ -13,22 +14,79 @@
13	14	use ABlocks\Controls\Typography;
14	15	use Google\Service\Slides\Shadow;
15	16	use ABlocks\Controls\Border;
16	17	use ABlocks\Controls\Range;
	18	+use ABlocks\Controls\Color;
17	19
18	20	class Block extends BlockBaseAbstract {
19	21	protected $block_name = 'progress-tracker';
20	22
21		- public function build_css( $attributes ) {
22		- // Generate CSS start
23		- $css_generator = new CssGenerator( $attributes );
24	23
	24	+ public function build_css_v1( $attributes ) {
	25	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
	26	+
	27	+ // Generate wrapper CSS start
	28	+ $css_generator->add_class_styles(
	29	+ '{{WRAPPER}} .ablocks-block-progress-circle',
	30	+ $this->get_wrapper_css( $attributes ),
	31	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	32	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	33	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
	34	+ );
	35	+
	36	+ $css_generator->add_class_styles(
	37	+ '{{WRAPPER}} .ablocks-block-progress__text',
	38	+ $this->get_content_css( $attributes ),
	39	+ $this->get_content_css( $attributes, 'Tablet' ),
	40	+ $this->get_content_css( $attributes, 'Mobile' ),
	41	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_css( $attributes, $device ); } )
	42	+ );
	43	+ // Progress Bar Background CSS
	44	+ $css_generator->add_class_styles(
	45	+ '{{WRAPPER}} .ablocks-block-progress-bar-track',
	46	+ $this->get_progress_bar_track_css( $attributes ),
	47	+ $this->get_progress_bar_track_css( $attributes, 'Tablet' ),
	48	+ $this->get_progress_bar_track_css( $attributes, 'Mobile' ),
	49	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_progress_bar_track_css( $attributes, $device ); } )
	50	+ );
	51	+
	52	+ $css_generator->add_class_styles(
	53	+ '{{WRAPPER}} .ablocks-block-progress-bar-track:hover',
	54	+ $this->get_progress_bar_hover_css( $attributes ),
	55	+ $this->get_progress_bar_hover_css( $attributes, 'Tablet' ),
	56	+ $this->get_progress_bar_hover_css( $attributes, 'Mobile' ),
	57	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_progress_bar_hover_css( $attributes, $device ); } )
	58	+ );
	59	+
	60	+ // Progress Bar Progress CSS
	61	+ $css_generator->add_class_styles(
	62	+ '{{WRAPPER}} .ablocks-block-progress-bar',
	63	+ $this->get_progress_bar_css( $attributes )
	64	+ );
	65	+
	66	+ // circle css
	67	+ $css_generator->add_class_styles(
	68	+ '{{WRAPPER}} .ablocks-block-progress-circle__svg-bar',
	69	+ $this->get_progress_circle_css( $attributes ),
	70	+ );
	71	+ $css_generator->add_class_styles(
	72	+ '{{WRAPPER}} .ablocks-block-progress-circle__svg-track',
	73	+ $this->get_progress_circle_bg_css( $attributes ),
	74	+ );
	75	+
	76	+ return $css_generator->generate_css();
	77	+ }
	78	+
	79	+
	80	+ public function build_css_v2( $attributes ) {
	81	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
25	82	// Generate wrapper CSS start
26	83	$css_generator->add_class_styles(
27	84	'{{WRAPPER}} .ablocks-block-progress-circle',
28	85	$this->get_wrapper_css( $attributes ),
29	86	$this->get_wrapper_css( $attributes, 'Tablet' ),
30		- $this->get_wrapper_css( $attributes, 'Mobile' )
	87	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	88	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
31	89	);
32	90
33	91	$css_generator->add_class_styles(
34	92	'{{WRAPPER}} .ablocks-block-progress__text',
		@@ -33,9 +91,10 @@
33	91	$css_generator->add_class_styles(
34	92	'{{WRAPPER}} .ablocks-block-progress__text',
35	93	$this->get_content_css( $attributes ),
36	94	$this->get_content_css( $attributes, 'Tablet' ),
37		- $this->get_content_css( $attributes, 'Mobile' )
	95	+ $this->get_content_css( $attributes, 'Mobile' ),
	96	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_css( $attributes, $device ); } )
38	97	);
39	98	// Progress Bar Background CSS
40	99	$css_generator->add_class_styles(
41	100	'{{WRAPPER}} .ablocks-block-progress-bar-track',
		@@ -40,9 +99,10 @@
40	99	$css_generator->add_class_styles(
41	100	'{{WRAPPER}} .ablocks-block-progress-bar-track',
42	101	$this->get_progress_bar_track_css( $attributes ),
43	102	$this->get_progress_bar_track_css( $attributes, 'Tablet' ),
44		- $this->get_progress_bar_track_css( $attributes, 'Mobile' )
	103	+ $this->get_progress_bar_track_css( $attributes, 'Mobile' ),
	104	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_progress_bar_track_css( $attributes, $device ); } )
45	105	);
46	106
47	107	$css_generator->add_class_styles(
48	108	'{{WRAPPER}} .ablocks-block-progress-bar-track:hover',
		@@ -47,9 +107,10 @@
47	107	$css_generator->add_class_styles(
48	108	'{{WRAPPER}} .ablocks-block-progress-bar-track:hover',
49	109	$this->get_progress_bar_hover_css( $attributes ),
50	110	$this->get_progress_bar_hover_css( $attributes, 'Tablet' ),
51		- $this->get_progress_bar_hover_css( $attributes, 'Mobile' )
	111	+ $this->get_progress_bar_hover_css( $attributes, 'Mobile' ),
	112	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_progress_bar_hover_css( $attributes, $device ); } )
52	113	);
53	114
54	115	// Progress Bar Progress CSS
55	116	$css_generator->add_class_styles(
		@@ -69,8 +130,16 @@
69	130
70	131	return $css_generator->generate_css();
71	132	}
72	133
	134	+ public function build_css( $attributes ) {
	135	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	136	+ return $this->build_css_v2( $attributes );
	137	+ }
	138	+ return $this->build_css_v1( $attributes );
	139	+ }
	140	+
	141	+
73	142	public function get_wrapper_css( $attributes, $device = '' ) {
74	143	$alignment_key = 'value' . $device;
75	144	$alignment = isset( $attributes['alignment'][ $alignment_key ] )
76	145	? $attributes['alignment'][ $alignment_key ]
		@@ -93,28 +162,22 @@
93	162	}
94	163
95	164
96	165	public function get_content_css( $attributes, $device = '' ) {
97		- $content_css = [];
98		- if ( ! empty( $attributes['contentColor'] ) ) {
99		- $content_css['color'] = $attributes['contentColor'];
100		- }
101	166	$typography = isset( $attributes['contentTypography'] ) ? $attributes['contentTypography'] : '';
102	167	$text_stroke = isset( $attributes['contentTextStroke'] ) ? $attributes['contentTextStroke'] : '';
103	168	$text_shadow = isset( $attributes['contentTextShadow'] ) ? $attributes['contentTextShadow'] : '';
	169	+ $typographyValueGlobal = ! empty( $attributes['contentTypographyGlobal'] ) ? $attributes['contentTypographyGlobal'] : array();
104	170	return array_merge(
105		- $content_css,
106		- Typography::get_css( $typography, '', $device ),
	171	+ [ 'color' => Color::get_css( isset( $attributes['contentColor'] ) ? $attributes['contentColor'] : '' ) ],
	172	+ Typography::get_css( $typography, '', $device, $typographyValueGlobal ),
107	173	TextStroke::get_css( $text_stroke, '', $device ),
108	174	TextShadow::get_css( $text_shadow, '', $device )
109	175	);
110	176	}
111	177	public function get_progress_bar_track_css( $attributes, $device = '' ) {
112		- $css = [];
113		- if ( ! empty( $attributes['barBackgroundColor'] ) ) {
114		- $css['background'] = $attributes['barBackgroundColor'];
115		- }
116	178	return array_merge(
	179	+ [ 'background' => Color::get_css( isset( $attributes['barBackgroundColor'] ) ? $attributes['barBackgroundColor'] : '' ) ],
117	180	Range::get_css([
118	181	'attributeValue' => $attributes['barHeightSize'],
119	182	'attribute_object_key' => 'value',
120	183	'isResponsive' => true,
		@@ -124,9 +187,8 @@
124	187	'property' => 'height',
125	188	'device' => $device,
126	189	]),
127	190	isset( $attributes['barBorder'] ) ? Border::get_css( $attributes['barBorder'], '', $device ) : [],
128		- $css,
129	191	);
130	192	}
131	193	public function get_progress_bar_hover_css( $attributes, $device = '' ) {
132	194	return array_merge(
		@@ -135,33 +197,26 @@
135	197	}
136	198
137	199	public function get_progress_bar_css( $attributes ) {
138	200	$css = [];
139		- if ( ! empty( $attributes['barProgressColor'] ) ) {
140		- $css['background'] = $attributes['barProgressColor'];
141		- }
142	201	if ( ! empty( $attributes['direction'] ) && $attributes['direction'] === 'left' ) {
143	202	$css['justify-content'] = 'right';
144	203	} elseif ( ! empty( $attributes['direction'] ) && $attributes['direction'] === 'right' ) {
145	204	$css['justify-content'] = 'left';
146	205	}
147		- return $css;
	206	+ return array_merge(
	207	+ $css,
	208	+ [ 'background' => Color::get_css( isset( $attributes['barProgressColor'] ) ? $attributes['barProgressColor'] : '' ) ]
	209	+ );
148	210	}
149	211
150	212	public function get_progress_circle_css( $attributes ) {
151		- $css = [];
152		- if ( $attributes['circleProgressColor'] ) {
153		- $css['stroke'] = $attributes['circleProgressColor'];
154		- }
155		- return $css;
	213	+ return [ 'stroke' => Color::get_css( isset( $attributes['circleProgressColor'] ) ? $attributes['circleProgressColor'] : '' ) ];
156	214	}
157	215
158	216	public function get_progress_circle_bg_css( $attributes ) {
159		- $css = [];
160		- if ( $attributes['circleBackgroundColor'] ) {
161		- $css['stroke'] = $attributes['circleBackgroundColor'];
162		- }
163	217	return array_merge(
	218	+ [ 'stroke' => Color::get_css( isset( $attributes['circleBackgroundColor'] ) ? $attributes['circleBackgroundColor'] : '' ) ],
164	219	Range::get_css([
165	220	'attributeValue' => $attributes['circleStrokeSize'],
166	221	'attribute_object_key' => 'value',
167	222	'defaultValue' => 10,
		@@ -167,8 +222,7 @@
167	222	'defaultValue' => 10,
168	223	'unitDefaultValue' => 'px',
169	224	'property' => 'stroke-width'
170	225	]),
171		- $css,
172	226	);
173	227	}
174	228	}