Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Revise host element display detection logic

Browse Source 
BesService may be registered on any HTML element: <p>, <body>,
<whatever>... Not only <div>, <textarea> and CKEditor. Therefore, we
need more generic test to distinguish which resize strategy works best.
This commit is contained in:
Simon Rozman 2024-06-24 14:52:16 +02:00
parent 7dc00af858
commit bddae0793e
1 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
service.js
View File

@ -291,16 +291,10 @@ class BesService {
panelParent.appendChild(this.correctionPanel)
this.correctionPanel.appendChild(this.scrollPanel)
// Inline elements (textarea) and CKEditor.
if (
this.hostElement.tagName !== 'DIV' ||
this.hostElement.classList.contains('ck-editor__editable')
) {
if (this.isHostElementInline()) {
this.textElement.parentElement.insertBefore(panelParent, this.textElement)
this.setCorrectionPanelSize()
}
// Block elements (contenteditable = 'true', readonly). This also works correctly if DIV element has display set to inline-block.
else {
} else {
document.body.insertBefore(panelParent, document.body.firstChild)
this.setCorrectionPanelSize()
}
@ -342,10 +336,7 @@ class BesService {
this.correctionPanel.style.paddingLeft = styles.paddingLeft
this.correctionPanel.style.paddingRight = styles.paddingRight
this.scrollPanel.style.width = `${this.textElement.scrollWidth}px`
if (
this.hostElement.tagName !== 'DIV' ||
this.hostElement.classList.contains('ck-editor__editable')
) {
if (this.isHostElementInline()) {
const hStyles = window.getComputedStyle(this.hostElement)
const totalWidth =
parseFloat(styles.paddingLeft) +
@ -464,6 +455,25 @@ class BesService {
this.statusIcon.classList.add(status)
this.statusDiv.title = title
}
/**
* Tests if host element is inline
*
* @returns true if CSS display property is inline; false otherwise.
*/
isHostElementInline() {
switch (
document.defaultView
.getComputedStyle(this.hostElement, null)
.getPropertyValue('display')
.toLowerCase()
) {
case 'inline':
return true
default:
return false
}
}
}
/**************************************************************************************************
@ -1077,6 +1087,15 @@ class BesCKService extends BesTreeService {
this.statusDiv.style.right = `10px`
this.statusDiv.style.bottom = `10px`
}
/**
* Tests if host element is inline
*
* @returns true as CKEditor host elements always behave this way.
*/
isHostElementInline() {
return true
}
}
/**************************************************************************************************