Skip to content

Commit

Permalink
Issue 499 (#501)
Browse files Browse the repository at this point in the history 
* update components to fix hvr-boxes on bg-box

* update boldgrid/components dep

* fix hover boxes on mobile

* update versions for rc
  • Loading branch information
@jamesros161
jamesros161 authored Jan 17, 2023
1 parent 9b1a841 commit 44aa016
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 14 deletions.
56 changes: 47 additions & 9 deletions assets/js/builder/controls/element/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
hoverBgSize = hoverBgSize ? hoverBgSize : 'cover',
hoverBgPos = $hoverBox.attr( 'data-hover-bg-position' ),
hoverBgPos = hoverBgPos ? hoverBgPos : '50',
hoverColor = $hoverBox.attr( 'data-hover-bg-color' );
hoverBgColor = $hoverBox.attr( 'data-hover-bg-color' );

if ( 'cover' === hoverBgSize ) {
hoverBgSize =
Expand Down Expand Up @@ -146,16 +146,35 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
$head.append( `<style id="${hoverBoxClass}-bg-size">${css}</style>` );
}

if ( hoverColor && hoverBgUrl ) {
css = `.${hoverBoxClass}:hover { background-color: ${hoverColor} !important; }`;
if ( hoverBgColor && hoverBgUrl ) {
css = `.${hoverBoxClass}:hover { background-color: ${hoverBgColor} !important; }`;
$head.append( `<style id="${hoverBoxClass}-bg-color">${css}</style>` );
} else if ( hoverColor && ! hoverBgUrl ) {
css = `.${hoverBoxClass}:hover { background-color: ${hoverColor} !important; }`;
} else if ( hoverBgColor && ! hoverBgUrl ) {
css = `.${hoverBoxClass}:hover { background-color: ${hoverBgColor} !important; }`;
$head.append( `<style id="${hoverBoxClass}-bg-color">${css}</style>` );

css = `.${hoverBoxClass}:hover {background-image: unset !important; }`;
$head.append( `<style id="${hoverBoxClass}-image">${css}</style>` );
}

css = '@media screen and (max-width: 991px) {';
if ( hoverBoxClass && hoverBgUrl && hoverOverlay ) {
let hoverCss = self.getOverlayImage( hoverOverlay ) + ', url("' + hoverBgUrl + '")';
css += `.${hoverBoxClass}.hover-mobile-bg {background-image: ${hoverCss} !important; }`;
css += `.${hoverBoxClass}.hover-mobile-bg:hover {background-image: ${
hoverCss
} !important; }`;
} else if ( hoverBoxClass && ! hoverBgUrl && hoverBgColor ) {
css += `.${hoverBoxClass}.hover-mobile-bg {
background-color: ${hoverBgColor} !important;
background-image: none !important;
}`;
} else {
css += `.${hoverBoxClass}.hover-mobile-bg { background-image: url('${
hoverBgUrl
}') !important; } }`;
}
$head.append( `<style id="${hoverBoxClass}-mobile-image">${css}</style>` );
} );
},

Expand Down Expand Up @@ -373,7 +392,8 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
$hoverBgs.each( function() {
var hoverBgClassName = $( this ).attr( 'data-hover-bg-class' ),
hoverBgUrl = $( this ).attr( 'data-hover-image-url' ),
hoverOverlay = $( this ).attr( 'data-hover-bg-overlaycolor' );
hoverOverlay = $( this ).attr( 'data-hover-bg-overlaycolor' ),
hoverBgColor = $( this ).attr( 'data-hover-bg-color' );

if ( hoverBgClassName && hoverBgUrl && hoverOverlay ) {
let hoverCss = self.getOverlayImage( hoverOverlay ) + ', url("' + hoverBgUrl + '")';
Expand All @@ -390,9 +410,24 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
self._addHeadingStyle( hoverBgClassName + '-bg-size', css );

css = '@media screen and (max-width: 991px) {';
css += `.${hoverBgClassName}.hover-mobile-bg { background-image: url('${
hoverBgUrl
}') !important; } }`;
if ( hoverBgClassName && hoverBgUrl && hoverOverlay ) {
let hoverCss = self.getOverlayImage( hoverOverlay ) + ', url("' + hoverBgUrl + '")';
css += `.${hoverBgClassName}.hover-mobile-bg {background-image: ${
hoverCss
} !important; }`;
css += `.${hoverBgClassName}.hover-mobile-bg:hover {background-image: ${
hoverCss
} !important; }`;
} else if ( hoverBgClassName && ! hoverBgUrl && hoverBgColor ) {
css += `.${hoverBgClassName}.hover-mobile-bg {
background-color: ${hoverBgColor} !important;
background-image: none !important;
}`;
} else {
css += `.${hoverBgClassName}.hover-mobile-bg { background-image: url('${
hoverBgUrl
}') !important; } }`;
}
self._addHeadingStyle( hoverBgClassName + '-mobile-image', css );
} );
},
Expand Down Expand Up @@ -1258,12 +1293,14 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
} else if ( bgImageUrl ) {
$currentSelection.css( 'background-image', `url('${bgImageUrl}')` );
}
self._setupHoverBoxes();
} else if ( 'hover-color' === type ) {
if ( hoverColor && ! hoverBgImageUrl ) {
$currentSelection.css( 'background-color', hoverColor );
} else if ( ! hoverColor && ! hoverBgImageUrl ) {
$currentSelection.css( 'background-color', 'rgba(0,0,0,0)' );
}
self._setupHoverBoxes();
} else if ( 'gradients' === type ) {
$currentSelection.css( 'background-image', $target.css( 'background-image' ) );
} else {
Expand Down Expand Up @@ -1518,6 +1555,7 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
$hoverColorControl = BG.Panel.$element.find( 'input[name="section-hover-background-color"]' );
$hoverColorControl.prev( 'label' ).css( 'background-color', hoverColor );
$hoverColorControl.val( hoverColor ).attr( 'value', hoverColor );
self._setupHoverBoxes();
}
},

Expand Down
21 changes: 19 additions & 2 deletions assets/js/public.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,7 @@ class Public {
hoverBgSize = 'background-size: auto auto !important; background-repeat: repeat !important;';
}

css += '@media screen and (min-width: 992px) {';
css += `.${hoverBoxClass}:hover {`;

if ( hoverOverlay && hoverBgUrl ) {
Expand All @@ -407,13 +408,29 @@ class Public {
css += hoverBgSize;
} else if ( hoverBgColor ) {
css += `background-color: ${hoverBgColor} !important;`;
css += 'background-image: none !important; }';
css += 'background-image: none !important;';
}
css += '}';
css += '}';

css += '@media screen and (max-width: 991px) {';
css += `.${hoverBoxClass}.hover-mobile-bg { background-image: url('${hoverBgUrl}') !important; } }`;

if ( hoverOverlay && hoverBgUrl ) {
css += `.${hoverBoxClass}.hover-mobile-bg, .${hoverBoxClass}.hover-mobile-bg:hover { `;
css += `background-image: linear-gradient(to left, ${hoverOverlay}, ${hoverOverlay} ), url('${hoverBgUrl}') !important;`;
css += `background-position: 50% ${hoverBgPos}% !important;`;
css += '}';
} else if ( ! hoverBgUrl && hoverBgColor ) {
css += `.${hoverBoxClass}.hover-mobile-bg, .${hoverBoxClass}.hover-mobile-bg:hover { `;
css += `background-color: ${hoverBgColor} !important;`;
css += 'background-image: none !important;';
css += '}';
} else {
css += `.${hoverBoxClass}.hover-mobile-bg { background-image: url('${hoverBgUrl}') !important; }`;
}
css += '}';
} );

$( 'head' ).append( `<style id="bg-hoverboxes-css">${css}</style>` );
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "boldgrid-editor",
"version": "1.22.1",
"version": "1.22.2-rc1",
"description": "Post and Page Builder is a standalone plugin which adds functionality to the existing TinyMCE Editor.",
"main": "assets/js/editor.js",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion post-and-page-builder.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Plugin Name: Post and Page Builder
* Plugin URI: https://www.boldgrid.com/boldgrid-editor/?utm_source=ppb-wp-repo&utm_medium=plugin-uri&utm_campaign=ppb
* Description: Customized drag and drop editing for posts and pages. The Post and Page Builder adds functionality to the existing TinyMCE Editor to give you easier control over your content.
* Version: 1.22.1
* Version: 1.22.2-rc1
* Author: BoldGrid <[email protected]>
* Author URI: https://www.boldgrid.com/?utm_source=ppb-wp-repo&utm_medium=author-uri&utm_campaign=ppb
* Text Domain: boldgrid-editor
Expand Down
2 changes: 1 addition & 1 deletion readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Tags: boldgrid, page builder, drag and drop, tinymce, editor, landing page
Requires at least: 4.7
Tested up to: 6.1
Requires PHP: 5.4
Stable tag: 1.22.1
Stable tag: 1.22.2-rc1
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Expand Down

0 comments on commit 44aa016

Please sign in to comment.