Fix Background Issues

README.md

@@ -36,6 +36,10 @@ user guide for more information.
 
 ## Changelog ##
 
+### 2.2.1 ###
+* Bug fix: Fixed Background Image doesn't work [#193](https://github.com/BoldGrid/boldgrid-theme-framework/issues/193)
+* Bug fix: Incorrect body text color when setting background image effect to "Parallax" [#220](https://github.com/BoldGrid/boldgrid-theme-framework/issues/220)
+
 ### 2.2.0 ###
 * New Feature: Added Control to change the number of products shown per page on shop catalog [#210](https://github.com/BoldGrid/boldgrid-theme-framework/issues/210)
 * New Feature: Added Featured Image Control to single blog posts [#192](https://github.com/BoldGrid/boldgrid-theme-framework/issues/192)

src/assets/js/customizer/base-controls.js

@@ -23,6 +23,7 @@ import bgtfwSection from './controls/bgtfw-section';
 import bgtfwNotifications from './controls/bgtfw-notifications';
 import bgtfwBackgroundControls from './controls/bgtfw-background-control';
 import bgtfwEditPane from './controls/edit/pane';
+import { HeaderBackground as BgtfwHeaderBackground } from './controls/bgtfw-header-background';
 
 let devices = new Devices();
 devices.init();
@@ -43,6 +44,7 @@ WidgetSectionUpdate();
 	new HamburgerControlToggle();
 	new HoverBackgroundToggle();
 	new MenuLocations();
+	new BgtfwHeaderBackground();
 	bgtfwHeaderTabs.init();
 
 	wp.customize.bind( 'pane-contents-reflowed', bgtfwPaneReflow );

src/assets/js/customizer/controls/bgtfw-background-control.js

@@ -7,16 +7,6 @@ export default function() {
 
 	'use strict';
 
-	$( function() {
-
-		/**
-		 * @todo This needs to be refactored. All these events should not be each time
-		 * preview iframe is refreshed.
-		 */
-		$( window ).on( 'boldgrid_customizer_refresh', init );
-		loadSection();
-	} );
-
 	var init = function() {
 		bindColors();
 
@@ -143,14 +133,14 @@ export default function() {
 	};
 
 	var appendHeadStyles = function( to ) {
+		var style = '';
 		if ( ! to ) {
 			to = api( 'boldgrid_background_color' )();
 		}
 
 		$( '#customizer_boldgrid_background_color' ).remove();
 
 		if ( to ) {
-			var style = '';
 			style += '<style id="customizer_boldgrid_background_color">';
 			style += '#customize-control-boldgrid_background_pattern .patternpreview{background-color:' + to.split( ':' ).pop() + ';}';
 			style += '</style>';
@@ -276,4 +266,14 @@ export default function() {
 
 		api( ...ids, ( ...controls ) => controls.map( control => control.bind( validateSelectionSet ) ) );
 	};
+
+	$( function() {
+
+		/**
+		 * @todo This needs to be refactored. All these events should not be each time
+		 * preview iframe is refreshed.
+		 */
+		$( window ).on( 'boldgrid_customizer_refresh', init );
+		loadSection();
+	} );
 }

src/assets/js/customizer/controls/bgtfw-header-background.js

@@ -0,0 +1,138 @@
+const api = wp.customize;
+
+/**
+ * HeaderBackground Class
+ *
+ * Helps with Header Background controls in customizer.
+ *
+ * @since 2.2.1
+ */
+export class HeaderBackground {
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 2.2.1
+	 */
+	constructor() {
+		var self = this;
+
+		self.imageVideoControls = [
+			'header_image',
+			'header_video',
+			'external_header_video'
+		];
+		self.headerOverlayControls = [
+			'bgtfw_header_overlay',
+			'bgtfw_header_overlay_color',
+			'bgtfw_header_overlay_alpha'
+		];
+
+		api.bind( 'ready', () => this.ready( self ) );
+	}
+
+	/**
+	 * Ready.
+	 *
+	 * This method fires when the wp.customize is ready.
+	 *
+	 * @since 2.2.1
+	 *
+	 * @param {HeaderBackground} self This Object.
+	 */
+	ready( self ) {
+		var sectionId = api.control( 'bgtfw_header_overlay' ).section();
+
+		api.previewer.bind( 'ready', function() {
+			if ( self.hasHeaderImage() || self.hasHeaderVideo() ) {
+				self.activateOverlayControls();
+			} else {
+				self.deactivateOverlayControls();
+			}
+		} );
+		api.section( sectionId, function( section ) {
+			section.expanded.bind( function() {
+				if ( self.hasHeaderImage() || self.hasHeaderVideo() ) {
+					self.activateOverlayControls();
+				} else {
+					self.deactivateOverlayControls();
+				}
+			} );
+		} );
+
+		$.each( self.imageVideoControls, function() {
+			api( this, function( value ) {
+				value.bind( function() {
+					if ( self.hasHeaderImage() || self.hasHeaderVideo() ) {
+						self.activateOverlayControls();
+					} else {
+						self.deactivateOverlayControls();
+					}
+				} );
+			} );
+		} );
+	}
+
+	/**
+	 * Has Header Image
+	 *
+	 * @since 2.2.1
+	 *
+	 * @return {bool} Returns true if there is a header image set.
+	 */
+	hasHeaderImage() {
+		var headerImage = api( 'header_image' )();
+
+		if ( headerImage && 'remove-header' !== headerImage ) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Has Header Video.
+	 *
+	 * @since 2.2.1
+	 *
+	 * @return {bool} Returns true if there is a header video set.
+	 */
+	hasHeaderVideo() {
+		var headerVideo = api( 'header_video' )(),
+			externalVideo = api( 'external_header_video' )();
+
+		return headerVideo || externalVideo ? true : false;
+	}
+
+	/**
+	 * Activate Overlay Controls.
+	 *
+	 * Activates Header Overlay and related controls.
+	 *
+	 * @since 2.2.1
+	 *
+	 */
+	activateOverlayControls() {
+		api.control( 'bgtfw_header_overlay' ).activate();
+		if ( api( 'bgtfw_header_overlay' )() ) {
+			api.control( 'bgtfw_header_overlay_color' ).activate();
+			api.control( 'bgtfw_header_overlay_alpha' ).activate();
+		} else {
+			api.control( 'bgtfw_header_overlay_color' ).deactivate();
+			api.control( 'bgtfw_header_overlay_alpha' ).deactivate();
+		}
+	}
+
+	/**
+	 * Deactivate Overlay Controls.
+	 *
+	 * Deactivates Header Overlay and related controls.
+	 *
+	 * @since 2.2.1
+	 */
+	deactivateOverlayControls() {
+		api.control( 'bgtfw_header_overlay' ).deactivate();
+		api.control( 'bgtfw_header_overlay_color' ).deactivate();
+		api.control( 'bgtfw_header_overlay_alpha' ).deactivate();
+	}
+}

src/assets/js/customizer/customizer.js

@@ -464,15 +464,6 @@ BOLDGRID.Customizer.Util.getInitialPalettes = function( option ) {
 
 		$( '.site-description' ).addClass( window._typographyClasses );
 
-		/**
-		 * There's a better way to do this, but I dunno what it is.  This
-		 * works for now.  This will just trigger the preview pane to reload
-		 * the same page after a user changes their header videos.
-		 */
-		api( 'external_header_video', 'header_video', function( ...args ) {
-			args.map( ( control ) => control.bind( () => api.preview.send( 'url', window.location.href ) ) );
-		} );
-
 		/**
 		 * Recalculate layouts on font changes.
 		 *

src/includes/class-boldgrid-framework-api.php

@@ -552,33 +552,33 @@ public function body_classes( $classes ) {
 			$classes[] = sanitize_html_class( $layout );
 		}
 
+		$background_theme_mod = 'boldgrid_background_color';
+		$background_image = get_theme_mod( 'background_image' );
+
 		// Add class for parallax background option.
 		if ( 'parallax' === get_theme_mod( 'background_attachment' ) ) {
 			$classes[] = 'boldgrid-customizer-parallax';
 		} else {
-			$background_theme_mod = 'boldgrid_background_color';
-			$background_image = get_theme_mod( 'background_image' );
-
 			if (
 				'pattern' !== get_theme_mod( 'boldgrid_background_type' ) &&
 				! empty( $background_image ) &&
 				true === get_theme_mod( 'bgtfw_background_overlay' )
 			) {
 				$background_theme_mod = 'bgtfw_background_overlay_color';
 			}
+		}
 
-			$background_color = get_theme_mod( $background_theme_mod );
-			$background_color = explode( ':', $background_color );
-			$background_color = array_shift( $background_color );
-
-			if ( ! empty( $background_color ) ) {
-				if ( strpos( $background_color, 'neutral' ) !== false ) {
-					$classes[] = $background_color . '-background-color';
-					$classes[] = $background_color . '-text-default';
-				} else {
-					$classes[] = str_replace( '-', '', $background_color ) . '-background-color';
-					$classes[] = str_replace( '-', '', $background_color ) . '-text-default';
-				}
+		$background_color = get_theme_mod( $background_theme_mod );
+		$background_color = explode( ':', $background_color );
+		$background_color = array_shift( $background_color );
+
+		if ( ! empty( $background_color ) ) {
+			if ( strpos( $background_color, 'neutral' ) !== false ) {
+				$classes[] = $background_color . '-background-color';
+				$classes[] = $background_color . '-text-default';
+			} else {
+				$classes[] = str_replace( '-', '', $background_color ) . '-background-color';
+				$classes[] = str_replace( '-', '', $background_color ) . '-text-default';
 			}
 		}
 

src/includes/configs/customizer/controls.config.php

@@ -57,7 +57,7 @@
 		'label' => __( 'Background Image Size', 'bgtfw' ),
 		'section' => 'background_image',
 		'settings' => 'boldgrid_background_image_size',
-		'transport' => 'postMessage',
+		'transport' => 'refresh',
 		'default'     => 'cover',
 		'priority' => 15,
 		'choices' => [
@@ -1675,28 +1675,28 @@
 		),
 	),
 	'bgtfw_header_overlay_color' => array(
-		'type'        => 'bgtfw-palette-selector',
-		'transport'   => 'postMessage',
-		'settings'    => 'bgtfw_header_overlay_color',
-		'label'       => esc_attr__( 'Overlay Color', 'bgtfw' ),
-		'section'     => 'header_image',
-		'priority'    => 25,
-		'default'     => 'color-1',
-		'choices'     => array(
+		'type'              => 'bgtfw-palette-selector',
+		'transport'         => 'postMessage',
+		'settings'          => 'bgtfw_header_overlay_color',
+		'label'             => esc_attr__( 'Overlay Color', 'bgtfw' ),
+		'section'           => 'header_image',
+		'priority'          => 25,
+		'default'           => 'color-1',
+		'choices'           => array(
 			'colors' => $bgtfw_formatted_palette,
 			'size' => $bgtfw_palette->get_palette_size( $bgtfw_formatted_palette ),
 		),
 		'sanitize_callback' => array( $bgtfw_color_sanitize, 'sanitize_palette_selector' ),
 	),
 	'bgtfw_header_overlay_alpha' => array(
-		'type'        => 'slider',
-		'transport'   => 'postMessage',
-		'settings'    => 'bgtfw_header_overlay_alpha',
-		'label'       => esc_attr__( 'Overlay Opacity', 'bgtfw' ),
-		'section'     => 'header_image',
-		'priority'    => 30,
-		'default'     => '0.70',
-		'choices'     => array(
+		'type'      => 'slider',
+		'transport' => 'postMessage',
+		'settings'  => 'bgtfw_header_overlay_alpha',
+		'label'     => esc_attr__( 'Overlay Opacity', 'bgtfw' ),
+		'section'   => 'header_image',
+		'priority'  => 30,
+		'default'   => '0.70',
+		'choices'   => array(
 			'min'  => '0',
 			'max'  => '1',
 			'step' => '.01',