From 6d1fc8a20ee44a414d5550b7529cb383d11a3b9f Mon Sep 17 00:00:00 2001 From: Alex Yatskov Date: Tue, 29 Mar 2016 22:32:40 -0700 Subject: [PATCH] Don't use JQuery in content script --- ext/bg/background.html | 4 ++-- ext/{ => bg}/lib/handlebars.min.js | 0 ext/{ => bg}/lib/jquery-2.2.2.min.js | 0 ext/client.js | 27 ++++++++++++++------------- ext/manifest.json | 2 +- ext/util.js | 2 +- 6 files changed, 18 insertions(+), 17 deletions(-) rename ext/{ => bg}/lib/handlebars.min.js (100%) rename ext/{ => bg}/lib/jquery-2.2.2.min.js (100%) diff --git a/ext/bg/background.html b/ext/bg/background.html index f214a209..0a0018e3 100644 --- a/ext/bg/background.html +++ b/ext/bg/background.html @@ -1,8 +1,8 @@ - - + + diff --git a/ext/lib/handlebars.min.js b/ext/bg/lib/handlebars.min.js similarity index 100% rename from ext/lib/handlebars.min.js rename to ext/bg/lib/handlebars.min.js diff --git a/ext/lib/jquery-2.2.2.min.js b/ext/bg/lib/jquery-2.2.2.min.js similarity index 100% rename from ext/lib/jquery-2.2.2.min.js rename to ext/bg/lib/jquery-2.2.2.min.js 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 = $('
'); 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) { diff --git a/ext/manifest.json b/ext/manifest.json index 9c113649..4a893ceb 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -10,7 +10,7 @@ "content_scripts": [{ "matches": ["*://*/*"], - "js": ["lib/jquery-2.2.2.min.js", "api.js", "util.js", "client.js"], + "js": ["api.js", "util.js", "client.js"], "css": ["client.css"] }] } diff --git a/ext/util.js b/ext/util.js index 8db4f297..eb153e9b 100644 --- a/ext/util.js +++ b/ext/util.js @@ -54,7 +54,7 @@ function getRangePaddedRect(range) { function getPopupPositionForRange(popup, range, offset) { const rangeRect = range.getBoundingClientRect(); - const popupRect = popup.get(0).getBoundingClientRect(); + const popupRect = popup.getBoundingClientRect(); let posX = rangeRect.left; if (posX + popupRect.width >= window.innerWidth) {