IBX-8837: Distraction free mode: Text obstruction by toolbar's fixed …

…position
ibexa · Oct 9, 2024 · 8f3dcb3 · 8f3dcb3
1 parent 8772790
commit 8f3dcb3
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.distraction.free.mode.js b/src/bundle/Resources/public/js/scripts/admin.distraction.free.mode.js
@@ -1,5 +1,6 @@
 (function (global, doc) {
     let activeFieldEdit = null;
+    let clearedPositionNodesData = [];
     const DISTRACTION_FREE_MODE_ENABLE_EVENT_NAME = 'ibexa-distraction-free:enable';
     const DISTRACTION_FREE_DISABLE_EVENT_NAME = 'ibexa-distraction-free:disable';
     const distractionFreeModeEnableBtns = doc.querySelectorAll('.ibexa-field-edit__distraction-free-mode-control-btn--enable');
@@ -16,6 +17,43 @@
         activeFieldEdit.classList.toggle('ibexa-field-edit--distraction-free-mode-active', active);
         editorInstance.set('distractionFreeModeActive', active);
 
+        if (active) {
+            let parentElement = activeFieldEdit.parentNode;
+
+            while (parentElement && parentElement !== doc.body) {
+                const { overflow, position } = getComputedStyle(parentElement);
+
+                if (overflow !== 'visible' || position === 'absolute') {
+                    clearedPositionNodesData.push({
+                        node: parentElement,
+                        originalInlineOverflow: parentElement.style.overflow,
+                        originalInlinePosition: parentElement.style.position,
+                    });
+
+                    parentElement.style.overflow = 'visible';
+                    parentElement.style.position = 'static';
+                }
+
+                parentElement = parentElement.parentNode;
+            }
+        } else {
+            clearedPositionNodesData.forEach(({ node, originalInlineOverflow, originalInlinePosition }) => {
+                if (originalInlineOverflow) {
+                    node.style.overflow = originalInlineOverflow;
+                } else {
+                    node.style.removeProperty('overflow');
+                }
+
+                if (originalInlinePosition) {
+                    node.style.position = originalInlinePosition;
+                } else {
+                    node.style.removeProperty('position');
+                }
+            });
+
+            clearedPositionNodesData = [];
+        }
+
         doc.body.dispatchEvent(
             new CustomEvent(dispatchEventName, {
                 detail: {