ablocks / includes / blocks / image-hotspot / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.9.1, at includes/blocks/image-hotspot/block.php

315 lines 10.1 KB

Raw Download Zip

1	<?php
2	namespace ABlocks\Blocks\ImageHotspot;
3
4	use ABlocks\Controls\Range;
5
6	if ( ! defined( 'ABSPATH' ) ) {
7	exit;
8	}
9
10	use ABlocks\Classes\BlockBaseAbstract;
11	use ABlocks\Classes\CssGenerator;
12	use ABlocks\Controls\BoxShadow;
13
14
15	class Block extends BlockBaseAbstract {
16	protected $block_name = 'image-hotspot';
17
18	public function build_css( $attributes ) {
19
20	$css_generator = new CssGenerator( $attributes );
21
22	$css_generator->add_class_styles(
23	'{{WRAPPER}} .ablocks-image-hotspot__pin:after',
24	[
25	'animation' => $attributes['animationType'],
26	]
27	);
28
29	// Loop through lists and apply styles for each pin
30	if ( ! empty( $attributes['lists'] ) ) {
31	foreach ( $attributes['lists'] as $list ) {
32	$css_generator->add_class_styles(
33	"{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}",
34	$this->get_pin_css( $attributes, $list )
35	);
36
37	$css_generator->add_class_styles(
38	"{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}:after",
39	$this->get_pin_effect_css( $attributes, $list )
40	);
41
42	$css_generator->add_class_styles(
43	"{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}:hover",
44	$this->get_pin_hover_css( $attributes, $list )
45	);
46
47	$css_generator->add_class_styles(
48	"{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}:hover:after",
49	$this->get_pin_hover_effect_css( $attributes, $list )
50	);
51	}//end foreach
52	}//end if
53
54	// Tooltip content animation
55	$css_generator->add_class_styles(
56	'{{WRAPPER}} .ablocks-image-hotspot__tooltip-content',
57	$this->get_tooltip_content_css( $attributes )
58	);
59
60	$css_generator->add_class_styles(
61	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active',
62	$this->get_active_content_css( $attributes ),
63	$this->get_active_content_css( $attributes, 'Tablet' ),
64	$this->get_active_content_css( $attributes, 'Mobile' )
65	);
66
67	$css_generator->add_class_styles(
68	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
69	$this->get_active_content_hover_css( $attributes ),
70	$this->get_active_content_hover_css( $attributes, 'Tablet' ),
71	$this->get_active_content_hover_css( $attributes, 'Mobile' )
72	);
73
74	return $css_generator->generate_css();
75	}
76
77	public function get_pin_css( $attributes, $list ) {
78	return [
79	'background-color' => ! empty( $list['pinColorEffect'] ) ? $list['pinColorEffect'] : $attributes['pinColorEffect'],
80	'width' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
81	'height' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
82	'transform' => 'translate(-50%, -50%)',
83	];
84	}
85
86	public function get_pin_effect_css( $attributes, $list ) {
87	return [
88	'background-color' => ! empty( $list['pinColor'] ) ? $list['pinColor'] : $attributes['pinColor'],
89	'width' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
90	'height' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
91	];
92	}
93
94	public function get_pin_hover_css( $attributes, $list ) {
95	return [
96	'background-color' => ! empty( $list['pinHoverColor'] ) ? $list['pinHoverColor'] : $attributes['pinHoverColor'],
97	'transform' => 'translate(-50%, -50%)',
98	'--ablocks-hotspot-effect-max-scale' => ! empty( $list['pinHoverSize'] ) ? $list['pinHoverSize'] : $attributes['pinHoverSize'],
99	];
100	}
101
102	public function get_pin_hover_effect_css( $attributes, $list ) {
103	return [
104	'background-color' => ! empty( $list['pinHoverColor'] ) ? $list['pinHoverColor'] : $attributes['pinHoverColor'],
105	'--ablocks-hotspot-effect-max-scale' => ! empty( $list['pinHoverSize'] ) ? $list['pinHoverSize'] : $attributes['pinHoverSize'],
106	];
107	}
108
109	public function get_tooltip_content_css( $attributes ) {
110	// Extract the attributes
111	$content_position = $attributes['contentPosition'];
112	$content_animation = $attributes['contentAnimation'];
113
114	// Initialize transform values for sliding animations
115	$translateX_start = '0px';
116	$translateY_start = '0px';
117	$translateX_end = '-50%';
118	$translateY_end = '0px';
119
120	// Default transform for bottom position
121	$content_transform = 'translate(-50%, 40px)';
122
123	if ( $content_position === 'top' ) {
124	$content_transform = 'translate(-50%, calc(-100% - 40px))';
125	} elseif ( $content_position === 'left' ) {
126	$content_transform = 'translate(calc(-100% - 40px), -50%)';
127	} elseif ( $content_position === 'right' ) {
128	$content_transform = 'translate(40px, -50%)';
129	}
130
131	// Set default animation duration and ease if not provided
132	$animation_duration = '0.5s';
133	$animation_ease = 'ease';
134
135	// Set animation style dynamically based on contentAnimation
136	$animation_style = '';
137	if ( $content_animation === 'ablocks-hotspot-fadeIn' ) {
138	$animation_style = 'ablocks-hotspot-fadeIn 1.0s ease forwards';
139	} elseif ( $content_animation === 'ablocks-hotspot-fadeGrow' ) {
140	$animation_style = 'ablocks-hotspot-fadeGrow 0.5s ease';
141	switch ( $content_position ) {
142	case 'top':
143	$translateX_end = '-50%';
144	$translateY_end = 'calc(-100% - 40px)';
145	$translateX_start = $translateX_end;
146	$translateY_start = $translateY_end;
147	break;
148	case 'bottom':
149	$translateX_end = '-50%';
150	$translateY_end = '40px';
151	$translateX_start = $translateX_end;
152	$translateY_start = $translateY_end;
153	break;
154	case 'left':
155	$translateX_end = 'calc(-100% - 40px)';
156	$translateY_end = '-50%';
157	$translateX_start = $translateX_end;
158	$translateY_start = $translateY_end;
159	break;
160	case 'right':
161	$translateX_end = '40px';
162	$translateY_end = '-50%';
163	$translateX_start = $translateX_end;
164	$translateY_start = $translateY_end;
165	break;
166	}//end switch
167	// phpcs:ignore WordPress.PHP.StrictInArray.MissingTrueStrict
168	} elseif ( in_array( $content_animation, [ 'ablocks-hotspot-slideInTop', 'ablocks-hotspot-slideInBottom', 'ablocks-hotspot-slideInLeft', 'ablocks-hotspot-slideInRight' ] ) ) {
169	$animation_style = "ablocks-hotspot-slideIn {$animation_duration} {$animation_ease} forwards";
170	}//end if
171
172	// Handle specific sliding animations per position
173	switch ( $content_position ) {
174	case 'top':
175	$translateX_end = '-50%';
176	$translateY_end = 'calc(-100% - 40px)';
177	$translateX_start = $translateX_end;
178	$translateY_start = $translateY_end;
179
180	switch ( $content_animation ) {
181	case 'ablocks-hotspot-slideInLeft':
182	$translateX_start = 'calc(-50% - 40px)';
183	break;
184	case 'ablocks-hotspot-slideInRight':
185	$translateX_start = 'calc(-50% + 40px)';
186	break;
187	case 'ablocks-hotspot-slideInTop':
188	$translateY_start = 'calc(-100% - 60px)';
189	break;
190	case 'ablocks-hotspot-slideInBottom':
191	$translateY_start = 'calc(-100% + 40px)';
192	break;
193	}
194	break;
195
196	case 'bottom':
197	$translateX_end = '-50%';
198	$translateY_end = '40px';
199	$translateX_start = $translateX_end;
200	$translateY_start = $translateY_end;
201
202	switch ( $content_animation ) {
203	case 'ablocks-hotspot-slideInLeft':
204	$translateX_start = 'calc(-50% - 40px)';
205	break;
206	case 'ablocks-hotspot-slideInRight':
207	$translateX_start = 'calc(-50% + 40px)';
208	break;
209	case 'ablocks-hotspot-slideInTop':
210	$translateY_start = 'calc(40px - 40px)';
211	break;
212	case 'ablocks-hotspot-slideInBottom':
213	$translateY_start = 'calc(40px + 40px)';
214	break;
215	}
216	break;
217
218	case 'left':
219	$translateX_end = 'calc(-100% - 40px)';
220	$translateY_end = '-50%';
221	$translateX_start = $translateX_end;
222	$translateY_start = $translateY_end;
223
224	switch ( $content_animation ) {
225	case 'ablocks-hotspot-slideInLeft':
226	$translateX_start = 'calc(-100% - 40px - 40px)';
227	break;
228	case 'ablocks-hotspot-slideInRight':
229	$translateX_start = 'calc(-100% - 40px + 40px)';
230	break;
231	case 'ablocks-hotspot-slideInTop':
232	$translateY_start = 'calc(-50% - 40px)';
233	break;
234	case 'ablocks-hotspot-slideInBottom':
235	$translateY_start = 'calc(-50% + 40px)';
236	break;
237	}
238	break;
239
240	case 'right':
241	$translateX_end = '40px';
242	$translateY_end = '-50%';
243	$translateX_start = $translateX_end;
244	$translateY_start = $translateY_end;
245
246	switch ( $content_animation ) {
247	case 'ablocks-hotspot-slideInLeft':
248	$translateX_start = 'calc(40px - 40px)';
249	break;
250	case 'ablocks-hotspot-slideInRight':
251	$translateX_start = 'calc(40px + 40px)';
252	break;
253	case 'ablocks-hotspot-slideInTop':
254	$translateY_start = 'calc(-50% - 40px)';
255	break;
256	case 'ablocks-hotspot-slideInBottom':
257	$translateY_start = 'calc(-50% + 40px)';
258	break;
259	}
260	break;
261	}//end switch
262
263	// Return the final styles as an array
264	return [
265	'animation' => $animation_style,
266	'transform' => $content_transform,
267	'--ablocks-hotspot-translateX-start' => $translateX_start,
268	'--ablocks-hotspot-translateY-start' => $translateY_start,
269	'--ablocks-hotspot-translateX-end' => $translateX_end,
270	'--ablocks-hotspot-translateY-end' => $translateY_end,
271	];
272	}
273
274	public function get_active_content_css( $attributes, $device = '' ) {
275	$css = array();
276
277	// Set background color
278	if ( ! empty( $attributes['backgroundColor'] ) ) {
279	$css['background-color'] = $attributes['backgroundColor'];
280	}
281
282	if ( isset( $width[ 'value' . $device ] ) && ! empty( $width[ 'value' . $device ] ) ) {
283
284	if ( ! empty( $width[ 'valueUnit' . $device ] ) ) {
285	$css['width'] = $width[ 'value' . $device ] . $width[ 'valueUnit' . $device ];
286	} else {
287	$css['width'] = $width[ 'value' . $device ] . 'px';
288	}
289	}
290
291	$css = array_merge( $css,
292	Range::get_css([
293	'attributeValue' => $attributes['childWidth'],
294	'attribute_object_key' => 'value',
295	'isResponsive' => true,
296	'defaultValue' => 200,
297	'hasUnit' => true,
298	'unitDefaultValue' => 'px',
299	'property' => 'width',
300	'device' => $device,
301	]),
302	isset( $attributes['commonBoxShadow'] ) ? BoxShadow::get_css( $attributes['commonBoxShadow'], '', $device ) : [] );
303
304	return $css;
305	}
306
307	public function get_active_content_hover_css( $attributes, $device = '' ) {
308
309	$css = isset( $attributes['commonBoxShadow'] ) ? BoxShadow::get_hover_css( $attributes['commonBoxShadow'], '', $device ) : [];
310
311	return $css;
312	}
313
314	}
315