Popup stub now working.

ext/client.css

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2016  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.yomichan-popup {
+    background-color: #fff;
+    border:           1px solid #999;
+    box-shadow:       0 0 10px rgba(0, 0, 0, .5);
+    padding:          10px;
+    pointer-events:   none;
+    position:         fixed;
+    width:            auto;
+}

ext/client.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2016  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+class Client {
+    constructor() {
+        $('body').append('<div class="yomichan-popup"/>');
+
+        this.popup       = $('.yomichan-popup');
+        this.popupOffset = 10;
+
+        window.addEventListener('mousemove', whenEnabled(this.onMouseMove.bind(this)));
+    }
+
+    onMouseMove(e) {
+        const range = getRangeAtCursor(e, 10);
+        if (range === null) {
+            this.hidePopup();
+            return;
+        }
+
+        const rect = getRangePaddedRect(range);
+        if (e.clientX < rect.left || e.clientX > rect.right) {
+            this.hidePopup();
+            return;
+        }
+
+        this.showPopup(range);
+    }
+
+    showPopup(range) {
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        const pos = getPopupPositionForRange(this.popup, range, this.popupOffset);
+        this.popup.css({left: pos.x, top: pos.y, visibility: 'visible'});
+    }
+
+    hidePopup() {
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+
+        this.popup.css({visibility: 'hidden'});
+    }
+}
+
+window.yomiClient = new Client();

ext/manifest.json

@@ -9,6 +9,7 @@
 
     "content_scripts": [{
         "matches": ["*://*/*"],
-        "js":      ["content.js", "api.js"]
+        "js":      ["lib/jquery-2.2.2.min.js", "api.js", "util.js", "client.js"],
+        "css":     ["client.css"]
     }]
 }

ext/util.js

@@ -30,30 +30,51 @@ function getRangeAtCursor(e, lookAhead) {
 
     const offset = range.startOffset;
     const length = Math.min(node.length - offset, lookAhead);
+    if (length === 0) {
+        return null;
+    }
 
     range.setEnd(node, offset + length);
     return range;
 }
 
+function getRangePaddedRect(range) {
+    const node        = range.startContainer;
+    const startOffset = range.startOffset;
+    const endOffset   = range.endOffset;
 
-function onMouseDown(e) {
-    // e.preventDefault();
+    range.setStart(node, Math.max(0, startOffset - 1));
+    range.setEnd(node, Math.min(node.length, endOffset + 1));
+    const rect = range.getBoundingClientRect();
+    range.setStart(node, startOffset);
+    range.setEnd(node, endOffset);
 
-    const range = getRangeAtCursor(e, 20);
-    if (range === null) {
-        return;
-    }
-
-    const selection = window.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(range);
-
-    findTerm(range.toString(), response => {
-        console.log(response);
-    });
+    return rect;
 }
 
+function getPopupPositionForRange(popup, range, offset) {
+    const rangeRect = range.getBoundingClientRect();
+    const popupRect = popup.get(0).getBoundingClientRect();
 
-(() => {
-    window.addEventListener('mousedown', onMouseDown, false);
-})();
+    let posX = rangeRect.left;
+    if (posX + popupRect.width >= window.innerWidth) {
+        posX = window.innerWidth - popupRect.width;
+    }
+
+    let posY = rangeRect.bottom + offset;
+    if (posY + popupRect.height >= window.innerHeight) {
+        posY = rangeRect.top - popupRect.height - offset;
+    }
+
+    return {x: posX, y: posY};
+}
+
+function whenEnabled(callback) {
+    return (...args) => {
+        getState((state) => {
+            if (state === 'enabled') {
+                callback(...args);
+            }
+        });
+    };
+}