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