aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/fg/js/client.js34
-rw-r--r--ext/fg/js/popup.js2
-rw-r--r--ext/fg/js/range.js39
3 files changed, 41 insertions, 34 deletions
diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js
index abeea1cc..3df713a3 100644
--- a/ext/fg/js/client.js
+++ b/ext/fg/js/client.js
@@ -87,14 +87,13 @@ class Client {
return;
}
- const text = range.text();
- if (this.lastRange !== null && this.lastRange.text() == text) {
+ if (this.lastRange !== null && this.lastRange.equalTo(range)) {
return;
}
- findTerm(popupQuery, ({results, length}) => {
+ findTerm(range.text(), ({results, length}) => {
if (length === 0) {
- this.popup.hide();
+ this.hidePopup();
} else {
const params = {
defs: results,
@@ -104,13 +103,13 @@ class Client {
renderText(
params,
'term-list.html',
- (html) => this.showPopup(range, html, popupQuery, length)
+ (content) => this.showPopup(range, length, content)
);
}
});
}
- showPopup(range, html, popupQuery, length) {
+ showPopup(range, length, content) {
if (this.options.highlightText) {
range.setEnd(range.endContainer, range.startOffset + length);
@@ -119,30 +118,17 @@ class Client {
selection.addRange(range);
}
- const pos = getPopupPositionForRange(this.popup, range, this.popupOffset);
-
- if (this.popup.getAttribute('srcdoc') !== html) {
- this.popup.setAttribute('srcdoc', html);
- }
-
- this.popup.style.left = pos.x + 'px';
- this.popup.style.top = pos.y + 'px';
- this.popup.style.visibility = 'visible';
- this.popupQuery = popupQuery;
+ this.popup.showNextTo(range, content);
}
hidePopup() {
- if (this.popup.style.visibility === 'hidden') {
- return;
- }
+ this.popup.hide();
- if (this.options.highlightText) {
- const selection = window.getSelection();
- selection.removeAllRanges();
+ if (this.options.highlightText && this.lastRange !== null) {
+ this.lastRange.deselect();
}
- this.popup.style.visibility = 'hidden';
- this.popupQuery = '';
+ this.lastRange = null;
}
setEnabled(enabled) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index f03a0549..694aa6b7 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -33,7 +33,7 @@ class Popup {
this.setContent(content);
}
- showBy(element, content) {
+ showNextTo(element, content) {
this.inject();
const elementRect = element.getBoundingClientRect();
diff --git a/ext/fg/js/range.js b/ext/fg/js/range.js
index 18c0d6bb..473cc449 100644
--- a/ext/fg/js/range.js
+++ b/ext/fg/js/range.js
@@ -45,17 +45,38 @@ class Range {
}
paddedRect() {
- const node = this.range.startContainer;
- const startOffset = this.range.startOffset;
- const endOffset = this.range.endOffset;
+ const range = this.range.cloneRange();
+ const startOffset = range.startOffset;
+ const endOffset = range.endOffset;
+ const node = range.startContainer;
- this.range.setStart(node, Math.max(0, startOffset - 1));
- this.range.setEnd(node, Math.min(node.length, endOffset + 1));
- const rect = range.getBoundingClientRect();
- this.range.setStart(node, startOffset);
- this.range.setEnd(node, endOffset);
+ range.setStart(node, Math.max(0, startOffset - 1));
+ range.setEnd(node, Math.min(node.length, endOffset + 1));
+
+ return range.getBoundingClientRect();
+ }
+
+ select(length) {
+ const range = this.range.cloneRange();
+ range.setEnd(range.startContainer, range.startOffset + length);
+
+ const selection = window.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+ }
+
+ deselect() {
+ const selection = window.getSelection();
+ selection.removeRange(this.range);
+ }
+
+ equalTo(range) {
+ const equal =
+ range.compareBoundaryPoints(Range.END_TO_END, this.range) === 0 &&
+ range.compareBoundaryPoints(Range.START_TO_START, this.range) === 0;
+
+ return equal;
- return rect;
}
static fromPos(point) {