diff --git a/online-editor.js b/online-editor.js index c411bf1..8c4727d 100644 --- a/online-editor.js +++ b/online-editor.js @@ -104,7 +104,7 @@ class BesEditor { matches.push({ range: range, - rects: this.addMistakeMarkup(range, match), + rects: this.addMistakeMarkup(range, this.correctionPanel), match: match }) }) @@ -141,22 +141,8 @@ class BesEditor { const panelParent = document.createElement('div') panelParent.classList.add('bes-correction-panel-parent') const panel = document.createElement('div') - const styles = window.getComputedStyle(edit) + this.setCorrectionPanelSize(edit, panel) panel.classList.add('bes-correction-panel') - const totalWidth = - parseFloat(styles.width) + - parseFloat(styles.marginLeft) + - parseFloat(styles.marginRight) + - parseFloat(styles.paddingLeft) + - parseFloat(styles.paddingRight) - const totalHeight = - parseFloat(styles.height) + - parseFloat(styles.marginTop) + - parseFloat(styles.marginBottom) + - parseFloat(styles.paddingTop) + - parseFloat(styles.paddingBottom) - panel.style.width = totalWidth + 'px' - panel.style.height = totalHeight + 'px' panelParent.appendChild(panel) edit.parentElement.insertBefore(panelParent, edit) @@ -214,6 +200,7 @@ class BesEditor { let filteredChildren = this.children.filter(child => child.elements === el) if (!filteredChildren.length) return + // TODO: Remove elements that are found in editor object, that way we can avoid looping through all elements. filteredChildren[0].matches.forEach(match => { for (const rect of match.rects) { for (let child of this.correctionPanel.children) { @@ -232,14 +219,18 @@ class BesEditor { } // Adds grammar mistake markup - addMistakeMarkup(range, match) { + addMistakeMarkup(range, correctionPanel) { + // TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect() const clientRects = range.getClientRects() + const correctionPanelRect = correctionPanel.getBoundingClientRect() for (let i = 0, n = clientRects.length; i < n; ++i) { const rect = clientRects[i] const highlight = document.createElement('div') highlight.classList.add('bes-typo-mistake') - highlight.style.left = `${rect.left}px` - highlight.style.top = `${rect.top}px` + const topPosition = rect.top - correctionPanelRect.top + const leftPosition = rect.left - correctionPanelRect.left + highlight.style.left = `${leftPosition}px` + highlight.style.top = `${topPosition}px` highlight.style.width = `${rect.width}px` highlight.style.height = `${rect.height}px` this.correctionPanel.appendChild(highlight) @@ -314,6 +305,24 @@ class BesEditor { return false } + setCorrectionPanelSize(editor, correctionPanel) { + const styles = window.getComputedStyle(editor) + const totalWidth = + parseFloat(styles.width) + + parseFloat(styles.marginLeft) + + parseFloat(styles.marginRight) + + parseFloat(styles.paddingLeft) + + parseFloat(styles.paddingRight) + const totalHeight = + parseFloat(styles.height) + + parseFloat(styles.marginTop) + + parseFloat(styles.marginBottom) + + parseFloat(styles.paddingTop) + + parseFloat(styles.paddingBottom) + correctionPanel.style.width = totalWidth + 'px' + correctionPanel.style.height = totalHeight + 'px' + } + static isPointInRect(x, y, rect) { return ( x >= rect.x && @@ -333,10 +342,14 @@ window.onload = () => { window.onresize = () => { besEditors.forEach(editor => { + editor.setCorrectionPanelSize(editor.el, editor.correctionPanel) editor.children.forEach(child => { editor.clearMistakeMarkup(child.elements) child.matches.forEach(match => { - match.rects = editor.addMistakeMarkup(match.range, match) + match.rects = editor.addMistakeMarkup( + match.range, + editor.correctionPanel + ) }) }) })