← All changes | includes/controls/background-overlay.php +485 -0 1.0.1 → 2.14.0 View file →

		@@ -1,0 +1,485 @@
	1	+<?php
	2	+namespace ABlocks\Controls;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit();
	6	+}
	7	+
	8	+use ABlocks\Classes\ControlBaseAbstract;
	9	+use ABlocks\Controls\Color;
	10	+use ABlocks\Helper;
	11	+
	12	+class BackgroundOverlay extends ControlBaseAbstract {
	13	+
	14	+ public static function get_attribute_default_value( $is_responsive = false ) {
	15	+ return [
	16	+ 'backgroundOverlayType' => 'none',
	17	+ 'backgroundOverlayTypeH' => 'none',
	18	+ // Normal background image attribute
	19	+ 'imgId' => '',
	20	+ 'imgIdTablet' => '',
	21	+ 'imgIdMobile' => '',
	22	+ 'imgUrl' => '',
	23	+ 'imgUrlTablet' => '',
	24	+ 'imgUrlMobile' => '',
	25	+ 'imgSize' => '',
	26	+ 'imgSizeTablet' => '',
	27	+ 'imgSizeMobile' => '',
	28	+ 'imgPosition' => '',
	29	+ 'imgPositionTablet' => '',
	30	+ 'imgPositionMobile' => '',
	31	+ 'imgXPositionUnit' => 'px',
	32	+ 'imgXPositionUnitTablet' => 'px',
	33	+ 'imgXPositionUnitMobile' => 'px',
	34	+ 'imgXPositionTabletUnit' => '',
	35	+ 'imgXPositionMobileUnit' => '',
	36	+ 'imgXPosition' => '',
	37	+ 'imgXPositionTablet' => '',
	38	+ 'imgXPositionMobile' => '',
	39	+ 'imgYPositionUnit' => 'px',
	40	+ 'imgYPositionUnitTablet' => '',
	41	+ 'imgYPositionUnitMobile' => '',
	42	+ 'imgYPosition' => '',
	43	+ 'imgYPositionTablet' => '',
	44	+ 'imgYPositionMobile' => '',
	45	+ 'imgAttachment' => '',
	46	+ 'imgRepeat' => '',
	47	+ 'imgRepeatTablet' => '',
	48	+ 'imgRepeatMobile' => '',
	49	+ 'imgDisplaySize' => '',
	50	+ 'imgDisplaySizeTablet' => '',
	51	+ 'imgDisplaySizeMobile' => '',
	52	+ 'imgDisplaySizeWidth' => '',
	53	+ 'imgDisplaySizeWidthTablet' => '',
	54	+ 'imgDisplaySizeWidthMobile' => '',
	55	+ 'imgDisplaySizeWidthUnit' => 'px',
	56	+ 'imgDisplaySizeWidthUnitTablet' => '',
	57	+ 'imgDisplaySizeWidthUnitMobile' => '',
	58	+ // Hover background image attribute
	59	+ 'imgIdH' => '',
	60	+ 'imgIdTabletH' => '',
	61	+ 'imgIdMobileH' => '',
	62	+ 'imgUrlH' => '',
	63	+ 'imgUrlHTablet' => '',
	64	+ 'imgUrlHMobile' => '',
	65	+ 'imgSizeH' => '',
	66	+ 'imgSizeHTablet' => '',
	67	+ 'imgSizeHMobile' => '',
	68	+ 'imgPositionH' => '',
	69	+ 'imgPositionHTablet' => '',
	70	+ 'imgPositionHMobile' => '',
	71	+ 'imgXPositionUnitH' => 'px',
	72	+ 'imgXPositionUnitHTablet' => '',
	73	+ 'imgXPositionUnitHMobile' => '',
	74	+ 'imgXPositionH' => '',
	75	+ 'imgXPositionHTablet' => '',
	76	+ 'imgXPositionHMobile' => '',
	77	+ 'imgYPositionUnitH' => 'px',
	78	+ 'imgYPositionUnitHTablet' => '',
	79	+ 'imgYPositionUnitHMobile' => '',
	80	+ 'imgYPositionH' => '',
	81	+ 'imgYPositionHTablet' => '',
	82	+ 'imgYPositionHMobile' => '',
	83	+ 'imgAttachmentH' => '',
	84	+ 'imgRepeatH' => '',
	85	+ 'imgRepeatHTablet' => '',
	86	+ 'imgRepeatHMobile' => '',
	87	+ 'imgDisplaySizeH' => '',
	88	+ 'imgDisplaySizeHTablet' => '',
	89	+ 'imgDisplaySizeHMobile' => '',
	90	+ 'imgDisplaySizeWidthH' => '',
	91	+ 'imgDisplaySizeWidthHTablet' => '',
	92	+ 'imgDisplaySizeWidthHMobile' => '',
	93	+ 'imgDisplaySizeWidthHUnit' => 'px',
	94	+ 'imgDisplaySizeWidthHUnitTablet' => '',
	95	+ 'imgDisplaySizeWidthHUnitMobile' => '',
	96	+
	97	+ 'blendMode' => '',
	98	+ 'blur' => '',
	99	+ 'brightness' => '',
	100	+ 'contrast' => '',
	101	+ 'saturate' => '',
	102	+ 'hue' => '',
	103	+ 'opacity' => '',
	104	+ 'opacityTablet' => '',
	105	+ 'opacityMobile' => '',
	106	+ // HOVER
	107	+ 'blendModeH' => '',
	108	+ 'blurH' => '',
	109	+ 'brightnessH' => '',
	110	+ 'contrastH' => '',
	111	+ 'saturateH' => '',
	112	+ 'hueH' => '',
	113	+ 'opacityH' => '',
	114	+ 'opacityHTablet' => '',
	115	+ 'opacityHMobile' => '',
	116	+
	117	+ 'transitionDuration' => '',
	118	+ ];
	119	+ }
	120	+
	121	+ public static function get_attribute(
	122	+ $attribute_name,
	123	+ $is_responsive = false
	124	+ ) {
	125	+ $default_value = self::get_attribute_default_value( $is_responsive );
	126	+
	127	+ return [
	128	+ $attribute_name => [
	129	+ 'type' => 'object',
	130	+ 'default' => $default_value,
	131	+ ],
	132	+ ];
	133	+ }
	134	+
	135	+ public static function get_css(
	136	+ $attribute_value,
	137	+ $property = '',
	138	+ $device = ''
	139	+ ) {
	140	+ }
	141	+
	142	+ public static function get_before_css(
	143	+ $attribute_value,
	144	+ $extra_border_value,
	145	+ $property = '',
	146	+ $device = ''
	147	+ ) {
	148	+ // Merge default values with the provided attribute values
	149	+ $value = array_merge(
	150	+ self::get_attribute_default_value( $device ? true : false ),
	151	+ $attribute_value
	152	+ );
	153	+
	154	+ // Get the units for X and Y position, and display size width
	155	+ $unitX_position_unit = Helper::get_responsive_value( $value, 'imgXPositionUnit', $device );
	156	+
	157	+ $unitY_position_unit = Helper::get_responsive_value( $value, 'imgYPositionUnit', $device );
	158	+
	159	+ $display_size_width_unit = Helper::get_responsive_value( $value, 'imgDisplaySizeWidthUnit', $device );
	160	+
	161	+ $css = [];
	162	+
	163	+ $topDiff = ! empty( $extra_border_value['commonWidth'] ) ? intval( $extra_border_value['commonWidth'] ) : intval( $extra_border_value['topWidth'] ?? 0 );
	164	+ $bottomDiff = ! empty( $extra_border_value['commonWidth'] ) ? intval( $extra_border_value['commonWidth'] ) : intval( $extra_border_value['bottomWidth'] ?? 0 );
	165	+ $leftDiff = ! empty( $extra_border_value['commonWidth'] ) ? intval( $extra_border_value['commonWidth'] ) : intval( $extra_border_value['leftWidth'] ?? 0 );
	166	+ $rightDiff = ! empty( $extra_border_value['commonWidth'] ) ? intval( $extra_border_value['commonWidth'] ) : intval( $extra_border_value['rightWidth'] ?? 0 );
	167	+
	168	+ // Radius calculations
	169	+ $topRadiusValue = ! empty( $extra_border_value['commonRadius'] ) ? intval( $extra_border_value['commonRadius'] ) : intval( $extra_border_value['topRadius'] ?? 0 );
	170	+ $leftRadiusValue = ! empty( $extra_border_value['commonRadius'] ) ? intval( $extra_border_value['commonRadius'] ) : intval( $extra_border_value['leftRadius'] ?? 0 );
	171	+ $rightRadiusValue = ! empty( $extra_border_value['commonRadius'] ) ? intval( $extra_border_value['commonRadius'] ) : intval( $extra_border_value['rightRadius'] ?? 0 );
	172	+ $bottomRadiusValue = ! empty( $extra_border_value['commonRadius'] ) ? intval( $extra_border_value['commonRadius'] ) : intval( $extra_border_value['bottomRadius'] ?? 0 );
	173	+
	174	+ // Ensure no negative values
	175	+ $css['border-top-left-radius'] = max( $topRadiusValue - $topDiff, 0 ) . 'px';
	176	+ $css['border-top-right-radius'] = max( $rightRadiusValue - $rightDiff, 0 ) . 'px';
	177	+ $css['border-bottom-left-radius'] = max( $bottomRadiusValue - $bottomDiff, 0 ) . 'px';
	178	+ $css['border-bottom-right-radius'] = max( $leftRadiusValue - $leftDiff, 0 ) . 'px';
	179	+
	180	+ // Handle transition duration
	181	+ if ( self::has_value( $value['transitionDuration'] ) ) {
	182	+ $css['transition'] = "border {$value['transitionDuration']}s, border-radius {$value['transitionDuration']}s";
	183	+ }
	184	+
	185	+ // If background is set to image
	186	+ if ( $value['backgroundOverlayType'] === 'image' ) {
	187	+ $img_url_key = 'imgUrl' . $device;
	188	+ if ( ! empty( $value[ $img_url_key ] ) ) {
	189	+ $filter_values = [
	190	+ 'brightness' =>
	191	+ 'brightness(' . ( $value['brightness'] ?? 100 ) . '%)',
	192	+ 'contrast' =>
	193	+ 'contrast(' . ( $value['contrast'] ?? 100 ) . '%)',
	194	+ 'saturate' =>
	195	+ 'saturate(' . ( $value['saturate'] ?? 100 ) . '%)',
	196	+ 'blur' => 'blur(' . ( $value['blur'] ?? 0 ) . 'px)',
	197	+ 'hue' => 'hue-rotate(' . ( $value['hue'] ?? 0 ) . 'deg)',
	198	+ ];
	199	+
	200	+ // CSS for background image and ::before pseudo element
	201	+ $css[ "{$property}-image" ] =
	202	+ 'url("' . $value[ $img_url_key ] . '")';
	203	+ $css['position'] = 'absolute';
	204	+ $css['content'] = "''";
	205	+ $css['top'] = '0';
	206	+ $css['left'] = '0';
	207	+ $css['width'] = '100%';
	208	+ $css['height'] = '100%';
	209	+
	210	+ // Handle background-position
	211	+ $img_position_key = 'imgPosition' . $device;
	212	+ if ( ! empty( $value[ $img_position_key ] ) ) {
	213	+ if ( $value[ $img_position_key ] === 'custom' ) {
	214	+ $css[ "{$property}-position" ] =
	215	+ ( $value[ 'imgXPosition' . $device ] ?? '0' ) .
	216	+ $unitX_position_unit .
	217	+ ' ' .
	218	+ ( $value[ 'imgYPosition' . $device ] ?? '0' ) .
	219	+ $unitY_position_unit;
	220	+ } else {
	221	+ $css[ "{$property}-position" ] =
	222	+ $value[ $img_position_key ];
	223	+ }
	224	+ }
	225	+
	226	+ // Handle background attachment
	227	+ $img_attachment_key = 'imgAttachment' . $device;
	228	+ if ( ! empty( $value[ $img_attachment_key ] ) ) {
	229	+ $css[ "{$property}-attachment" ] =
	230	+ $value[ $img_attachment_key ];
	231	+ }
	232	+
	233	+ // Handle background repeat
	234	+ $img_repeat_key = 'imgRepeat' . $device;
	235	+ if ( ! empty( $value[ $img_repeat_key ] ) ) {
	236	+ $css[ "{$property}-repeat" ] = $value[ $img_repeat_key ];
	237	+ }
	238	+
	239	+ // Handle background size
	240	+ $img_display_size_key = 'imgDisplaySize' . $device;
	241	+ if ( ! empty( $value[ $img_display_size_key ] ) ) {
	242	+ if ( $value[ $img_display_size_key ] === 'custom' ) {
	243	+ $css[ "{$property}-size" ] =
	244	+ $value[ 'imgDisplaySizeWidth' . $device ] .
	245	+ $display_size_width_unit;
	246	+ } else {
	247	+ $css[ "{$property}-size" ] =
	248	+ $value[ $img_display_size_key ];
	249	+ }
	250	+ }
	251	+
	252	+ // Handle 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;
	258	+ }
	259	+
	260	+ // Handle blend mode
	261	+ if ( ! empty( $value['blendMode'] ) ) {
	262	+ $css['mix-blend-mode'] = $value['blendMode'];
	263	+ }
	264	+
	265	+ // Add filter CSS
	266	+ $css['filter'] = implode( ' ', $filter_values );
	267	+
	268	+ // Handle transition duration
	269	+ if ( ! empty( $value['transitionDuration'] ) ) {
	270	+ $css['transition'] =
	271	+ 'all ' . $value['transitionDuration'] . 's';
	272	+ }
	273	+ }//end if
	274	+ } elseif ( $value['backgroundOverlayType'] === 'color' ) {
	275	+ $background_color_key = 'backgroundColor' . $device;
	276	+ if ( ! empty( $value[ $background_color_key ] ) ) {
	277	+ $css['position'] = 'absolute';
	278	+ $css['content'] = "''";
	279	+ $css['top'] = '0';
	280	+ $css['left'] = '0';
	281	+ $css['width'] = '100%';
	282	+ $css['height'] = '100%';
	283	+ $css[ $property ] = Color::get_css( esc_attr( $value[ $background_color_key ] ) );
	284	+
	285	+ // Handle opacity
	286	+
	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;
	292	+ }
	293	+
	294	+ // Handle blend mode
	295	+ if ( ! empty( $value['blendMode'] ) ) {
	296	+ $css['mix-blend-mode'] = $value['blendMode'];
	297	+ }
	298	+
	299	+ // Add filter CSS
	300	+ $filter_values = [
	301	+ 'brightness' =>
	302	+ 'brightness(' . ( $value['brightness'] ?? 100 ) . '%)',
	303	+ 'contrast' =>
	304	+ 'contrast(' . ( $value['contrast'] ?? 100 ) . '%)',
	305	+ 'saturate' =>
	306	+ 'saturate(' . ( $value['saturate'] ?? 100 ) . '%)',
	307	+ 'blur' => 'blur(' . ( $value['blur'] ?? 0 ) . 'px)',
	308	+ 'hue' => 'hue-rotate(' . ( $value['hue'] ?? 0 ) . 'deg)',
	309	+ ];
	310	+ $css['filter'] = implode( ' ', $filter_values );
	311	+
	312	+ // Handle transition duration
	313	+ if ( ! empty( $value['transitionDuration'] ) ) {
	314	+ $css['transition'] =
	315	+ 'all ' . $value['transitionDuration'] . 's';
	316	+ }
	317	+ }//end if
	318	+ }//end if
	319	+
	320	+ return $css;
	321	+ }
	322	+
	323	+ public static function get_before_hover_css(
	324	+ $attribute_value,
	325	+ $extra_border_value,
	326	+ $property = '',
	327	+ $device = ''
	328	+ ) {
	329	+ // Merge default values with the provided attribute values
	330	+ $value = array_merge(
	331	+ self::get_attribute_default_value( $device ? true : false ),
	332	+ $attribute_value
	333	+ );
	334	+ // Get the units for X and Y position hover states and display size hover width
	335	+ $unit_x_position_unit_h = Helper::get_responsive_value( $value, 'imgXPositionUnitH', $device );
	336	+
	337	+ $unit_y_position_unit_h = Helper::get_responsive_value( $value, 'imgYPositionUnitH', $device );
	338	+
	339	+ $img_display_size_width_h_unit = Helper::get_responsive_value( $value, 'imgDisplaySizeWidthHUnit', $device );
	340	+
	341	+ $css = [];
	342	+ $topDiffH = ! empty( $extra_border_value['commonWidthH'] ) ? intval( $extra_border_value['commonWidthH'] ) : intval( $extra_border_value['topWidth'] ?? 0 );
	343	+ $bottomDiffH = ! empty( $extra_border_value['commonWidthH'] ) ? intval( $extra_border_value['commonWidthH'] ) : intval( $extra_border_value['bottomWidth'] ?? 0 );
	344	+ $leftDiffH = ! empty( $extra_border_value['commonWidthH'] ) ? intval( $extra_border_value['commonWidthH'] ) : intval( $extra_border_value['leftWidth'] ?? 0 );
	345	+ $rightDiffH = ! empty( $extra_border_value['commonWidthH'] ) ? intval( $extra_border_value['commonWidthH'] ) : intval( $extra_border_value['rightWidth'] ?? 0 );
	346	+
	347	+ // Radius calculations
	348	+ $topRadiusValueH = ! empty( $extra_border_value['commonRadiusH'] ) ? intval( $extra_border_value['commonRadiusH'] ) : intval( $extra_border_value['topRadius'] ?? 0 );
	349	+ $leftRadiusValueH = ! empty( $extra_border_value['commonRadiusH'] ) ? intval( $extra_border_value['commonRadiusH'] ) : intval( $extra_border_value['leftRadius'] ?? 0 );
	350	+ $rightRadiusValueH = ! empty( $extra_border_value['commonRadiusH'] ) ? intval( $extra_border_value['commonRadiusH'] ) : intval( $extra_border_value['rightRadius'] ?? 0 );
	351	+ $bottomRadiusValueH = ! empty( $extra_border_value['commonRadiusH'] ) ? intval( $extra_border_value['commonRadiusH'] ) : intval( $extra_border_value['bottomRadius'] ?? 0 );
	352	+
	353	+ // Ensure no negative values
	354	+ $css['border-top-left-radius'] = max( $topRadiusValueH - $topDiffH, 0 ) . 'px';
	355	+ $css['border-top-right-radius'] = max( $rightRadiusValueH - $rightDiffH, 0 ) . 'px';
	356	+ $css['border-bottom-left-radius'] = max( $bottomRadiusValueH - $bottomDiffH, 0 ) . 'px';
	357	+ $css['border-bottom-right-radius'] = max( $leftRadiusValueH - $leftDiffH, 0 ) . 'px';
	358	+
	359	+ // If hover background is set to image
	360	+ if ( $value['backgroundOverlayTypeH'] === 'image' ) {
	361	+ $img_url_h_key = 'imgUrlH' . $device;
	362	+
	363	+ if ( ! empty( $value[ $img_url_h_key ] ) ) {
	364	+ $filter_values_h = [
	365	+ 'brightness' =>
	366	+ 'brightness(' . ( $value['brightnessH'] ?? 100 ) . '%)',
	367	+ 'contrast' =>
	368	+ 'contrast(' . ( $value['contrastH'] ?? 100 ) . '%)',
	369	+ 'saturate' =>
	370	+ 'saturate(' . ( $value['saturateH'] ?? 100 ) . '%)',
	371	+ 'blur' => 'blur(' . ( $value['blurH'] ?? 0 ) . 'px)',
	372	+ 'hue' => 'hue-rotate(' . ( $value['hueH'] ?? 0 ) . 'deg)',
	373	+ ];
	374	+
	375	+ // CSS for background image and ::before pseudo element on hover
	376	+ $css[ "{$property}-image" ] =
	377	+ 'url("' . esc_url( $value[ $img_url_h_key ] ) . '")';
	378	+ $css['position'] = 'absolute';
	379	+ $css['content'] = "''";
	380	+ $css['top'] = '0';
	381	+ $css['left'] = '0';
	382	+ $css['width'] = '100%';
	383	+ $css['height'] = '100%';
	384	+
	385	+ // Handle background-position on hover
	386	+ $img_position_h_key = 'imgPositionH' . $device;
	387	+ if ( ! empty( $value[ $img_position_h_key ] ) ) {
	388	+ if ( $value[ $img_position_h_key ] === 'custom' ) {
	389	+ $css[ "{$property}-position" ] =
	390	+ ( $value[ 'imgXPositionH' . $device ] ?? '0' ) .
	391	+ $unit_x_position_unit_h .
	392	+ ' ' .
	393	+ ( $value[ 'imgYPositionH' . $device ] ?? '0' ) .
	394	+ $unit_y_position_unit_h;
	395	+ } else {
	396	+ $css[ "{$property}-position" ] = esc_attr(
	397	+ $value[ $img_position_h_key ]
	398	+ );
	399	+ }
	400	+ }
	401	+
	402	+ // Handle background attachment on hover
	403	+ if ( ! empty( $value['imgAttachmentH'] ) ) {
	404	+ $css[ "{$property}-attachment" ] = esc_attr(
	405	+ $value['imgAttachmentH']
	406	+ );
	407	+ }
	408	+
	409	+ // Handle background repeat on hover
	410	+ if ( ! empty( $value[ 'imgRepeatH' . $device ] ) ) {
	411	+ $css[ "{$property}-repeat" ] = esc_attr(
	412	+ $value[ 'imgRepeatH' . $device ]
	413	+ );
	414	+ }
	415	+
	416	+ // Handle background size on hover
	417	+ $img_display_size_h_key = 'imgDisplaySizeH' . $device;
	418	+ if ( ! empty( $value[ $img_display_size_h_key ] ) ) {
	419	+ if ( $value[ $img_display_size_h_key ] === 'custom' ) {
	420	+ $css[ "{$property}-size" ] =
	421	+ esc_attr( $value[ 'imgDisplaySizeWidthH' . $device ] ) .
	422	+ esc_attr( $img_display_size_width_h_unit );
	423	+ } else {
	424	+ $css[ "{$property}-size" ] = esc_attr(
	425	+ $value[ $img_display_size_h_key ]
	426	+ );
	427	+ }
	428	+ }
	429	+ // Handle opacity on hover
	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;
	435	+ }
	436	+ // Handle blend mode on hover
	437	+ if ( ! empty( $value['blendModeH'] ) ) {
	438	+ $css['mix-blend-mode'] = esc_attr( $value['blendModeH'] );
	439	+ }
	440	+
	441	+ // Add filter CSS on hover
	442	+ $css['filter'] = implode( ' ', $filter_values_h );
	443	+ }//end if
	444	+ } elseif ( $value['backgroundOverlayTypeH'] === 'color' ) {
	445	+ // If hover background is set to color
	446	+ $background_color_h_key = 'backgroundColorH' . $device;
	447	+ if ( ! empty( $value[ $background_color_h_key ] ) ) {
	448	+ $css['position'] = 'absolute';
	449	+ $css['content'] = "''";
	450	+ $css['top'] = '0';
	451	+ $css['left'] = '0';
	452	+ $css['width'] = '100%';
	453	+ $css['height'] = '100%';
	454	+ $css[ $property ] = Color::get_css( esc_attr( $value[ $background_color_h_key ] ) );
	455	+
	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;
	461	+ }
	462	+
	463	+ // Handle blend mode on hover
	464	+ if ( ! empty( $value['blendModeH'] ) ) {
	465	+ $css['mix-blend-mode'] = esc_attr( $value['blendModeH'] );
	466	+ }
	467	+
	468	+ // Add filter CSS on hover
	469	+ $filter_values_h = [
	470	+ 'brightness' =>
	471	+ 'brightness(' . ( $value['brightnessH'] ?? 100 ) . '%)',
	472	+ 'contrast' =>
	473	+ 'contrast(' . ( $value['contrastH'] ?? 100 ) . '%)',
	474	+ 'saturate' =>
	475	+ 'saturate(' . ( $value['saturateH'] ?? 100 ) . '%)',
	476	+ 'blur' => 'blur(' . ( $value['blurH'] ?? 0 ) . 'px)',
	477	+ 'hue' => 'hue-rotate(' . ( $value['hueH'] ?? 0 ) . 'deg)',
	478	+ ];
	479	+ $css['filter'] = implode( ' ', $filter_values_h );
	480	+ }//end if
	481	+ }//end if
	482	+
	483	+ return $css;
	484	+ }
	485	+}