add background effects to customizer - fixes #85

BoldGrid · May 5, 2019 · 53d5a32 · 53d5a32
1 parent bcfe7d4
commit 53d5a32
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/src/assets/js/customizer/background/preview.js b/src/assets/js/customizer/background/preview.js
@@ -104,10 +104,11 @@ export class Preview {
 			alpha = api( 'bgtfw_background_overlay_alpha' )(),
 			brehautColor = parent.net.brehaut.Color( color ),
 			rgba = brehautColor.setAlpha( alpha ).toString(),
+			blendMode = api( 'bgtfw_background_overlay_type' )(),
 			selector = 'body, body > [id^="jarallax-container"] > div';
 
-		return `@supports(background-blend-mode: overlay) { ${selector} { background-color: ${rgba}; background-blend-mode: overlay; } }` +
-			`@supports not (background-blend-mode: overlay) { ${selector} { background-color: ${brehautColor.toString()}; opacity: ${alpha}; } }`;
+		return `@supports(background-blend-mode:${blendMode}) { ${selector} { background-color: ${rgba}; background-blend-mode: ${blendMode}; } }` +
+			`@supports not (background-blend-mode: ${blendMode}) { ${selector} { background-color: ${brehautColor.toString()}; opacity: ${alpha}; } }`;
 	}
 
 	/**
@@ -120,6 +121,7 @@ export class Preview {
 			'bgtfw_background_overlay_alpha',
 			'bgtfw_background_overlay',
 			'bgtfw_background_overlay_color',
+			'bgtfw_background_overlay_type',
 			'background_image',
 			( ...args ) => {
 				args.map( control =>

diff --git a/src/assets/js/customizer/controls/bgtfw-background-control.js b/src/assets/js/customizer/controls/bgtfw-background-control.js
@@ -229,6 +229,7 @@ export default function() {
 			overlayControl = api.control( 'bgtfw_background_overlay' ),
 			backgroundImage = api( 'background_image' ),
 			overlayColorControl = api.control( 'bgtfw_background_overlay_color' ),
+			overlayTypeControl = api.control( 'bgtfw_background_overlay_type' ),
 			overlayAlphaControl = api.control( 'bgtfw_background_overlay_alpha' );
 
 		state = 'pattern' === bgType || ! backgroundImage() ? 'deactivate' : 'activate';
@@ -237,6 +238,7 @@ export default function() {
 		state = overlayControl.setting() && overlayControl.active() ? 'activate' : 'deactivate';
 		overlayColorControl[ state ]( opts );
 		overlayAlphaControl[ state ]( opts );
+		overlayTypeControl[ state ]( opts );
 	};
 
 	/**

diff --git a/src/includes/configs/customizer/controls.config.php b/src/includes/configs/customizer/controls.config.php
@@ -123,6 +123,32 @@
 		),
 		'sanitize_callback' => array( $bgtfw_color_sanitize, 'sanitize_palette_selector' ),
 	),
+	'bgtfw_background_overlay_type' => array(
+		'type'        => 'select',
+		'transport'   => 'postMessage',
+		'settings'    => 'bgtfw_background_overlay_type',
+		'label'       => esc_attr__( 'Overlay Blend Mode', 'bgtfw' ),
+		'section'     => 'background_image',
+		'priority'    => 10,
+		'default'     => 'overlay',
+		'choices' => [
+			'multiply' => __( 'Multiply', 'bgtfw' ),
+			'screen' => __( 'Screen', 'bgtfw' ),
+			'overlay' => __( 'Overlay', 'bgtfw' ),
+			'darken' => __( 'Darken', 'bgtfw' ),
+			'lighten' => __( 'Lighten', 'bgtfw' ),
+			'color-dodge' => __( 'Color Dodge', 'bgtfw' ),
+			'color-burn' => __( 'Color Burn', 'bgtfw' ),
+			'hard-light' => __( 'Hard Light', 'bgtfw' ),
+			'soft-light' => __( 'Soft Light', 'bgtfw' ),
+			'difference' => __( 'Difference', 'bgtfw' ),
+			'exclusion' => __( 'Exclusion', 'bgtfw' ),
+			'hue' => __( 'Hue', 'bgtfw' ),
+			'saturation' => __( 'Saturation', 'bgtfw' ),
+			'color' => __( 'Color', 'bgtfw' ),
+			'luminosity' => __( 'Luminosity', 'bgtfw' ),
+		],
+	),
 	'bgtfw_background_overlay_alpha' => array(
 		'type'        => 'slider',
 		'transport'   => 'postMessage',

diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-background.php b/src/includes/customizer/class-boldgrid-framework-customizer-background.php
@@ -315,10 +315,11 @@ public function create_overlay_css( $image ) {
 		$enabled = get_theme_mod( 'bgtfw_background_overlay', $controls['bgtfw_background_overlay']['default'] );
 		$color = get_theme_mod( 'bgtfw_background_overlay_color', $controls['bgtfw_background_overlay_color']['default'] );
 		$alpha = get_theme_mod( 'bgtfw_background_overlay_alpha', $controls['bgtfw_background_overlay_alpha']['default'] );
+		$type = get_theme_mod( 'bgtfw_background_overlay_type', $controls['bgtfw_background_overlay_type']['default'] );
 
 		$rule = '';
 
-		if ( $enabled && $color && $alpha ) {
+		if ( $enabled && $color && $alpha && $type ) {
 
 			// Create an rgba given palette color and alpha.
 			$color = explode( ':', $color );
@@ -327,8 +328,8 @@ public function create_overlay_css( $image ) {
 			$color_obj->alpha = $alpha;
 			$newColor = esc_attr( $color_obj->toCSS( 'rgba' ) );
 
-			$rule = "@supports(background-blend-mode: overlay) { body, body > [id^=\"jarallax-container\"] > div { background-color: $newColor; background-blend-mode: overlay; } }";
-			$rule .= "@supports not (background-blend-mode: overlay) { body, body > [id^=\"jarallax-container\"] > div { background-color: $color; opacity: $alpha; } }";
+			$rule = "@supports(background-blend-mode: $type) { body, body > [id^=\"jarallax-container\"] > div { background-color: $newColor; background-blend-mode: $type; } }";
+			$rule .= "@supports not (background-blend-mode: $type) { body, body > [id^=\"jarallax-container\"] > div { background-color: $color; opacity: $alpha; } }";
 		}
 
 		return $rule;