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

Resolve issue with resizing in textarea instances

Browse Source
This commit is contained in:
Aljaž Grilc 2024-04-25 09:17:42 +02:00
parent 5ed444f577
commit 2192845cae
1 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
service.js
View File

@ -877,9 +877,6 @@ class BesTAService {
this.textAreaEl.addEventListener('scroll', () => { this.textAreaEl.addEventListener('scroll', () => {
this.cloneDiv.scrollTop = this.textAreaEl.scrollTop this.cloneDiv.scrollTop = this.textAreaEl.scrollTop
}) })
this.textAreaEl.addEventListener('resize', () => {
this.cloneDiv.style.width = this.textAreaEl.clientWidth + 'px'
})
} }
/** /**
@ -890,10 +887,25 @@ class BesTAService {
*/ */
createCloneDiv(textAreaEl) { createCloneDiv(textAreaEl) {
const cloneDiv = document.createElement('div') const cloneDiv = document.createElement('div')
this.setCloneDivSize(textAreaEl, cloneDiv)
textAreaEl.style.zIndex = 2
textAreaEl.style.position = 'relative'
textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl)
return cloneDiv
}
/**
* Sets the size of the clone div element to match the textarea element
*
* @param {Node} textAreaEl
* @param {Node} cloneDiv
* @returns {void}
*/
setCloneDivSize(textAreaEl, cloneDiv) {
const textAreaRect = textAreaEl.getBoundingClientRect() const textAreaRect = textAreaEl.getBoundingClientRect()
const scrollTop = window.scrollY || document.documentElement.scrollTop const scrollTop = window.scrollY || document.documentElement.scrollTop
const textAreaStyles = window.getComputedStyle(textAreaEl) const textAreaStyles = window.getComputedStyle(textAreaEl)
cloneDiv.style.fontSize = textAreaStyles.fontSize cloneDiv.style.fontSize = textAreaStyles.fontSize
cloneDiv.style.fontFamily = textAreaStyles.fontFamily cloneDiv.style.fontFamily = textAreaStyles.fontFamily
cloneDiv.style.lineHeight = textAreaStyles.lineHeight cloneDiv.style.lineHeight = textAreaStyles.lineHeight
@ -910,10 +922,6 @@ class BesTAService {
cloneDiv.style.left = `${textAreaRect.left}px` cloneDiv.style.left = `${textAreaRect.left}px`
cloneDiv.style.width = cloneDiv.style.width =
parseInt(textAreaStyles.width) + parseInt(scrollbarWidth) - 2 + 'px' parseInt(textAreaStyles.width) + parseInt(scrollbarWidth) - 2 + 'px'
textAreaEl.style.zIndex = 2
textAreaEl.style.position = 'relative'
textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl)
return cloneDiv
} }
/** /**
@ -1317,6 +1325,12 @@ window.onload = () => {
window.onresize = () => { window.onresize = () => {
besServices.forEach(service => { besServices.forEach(service => {
if (service.textAreaService) {
service.textAreaService.setCloneDivSize(
service.textAreaService.textAreaEl,
service.textAreaService.cloneDiv
)
}
service.setCorrectionPanelSize( service.setCorrectionPanelSize(
service.hostElement, service.hostElement,
service.correctionPanel, service.correctionPanel,