← All changes | includes/controls/background-overlay.php +30 -74 2.9.1 → 2.14.0 View file →

		@@ -5,8 +5,10 @@
5	5	exit();
6	6	}
7	7
8	8	use ABlocks\Classes\ControlBaseAbstract;
	9	+use ABlocks\Controls\Color;
	10	+use ABlocks\Helper;
9	11
10	12	class BackgroundOverlay extends ControlBaseAbstract {
11	13
12	14	public static function get_attribute_default_value( $is_responsive = false ) {
		@@ -149,34 +151,13 @@
149	151	$attribute_value
150	152	);
151	153
152	154	// Get the units for X and Y position, and display size width
153		- $unitX_position_unit = self::get_unit(
154		- [
155		- 'unit' => $value['imgXPositionUnit'],
156		- 'unitTablet' => $value['imgXPositionUnitTablet'],
157		- 'unitMobile' => $value['imgXPositionUnitMobile'],
158		- ],
159		- $device
160		- );
	155	+ $unitX_position_unit = Helper::get_responsive_value( $value, 'imgXPositionUnit', $device );
161	156
162		- $unitY_position_unit = self::get_unit(
163		- [
164		- 'unit' => $value['imgYPositionUnit'],
165		- 'unitTablet' => $value['imgYPositionUnitTablet'],
166		- 'unitMobile' => $value['imgYPositionUnitMobile'],
167		- ],
168		- $device
169		- );
	157	+ $unitY_position_unit = Helper::get_responsive_value( $value, 'imgYPositionUnit', $device );
170	158
171		- $display_size_width_unit = self::get_unit(
172		- [
173		- 'unit' => $value['imgDisplaySizeWidthUnit'],
174		- 'unitTablet' => $value['imgDisplaySizeWidthUnitTablet'],
175		- 'unitMobile' => $value['imgDisplaySizeWidthUnitMobile'],
176		- ],
177		- $device
178		- );
	159	+ $display_size_width_unit = Helper::get_responsive_value( $value, 'imgDisplaySizeWidthUnit', $device );
179	160
180	161	$css = [];
181	162
182	163	$topDiff = ! empty( $extra_border_value['commonWidth'] ) ? intval( $extra_border_value['commonWidth'] ) : intval( $extra_border_value['topWidth'] ?? 0 );
		@@ -268,14 +249,13 @@
268	249	}
269	250	}
270	251
271	252	// Handle opacity
272		- if ( $device === 'Tablet' && isset( $value['opacityTablet'] ) ) {
273		- $css['opacity'] = $value['opacityTablet'];
274		- } elseif ( $device === 'Mobile' && isset( $value['opacityMobile'] ) ) {
275		- $css['opacity'] = $value['opacityMobile'];
276		- } elseif ( isset( $value['opacity'] ) ) {
277		- $css['opacity'] = $value['opacity'];
	253	+ // The device's own opacity, else the nearest containing wider
	254	+ // device's (custom breakpoints included).
	255	+ $opacity_value = Helper::get_responsive_value( $value, 'opacity', $device );
	256	+ if ( false !== $opacity_value ) {
	257	+ $css['opacity'] = $opacity_value;
278	258	}
279	259
280	260	// Handle blend mode
281	261	if ( ! empty( $value['blendMode'] ) ) {
		@@ -299,18 +279,17 @@
299	279	$css['top'] = '0';
300	280	$css['left'] = '0';
301	281	$css['width'] = '100%';
302	282	$css['height'] = '100%';
303		- $css[ $property ] = $value[ $background_color_key ];
	283	+ $css[ $property ] = Color::get_css( esc_attr( $value[ $background_color_key ] ) );
304	284
305	285	// Handle opacity
306	286
307		- if ( $device === 'Tablet' && isset( $value['opacityTablet'] ) ) {
308		- $css['opacity'] = $value['opacityTablet'];
309		- } elseif ( $device === 'Mobile' && isset( $value['opacityMobile'] ) ) {
310		- $css['opacity'] = $value['opacityMobile'];
311		- } elseif ( isset( $value['opacity'] ) ) {
312		- $css['opacity'] = $value['opacity'];
	287	+ // The device's own opacity, else the nearest containing wider
	288	+ // device's (custom breakpoints included).
	289	+ $opacity_value = Helper::get_responsive_value( $value, 'opacity', $device );
	290	+ if ( false !== $opacity_value ) {
	291	+ $css['opacity'] = $opacity_value;
313	292	}
314	293
315	294	// Handle blend mode
316	295	if ( ! empty( $value['blendMode'] ) ) {
		@@ -352,34 +331,13 @@
352	331	self::get_attribute_default_value( $device ? true : false ),
353	332	$attribute_value
354	333	);
355	334	// Get the units for X and Y position hover states and display size hover width
356		- $unit_x_position_unit_h = self::get_unit(
357		- [
358		- 'unit' => $value['imgXPositionUnitH'],
359		- 'unitTablet' => $value['imgXPositionUnitHTablet'],
360		- 'unitMobile' => $value['imgXPositionUnitHMobile'],
361		- ],
362		- $device
363		- );
	335	+ $unit_x_position_unit_h = Helper::get_responsive_value( $value, 'imgXPositionUnitH', $device );
364	336
365		- $unit_y_position_unit_h = self::get_unit(
366		- [
367		- 'unit' => $value['imgYPositionUnitH'],
368		- 'unitTablet' => $value['imgYPositionUnitHTablet'],
369		- 'unitMobile' => $value['imgYPositionUnitHMobile'],
370		- ],
371		- $device
372		- );
	337	+ $unit_y_position_unit_h = Helper::get_responsive_value( $value, 'imgYPositionUnitH', $device );
373	338
374		- $img_display_size_width_h_unit = self::get_unit(
375		- [
376		- 'unit' => $value['imgDisplaySizeWidthHUnit'],
377		- 'unitTablet' => $value['imgDisplaySizeWidthHUnitTablet'],
378		- 'unitMobile' => $value['imgDisplaySizeWidthHMobile'],
379		- ],
380		- $device
381		- );
	339	+ $img_display_size_width_h_unit = Helper::get_responsive_value( $value, 'imgDisplaySizeWidthHUnit', $device );
382	340
383	341	$css = [];
384	342	$topDiffH = ! empty( $extra_border_value['commonWidthH'] ) ? intval( $extra_border_value['commonWidthH'] ) : intval( $extra_border_value['topWidth'] ?? 0 );
385	343	$bottomDiffH = ! empty( $extra_border_value['commonWidthH'] ) ? intval( $extra_border_value['commonWidthH'] ) : intval( $extra_border_value['bottomWidth'] ?? 0 );
		@@ -468,14 +426,13 @@
468	426	);
469	427	}
470	428	}
471	429	// Handle opacity on hover
472		- if ( $device === 'Tablet' && isset( $value['opacityHTablet'] ) ) {
473		- $css['opacity'] = $value['opacityHTablet'];
474		- } elseif ( $device === 'Mobile' && isset( $value['opacityHMobile'] ) ) {
475		- $css['opacity'] = $value['opacityHMobile'];
476		- } elseif ( isset( $value['opacityH'] ) ) {
477		- $css['opacity'] = $value['opacityH'];
	430	+ // The device's own opacity, else the nearest containing wider
	431	+ // device's (custom breakpoints included).
	432	+ $opacity_h_value = Helper::get_responsive_value( $value, 'opacityH', $device );
	433	+ if ( false !== $opacity_h_value ) {
	434	+ $css['opacity'] = $opacity_h_value;
478	435	}
479	436	// Handle blend mode on hover
480	437	if ( ! empty( $value['blendModeH'] ) ) {
481	438	$css['mix-blend-mode'] = esc_attr( $value['blendModeH'] );
		@@ -493,16 +450,15 @@
493	450	$css['top'] = '0';
494	451	$css['left'] = '0';
495	452	$css['width'] = '100%';
496	453	$css['height'] = '100%';
497		- $css[ $property ] = esc_attr( $value[ $background_color_h_key ] );
	454	+ $css[ $property ] = Color::get_css( esc_attr( $value[ $background_color_h_key ] ) );
498	455
499		- if ( $device === 'Tablet' && isset( $value['opacityHTablet'] ) ) {
500		- $css['opacity'] = $value['opacityHTablet'];
501		- } elseif ( $device === 'Mobile' && isset( $value['opacityHMobile'] ) ) {
502		- $css['opacity'] = $value['opacityHMobile'];
503		- } elseif ( isset( $value['opacityH'] ) ) {
504		- $css['opacity'] = $value['opacityH'];
	456	+ // The device's own opacity, else the nearest containing wider
	457	+ // device's (custom breakpoints included).
	458	+ $opacity_h_value = Helper::get_responsive_value( $value, 'opacityH', $device );
	459	+ if ( false !== $opacity_h_value ) {
	460	+ $css['opacity'] = $opacity_h_value;
505	461	}
506	462
507	463	// Handle blend mode on hover
508	464	if ( ! empty( $value['blendModeH'] ) ) {