New Background Controls (#542)

* add legacy switching logic

* update bg control

* begin working on a react version

* update controls

* add saved-colors

* fix logic for loading legacy control

* remove console.log

* updated jquery & sass worker builds

* Do not show saved gradients in legacy color picker

* fix opacity issues when changing color palette

* add tooltips and selectedComponent

* fix hover childs

* add notice for new bg controls

* fix hoverchild

* update version for RC1

* update travis.yml

* add tinycolor2 to yarn.lock

* update comments

* update nvmrc

* fix spacing in control.js

* fix comments in advanced.js

* cleanup background.js

* add file comments

* removed unused styles.css file

* remove unused template files

* delete yarn-error.log

* fix broken icon control

* update boldgrid-panel

* update readme

* update travis.yml

* remove wordpress_test for now

.nvmrc

@@ -1 +1 @@
-v14.19.3
+v16.16.0

.travis.yml

@@ -1,5 +1,5 @@
 language: php
-dist: trusty
+dist: xenial
 notifications:
   email:
     on_success: never
@@ -10,13 +10,12 @@ php:
 - 7.1
 - 5.6
 before_script:
-- nvm install 14.19.3
-- nvm use 14.19.3
+- nvm install 16.16.0
+- nvm use 16.16.0
 - npm install -g gulp-cli
 - composer self-update --1
 - composer install
 - yarn install
-- bash bin/install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION
 script:
 - npm run build
 deploy:

assets/js/builder/component/icon/control.js

@@ -188,27 +188,56 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
 			self.openPanel();
 		},
 
+		/**
+		 * Check if the target is the child of a hover box element.
+		 * 
+		 * @since 1.25.0
+		 * 
+		 * @param {JQuery} $target Target Element
+		 *
+		 * @returns {boolean} True if the target is a hover child.
+		 */
+		isHoverChild: function( $target ) {
+			var $parent = $target.parent();
+
+			// Check if the target is a hover element.
+			if ( $parent.hasClass( 'has-hover-bg' ) || $parent.hasClass( 'has-hover-color' ) || $parent.hasClass( 'has-hover-image' )) {
+				return true;
+			}
+
+			// Check if the target is inside a column that is a hover element.
+			if ( 0 !== $parent.closest( 'div[class*="col"].has-hover-bg' ).length 
+				|| 0 !== $parent.closest( 'div[class*="col"].has-hover-color' ).length
+				|| 0 !== $parent.closest( 'div[class*="col"].has-hover-image' ).length
+			) {
+				return true;	
+			}
+
+			// If the target is a row, it's parent will be a container, so ensure it's grandparent is a hover element.
+			if ( $target.is( 'div.row' ) && ( 0 !== $parent.parents( '.has-hover-bg' ).length
+				|| 0 !== $parent.parents( '.has-hover-color' ).length 
+				|| 0 !== $parent.parents( '.has-hover-image' ).length )
+			) {
+				return true;
+			}
+
+			return false;
+		},
+
 		/**
 		 * Open the panel, setting the content.
 		 *
 		 * @since 1.2.7
 		 */
 		openPanel: function() {
-			var $panel = BG.Panel.$element,
-				$menu = BG.Controls.$menu,
-				$target = $menu.targetData[self.name],
-				$parent = $target.parent(),
+			var $panel               = BG.Panel.$element,
+				$menu                = BG.Controls.$menu,
+				$target              = $menu.targetData[self.name],
 				hoverVisibilityIndex = this.panel.customizeSupport.indexOf( 'hoverVisibility' ),
-				isHoverChild = false,
+				isHoverChild         = false,
 				$selected;
 
-			if ( $parent.hasClass( 'has-hover-bg' ) ) {
-				isHoverChild = true;
-			} else if ( 0 !== $parent.closest( 'div[class*="col"].has-hover-bg' ).length ) {
-				isHoverChild = true;
-			} else if ( $target.is( 'div.row' ) && 0 !== $parent.parents( 'has-hover-bg' ).length ) {
-				isHoverChild = true;
-			}
+			isHoverChild = self.isHoverChild( $target );
 
 			if ( ! isHoverChild && -1 !== hoverVisibilityIndex ) {
 				this.panel.customizeSupport.splice( hoverVisibilityIndex, 1 );

assets/js/builder/controls.js

@@ -266,7 +266,13 @@ BOLDGRID.EDITOR = BOLDGRID.EDITOR || {};
 
 			// Bind each menu control.
 			$.each( this.controls, function() {
-				self.setupControl( this );
+				/*
+				 * For each given control, check for a loadLegacyControl method.
+				 * If it does exist, that method will determine whether it loads or not.
+				 */
+				if ( ! this.hasOwnProperty( 'loadLegacyControl' ) || this.loadLegacyControl() ) {
+					self.setupControl( this );
+				}
 			} );
 
 			// Trigger a click on the body to display global controls.

assets/js/builder/controls/element/advanced.js

@@ -42,6 +42,42 @@ export class Advanced {
 		BG.Panel.$element.attr( 'data-element-type', targetType );
 	}
 
+	/**
+	 * Check if the target is the child of a hover box element.
+	 * 
+	 * @since 1.25.0
+	 *
+	 * @param {JQuery} $target Target Element
+	 *
+	 * @returns {boolean} True if the target is a hover child.
+	 */
+	isHoverChild( $target ) {
+		var $parent = $target.parent();
+
+		// Check if the target is a hover element.
+		if ( $parent.hasClass( 'has-hover-bg' ) || $parent.hasClass( 'has-hover-color' ) || $parent.hasClass( 'has-hover-image' )) {
+			return true;
+		}
+
+		// Check if the target is inside a column that is a hover element.
+		if ( 0 !== $parent.closest( 'div[class*="col"].has-hover-bg' ).length 
+			|| 0 !== $parent.closest( 'div[class*="col"].has-hover-color' ).length
+			|| 0 !== $parent.closest( 'div[class*="col"].has-hover-image' ).length
+		) {
+			return true;	
+		}
+
+		// If the target is a row, it's parent will be a container, so ensure it's grandparent is a hover element.
+		if ( $target.is( 'div.row' ) && ( 0 !== $parent.parents( '.has-hover-bg' ).length
+			|| 0 !== $parent.parents( '.has-hover-color' ).length 
+			|| 0 !== $parent.parents( '.has-hover-image' ).length )
+		) {
+			return true;
+		}
+
+		return false;
+	}
+
 	/**
 	 * Open the palette customization panel.
 	 *
@@ -63,13 +99,7 @@ export class Advanced {
 			$parent = $target.parents( '.boldgrid-section' );
 		}
 
-		if ( $parent.hasClass( 'has-hover-bg' ) ) {
-			isHoverChild = true;
-		} else if ( 0 !== $parent.closest( 'div[class*="col"].has-hover-bg' ).length ) {
-			isHoverChild = true;
-		} else if ( $target.is( 'div.row' ) && 0 !== $parent.parents( 'has-hover-bg' ).length ) {
-			isHoverChild = true;
-		}
+		isHoverChild = this.isHoverChild( $target );
 
 		hoverVisibilityIndex = this.panel.customizeSupport.indexOf( 'hoverVisibility' );