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

Cache correction panel element

Browse Source 
We will create this element dynamically in the future.

Not to collide with sibling editors, we'd need to assign it a unique ID.
--OR--
Just cache the element we will be creating and we won't need countless
document.getElementById() calls.
This commit is contained in:
Simon Rozman 2024-02-06 16:23:47 +01:00
parent 1ef4cd2a2e
commit 7fc063650c
1 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
online-editor.js
View File

@ -5,7 +5,7 @@ class BesEditor {
this.el = edit
this.timer = null
this.children = []
this.correctionPanel = document.getElementById('correction-panel') // TODO: use document.createElement('div') and insert it before edit element in DOM.
this.proof(edit)
edit.addEventListener(
'beforeinput',
@ -96,7 +96,7 @@ class BesEditor {
matches.push({
range: range,
rects: BesEditor.addMistake(range, match),
rects: this.addMistake(range, match),
match: match
})
})
@ -179,10 +179,9 @@ class BesEditor {
let filteredChildren = this.children.filter(child => child.elements === el)
if (!filteredChildren.length) return
const correctionPanel = document.getElementById('correction-panel')
filteredChildren[0].matches.forEach(match => {
for (const rect of match.rects) {
for (let child of correctionPanel.children) {
for (let child of this.correctionPanel.children) {
let childRect = child.getBoundingClientRect()
const isWithinRect =
childRect.left >= rect.left &&
@ -198,8 +197,7 @@ class BesEditor {
}
// Adds grammar mistake markup
static addMistake(range, match) {
const correctionPanel = document.getElementById('correction-panel')
addMistake(range, match) {
const clientRects = range.getClientRects()
for (let i = 0, n = clientRects.length; i < n; ++i) {
const rect = clientRects[i]
@ -209,7 +207,7 @@ class BesEditor {
highlight.style.top = `${rect.top}px`
highlight.style.width = `${rect.width}px`
highlight.style.height = `${rect.height}px`
correctionPanel.appendChild(highlight)
this.correctionPanel.appendChild(highlight)
}
return clientRects
}
@ -305,7 +303,7 @@ window.onresize = () => {
editor.children.forEach(child => {
editor.clearAllMistakes(child.elements)
child.matches.forEach(match => {
match.rects = BesEditor.addMistake(match.range, match)
match.rects = editor.addMistake(match.range, match)
})
})
})