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 index 99f0f0f147..31abc55fe3 100644 --- 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,14 +1,55 @@ (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; @@ -16,6 +57,12 @@ 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: {