← All changes | includes/blocks/image-hotspot/block.php +55 -4 2.8.0 → 2.14.0 View file →

		@@ -51,8 +51,19 @@
51	51	);
52	52	}//end foreach
53	53	}//end if
54	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	+
55	66	// Tooltip content animation
56	67	$css_generator->add_class_styles(
57	68	'{{WRAPPER}} .ablocks-image-hotspot__tooltip-content',
58	69	$this->get_tooltip_content_css( $attributes )
		@@ -61,9 +72,10 @@
61	72	$css_generator->add_class_styles(
62	73	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active',
63	74	$this->get_active_content_css( $attributes ),
64	75	$this->get_active_content_css( $attributes, 'Tablet' ),
65		- $this->get_active_content_css( $attributes, 'Mobile' )
	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 ); } )
66	78	);
67	79
68	80	$css_generator->add_class_styles(
69	81	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
		@@ -68,9 +80,10 @@
68	80	$css_generator->add_class_styles(
69	81	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
70	82	$this->get_active_content_hover_css( $attributes ),
71	83	$this->get_active_content_hover_css( $attributes, 'Tablet' ),
72		- $this->get_active_content_hover_css( $attributes, 'Mobile' )
	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 ); } )
73	86	);
74	87
75	88	return $css_generator->generate_css();
76	89	}
		@@ -108,8 +121,19 @@
108	121	);
109	122	}//end foreach
110	123	}//end if
111	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	+
112	136	// Tooltip content animation
113	137	$css_generator->add_class_styles(
114	138	'{{WRAPPER}} .ablocks-image-hotspot__tooltip-content',
115	139	$this->get_tooltip_content_css( $attributes )
		@@ -118,9 +142,10 @@
118	142	$css_generator->add_class_styles(
119	143	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active',
120	144	$this->get_active_content_css( $attributes ),
121	145	$this->get_active_content_css( $attributes, 'Tablet' ),
122		- $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 ); } )
123	148	);
124	149
125	150	$css_generator->add_class_styles(
126	151	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
		@@ -125,9 +150,10 @@
125	150	$css_generator->add_class_styles(
126	151	'{{WRAPPER}} .ablocks-image-hotspot__tooltip--active:hover',
127	152	$this->get_active_content_hover_css( $attributes ),
128	153	$this->get_active_content_hover_css( $attributes, 'Tablet' ),
129		- $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 ); } )
130	156	);
131	157
132	158	return $css_generator->generate_css();
133	159	}
		@@ -135,8 +161,33 @@
135	161	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
136	162	return $this->build_css_v2( $attributes );
137	163	}
138	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;
139	190	}
140	191	public function get_pin_css( $attributes, $list ) {
141	192	return [
142	193	'background-color' => Color::get_css( ! empty( $list['pinColorEffect'] ) ? $list['pinColorEffect'] : $attributes['pinColorEffect'] ),