From 1468b7d018cc0a7d309a9e75c30265023137df1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 9 Oct 2024 15:42:58 +0200 Subject: [PATCH 1/4] IBX-8837: Distraction free mode: Text obstruction by toolbar's fixed position --- .../js/scripts/admin.distraction.free.mode.js | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) 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..ed89b18d43 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,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: { From 796fc33358cb4c7ba959c73514d059cbb60c6c9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Mon, 25 Nov 2024 17:02:44 +0100 Subject: [PATCH 2/4] put code to funcs --- .../js/scripts/admin.distraction.free.mode.js | 72 ++++++++++--------- 1 file changed, 39 insertions(+), 33 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 index ed89b18d43..7b0e72fcc4 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 @@ -5,6 +5,43 @@ 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 = []; + } const changeDistractionFreeModeState = (active) => { if (!activeFieldEdit) { return; @@ -18,40 +55,9 @@ 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; - } + resetAncestorsPositions(activeFieldEdit); } 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 = []; + restoreAncestorsPositions(); } doc.body.dispatchEvent( From 15f7bfa776abcf124a097ca57bf9e0fd3dbd85e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 27 Nov 2024 17:38:03 +0100 Subject: [PATCH 3/4] added check for previous state --- .../public/js/scripts/admin.distraction.free.mode.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 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 index 7b0e72fcc4..5f49caf03d 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,6 +1,7 @@ (function (global, doc) { let activeFieldEdit = null; - let clearedPositionNodesData = []; + 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'); @@ -40,13 +41,15 @@ } }); - clearedPositionNodesData = []; + 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; From 790b5e912c3e77e0878b4dc0216499053e3551ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Thu, 28 Nov 2024 13:39:06 +0100 Subject: [PATCH 4/4] prettier fix --- .../public/js/scripts/admin.distraction.free.mode.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 index 5f49caf03d..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 @@ -25,7 +25,7 @@ parentElement = parentElement.parentNode; } - } + }; const restoreAncestorsPositions = () => { clearedPositionNodesData.forEach(({ node, originalInlineOverflow, originalInlinePosition }) => { if (originalInlineOverflow) { @@ -42,7 +42,7 @@ }); clearedPositionNodesData.length = 0; - } + }; const changeDistractionFreeModeState = (active) => { if (!activeFieldEdit || previousDistractionFreeModeActive === active) { return;