ablocks / includes / blocks / stripe-button / block.php

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

292 lines 11.8 KB

Raw Download Zip

1	<?php
2	namespace ABlocks\Blocks\StripeButton;
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\Alignment;
12	use ABlocks\Controls\Border;
13	use ABlocks\Controls\BoxShadow;
14	use ABlocks\Controls\Typography;
15	use ABlocks\Controls\Dimensions;
16	use ABlocks\Controls\TextShadow;
17	use ABlocks\Controls\Icon;
18	use ABlocks\Controls\Range;
19	use ABlocks\Controls\Color;
20	class Block extends BlockBaseAbstract {
21	protected $block_name = 'stripe-button';
22
23	public function build_css_v1( $attributes ) {
24
25	// Generate CSS start
26	$css_generator = new CssGenerator( $attributes, $this->block_name );
27
28	// Generate wrapper CSS start
29	$css_generator->add_class_styles(
30	'{{WRAPPER}}',
31	$this->get_wrapper_css( $attributes ),
32	$this->get_wrapper_css( $attributes, 'Tablet' ),
33	$this->get_wrapper_css( $attributes, 'Mobile' ),
34	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
35	);
36	// Generate wrapper CSS end
37
38	// Generate button CSS start
39	$css_generator->add_class_styles(
40	'{{WRAPPER}} .ablocks-block-container .ablocks-stripe-button',
41	$this->get_button_css( $attributes ),
42	$this->get_button_css( $attributes, 'Tablet' ),
43	$this->get_button_css( $attributes, 'Mobile' ),
44	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
45	);
46	// Generate button CSS end
47
48	// Generate button hover CSS start
49	$css_generator->add_class_styles(
50	'{{WRAPPER}} .ablocks-block-container .ablocks-stripe-button:hover',
51	$this->get_button_hover_css( $attributes ),
52	$this->get_button_hover_css( $attributes, 'Tablet' ),
53	$this->get_button_hover_css( $attributes, 'Mobile' ),
54	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
55	);
56
57	// Generate button icon hover CSS
58	$css_generator->add_class_styles(
59	'{{WRAPPER}} .ablocks-block-container .ablocks-stripe-button:hover .ablocks-icon-wrap svg.ablocks-svg-icon',
60	$this->get_icon_hover_css( $attributes ),
61	$this->get_icon_hover_css( $attributes, 'Tablet' ),
62	$this->get_icon_hover_css( $attributes, 'Mobile' ),
63	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_hover_css( $attributes, $device ); } )
64	);
65
66	// Generate button text CSS start
67	$css_generator->add_class_styles(
68	'{{WRAPPER}} .ablocks-block-container .ablocks-stripe-button .ablocks-stripe-button__text',
69	$this->get_button_text_css( $attributes )
70	);
71
72	// Generate button icon CSS start
73	$css_generator->add_class_styles(
74	'{{WRAPPER}} .ablocks-icon-wrap',
75	Icon::get_wrapper_css( $attributes ),
76	Icon::get_wrapper_css( $attributes, 'Tablet' ),
77	Icon::get_wrapper_css( $attributes, 'Mobile' ),
78	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
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	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
86	);
87
88	$css_generator->add_class_styles(
89	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
90	Icon::get_element_image_css( $attributes ),
91	Icon::get_element_image_css( $attributes, 'Tablet' ),
92	Icon::get_element_image_css( $attributes, 'Mobile' ),
93	);
94	$css_generator->add_class_styles(
95	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
96	Icon::get_element_image_hover_css( $attributes ),
97	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
98	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
99	);
100	$css_generator->add_class_styles(
101	'{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
102	Icon::get_element_css( $attributes ),
103	Icon::get_element_css( $attributes, 'Tablet' ),
104	Icon::get_element_css( $attributes, 'Mobile' ),
105	);
106	$css_generator->add_class_styles(
107	'{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
108	Icon::get_element_image_hover_css( $attributes ),
109	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
110	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
111	);
112
113	return $css_generator->generate_css();
114	}
115
116	public function build_css_v2( $attributes ) {
117
118	// Generate CSS start
119	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
120
121	// Generate wrapper CSS start
122	$css_generator->add_class_styles(
123	'{{WRAPPER}}',
124	$this->get_wrapper_css( $attributes ),
125	$this->get_wrapper_css( $attributes, 'Tablet' ),
126	$this->get_wrapper_css( $attributes, 'Mobile' ),
127	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
128	);
129	// Generate wrapper CSS end
130
131	// Generate button CSS start
132	$css_generator->add_class_styles(
133	'{{WRAPPER}} .ablocks-stripe-button',
134	$this->get_button_css( $attributes ),
135	$this->get_button_css( $attributes, 'Tablet' ),
136	$this->get_button_css( $attributes, 'Mobile' ),
137	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_css( $attributes, $device ); } )
138	);
139	// Generate button CSS end
140
141	// Generate button hover CSS start
142	$css_generator->add_class_styles(
143	'{{WRAPPER}} .ablocks-stripe-button:hover',
144	$this->get_button_hover_css( $attributes ),
145	$this->get_button_hover_css( $attributes, 'Tablet' ),
146	$this->get_button_hover_css( $attributes, 'Mobile' ),
147	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_hover_css( $attributes, $device ); } )
148	);
149
150	// Generate button icon hover CSS
151	$css_generator->add_class_styles(
152	'{{WRAPPER}} .ablocks-stripe-button:hover .ablocks-icon-wrap svg.ablocks-svg-icon',
153	$this->get_icon_hover_css( $attributes ),
154	$this->get_icon_hover_css( $attributes, 'Tablet' ),
155	$this->get_icon_hover_css( $attributes, 'Mobile' ),
156	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_icon_hover_css( $attributes, $device ); } )
157	);
158
159	// Generate button text CSS start
160	$css_generator->add_class_styles(
161	'{{WRAPPER}} .ablocks-stripe-button .ablocks-stripe-button__text',
162	$this->get_button_text_css( $attributes )
163	);
164
165	// Generate button icon CSS start
166	$css_generator->add_class_styles(
167	'{{WRAPPER}} .ablocks-icon-wrap',
168	Icon::get_wrapper_css( $attributes ),
169	Icon::get_wrapper_css( $attributes, 'Tablet' ),
170	Icon::get_wrapper_css( $attributes, 'Mobile' ),
171	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
172	);
173	$css_generator->add_class_styles(
174	'{{WRAPPER}} .ablocks-icon-wrap:hover',
175	Icon::get_wrapper_hover_css( $attributes ),
176	Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
177	Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
178	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
179	);
180
181	$css_generator->add_class_styles(
182	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
183	Icon::get_element_image_css( $attributes ),
184	Icon::get_element_image_css( $attributes, 'Tablet' ),
185	Icon::get_element_image_css( $attributes, 'Mobile' ),
186	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
187	);
188	$css_generator->add_class_styles(
189	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
190	Icon::get_element_image_hover_css( $attributes ),
191	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
192	Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
193	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
194	);
195	$css_generator->add_class_styles(
196	'{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
197	Icon::get_element_css( $attributes ),
198	Icon::get_element_css( $attributes, 'Tablet' ),
199	Icon::get_element_css( $attributes, 'Mobile' ),
200	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
201	);
202	$css_generator->add_class_styles(
203	'{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-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	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
208	);
209
210	return $css_generator->generate_css();
211	}
212
213	public function build_css( $attributes ) {
214	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
215	return $this->build_css_v2( $attributes );
216	}
217	return $this->build_css_v1( $attributes );
218	}
219
220	public function get_wrapper_css( $attributes, $device = '' ) {
221	$css = [];
222	$position = isset( $attributes['position'][ 'value' . $device ] ) && $attributes['position'][ 'value' . $device ] !== 'stretch';
223
224	if ( $position ) {
225	$css['text-align'] = $attributes['position'][ 'value' . $device ];
226	}
227
228	return $css;
229	}
230
231	public function get_button_css( $attributes, $device = '' ) {
232	$css = [];
233
234	if ( ! empty( $attributes['background'] ) ) {
235	$css['background'] = Color::get_css( isset( $attributes['background'] ) ? $attributes['background'] : '' );
236	} else {
237	$css['background'] = $attributes['buttonType'];
238	}
239
240	if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
241	$css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
242	}
243
244	if ( isset( $attributes['position'][ 'value' . $device ] ) && $attributes['position'][ 'value' . $device ] === 'stretch' ) {
245	$css['width'] = '100%';
246	}
247	$typographyValueGlobal = ! empty( $attributes['typographyGlobal'] ) ? $attributes['typographyGlobal'] : array();
248	return array_merge(
249	$css,
250	[ 'color' => Color::get_css( isset( $attributes['textColor'] ) ? $attributes['textColor'] : '' ) ],
251	Range::get_css([
252	'attributeValue' => $attributes['iconSpace'],
253	'attribute_object_key' => 'value',
254	'isResponsive' => true,
255	'defaultValue' => 10,
256	'hasUnit' => true,
257	'unitDefaultValue' => 'px',
258	'property' => 'column-gap',
259	'device' => $device,
260	]),
261	Border::get_css( $attributes['border'], '', $device ),
262	BoxShadow::get_css( $attributes['boxShadow'], '', $device ),
263	Typography::get_css( $attributes['typography'], '', $device, $typographyValueGlobal ),
264	Dimensions::get_css( $attributes['padding'], 'padding', $device ),
265	);
266	}
267
268	public function get_button_hover_css( $attributes, $device = '' ) {
269	$css = [];
270	if ( ! empty( $attributes['transition'] ) ) {
271	$css['transition-duration'] = $attributes['transition'] . 's';
272	}
273	return array_merge(
274	$css,
275	[ 'color' => Color::get_css( isset( $attributes['textColorH'] ) ? $attributes['textColorH'] : '' ) ],
276	[ 'background' => Color::get_css( isset( $attributes['backgroundH'] ) ? $attributes['backgroundH'] : '' ) ],
277	Border::get_hover_css( $attributes['border'], '', $device ),
278	BoxShadow::get_hover_css( $attributes['boxShadow'], '', $device )
279	);
280	}
281
282	public function get_button_text_css( $attributes, $device = '' ) {
283	return TextShadow::get_css( $attributes['textShadow'] );
284	}
285
286	public function get_icon_hover_css( $attributes, $device = '' ) {
287	return [ 'color' => Color::get_css( isset( $attributes['textColorH'] ) ? $attributes['textColorH'] : '' ) ];
288	}
289
290
291	}
292