diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js index f15519c9..a7c11e92 100644 --- a/ext/fg/js/client.js +++ b/ext/fg/js/client.js @@ -87,16 +87,17 @@ class Client { return; } - range.setLength(this.options.scanLength); - - if (this.lastRange !== null && this.lastRange.equals(range)) { + if (this.lastRange !== null && this.lastRange.compareOrigin(range) === 0) { return; } + range.setLength(this.options.scanLength); findTerm(range.text(), ({results, length}) => { if (length === 0) { this.hidePopup(); } else { + range.setLength(length); + const params = { defs: results, root: chrome.extension.getURL('fg') @@ -105,17 +106,21 @@ class Client { renderText( params, 'term-list.html', - (content) => this.showPopup(range, length, content) + (content) => this.showPopup(range, content) ); } }); } - showPopup(range, length, content) { - this.popup.showNextTo(range, content); + showPopup(range, content) { + this.popup.showNextTo(range.getRect(), content); if (this.options.highlightText) { - range.select(length); + if (this.lastRange !== null) { + this.lastRange.deselect(); + } + + range.select(); } this.lastRange = range; diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 92ade784..16a62b1c 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -33,11 +33,10 @@ class Popup { this.setContent(content); } - showNextTo(element, content) { + showNextTo(elementRect, content) { this.inject(); - const elementRect = element.getBoundingClientRect(); - const popupRect = this.popup.getBoundingClientRect(); + const popupRect = this.popup.getBoundingClientRect(); let posX = elementRect.left; if (posX + popupRect.width >= window.innerWidth) { @@ -49,11 +48,7 @@ class Popup { posY = elementRect.top - popupRect.height - this.offset; } - this.popup.style.left = posX + 'px'; - this.popup.style.top = posY + 'px'; - this.popup.style.visibility = 'visible'; - - this.setContent(content); + this.showAt({x: posX, y: posY}, content); } hide() { diff --git a/ext/fg/js/range.js b/ext/fg/js/range.js index 75decc20..9a98fb1a 100644 --- a/ext/fg/js/range.js +++ b/ext/fg/js/range.js @@ -40,11 +40,15 @@ class Range { } containsPoint(point) { - const rect = this.getBoundingClientRect(); + const rect = this.getPaddedRect(); return point.x >= rect.left && point.x <= rect.right; } - getBoundingClientRect() { + getRect() { + return this.rng.getBoundingClientRect(); + } + + getPaddedRect() { const range = this.rng.cloneRange(); const startOffset = range.startOffset; const endOffset = range.endOffset; @@ -56,13 +60,9 @@ class Range { return range.getBoundingClientRect(); } - select(length) { - const range = this.rng.cloneRange(); - range.setEnd(range.startContainer, range.startOffset + length); - + select() { const selection = window.getSelection(); - selection.removeAllRanges(); - selection.addRange(range); + selection.addRange(this.rng); } deselect() { @@ -70,12 +70,8 @@ class Range { selection.removeAllRanges(); } - equals(range) { - const equal = - range.rng.compareBoundaryPoints(Range.END_TO_END, this.rng) === 0 && - range.rng.compareBoundaryPoints(Range.START_TO_START, this.rng) === 0; - - return equal; + compareOrigin(range) { + return range.rng.compareBoundaryPoints(Range.END_TO_END, this.rng); }