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 index 262ff512..15e104f0 100644 --- 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 @@ -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) { 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 new file mode 100644 index 00000000..49384d0c --- /dev/null +++ b/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 }; diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js index 4a20b4f0..8636d776 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js +++ b/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; } } diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js index 300f5efa..cf8a2aef 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js +++ b/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], }, diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss index a68011a9..8bb527a0 100644 --- a/src/bundle/Resources/public/scss/_balloon-form.scss +++ b/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); } } diff --git a/src/bundle/Resources/public/scss/_custom-tag-attributes.scss b/src/bundle/Resources/public/scss/_custom-tag-attributes.scss index c1cc73fa..74216ac0 100644 --- a/src/bundle/Resources/public/scss/_custom-tag-attributes.scss +++ b/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); }