Implement scale relative to visual viewport

This commit is contained in:
toasted-nutbread 2019-12-30 12:42:25 -05:00
parent 5d366b722f
commit e73e4c032c

View File

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