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) panelParent.appendChild(this.correctionPanel)
this.correctionPanel.appendChild(this.scrollPanel) this.correctionPanel.appendChild(this.scrollPanel)
// Inline elements (textarea) and CKEditor. if (this.isHostElementInline()) {
if (
this.hostElement.tagName !== 'DIV' ||
this.hostElement.classList.contains('ck-editor__editable')
) {
this.textElement.parentElement.insertBefore(panelParent, this.textElement) this.textElement.parentElement.insertBefore(panelParent, this.textElement)
this.setCorrectionPanelSize() this.setCorrectionPanelSize()
} } else {
// Block elements (contenteditable = 'true', readonly). This also works correctly if DIV element has display set to inline-block.
else {
document.body.insertBefore(panelParent, document.body.firstChild) document.body.insertBefore(panelParent, document.body.firstChild)
this.setCorrectionPanelSize() this.setCorrectionPanelSize()
} }
@ -342,10 +336,7 @@ class BesService {
this.correctionPanel.style.paddingLeft = styles.paddingLeft this.correctionPanel.style.paddingLeft = styles.paddingLeft
this.correctionPanel.style.paddingRight = styles.paddingRight this.correctionPanel.style.paddingRight = styles.paddingRight
this.scrollPanel.style.width = `${this.textElement.scrollWidth}px` this.scrollPanel.style.width = `${this.textElement.scrollWidth}px`
if ( if (this.isHostElementInline()) {
this.hostElement.tagName !== 'DIV' ||
this.hostElement.classList.contains('ck-editor__editable')
) {
const hStyles = window.getComputedStyle(this.hostElement) const hStyles = window.getComputedStyle(this.hostElement)
const totalWidth = const totalWidth =
parseFloat(styles.paddingLeft) + parseFloat(styles.paddingLeft) +
@ -464,6 +455,25 @@ class BesService {
this.statusIcon.classList.add(status) this.statusIcon.classList.add(status)
this.statusDiv.title = title 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.right = `10px`
this.statusDiv.style.bottom = `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
}
} }
/************************************************************************************************** /**************************************************************************************************