aboutsummaryrefslogtreecommitdiff
path: root/ext/fg
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-12-30 12:42:25 -0500
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-01-22 20:38:21 -0500
commite73e4c032c2fbbeee1e1b4ce89a8627bb60d5dbb (patch)
tree8066d4f6334019dfe4513760a1518fa201f9af84 /ext/fg
parent5d366b722f4104d4f3252fb733fa31a44d4df3df (diff)
Implement scale relative to visual viewport
Diffstat (limited to 'ext/fg')
-rw-r--r--ext/fg/js/frontend.js32
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([