summaryrefslogtreecommitdiff
path: root/ext/mixed/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-22 11:19:21 -0500
committerGitHub <noreply@github.com>2020-11-22 11:19:21 -0500
commit7234cce4ae528db3e6177da1dbd499abd3c83837 (patch)
treeee70e6d7819a6de2d549e44c6319705117545f1c /ext/mixed/js
parent7b6a4c4e36ce65af376cd87f5f9e7c657ef2a12c (diff)
Refactor nested popup/frontend setup (#1052)
Diffstat (limited to 'ext/mixed/js')
-rw-r--r--ext/mixed/js/display.js134
1 files changed, 97 insertions, 37 deletions
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 19df9a61..ba1f3758 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -32,8 +32,9 @@
*/
class Display extends EventDispatcher {
- constructor() {
+ constructor(pageType) {
super();
+ this._pageType = pageType;
this._container = document.querySelector('#definitions');
this._definitions = [];
this._optionsContext = {depth: 0, url: window.location.href};
@@ -79,7 +80,6 @@ class Display extends EventDispatcher {
documentUtil: this._documentUtil
});
this._mode = null;
- this._ownerFrameId = null;
this._defaultAnkiFieldTemplates = null;
this._defaultAnkiFieldTemplatesPromise = null;
this._templateRenderer = new TemplateRendererProxy();
@@ -95,6 +95,13 @@ class Display extends EventDispatcher {
this._closeButton = document.querySelector('#close-button');
this._navigationPreviousButton = document.querySelector('#navigate-previous-button');
this._navigationNextButton = document.querySelector('#navigate-next-button');
+ this._frontend = null;
+ this._frontendSetupPromise = null;
+ this._depth = 0;
+ this._parentPopupId = null;
+ this._parentFrameId = null;
+ this._ownerFrameId = null;
+ this._childrenSupported = true;
this.registerActions([
['close', () => { this.onEscape(); }],
@@ -135,7 +142,9 @@ class Display extends EventDispatcher {
['setOptionsContext', {async: false, handler: this._onMessageSetOptionsContext.bind(this)}],
['setContent', {async: false, handler: this._onMessageSetContent.bind(this)}],
['clearAutoPlayTimer', {async: false, handler: this._onMessageClearAutoPlayTimer.bind(this)}],
- ['setCustomCss', {async: false, handler: this._onMessageSetCustomCss.bind(this)}]
+ ['setCustomCss', {async: false, handler: this._onMessageSetCustomCss.bind(this)}],
+ ['setContentScale', {async: false, handler: this._onMessageSetContentScale.bind(this)}],
+ ['configure', {async: true, handler: this._onMessageConfigure.bind(this)}]
]);
}
@@ -164,10 +173,6 @@ class Display extends EventDispatcher {
return this._ownerFrameId;
}
- set ownerFrameId(value) {
- this._ownerFrameId = value;
- }
-
async prepare() {
this._audioSystem.prepare();
this._updateMode();
@@ -268,6 +273,8 @@ class Display extends EventDispatcher {
preventMiddleMouse: scanning.preventMiddleMouse.onSearchQuery
}
});
+
+ this._updateNestedFrontend(options);
}
addMultipleEventListeners(selector, type, listener, options) {
@@ -365,36 +372,6 @@ class Display extends EventDispatcher {
}
}
- async setupNestedPopups({depth, parentPopupId, parentFrameId, useProxyPopup, pageType}) {
- await dynamicLoader.loadScripts([
- '/mixed/js/text-scanner.js',
- '/mixed/js/frame-client.js',
- '/fg/js/popup.js',
- '/fg/js/popup-proxy.js',
- '/fg/js/popup-window.js',
- '/fg/js/popup-factory.js',
- '/fg/js/frame-offset-forwarder.js',
- '/fg/js/frontend.js'
- ]);
-
- const {frameId} = await api.frameInformationGet();
-
- const popupFactory = new PopupFactory(frameId);
- popupFactory.prepare();
-
- const frontend = new Frontend({
- frameId,
- popupFactory,
- depth,
- parentPopupId,
- parentFrameId,
- useProxyPopup,
- pageType,
- allowRootFramePopupProxy: true
- });
- await frontend.prepare();
- }
-
authenticateMessageData(data) {
return data;
}
@@ -453,6 +430,20 @@ class Display extends EventDispatcher {
this.setCustomCss(css);
}
+ _onMessageSetContentScale({scale}) {
+ this._setContentScale(scale);
+ }
+
+ async _onMessageConfigure({depth, parentPopupId, parentFrameId, ownerFrameId, childrenSupported, scale, optionsContext}) {
+ this._depth = depth;
+ this._parentPopupId = parentPopupId;
+ this._parentFrameId = parentFrameId;
+ this._ownerFrameId = ownerFrameId;
+ this._childrenSupported = childrenSupported;
+ this._setContentScale(scale);
+ await this.setOptionsContext(optionsContext);
+ }
+
// Private
async _onStateChanged() {
@@ -1568,4 +1559,73 @@ class Display extends EventDispatcher {
target.focus({preventScroll: true});
}
}
+
+ _setContentScale(scale) {
+ const body = document.body;
+ if (body === null) { return; }
+ body.style.fontSize = `${scale}em`;
+ }
+
+ async _updateNestedFrontend(options) {
+ const isSearchPage = (this._pageType === 'search');
+ const isEnabled = this._childrenSupported && (
+ (isSearchPage) ?
+ (options.scanning.enableOnSearchPage) :
+ (this._depth < options.scanning.popupNestingMaxDepth)
+ );
+
+ if (this._frontend === null) {
+ if (!isEnabled) { return; }
+
+ try {
+ if (this._frontendSetupPromise === null) {
+ this._frontendSetupPromise = this._setupNestedFrontend(isSearchPage);
+ }
+ await this._frontendSetupPromise;
+ } catch (e) {
+ yomichan.logError(e);
+ return;
+ } finally {
+ this._frontendSetupPromise = null;
+ }
+ }
+
+ this._frontend.setDisabledOverride(!isEnabled);
+ }
+
+ async _setupNestedFrontend(isSearchPage) {
+ const setupNestedPopupsOptions = (
+ (isSearchPage) ?
+ {useProxyPopup: false} :
+ {useProxyPopup: true, parentPopupId: this._parentPopupId, parentFrameId: this._parentFrameId}
+ );
+
+ const {frameId} = await api.frameInformationGet();
+
+ await dynamicLoader.loadScripts([
+ '/mixed/js/text-scanner.js',
+ '/mixed/js/frame-client.js',
+ '/fg/js/popup.js',
+ '/fg/js/popup-proxy.js',
+ '/fg/js/popup-window.js',
+ '/fg/js/popup-factory.js',
+ '/fg/js/frame-offset-forwarder.js',
+ '/fg/js/frontend.js'
+ ]);
+
+ const popupFactory = new PopupFactory(frameId);
+ popupFactory.prepare();
+
+ Object.assign(setupNestedPopupsOptions, {
+ depth: this._depth + 1,
+ frameId,
+ popupFactory,
+ pageType: this._pageType,
+ allowRootFramePopupProxy: true
+ });
+
+ const frontend = new Frontend(setupNestedPopupsOptions);
+ this._frontend = frontend;
+ await frontend.prepare();
+ }
}