1 files changed, 21 insertions, 42 deletions

diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 8e71fefa..d47ab4ae 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -19,25 +19,26 @@
 
 class Popup {
     constructor() {
-        this.container = null;
         this.offset = 10;
-    }
 
-    show(rect, content) {
-        this.inject();
+        this.container = document.createElement('iframe');
+        this.container.id = 'yomichan-popup';
+        this.container.addEventListener('mousedown', e => e.stopPropagation());
+        this.container.addEventListener('scroll', e => e.stopPropagation());
+        this.container.setAttribute('src', chrome.extension.getURL('fg/frame.html'));
+
+        document.body.appendChild(this.container);
+    }
 
+    showAt(rect) {
         this.container.style.left = rect.x + 'px';
         this.container.style.top = rect.y + 'px';
         this.container.style.height = rect.height + 'px';
         this.container.style.width = rect.width + 'px';
         this.container.style.visibility = 'visible';
-
-        this.setContent(content);
     }
 
-    showNextTo(elementRect, content) {
-        this.inject();
-
+    showNextTo(elementRect) {
         const containerStyle = window.getComputedStyle(this.container);
         const containerHeight = parseInt(containerStyle.height);
         const containerWidth = parseInt(containerStyle.width);
@@ -56,48 +57,26 @@ class Popup {
             y = elementRect.top - height - this.offset;
         }
 
-        this.show({x, y, width, height}, content);
-    }
-
-    visible() {
-        return this.container !== null && this.container.style.visibility !== 'hidden';
+        this.showAt({x, y, width, height});
     }
 
     hide() {
-        if (this.container !== null) {
-            this.container.style.visibility = 'hidden';
-        }
+        this.container.style.visibility = 'hidden';
     }
 
-    setContent(content) {
-        if (this.container === null) {
-            return;
-        }
-
-        this.container.contentWindow.scrollTo(0, 0);
-
-        const doc = this.container.contentDocument;
-        doc.open();
-        doc.write(content);
-        doc.close();
+    isVisible() {
+        return this.container.style.visibility !== 'hidden';
     }
 
-    invokeApi(action, params) {
-        if (this.container !== null) {
-            this.container.contentWindow.postMessage({action, params}, '*');
-        }
+    showTermDefs(definitions, options) {
+        this.invokeApi('showTermDefs', {definitions, options});
     }
 
-    inject() {
-        if (this.container !== null) {
-            return;
-        }
-
-        this.container = document.createElement('iframe');
-        this.container.id = 'yomichan-popup';
-        this.container.addEventListener('mousedown', e => e.stopPropagation());
-        this.container.addEventListener('scroll', e => e.stopPropagation());
+    showKanjiDefs(definitions, options) {
+        this.invokeApi('showKanjiDefs', {definitions, options});
+    }
 
-        document.body.appendChild(this.container);
+    invokeApi(action, params) {
+        this.container.contentWindow.postMessage({action, params}, '*');
     }
 }