From 17641ee32d61ef8a3d2fe36a7cdd5245be44fb9f Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Fri, 6 Sep 2024 14:23:26 +0200 Subject: [PATCH 01/11] IBX-8824: The popup for custom tags with multiple fields is not scrollable --- .../block-custom-tag/custom-tag-ui.js | 19 +++++++++++++++++++ .../inline-custom-tag/inline-custom-tag-ui.js | 18 ++++++++++++++++++ .../ui/custom-tag-attributes-view.js | 13 +++++++++++-- .../custom-tags/ui/custom-tag-form-view.js | 6 +++--- .../Resources/public/scss/_balloon-form.scss | 10 ++++++---- .../public/scss/_custom-tag-attributes.scss | 4 ++++ 6 files changed, 61 insertions(+), 9 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 index 262ff512..42f5cae8 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 @@ -150,6 +150,7 @@ class IbexaCustomTagUI extends Plugin { position: { target }, }); + this.setPanelContentMaxHeight(); this.balloon.updatePosition({ target }); } @@ -183,6 +184,7 @@ class IbexaCustomTagUI extends Plugin { position: this.getBalloonPositionData(), }); + this.setPanelContentMaxHeight(); this.balloon.updatePosition(this.getBalloonPositionData()); } @@ -217,6 +219,23 @@ class IbexaCustomTagUI extends Plugin { return { target: view.domConverter.viewRangeToDom(range) }; } + setPanelContentMaxHeight() { + const { innerHeight: windowHeight } = window; + const { top: panelTopPosition } = this.balloon.view; + const { element: panelNode } = this.balloon.view; + 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'); + const panelHeaderHeight = panelHeader?.offsetHeight || 0; + const panelFooterHeight = panelFooter?.offsetHeight || 0; + const isPanelOverTopWindowEdge = panelTopPosition < 0; + const maxHeightValue = isPanelOverTopWindowEdge + ? panelContent.offsetHeight - Math.abs(panelTopPosition) + : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight; + + panelContent.style.maxHeight = `${maxHeightValue}px`; + } + addCustomTag() { const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => { outputValues[attributeName] = config.defaultValue; diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js index 4a1dd9bd..b865727a 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js @@ -90,6 +90,7 @@ class IbexaInlineCustomTagUI extends Plugin { position: this.getBalloonPositionData(), }); + this.setPanelContentMaxHeight(); this.balloon.updatePosition(this.getBalloonPositionData()); } @@ -115,6 +116,23 @@ class IbexaInlineCustomTagUI extends Plugin { return { target: view.domConverter.viewRangeToDom(range) }; } + setPanelContentMaxHeight() { + const { innerHeight: windowHeight } = window; + const { top: panelTopPosition } = this.balloon.view; + const { element: panelNode } = this.balloon.view; + 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'); + const panelHeaderHeight = panelHeader?.offsetHeight || 0; + const panelFooterHeight = panelFooter?.offsetHeight || 0; + const isPanelOverTopWindowEdge = panelTopPosition < 0; + const maxHeightValue = isPanelOverTopWindowEdge + ? panelContent.offsetHeight - Math.abs(panelTopPosition) + : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight; + + panelContent.style.maxHeight = `${maxHeightValue}px`; + } + addInlineCustomTag() { const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => { outputValues[attributeName] = config.defaultValue; 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..1c41459b 100644 --- a/src/bundle/Resources/public/scss/_balloon-form.scss +++ b/src/bundle/Resources/public/scss/_balloon-form.scss @@ -1,16 +1,18 @@ .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 +137,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); } From 214f84d41c2f335d8210006cb4bea763754547b9 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Tue, 10 Sep 2024 12:51:16 +0200 Subject: [PATCH 02/11] After CR --- .../CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js | 7 +++---- .../custom-tags/inline-custom-tag/inline-custom-tag-ui.js | 7 +++---- src/bundle/Resources/public/scss/_balloon-form.scss | 1 - 3 files changed, 6 insertions(+), 9 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 index 42f5cae8..b1fb2aa8 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 @@ -221,13 +221,12 @@ class IbexaCustomTagUI extends Plugin { setPanelContentMaxHeight() { const { innerHeight: windowHeight } = window; - const { top: panelTopPosition } = this.balloon.view; - const { element: panelNode } = this.balloon.view; + const { top: panelTopPosition, element: panelNode } = this.balloon.view; 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'); - const panelHeaderHeight = panelHeader?.offsetHeight || 0; - const panelFooterHeight = panelFooter?.offsetHeight || 0; + const panelHeaderHeight = panelHeader?.offsetHeight ?? 0; + const panelFooterHeight = panelFooter?.offsetHeight ?? 0; const isPanelOverTopWindowEdge = panelTopPosition < 0; const maxHeightValue = isPanelOverTopWindowEdge ? panelContent.offsetHeight - Math.abs(panelTopPosition) diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js index b865727a..dd43a7da 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js @@ -118,13 +118,12 @@ class IbexaInlineCustomTagUI extends Plugin { setPanelContentMaxHeight() { const { innerHeight: windowHeight } = window; - const { top: panelTopPosition } = this.balloon.view; - const { element: panelNode } = this.balloon.view; + const { top: panelTopPosition, element: panelNode } = this.balloon.view; 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'); - const panelHeaderHeight = panelHeader?.offsetHeight || 0; - const panelFooterHeight = panelFooter?.offsetHeight || 0; + const panelHeaderHeight = panelHeader?.offsetHeight ?? 0; + const panelFooterHeight = panelFooter?.offsetHeight ?? 0; const isPanelOverTopWindowEdge = panelTopPosition < 0; const maxHeightValue = isPanelOverTopWindowEdge ? panelContent.offsetHeight - Math.abs(panelTopPosition) diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss index 1c41459b..8bb527a0 100644 --- a/src/bundle/Resources/public/scss/_balloon-form.scss +++ b/src/bundle/Resources/public/scss/_balloon-form.scss @@ -11,7 +11,6 @@ &__fields { overflow: auto; - padding: calculateRem(8px) calculateRem(16px); &--attributes { From ac3260e867b5f6a68067a123d8cce3ba5653fd17 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Thu, 12 Sep 2024 12:50:24 +0200 Subject: [PATCH 03/11] After CR --- .../block-custom-tag/custom-tag-ui.js | 21 +++---------------- .../custom-tags/helpers/panel-helper.js | 17 +++++++++++++++ .../inline-custom-tag/inline-custom-tag-ui.js | 19 ++--------------- 3 files changed, 22 insertions(+), 35 deletions(-) create mode 100644 src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js 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 b1fb2aa8..bcd7db4c 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'; @@ -150,7 +151,7 @@ class IbexaCustomTagUI extends Plugin { position: { target }, }); - this.setPanelContentMaxHeight(); + setPanelContentMaxHeight(this.balloon.view); this.balloon.updatePosition({ target }); } @@ -184,7 +185,7 @@ class IbexaCustomTagUI extends Plugin { position: this.getBalloonPositionData(), }); - this.setPanelContentMaxHeight(); + setPanelContentMaxHeight(this.balloon.view); this.balloon.updatePosition(this.getBalloonPositionData()); } @@ -219,22 +220,6 @@ class IbexaCustomTagUI extends Plugin { return { target: view.domConverter.viewRangeToDom(range) }; } - setPanelContentMaxHeight() { - const { innerHeight: windowHeight } = window; - const { top: panelTopPosition, element: panelNode } = this.balloon.view; - 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'); - const panelHeaderHeight = panelHeader?.offsetHeight ?? 0; - const panelFooterHeight = panelFooter?.offsetHeight ?? 0; - const isPanelOverTopWindowEdge = panelTopPosition < 0; - const maxHeightValue = isPanelOverTopWindowEdge - ? panelContent.offsetHeight - Math.abs(panelTopPosition) - : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight; - - panelContent.style.maxHeight = `${maxHeightValue}px`; - } - addCustomTag() { const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => { outputValues[attributeName] = config.defaultValue; 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..f4e469a3 --- /dev/null +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js @@ -0,0 +1,17 @@ +const setPanelContentMaxHeight = (balloonView) => { + const { innerHeight: windowHeight } = window; + const { top: panelTopPosition, 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'); + const panelHeaderHeight = panelHeader?.offsetHeight ?? 0; + const panelFooterHeight = panelFooter?.offsetHeight ?? 0; + const isPanelOverTopWindowEdge = panelTopPosition < 0; + const maxHeightValue = isPanelOverTopWindowEdge + ? panelContent.offsetHeight - Math.abs(panelTopPosition) + : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight; + + panelContent.style.maxHeight = `${maxHeightValue}px`; +}; + +export { setPanelContentMaxHeight }; diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js index dd43a7da..f2b172d9 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-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 IbexaButtonView from '../../common/button-view/button-view'; @@ -90,7 +91,7 @@ class IbexaInlineCustomTagUI extends Plugin { position: this.getBalloonPositionData(), }); - this.setPanelContentMaxHeight(); + setPanelContentMaxHeight(this.balloon.view); this.balloon.updatePosition(this.getBalloonPositionData()); } @@ -116,22 +117,6 @@ class IbexaInlineCustomTagUI extends Plugin { return { target: view.domConverter.viewRangeToDom(range) }; } - setPanelContentMaxHeight() { - const { innerHeight: windowHeight } = window; - const { top: panelTopPosition, element: panelNode } = this.balloon.view; - 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'); - const panelHeaderHeight = panelHeader?.offsetHeight ?? 0; - const panelFooterHeight = panelFooter?.offsetHeight ?? 0; - const isPanelOverTopWindowEdge = panelTopPosition < 0; - const maxHeightValue = isPanelOverTopWindowEdge - ? panelContent.offsetHeight - Math.abs(panelTopPosition) - : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight; - - panelContent.style.maxHeight = `${maxHeightValue}px`; - } - addInlineCustomTag() { const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => { outputValues[attributeName] = config.defaultValue; From 24051e59aae12e8805014da83d9e3ecbd9be296e Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Mon, 16 Sep 2024 11:19:39 +0200 Subject: [PATCH 04/11] After QA --- .../CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js | 2 ++ .../public/js/CKEditor/custom-tags/helpers/panel-helper.js | 5 +++++ 2 files changed, 7 insertions(+) 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 bcd7db4c..26f24099 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 @@ -81,6 +81,8 @@ class IbexaCustomTagUI extends Plugin { this.showForm(); }); + setPanelContentMaxHeight(this.balloon.view); + return attributesView; } 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 index f4e469a3..72647a91 100644 --- 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 @@ -4,6 +4,11 @@ const setPanelContentMaxHeight = (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 panelHeaderHeight = panelHeader?.offsetHeight ?? 0; const panelFooterHeight = panelFooter?.offsetHeight ?? 0; const isPanelOverTopWindowEdge = panelTopPosition < 0; From e3a3fc6f4bd354e2dbcbb0030929c026e16cca1d Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Tue, 17 Sep 2024 14:50:06 +0200 Subject: [PATCH 05/11] After QA --- .../public/js/CKEditor/custom-tags/helpers/panel-helper.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index 72647a91..9c332499 100644 --- 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,4 +1,5 @@ const setPanelContentMaxHeight = (balloonView) => { + const HEADER_HEIGHT = 90; const { innerHeight: windowHeight } = window; const { top: panelTopPosition, element: panelNode } = balloonView; const panelHeader = panelNode.querySelector('.ibexa-custom-tag-panel-header'); @@ -11,7 +12,7 @@ const setPanelContentMaxHeight = (balloonView) => { const panelHeaderHeight = panelHeader?.offsetHeight ?? 0; const panelFooterHeight = panelFooter?.offsetHeight ?? 0; - const isPanelOverTopWindowEdge = panelTopPosition < 0; + const isPanelOverTopWindowEdge = panelTopPosition - HEADER_HEIGHT < 0; const maxHeightValue = isPanelOverTopWindowEdge ? panelContent.offsetHeight - Math.abs(panelTopPosition) : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight; From 6b6225b7e33a84393261ad23e5a3226616ca0e05 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 18 Sep 2024 14:11:36 +0200 Subject: [PATCH 06/11] After QA --- .../block-custom-tag/custom-tag-ui.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) 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 26f24099..86d8bbfa 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 @@ -19,6 +19,22 @@ class IbexaCustomTagUI extends Plugin { this.addCustomTag = this.addCustomTag.bind(this); this.isNew = false; + this.lastClassListValue = null; + this.observer = new MutationObserver((mutationList) => { + for (const mutation of mutationList) { + if (this.lastClassListValue !== mutation.target.classList.value) { + if (this.lastClassListValue !== null) { + setPanelContentMaxHeight(this.balloon.view); + } + + this.lastClassListValue = mutation.target.classList.value; + } + } + }); + + this.observer.observe(this.balloon.view.element, { + attributes: true, + }); } isCustomTagSelected(eventData) { From 348c5cf16d31cceb9b01f74d87382919908b69e4 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 18 Sep 2024 14:17:35 +0200 Subject: [PATCH 07/11] Prettier --- .../js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 index 86d8bbfa..cb565771 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 @@ -27,9 +27,9 @@ class IbexaCustomTagUI extends Plugin { setPanelContentMaxHeight(this.balloon.view); } - this.lastClassListValue = mutation.target.classList.value; + this.lastClassListValue = mutation.target.classList.value; } - } + } }); this.observer.observe(this.balloon.view.element, { From 73c63074c3af79c3af83cac0a13c51215895c445 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 18 Sep 2024 14:35:43 +0200 Subject: [PATCH 08/11] afetr QA --- .../public/js/CKEditor/custom-tags/helpers/panel-helper.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 index 9c332499..a51e6ca4 100644 --- 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,5 +1,6 @@ const setPanelContentMaxHeight = (balloonView) => { const HEADER_HEIGHT = 90; + const MIN_HEIGHT_VALUE = 220; const { innerHeight: windowHeight } = window; const { top: panelTopPosition, element: panelNode } = balloonView; const panelHeader = panelNode.querySelector('.ibexa-custom-tag-panel-header'); @@ -16,8 +17,9 @@ const setPanelContentMaxHeight = (balloonView) => { const maxHeightValue = isPanelOverTopWindowEdge ? panelContent.offsetHeight - Math.abs(panelTopPosition) : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight; + const panelMaxHeight = maxHeightValue < MIN_HEIGHT_VALUE ? MIN_HEIGHT_VALUE : maxHeightValue; - panelContent.style.maxHeight = `${maxHeightValue}px`; + panelContent.style.maxHeight = `${panelMaxHeight}px`; }; export { setPanelContentMaxHeight }; From 540253bb91ea8a376db480bee143cf3fe0c4fe64 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Thu, 19 Sep 2024 10:50:39 +0200 Subject: [PATCH 09/11] After CR --- .../custom-tags/block-custom-tag/custom-tag-ui.js | 8 +++----- 1 file changed, 3 insertions(+), 5 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 index cb565771..0fcc8b9e 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 @@ -19,21 +19,19 @@ class IbexaCustomTagUI extends Plugin { this.addCustomTag = this.addCustomTag.bind(this); this.isNew = false; - this.lastClassListValue = null; this.observer = new MutationObserver((mutationList) => { for (const mutation of mutationList) { - if (this.lastClassListValue !== mutation.target.classList.value) { - if (this.lastClassListValue !== null) { + if (mutation.attributeName === "class") { + if (mutation.oldValue !== mutation.target.classList.value) { setPanelContentMaxHeight(this.balloon.view); } - - this.lastClassListValue = mutation.target.classList.value; } } }); this.observer.observe(this.balloon.view.element, { attributes: true, + attributeOldValue: true, }); } From 824e0e36bfe7ba5f07357f43022acc3a0c28b81e Mon Sep 17 00:00:00 2001 From: tischsoic Date: Mon, 30 Sep 2024 09:08:12 +0200 Subject: [PATCH 10/11] Fixes after QA --- .../block-custom-tag/custom-tag-ui.js | 18 +++++--------- .../custom-tags/helpers/panel-helper.js | 24 +++++++++++++------ 2 files changed, 23 insertions(+), 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 index 0fcc8b9e..f8af0800 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 @@ -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 index a51e6ca4..49384d0c 100644 --- 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 }; From 64c053725fbb8aa0abc3240a98d395530353fc07 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Mon, 30 Sep 2024 10:43:07 +0200 Subject: [PATCH 11/11] Remove needless calls to setPanelContentMaxHeight --- .../js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js | 4 ---- .../custom-tags/inline-custom-tag/inline-custom-tag-ui.js | 2 -- 2 files changed, 6 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 index f8af0800..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 @@ -89,8 +89,6 @@ class IbexaCustomTagUI extends Plugin { this.showForm(); }); - setPanelContentMaxHeight(this.balloon.view); - return attributesView; } @@ -161,7 +159,6 @@ class IbexaCustomTagUI extends Plugin { position: { target }, }); - setPanelContentMaxHeight(this.balloon.view); this.balloon.updatePosition({ target }); } @@ -195,7 +192,6 @@ class IbexaCustomTagUI extends Plugin { position: this.getBalloonPositionData(), }); - setPanelContentMaxHeight(this.balloon.view); this.balloon.updatePosition(this.getBalloonPositionData()); } diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js index f2b172d9..4a1dd9bd 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js @@ -2,7 +2,6 @@ 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 IbexaButtonView from '../../common/button-view/button-view'; @@ -91,7 +90,6 @@ class IbexaInlineCustomTagUI extends Plugin { position: this.getBalloonPositionData(), }); - setPanelContentMaxHeight(this.balloon.view); this.balloon.updatePosition(this.getBalloonPositionData()); }