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

…position (#1361)
ibexa · Dec 16, 2024 · fc748c7 · fc748c7
1 parent 843ac71
commit fc748c7
Showing 1 changed file with 48 additions and 1 deletion.
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,21 +1,68 @@
 (function (global, doc) {
     let activeFieldEdit = null;
+    let previousDistractionFreeModeActive = null;
+    const 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');
     const distractionFreeModeDisableBtns = doc.querySelectorAll('.ibexa-field-edit__distraction-free-mode-control-btn--disable');
+    const resetAncestorsPositions = (field) => {
+        let parentElement = field.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;
+        }
+    };
+    const restoreAncestorsPositions = () => {
+        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.length = 0;
+    };
     const changeDistractionFreeModeState = (active) => {
-        if (!activeFieldEdit) {
+        if (!activeFieldEdit || previousDistractionFreeModeActive === active) {
             return;
         }
 
+        previousDistractionFreeModeActive = active;
+
         const dispatchEventName = active ? DISTRACTION_FREE_MODE_ENABLE_EVENT_NAME : DISTRACTION_FREE_DISABLE_EVENT_NAME;
         const editorSourceElement = activeFieldEdit.querySelector('.ibexa-data-source__richtext');
         const editorInstance = editorSourceElement.ckeditorInstance;
 
         activeFieldEdit.classList.toggle('ibexa-field-edit--distraction-free-mode-active', active);
         editorInstance.set('distractionFreeModeActive', active);
 
+        if (active) {
+            resetAncestorsPositions(activeFieldEdit);
+        } else {
+            restoreAncestorsPositions();
+        }
+
         doc.body.dispatchEvent(
             new CustomEvent(dispatchEventName, {
                 detail: {