Implement ResizeObserver to observe resizing in host elements

This commit is contained in:
Aljaž Grilc 2024-05-22 13:31:54 +02:00
parent 89201ceaff
commit 21eaa95130

View File

@ -1,6 +1,5 @@
// TODO: Test with contenteditable="plaintext-only" // TODO: Test with contenteditable="plaintext-only"
// TODO: Implement <textarea> class // TODO: Implement <textarea> class
// TODO: Port CKEditor class from service.js
/** /**
* Collection of all grammar checking services in the document * Collection of all grammar checking services in the document
@ -9,11 +8,6 @@
*/ */
let besServices = [] let besServices = []
// TODO: Replace with Resize observer to call onResize() for hostElement only.
window.addEventListener('resize', () =>
besServices.forEach(service => service.onResize())
)
window.addEventListener('scroll', () => window.addEventListener('scroll', () =>
besServices.forEach(service => service.onScroll()) besServices.forEach(service => service.onScroll())
) )
@ -36,6 +30,11 @@ class BesService {
this.onScroll = this.onScroll.bind(this) this.onScroll = this.onScroll.bind(this)
this.hostElement.addEventListener('scroll', this.onScroll) this.hostElement.addEventListener('scroll', this.onScroll)
this.resizeObserver = new ResizeObserver(() => {
this.onResize()
})
this.resizeObserver.observe(this.hostElement)
besServices.push(this) besServices.push(this)
} }
@ -45,6 +44,7 @@ class BesService {
unregister() { unregister() {
if (this.abortController) this.abortController.abort() if (this.abortController) this.abortController.abort()
besServices = besServices.filter(item => item !== this) besServices = besServices.filter(item => item !== this)
this.resizeObserver.disconnect()
this.hostElement.removeEventListener('scroll', this.onScroll) this.hostElement.removeEventListener('scroll', this.onScroll)
this.hostElement.spellcheck = this.originalSpellcheck this.hostElement.spellcheck = this.originalSpellcheck
this.clearCorrectionPanel() this.clearCorrectionPanel()