IBX-8824: The popup for custom tags with multiple fields is not scrollable (#183)

Co-authored-by: tischsoic <[email protected]>

Author: OstafinL

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js

@@ -2,6 +2,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
 import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
 
+import { setPanelContentMaxHeight } from '../helpers/panel-helper';
 import IbexaCustomTagFormView from '../ui/custom-tag-form-view';
 import IbexaCustomTagAttributesView from '../ui/custom-tag-attributes-view';
 import IbexaButtonView from '../../common/button-view/button-view';
@@ -18,6 +19,14 @@ class IbexaCustomTagUI extends Plugin {
         this.addCustomTag = this.addCustomTag.bind(this);
 
         this.isNew = false;
+
+        let timeoutId = null;
+        this.listenTo(this.balloon.view, 'change:top', () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                setPanelContentMaxHeight(this.balloon.view);
+            }, 0);
+        });
     }
 
     isCustomTagSelected(eventData) {

src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js

@@ -0,0 +1,35 @@
+const setPanelContentMaxHeight = (balloonView) => {
+    const MIN_HEIGHT_VALUE = 100;
+    const MARGIN = 50;
+    const { innerHeight: windowHeight } = window;
+    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');
+
+    if (!panelContent) {
+        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 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 };

src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js

@@ -33,11 +33,12 @@ class IbexaCustomTagAttributesView extends View {
 
         buttonView.delegate('execute').to(this, 'edit-attributes');
 
+        const items = [];
         const children = [
             {
                 tag: 'div',
                 attributes: {
-                    class: 'ibexa-custom-tag-attributes__header',
+                    class: 'ibexa-custom-tag-attributes__header ibexa-custom-tag-panel-header',
                 },
                 children: [
                     {
@@ -63,7 +64,7 @@ class IbexaCustomTagAttributesView extends View {
             const getValueLabelMethods = window.ibexa.richText.CKEditor.customTags?.getValueLabelMethods || {};
             const valueLabel = getValueLabelMethods[name] && value !== '-' ? getValueLabelMethods[name](value, config) : value;
 
-            children.push({
+            items.push({
                 tag: 'div',
                 attributes: {
                     class: 'ibexa-custom-tag-attributes__item',
@@ -87,6 +88,14 @@ class IbexaCustomTagAttributesView extends View {
             });
         });
 
+        children.push({
+            tag: 'div',
+            attributes: {
+                class: 'ibexa-custom-tag-attributes__items ibexa-custom-tag-panel-content',
+            },
+            children: items,
+        });
+
         return children;
     }
 }

src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js

@@ -121,7 +121,7 @@ class IbexaCustomTagFormView extends View {
                 {
                     tag: 'div',
                     attributes: {
-                        class: 'ibexa-ckeditor-balloon-form__header',
+                        class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-tag-panel-header',
                     },
                     children: [label],
                 },
@@ -134,14 +134,14 @@ class IbexaCustomTagFormView extends View {
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__fields',
+                                class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-tag-panel-content',
                             },
                             children: this.children,
                         },
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__actions',
+                                class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-tag-panel-footer',
                             },
                             children: [this.saveButtonView, this.cancelButtonView],
                         },

src/bundle/Resources/public/scss/_balloon-form.scss

@@ -1,16 +1,17 @@
 .ck.ck-reset_all {
     .ibexa-ckeditor-balloon-form {
-        padding: 0 calculateRem(16px);
+        position: relative;
 
         &__header {
             border-top-left-radius: $ibexa-border-radius;
             border-top-right-radius: $ibexa-border-radius;
-            padding: calculateRem(2px) 0;
+            padding: calculateRem(2px) calculateRem(16px);
             font-weight: bold;
         }
 
         &__fields {
-            padding: calculateRem(8px) 0;
+            overflow: auto;
+            padding: calculateRem(8px) calculateRem(16px);
 
             &--attributes {
                 border-bottom: calculateRem(1px) solid $ibexa-color-light;
@@ -135,7 +136,7 @@
         }
 
         &__actions {
-            padding: 0 0 calculateRem(16px);
+            padding: calculateRem(8px) calculateRem(16px);
         }
     }
 

src/bundle/Resources/public/scss/_custom-tag-attributes.scss

@@ -17,6 +17,10 @@
             font-weight: bold;
         }
 
+        &__items {
+            overflow: auto;
+        }
+
         &__item {
             padding: calculateRem(8px) calculateRem(16px);
         }