summaryrefslogtreecommitdiff
path: root/ext/fg/js/popup.js
diff options
context:
space:
mode:
authorsiikamiika <siikamiika@users.noreply.github.com>2019-09-05 09:25:42 +0300
committerGitHub <noreply@github.com>2019-09-05 09:25:42 +0300
commit9cd0101b62fe99d736b4e6b9072c2aa4827311af (patch)
tree822811aae7528487bc4ebb17d363cdb4b7b0b00c /ext/fg/js/popup.js
parent4ac55da7dd5354e6c3495f04583352d0d863b7b6 (diff)
parent9028b55774f788f0b61acadb8d3ba85b2bfab34a (diff)
Merge pull request #185 from toasted-nutbread/recursive-popups
Recursive popups
Diffstat (limited to 'ext/fg/js/popup.js')
-rw-r--r--ext/fg/js/popup.js112
1 files changed, 82 insertions, 30 deletions
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 86ce575d..1b15977b 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -18,7 +18,13 @@
class Popup {
- constructor() {
+ constructor(id, depth, frameIdPromise) {
+ this.id = id;
+ this.depth = depth;
+ this.frameIdPromise = frameIdPromise;
+ this.frameId = null;
+ this.parent = null;
+ this.child = null;
this.container = document.createElement('iframe');
this.container.id = 'yomichan-float';
this.container.addEventListener('mousedown', e => e.stopPropagation());
@@ -26,26 +32,46 @@ class Popup {
this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html'));
this.container.style.width = '0px';
this.container.style.height = '0px';
- this.injected = null;
+ this.injectPromise = null;
+ this.isInjected = false;
}
inject(options) {
- if (!this.injected) {
- this.injected = new Promise((resolve, reject) => {
- this.container.addEventListener('load', () => {
- this.invokeApi('setOptions', {
- general: {
- customPopupCss: options.general.customPopupCss
- }
- });
- resolve();
- });
- this.observeFullscreen();
- this.onFullscreenChanged();
- });
+ if (this.injectPromise === null) {
+ this.injectPromise = this.createInjectPromise(options);
+ }
+ return this.injectPromise;
+ }
+
+ async createInjectPromise(options) {
+ try {
+ const {frameId} = await this.frameIdPromise;
+ if (typeof frameId === 'number') {
+ this.frameId = frameId;
+ }
+ } catch (e) {
+ // NOP
}
- return this.injected;
+ return new Promise((resolve) => {
+ const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
+ this.container.addEventListener('load', () => {
+ this.invokeApi('popupNestedInitialize', {
+ id: this.id,
+ depth: this.depth,
+ parentFrameId
+ });
+ this.invokeApi('setOptions', {
+ general: {
+ customPopupCss: options.general.customPopupCss
+ }
+ });
+ resolve();
+ });
+ this.observeFullscreen();
+ this.onFullscreenChanged();
+ this.isInjected = true;
+ });
}
async show(elementRect, writingMode, options) {
@@ -77,6 +103,8 @@ class Popup {
container.style.width = `${width}px`;
container.style.height = `${height}px`;
container.style.visibility = 'visible';
+
+ this.hideChildren();
}
static getPositionForHorizontalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral) {
@@ -178,12 +206,28 @@ class Popup {
}
hide() {
+ this.hideChildren();
+ this.hideContainer();
+ this.focusParent();
+ }
+
+ hideChildren() {
+ // recursively hides all children
+ if (this.child && !this.child.isContainerHidden()) {
+ this.child.hide();
+ }
+ }
+
+ hideContainer() {
this.container.style.visibility = 'hidden';
- this.container.blur();
+ }
+
+ isContainerHidden() {
+ return (this.container.style.visibility === 'hidden');
}
isVisible() {
- return this.injected && this.container.style.visibility !== 'hidden';
+ return this.isInjected && this.container.style.visibility !== 'hidden';
}
setVisible(visible) {
@@ -194,19 +238,27 @@ class Popup {
}
}
- containsPoint(point) {
- if (!this.isVisible()) {
- return false;
+ focusParent() {
+ if (this.parent && this.parent.container) {
+ // Chrome doesn't like focusing iframe without contentWindow.
+ this.parent.container.contentWindow.focus();
+ } else {
+ // Firefox doesn't like focusing window without first blurring the iframe.
+ // this.container.contentWindow.blur() doesn't work on Firefox for some reason.
+ this.container.blur();
+ // This is needed for Chrome.
+ window.focus();
}
+ }
- const rect = this.container.getBoundingClientRect();
- const contained =
- point.x >= rect.left &&
- point.y >= rect.top &&
- point.x < rect.right &&
- point.y < rect.bottom;
-
- return contained;
+ async containsPoint({x, y}) {
+ for (let popup = this; popup !== null && popup.isVisible(); popup = popup.child) {
+ const rect = popup.container.getBoundingClientRect();
+ if (x >= rect.left && y >= rect.top && x < rect.right && y < rect.bottom) {
+ return true;
+ }
+ }
+ return false;
}
async termsShow(elementRect, writingMode, definitions, options, context) {
@@ -220,7 +272,7 @@ class Popup {
}
clearAutoPlayTimer() {
- if (this.injected) {
+ if (this.isInjected) {
this.invokeApi('clearAutoPlayTimer');
}
}