Add new method to avoid conflicts with lrc -- :closes: wp-media/wp-ro…

…cket#6959
wp-media · Oct 7, 2024 · 464467f · 464467f
1 parent b2fc2f2
commit 464467f
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/src/BeaconLrc.js b/src/BeaconLrc.js
@@ -72,6 +72,53 @@ class BeaconLrc {
         return false;
     }
 
+    _checkLcrConflict(element) {
+        const conflictingElements = [];
+        const computedStyle = window.getComputedStyle(element);
+
+        const negativeMargins = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft']
+            .some(margin => parseFloat(computedStyle[margin]) < 0);
+
+        const currentElementConflicts = negativeMargins ||
+            computedStyle.contentVisibility === 'auto' ||
+            computedStyle.contentVisibility === 'hidden';
+
+        if (currentElementConflicts) {
+            conflictingElements.push({
+                element,
+                conflicts: [
+                    negativeMargins && 'negative margin',
+                    computedStyle.contentVisibility === 'auto' && 'content-visibility:auto',
+                    computedStyle.contentVisibility === 'hidden' && 'content-visibility:hidden'
+                ].filter(Boolean)
+            });
+        }
+
+        Array.from(element.children).forEach(child => {
+            const childStyle = window.getComputedStyle(child);
+
+            const childNegativeMargins = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft']
+                .some(margin => parseFloat(childStyle[margin]) < 0);
+
+            const childConflicts = childNegativeMargins ||
+                childStyle.position === 'absolute' ||
+                childStyle.position === 'fixed';
+
+            if (childConflicts) {
+                conflictingElements.push({
+                    element: child,
+                    conflicts: [
+                        childNegativeMargins && 'negative margin',
+                        childStyle.position === 'absolute' && 'position:absolute',
+                        childStyle.position === 'fixed' && 'position:fixed'
+                    ].filter(Boolean)
+                });
+            }
+        });
+
+        return conflictingElements;
+    }
+
     _processElements(elements) {
         elements.forEach(({ element, depth, distance, hash }) => {
             if (this._shouldSkipElement(element, this.config.exclusions || [])) {
@@ -82,6 +129,12 @@ class BeaconLrc {
                 return;
             }
 
+            const conflicts = this._checkLcrConflict(element);
+            if (conflicts.length > 0) {
+                this.logger.logMessage('Skipping element due to conflicts:', conflicts);
+                return;
+            }
+
             const can_push_hash = element.parentElement && this._getElementDistance(element.parentElement) < this.config.lrc_threshold && distance >= this.config.lrc_threshold;
 
             const color = can_push_hash ? "green" : distance === 0 ? "red" : "";