aboutsummaryrefslogtreecommitdiff
path: root/ext/client.js
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2016-03-29 22:32:40 -0700
committerAlex Yatskov <alex@foosoft.net>2016-03-29 22:32:40 -0700
commit6d1fc8a20ee44a414d5550b7529cb383d11a3b9f (patch)
treef1ac3a5e99482cfa686c76bcab8ed905ee4b61bf /ext/client.js
parent93eaed39c167cc8890924b952f18db8043d658a1 (diff)
Don't use JQuery in content script
Diffstat (limited to 'ext/client.js')
-rw-r--r--ext/client.js27
1 files changed, 14 insertions, 13 deletions
diff --git a/ext/client.js b/ext/client.js
index 5dc7e7f3..2d9a470f 100644
--- a/ext/client.js
+++ b/ext/client.js
@@ -19,12 +19,15 @@
class Client {
constructor() {
- this.popup = $('<div class="yomichan-popup"/>');
this.popupOffset = 10;
this.lastMosePos = null;
this.enabled = false;
- $('body').append(this.popup);
+ this.popup = document.createElement('div');
+ this.popup.classList.add('yomichan-popup');
+ this.popup.addEventListener('mousedown', (e) => e.stopPropagation());
+ this.popup.addEventListener('scroll', (e) => e.stopPropagation());
+ document.body.appendChild(this.popup);
chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
window.addEventListener('mousedown', this.onMouseDown.bind(this));
@@ -32,8 +35,6 @@ class Client {
window.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('scroll', (e) => this.hidePopup());
window.addEventListener('resize', (e) => this.hidePopup());
- this.popup.mousedown((e) => e.stopPropagation());
- this.popup.scroll((e) => e.stopPropagation());
getState((state) => this.setEnabled(state === 'enabled'));
}
@@ -84,7 +85,7 @@ class Client {
} else {
range.setEnd(range.endContainer, range.startOffset + length);
renderTemplate({defs: results}, 'defs.html', (html) => {
- this.popup.html(html);
+ this.popup.innerHTML = html;
this.showPopup(range);
});
}
@@ -97,18 +98,18 @@ class Client {
selection.addRange(range);
const pos = getPopupPositionForRange(this.popup, range, this.popupOffset);
- this.popup.css({left: pos.x, top: pos.y, visibility: 'visible'});
+
+ this.popup.style.left = pos.x + 'px';
+ this.popup.style.top = pos.y + 'px';
+ this.popup.style.visibility = 'visible';
}
hidePopup() {
- if (this.popup.css('visibility') === 'hidden') {
- return;
+ if (this.popup.style.visibility !== 'hidden') {
+ const selection = window.getSelection();
+ selection.removeAllRanges();
+ this.popup.style.visibility = 'hidden';
}
-
- const selection = window.getSelection();
- selection.removeAllRanges();
-
- this.popup.css({visibility: 'hidden'});
}
setEnabled(enabled) {