alex/yomichan
1
Fork 0
Code Releases Activity

Don't use JQuery in content script

Browse Source
This commit is contained in:
Alex Yatskov 2016-03-29 22:32:40 -07:00
parent 93eaed39c1
commit 6d1fc8a20e
6 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ext/bg/background.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<body> <body>
<script src="../lib/handlebars.min.js"></script> <script src="lib/handlebars.min.js"></script>
<script src="../lib/jquery-2.2.2.min.js"></script> <script src="lib/jquery-2.2.2.min.js"></script>
<script src="templates.js"></script> <script src="templates.js"></script>
<script src="dictionary.js"></script> <script src="dictionary.js"></script>
<script src="deinflector.js"></script> <script src="deinflector.js"></script>

0
ext/lib/handlebars.min.js → ext/bg/lib/handlebars.min.js vendored
View File

0
ext/lib/jquery-2.2.2.min.js → ext/bg/lib/jquery-2.2.2.min.js vendored
View File

25
ext/client.js
View File

@ -19,12 +19,15 @@
class Client { class Client {
constructor() { constructor() {
this.popup = $('<div class="yomichan-popup"/>');
this.popupOffset = 10; this.popupOffset = 10;
this.lastMosePos = null; this.lastMosePos = null;
this.enabled = false; 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)); chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
window.addEventListener('mousedown', this.onMouseDown.bind(this)); window.addEventListener('mousedown', this.onMouseDown.bind(this));
@ -32,8 +35,6 @@ class Client {
window.addEventListener('keydown', this.onKeyDown.bind(this)); window.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('scroll', (e) => this.hidePopup()); window.addEventListener('scroll', (e) => this.hidePopup());
window.addEventListener('resize', (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')); getState((state) => this.setEnabled(state === 'enabled'));
} }
@ -84,7 +85,7 @@ class Client {
} else { } else {
range.setEnd(range.endContainer, range.startOffset + length); range.setEnd(range.endContainer, range.startOffset + length);
renderTemplate({defs: results}, 'defs.html', (html) => { renderTemplate({defs: results}, 'defs.html', (html) => {
this.popup.html(html); this.popup.innerHTML = html;
this.showPopup(range); this.showPopup(range);
}); });
} }
@ -97,18 +98,18 @@ class Client {
selection.addRange(range); selection.addRange(range);
const pos = getPopupPositionForRange(this.popup, range, this.popupOffset); 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() { hidePopup() {
if (this.popup.css('visibility') === 'hidden') { if (this.popup.style.visibility !== 'hidden') {
return;
}
const selection = window.getSelection(); const selection = window.getSelection();
selection.removeAllRanges(); selection.removeAllRanges();
this.popup.style.visibility = 'hidden';
this.popup.css({visibility: 'hidden'}); }
} }
setEnabled(enabled) { setEnabled(enabled) {

2
ext/manifest.json
View File

@ -10,7 +10,7 @@
"content_scripts": [{ "content_scripts": [{
"matches": ["*://*/*"], "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"] "css": ["client.css"]
}] }]
} }

2
ext/util.js
View File

@ -54,7 +54,7 @@ function getRangePaddedRect(range) {
function getPopupPositionForRange(popup, range, offset) { function getPopupPositionForRange(popup, range, offset) {
const rangeRect = range.getBoundingClientRect(); const rangeRect = range.getBoundingClientRect();
const popupRect = popup.get(0).getBoundingClientRect(); const popupRect = popup.getBoundingClientRect();
let posX = rangeRect.left; let posX = rangeRect.left;
if (posX + popupRect.width >= window.innerWidth) { if (posX + popupRect.width >= window.innerWidth) {