← All changes | includes/blocks/image-hotspot/block.php +126 -16 2.9.1 → 2.14.0 View file →

		@@ -1,8 +1,9 @@
1	1	<?php
2	2	namespace ABlocks\Blocks\ImageHotspot;
3	3
4	4	use ABlocks\Controls\Range;
	5	+use ABlocks\Controls\Color;
5	6
6	7	if ( ! defined( 'ABSPATH' ) ) {
7	8	exit;
8	9	}
		@@ -9,18 +10,88 @@
9	10
10	11	use ABlocks\Classes\BlockBaseAbstract;
11	12	use ABlocks\Classes\CssGenerator;
12	13	use ABlocks\Controls\BoxShadow;
	14	+use ABlocks\Classes\CssGeneratorV2;
13	15
14	16
15	17	class Block extends BlockBaseAbstract {
16	18	protected $block_name = 'image-hotspot';
17	19
18		- public function build_css( $attributes ) {
	20	+ public function build_css_v1( $attributes ) {
	21	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
19	22
20		- $css_generator = new CssGenerator( $attributes );
	23	+ $css_generator->add_class_styles(
	24	+ '{{WRAPPER}} .ablocks-image-hotspot__pin:after',
	25	+ [
	26	+ 'animation' => $attributes['animationType'],
	27	+ ]
	28	+ );
21	29
	30	+ // Loop through lists and apply styles for each pin
	31	+ if ( ! empty( $attributes['lists'] ) ) {
	32	+ foreach ( $attributes['lists'] as $list ) {
	33	+ $css_generator->add_class_styles(
	34	+ "{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}",
	35	+ $this->get_pin_css( $attributes, $list )
	36	+ );
	37	+
	38	+ $css_generator->add_class_styles(
	39	+ "{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}:after",
	40	+ $this->get_pin_effect_css( $attributes, $list )
	41	+ );
	42	+
	43	+ $css_generator->add_class_styles(
	44	+ "{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}:hover",
	45	+ $this->get_pin_hover_css( $attributes, $list )
	46	+ );
	47	+
	48	+ $css_generator->add_class_styles(
	49	+ "{{WRAPPER}} .ablocks-image-hotspot-list-{$list['id']}:hover:after",
	50	+ $this->get_pin_hover_effect_css( $attributes, $list )
	51	+ );
	52	+ }//end foreach
	53	+ }//end if
	54	+
	55	+ if ( $this->has_pin_icon( $attributes ) ) {
	56	+ $css_generator->add_class_styles(
	57	+ '{{WRAPPER}} .ablocks-image-hotspot__pin--has-icon .ablocks-icon-wrap',
	58	+ $this->get_pin_icon_css( $attributes )
	59	+ );
	60	+ $css_generator->add_class_styles(
	61	+ '{{WRAPPER}} .ablocks-image-hotspot__pin--has-icon .ablocks-icon-wrap svg.ablocks-svg-icon',
	62	+ $this->get_pin_icon_svg_css( $attributes )
	63	+ );
	64	+ }
	65	+
	66	+ // Tooltip content animation
22	67	$css_generator->add_class_styles(
	68	+ '{{WRAPPER}} .ablocks-image-hotspot__tooltip-content',
	69	+ $this->get_tooltip_content_css( $attributes )
	70	+ );
	71	+
	72	+ $css_generator->add_class_styles(
	73	+ '{{WRAPPER}} .ablocks-image-hotspot__tooltip--active',
	74	+ $this->get_active_content_css( $attributes ),
	75	+ $this->get_active_content_css( $attributes, 'Tablet' ),
	76	+ $this->get_active_content_css( $attributes, 'Mobile' ),
	77	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_active_content_css( $attributes, $device ); } )
	78	+ );
	79	+
	80	+ $css_generator->add_class_styles(
	81	+ '{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
	82	+ $this->get_active_content_hover_css( $attributes ),
	83	+ $this->get_active_content_hover_css( $attributes, 'Tablet' ),
	84	+ $this->get_active_content_hover_css( $attributes, 'Mobile' ),
	85	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_active_content_hover_css( $attributes, $device ); } )
	86	+ );
	87	+
	88	+ return $css_generator->generate_css();
	89	+ }
	90	+ public function build_css_v2( $attributes ) {
	91	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	92	+
	93	+ $css_generator->add_class_styles(
23	94	'{{WRAPPER}} .ablocks-image-hotspot__pin:after',
24	95	[
25	96	'animation' => $attributes['animationType'],
26	97	]
		@@ -50,8 +121,19 @@
50	121	);
51	122	}//end foreach
52	123	}//end if
53	124
	125	+ if ( $this->has_pin_icon( $attributes ) ) {
	126	+ $css_generator->add_class_styles(
	127	+ '{{WRAPPER}} .ablocks-image-hotspot__pin--has-icon .ablocks-icon-wrap',
	128	+ $this->get_pin_icon_css( $attributes )
	129	+ );
	130	+ $css_generator->add_class_styles(
	131	+ '{{WRAPPER}} .ablocks-image-hotspot__pin--has-icon .ablocks-icon-wrap svg.ablocks-svg-icon',
	132	+ $this->get_pin_icon_svg_css( $attributes )
	133	+ );
	134	+ }
	135	+
54	136	// Tooltip content animation
55	137	$css_generator->add_class_styles(
56	138	'{{WRAPPER}} .ablocks-image-hotspot__tooltip-content',
57	139	$this->get_tooltip_content_css( $attributes )
		@@ -60,9 +142,10 @@
60	142	$css_generator->add_class_styles(
61	143	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active',
62	144	$this->get_active_content_css( $attributes ),
63	145	$this->get_active_content_css( $attributes, 'Tablet' ),
64		- $this->get_active_content_css( $attributes, 'Mobile' )
	146	+ $this->get_active_content_css( $attributes, 'Mobile' ),
	147	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_active_content_css( $attributes, $device ); } )
65	148	);
66	149
67	150	$css_generator->add_class_styles(
68	151	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
		@@ -67,17 +150,48 @@
67	150	$css_generator->add_class_styles(
68	151	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
69	152	$this->get_active_content_hover_css( $attributes ),
70	153	$this->get_active_content_hover_css( $attributes, 'Tablet' ),
71		- $this->get_active_content_hover_css( $attributes, 'Mobile' )
	154	+ $this->get_active_content_hover_css( $attributes, 'Mobile' ),
	155	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_active_content_hover_css( $attributes, $device ); } )
72	156	);
73	157
74	158	return $css_generator->generate_css();
75	159	}
76		-
	160	+ public function build_css( $attributes ) {
	161	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	162	+ return $this->build_css_v2( $attributes );
	163	+ }
	164	+ return $this->build_css_v1( $attributes );
	165	+ }
	166	+ // Mirrors hasHotspotIcon() in the editor: a removed icon keeps iconClass 'Empty'.
	167	+ public function has_pin_icon( $attributes ) {
	168	+ foreach ( $attributes['lists'] ?? [] as $list ) {
	169	+ $icon = $list['icon'] ?? [];
	170	+ if ( ( $icon['iconClass'] ?? '' ) !== 'Empty' && ( ! empty( $icon['iconSvgPath'] ) || ! empty( $icon['iconImageUrl'] ) ) ) {
	171	+ return true;
	172	+ }
	173	+ }
	174	+ return false;
	175	+ }
	176	+ public function get_pin_icon_css( $attributes ) {
	177	+ $css = [];
	178	+ if ( ! empty( $attributes['pinIconSize'] ) ) {
	179	+ $css['width'] = $attributes['pinIconSize'] . '%';
	180	+ $css['height'] = $attributes['pinIconSize'] . '%';
	181	+ }
	182	+ return $css;
	183	+ }
	184	+ public function get_pin_icon_svg_css( $attributes ) {
	185	+ $css = [];
	186	+ if ( ! empty( $attributes['pinIconColor'] ) ) {
	187	+ $css['fill'] = Color::get_css( $attributes['pinIconColor'] );
	188	+ }
	189	+ return $css;
	190	+ }
77	191	public function get_pin_css( $attributes, $list ) {
78	192	return [
79		- 'background-color' => ! empty( $list['pinColorEffect'] ) ? $list['pinColorEffect'] : $attributes['pinColorEffect'],
	193	+ 'background-color' => Color::get_css( ! empty( $list['pinColorEffect'] ) ? $list['pinColorEffect'] : $attributes['pinColorEffect'] ),
80	194	'width' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
81	195	'height' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
82	196	'transform' => 'translate(-50%, -50%)',
83	197	];
		@@ -84,9 +198,9 @@
84	198	}
85	199
86	200	public function get_pin_effect_css( $attributes, $list ) {
87	201	return [
88		- 'background-color' => ! empty( $list['pinColor'] ) ? $list['pinColor'] : $attributes['pinColor'],
	202	+ 'background-color' => Color::get_css( ! empty( $list['pinColor'] ) ? $list['pinColor'] : $attributes['pinColor'] ),
89	203	'width' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
90	204	'height' => ! empty( $list['pinSize'] ) ? $list['pinSize'] . 'px' : $attributes['pinSize'] . 'px',
91	205	];
92	206	}
		@@ -92,9 +206,9 @@
92	206	}
93	207
94	208	public function get_pin_hover_css( $attributes, $list ) {
95	209	return [
96		- 'background-color' => ! empty( $list['pinHoverColor'] ) ? $list['pinHoverColor'] : $attributes['pinHoverColor'],
	210	+ 'background-color' => Color::get_css( ! empty( $list['pinHoverColor'] ) ? $list['pinHoverColor'] : $attributes['pinHoverColor'] ),
97	211	'transform' => 'translate(-50%, -50%)',
98	212	'--ablocks-hotspot-effect-max-scale' => ! empty( $list['pinHoverSize'] ) ? $list['pinHoverSize'] : $attributes['pinHoverSize'],
99	213	];
100	214	}
		@@ -100,9 +214,9 @@
100	214	}
101	215
102	216	public function get_pin_hover_effect_css( $attributes, $list ) {
103	217	return [
104		- 'background-color' => ! empty( $list['pinHoverColor'] ) ? $list['pinHoverColor'] : $attributes['pinHoverColor'],
	218	+ 'background-color' => Color::get_css( ! empty( $list['pinHoverColor'] ) ? $list['pinHoverColor'] : $attributes['pinHoverColor'] ),
105	219	'--ablocks-hotspot-effect-max-scale' => ! empty( $list['pinHoverSize'] ) ? $list['pinHoverSize'] : $attributes['pinHoverSize'],
106	220	];
107	221	}
108	222
		@@ -272,14 +386,8 @@
272	386	}
273	387
274	388	public function get_active_content_css( $attributes, $device = '' ) {
275	389	$css = array();
276		-
277		- // Set background color
278		- if ( ! empty( $attributes['backgroundColor'] ) ) {
279		- $css['background-color'] = $attributes['backgroundColor'];
280		- }
281		-
282	390	if ( isset( $width[ 'value' . $device ] ) && ! empty( $width[ 'value' . $device ] ) ) {
283	391
284	392	if ( ! empty( $width[ 'valueUnit' . $device ] ) ) {
285	393	$css['width'] = $width[ 'value' . $device ] . $width[ 'valueUnit' . $device ];
		@@ -287,9 +395,11 @@
287	395	$css['width'] = $width[ 'value' . $device ] . 'px';
288	396	}
289	397	}
290	398
291		- $css = array_merge( $css,
	399	+ $css = array_merge(
	400	+ [ 'background' => Color::get_css( isset( $attributes['backgroundColor'] ) ? $attributes['backgroundColor'] : '' ) ],
	401	+ $css,
292	402	Range::get_css([
293	403	'attributeValue' => $attributes['childWidth'],
294	404	'attribute_object_key' => 'value',
295	405	'isResponsive' => true,