fix: weissraum auch bei inline-hoehe + oEmbed (::before) weg (v1.4.5)
Zwei faelle, die 1.4.4 nicht abdeckte: - Eigenes iframe im HTML-widget liegt in <div style="height:800px"> - inline- hoehe, keine klasse. Mein klassenbasiertes einklappen verfehlte das. - WordPress-oEmbed (testbeitrag, ohne Elementor) reserviert die hoehe ueber einen ::before-padding-trick, nicht ueber aspect-ratio. Neu: statt inline-styles zu manipulieren wird per attribut [data-cb-collapsed] + EINER eingeschleusten CSS-regel alles neutralisiert (aspect-ratio, min/height, ::before/::after padding-hack, inline height via !important). Original-styles bleiben unangetastet -> beim laden kommt die volle groesse exakt zurueck. shouldCollapse() greift jetzt auch bei inline-hoehe und computed aspect-ratio, aber nur bei "engen" wrappern (<=1 kind), damit keine ganze section schrumpft. Logik isoliert getestet. + version 1.4.5. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -48,22 +48,48 @@
|
||||
|
||||
/* ─────────────── height-reservation (no whitespace) ─────────────── */
|
||||
|
||||
// Wrappers that force a fixed aspect ratio / height around an embed. While the
|
||||
// placeholder is shown we collapse them so there is no empty space; on consent
|
||||
// we restore them so the real embed loads at its original size.
|
||||
// Known wrappers that force a fixed aspect ratio / height around an embed.
|
||||
const WRAP_SEL = '.e-youtube-base, .e-vimeo-base, .elementor-fit-aspect-ratio, '
|
||||
+ '.elementor-open-inline, .elementor-wrapper, .wp-has-aspect-ratio, '
|
||||
+ '.wp-block-embed__wrapper, .elementor-widget-video';
|
||||
|
||||
// One injected stylesheet neutralises every height reservation on a collapsed
|
||||
// wrapper — CSS aspect-ratio, min/explicit height, the ::before padding-hack
|
||||
// (WordPress oEmbed) and inline `height:Xpx`. Using a rule (with !important)
|
||||
// means we never touch the element's own inline style, so restoring is just
|
||||
// removing the attribute and the original size comes back untouched.
|
||||
function ensureCollapseStyle() {
|
||||
if ( document.getElementById( 'cb-collapse-style' ) ) return;
|
||||
const st = document.createElement( 'style' );
|
||||
st.id = 'cb-collapse-style';
|
||||
st.textContent =
|
||||
'[data-cb-collapsed]{aspect-ratio:auto !important;min-height:0 !important;height:auto !important;}'
|
||||
+ '[data-cb-collapsed]::before,[data-cb-collapsed]::after{display:none !important;padding-top:0 !important;content:none !important;}';
|
||||
( document.head || document.documentElement ).appendChild( st );
|
||||
}
|
||||
|
||||
function shouldCollapse( el ) {
|
||||
if ( ! el.matches ) return false;
|
||||
if ( el.matches( WRAP_SEL ) ) return true;
|
||||
// Otherwise only tight single-child wrappers, so we never shrink a section
|
||||
// that also holds other content.
|
||||
if ( el.childElementCount > 1 ) return false;
|
||||
if ( /height\s*:\s*\d/i.test( el.getAttribute( 'style' ) || '' ) ) return true;
|
||||
try {
|
||||
const cs = getComputedStyle( el );
|
||||
if ( cs.aspectRatio && cs.aspectRatio !== 'auto' ) return true;
|
||||
if ( parseFloat( cs.minHeight ) > 80 ) return true;
|
||||
} catch ( e ) { /* ignore */ }
|
||||
return false;
|
||||
}
|
||||
|
||||
function collapseAncestors( blocker ) {
|
||||
ensureCollapseStyle();
|
||||
let el = blocker.parentElement;
|
||||
let n = 0;
|
||||
while ( el && n < 6 ) {
|
||||
if ( el.matches && el.matches( WRAP_SEL ) ) {
|
||||
while ( el && n < 5 ) {
|
||||
if ( shouldCollapse( el ) ) {
|
||||
el.setAttribute( 'data-cb-collapsed', '1' );
|
||||
el.style.setProperty( 'aspect-ratio', 'auto', 'important' );
|
||||
el.style.setProperty( 'min-height', '0', 'important' );
|
||||
el.style.setProperty( 'height', 'auto', 'important' );
|
||||
}
|
||||
el = el.parentElement;
|
||||
n++;
|
||||
@@ -75,9 +101,6 @@
|
||||
let n = 0;
|
||||
while ( el && n < 6 ) {
|
||||
if ( el.getAttribute && el.getAttribute( 'data-cb-collapsed' ) === '1' ) {
|
||||
el.style.removeProperty( 'aspect-ratio' );
|
||||
el.style.removeProperty( 'min-height' );
|
||||
el.style.removeProperty( 'height' );
|
||||
el.removeAttribute( 'data-cb-collapsed' );
|
||||
}
|
||||
el = el.parentElement;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* Plugin Name: GDPR Content Blocker
|
||||
* Plugin URI: https://lucas-orth.de
|
||||
* Description: DSGVO-konformer Consent-Blocker für externe iframes. Lädt Drittinhalte erst nach aktiver Einwilligung.
|
||||
* Version: 1.4.4
|
||||
* Version: 1.4.5
|
||||
* Author: Lucas Orth
|
||||
* Author URI: https://lucas-orth.de
|
||||
* Text Domain: gdpr-content-blocker
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
defined( 'ABSPATH' ) || exit;
|
||||
|
||||
define( 'CB_VERSION', '1.4.4' );
|
||||
define( 'CB_VERSION', '1.4.5' );
|
||||
define( 'CB_FILE', __FILE__ );
|
||||
define( 'CB_DIR', plugin_dir_path( __FILE__ ) );
|
||||
define( 'CB_URL', plugin_dir_url( __FILE__ ) );
|
||||
|
||||
Reference in New Issue
Block a user