Implement scale relative to visual viewport

1 files changed, 29 insertions, 3 deletions

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index d2fe9e76..43cbae73 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -44,14 +44,22 @@ class Frontend extends TextScanner {
         try {
             await this.updateOptions();
             const {zoomFactor} = await apiGetZoom();
-            this.onZoomChanged({newZoomFactor: zoomFactor});
+            this._pageZoomFactor = zoomFactor;
 
             window.addEventListener('resize', this.onResize.bind(this), false);
 
+            const visualViewport = window.visualViewport;
+            if (visualViewport !== null && typeof visualViewport === 'object') {
+                window.visualViewport.addEventListener('scroll', this.onVisualViewportScroll.bind(this));
+                window.visualViewport.addEventListener('resize', this.onVisualViewportResize.bind(this));
+            }
+
             yomichan.on('orphaned', () => this.onOrphaned());
             yomichan.on('optionsUpdate', () => this.updateOptions());
             yomichan.on('zoomChanged', (e) => this.onZoomChanged(e));
             chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
+
+            this._updateContentScale();
         } catch (e) {
             this.onError(e);
         }
@@ -90,6 +98,14 @@ class Frontend extends TextScanner {
         this._updateContentScale();
     }
 
+    onVisualViewportScroll() {
+        // TODO
+    }
+
+    onVisualViewportResize() {
+        this._updateContentScale();
+    }
+
     getMouseEventListeners() {
         return [
             ...super.getMouseEventListeners(),
@@ -196,15 +212,25 @@ class Frontend extends TextScanner {
     }
 
     _updateContentScale() {
-        const {popupScalingFactor, popupScaleRelativeToPageZoom} = this.options.general;
+        const {popupScalingFactor, popupScaleRelativeToPageZoom, popupScaleRelativeToVisualViewport} = this.options.general;
         let contentScale = popupScalingFactor;
-        if (popupScaleRelativeToPageZoom) { contentScale /= this._pageZoomFactor; }
+        if (popupScaleRelativeToPageZoom) {
+            contentScale /= this._pageZoomFactor;
+        }
+        if (popupScaleRelativeToVisualViewport) {
+            contentScale /= Frontend._getVisualViewportScale();
+        }
         if (contentScale === this._contentScale) { return; }
 
         this._contentScale = contentScale;
         this.popup.setContentScale(this._contentScale);
         this.onResize();
     }
+
+    static _getVisualViewportScale() {
+        const visualViewport = window.visualViewport;
+        return visualViewport !== null && typeof visualViewport === 'object' ? visualViewport.scale : 1.0;
+    }
 }
 
 Frontend._windowMessageHandlers = new Map([