Fixes after QA

ibexa · Sep 30, 2024 · 824e0e3 · 824e0e3
1 parent 540253b
commit 824e0e3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js
@@ -19,19 +19,13 @@ class IbexaCustomTagUI extends Plugin {
         this.addCustomTag = this.addCustomTag.bind(this);
 
         this.isNew = false;
-        this.observer = new MutationObserver((mutationList) => {
-            for (const mutation of mutationList) {
-                if (mutation.attributeName === "class") {
-                    if (mutation.oldValue !== mutation.target.classList.value) {
-                        setPanelContentMaxHeight(this.balloon.view);
-                    }
-                }
-            }
-        });
 
-        this.observer.observe(this.balloon.view.element, {
-            attributes: true,
-            attributeOldValue: true,
+        let timeoutId = null;
+        this.listenTo(this.balloon.view, 'change:top', () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                setPanelContentMaxHeight(this.balloon.view);
+            }, 0);
         });
     }
 

diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js
@@ -1,8 +1,8 @@
 const setPanelContentMaxHeight = (balloonView) => {
-    const HEADER_HEIGHT = 90;
-    const MIN_HEIGHT_VALUE = 220;
+    const MIN_HEIGHT_VALUE = 100;
+    const MARGIN = 50;
     const { innerHeight: windowHeight } = window;
-    const { top: panelTopPosition, element: panelNode } = balloonView;
+    const { element: panelNode } = balloonView;
     const panelHeader = panelNode.querySelector('.ibexa-custom-tag-panel-header');
     const panelContent = panelNode.querySelector('.ibexa-custom-tag-panel-content');
     const panelFooter = panelNode.querySelector('.ibexa-custom-tag-panel-footer');
@@ -11,15 +11,25 @@ const setPanelContentMaxHeight = (balloonView) => {
         return;
     }
 
+    const isBalloonAbovePivot = panelNode.classList.contains('ck-balloon-panel_arrow_s');
+    const panelInitialHeight = panelNode.offsetHeight;
+    const panelTopPosition = parseInt(panelNode.style.top, 10);
     const panelHeaderHeight = panelHeader?.offsetHeight ?? 0;
     const panelFooterHeight = panelFooter?.offsetHeight ?? 0;
-    const isPanelOverTopWindowEdge = panelTopPosition - HEADER_HEIGHT < 0;
-    const maxHeightValue = isPanelOverTopWindowEdge
-        ? panelContent.offsetHeight - Math.abs(panelTopPosition)
-        : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight;
+    const maxHeightValue = isBalloonAbovePivot
+        ? panelInitialHeight + panelTopPosition - panelHeaderHeight - panelFooterHeight - MARGIN
+        : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight - MARGIN;
     const panelMaxHeight = maxHeightValue < MIN_HEIGHT_VALUE ? MIN_HEIGHT_VALUE : maxHeightValue;
 
     panelContent.style.maxHeight = `${panelMaxHeight}px`;
+
+    if (isBalloonAbovePivot) {
+        const panelNewHeight = panelNode.offsetHeight;
+        const panelHeightChange = panelInitialHeight - panelNewHeight;
+        const panelNewTopPosition = panelTopPosition + panelHeightChange;
+
+        panelNode.style.top = `${panelNewTopPosition}px`;
+    }
 };
 
 export { setPanelContentMaxHeight };