From ac3260e867b5f6a68067a123d8cce3ba5653fd17 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Thu, 12 Sep 2024 12:50:24 +0200 Subject: [PATCH] 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;