From 44aa016deed66ce07da29fac56fd7699a5af96f7 Mon Sep 17 00:00:00 2001 From: jamesros Date: Tue, 17 Jan 2023 11:19:00 -0500 Subject: [PATCH] Issue 499 (#501) * update components to fix hvr-boxes on bg-box * update boldgrid/components dep * fix hover boxes on mobile * update versions for rc --- .../js/builder/controls/element/background.js | 56 ++++++++++++++++--- assets/js/public.js | 21 ++++++- package.json | 2 +- post-and-page-builder.php | 2 +- readme.txt | 2 +- 5 files changed, 69 insertions(+), 14 deletions(-) diff --git a/assets/js/builder/controls/element/background.js b/assets/js/builder/controls/element/background.js index f8bc8168..e47efd9a 100644 --- a/assets/js/builder/controls/element/background.js +++ b/assets/js/builder/controls/element/background.js @@ -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 = @@ -146,16 +146,35 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {}; $head.append( `` ); } - if ( hoverColor && hoverBgUrl ) { - css = `.${hoverBoxClass}:hover { background-color: ${hoverColor} !important; }`; + if ( hoverBgColor && hoverBgUrl ) { + css = `.${hoverBoxClass}:hover { background-color: ${hoverBgColor} !important; }`; $head.append( `` ); - } else if ( hoverColor && ! hoverBgUrl ) { - css = `.${hoverBoxClass}:hover { background-color: ${hoverColor} !important; }`; + } else if ( hoverBgColor && ! hoverBgUrl ) { + css = `.${hoverBoxClass}:hover { background-color: ${hoverBgColor} !important; }`; $head.append( `` ); css = `.${hoverBoxClass}:hover {background-image: unset !important; }`; $head.append( `` ); } + + 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( `` ); } ); }, @@ -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 + '")'; @@ -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 ); } ); }, @@ -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 { @@ -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(); } }, diff --git a/assets/js/public.js b/assets/js/public.js index c0a1dc7d..9189f4df 100644 --- a/assets/js/public.js +++ b/assets/js/public.js @@ -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 ) { @@ -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( `` ); } diff --git a/package.json b/package.json index 5cc63cca..e4d53cc2 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/post-and-page-builder.php b/post-and-page-builder.php index 594b1183..6e284fe2 100644 --- a/post-and-page-builder.php +++ b/post-and-page-builder.php @@ -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 * Author URI: https://www.boldgrid.com/?utm_source=ppb-wp-repo&utm_medium=author-uri&utm_campaign=ppb * Text Domain: boldgrid-editor diff --git a/readme.txt b/readme.txt index e8dbed75..8b5ca372 100644 --- a/readme.txt +++ b/readme.txt @@ -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