aboutsummaryrefslogtreecommitdiff
path: root/ext/fg/js/popup.js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/fg/js/popup.js')
-rw-r--r--ext/fg/js/popup.js524
1 files changed, 286 insertions, 238 deletions
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 42475d96..7a0c6133 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2016-2017 Alex Yatskov <alex@foosoft.net>
+ * Copyright (C) 2016-2020 Alex Yatskov <alex@foosoft.net>
* Author: Alex Yatskov <alex@foosoft.net>
*
* This program is free software: you can redistribute it and/or modify
@@ -13,100 +13,241 @@
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
class Popup {
constructor(id, depth, frameIdPromise) {
- this.id = id;
- this.depth = depth;
- this.frameIdPromise = frameIdPromise;
- this.frameId = null;
- this.parent = null;
- this.child = null;
- this.childrenSupported = true;
- this.container = document.createElement('iframe');
- this.container.className = 'yomichan-float';
- this.container.addEventListener('mousedown', (e) => e.stopPropagation());
- this.container.addEventListener('scroll', (e) => e.stopPropagation());
- this.container.setAttribute('src', chrome.runtime.getURL('/fg/float.html'));
- this.container.style.width = '0px';
- this.container.style.height = '0px';
- this.injectPromise = null;
- this.isInjected = false;
- this.visible = false;
- this.visibleOverride = null;
- this.options = null;
- this.stylesheetInjectedViaApi = false;
- this.updateVisibility();
- }
-
- inject() {
- if (this.injectPromise === null) {
- this.injectPromise = this.createInjectPromise();
+ this._id = id;
+ this._depth = depth;
+ this._frameIdPromise = frameIdPromise;
+ this._frameId = null;
+ this._parent = null;
+ this._child = null;
+ this._childrenSupported = true;
+ this._injectPromise = null;
+ this._isInjected = false;
+ this._visible = false;
+ this._visibleOverride = null;
+ this._options = null;
+ this._stylesheetInjectedViaApi = false;
+
+ this._container = document.createElement('iframe');
+ this._container.className = 'yomichan-float';
+ this._container.addEventListener('mousedown', (e) => e.stopPropagation());
+ this._container.addEventListener('scroll', (e) => e.stopPropagation());
+ this._container.setAttribute('src', chrome.runtime.getURL('/fg/float.html'));
+ this._container.style.width = '0px';
+ this._container.style.height = '0px';
+
+ this._updateVisibility();
+ }
+
+ // Public properties
+
+ get parent() {
+ return this._parent;
+ }
+
+ get depth() {
+ return this._depth;
+ }
+
+ get url() {
+ return window.location.href;
+ }
+
+ // Public functions
+
+ isProxy() {
+ return false;
+ }
+
+ async setOptions(options) {
+ this._options = options;
+ this.updateTheme();
+ }
+
+ hide(changeFocus) {
+ if (!this.isVisibleSync()) {
+ return;
+ }
+
+ this._setVisible(false);
+ if (this._child !== null) {
+ this._child.hide(false);
+ }
+ if (changeFocus) {
+ this._focusParent();
}
- return this.injectPromise;
}
- async createInjectPromise() {
+ async isVisible() {
+ return this.isVisibleSync();
+ }
+
+ setVisibleOverride(visible) {
+ this._visibleOverride = visible;
+ this._updateVisibility();
+ }
+
+ async containsPoint(x, y) {
+ for (let popup = this; popup !== null && popup.isVisibleSync(); 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 showContent(elementRect, writingMode, type=null, details=null) {
+ if (!this._isInitialized()) { return; }
+ await this._show(elementRect, writingMode);
+ if (type === null) { return; }
+ this._invokeApi('setContent', {type, details});
+ }
+
+ async setCustomCss(css) {
+ this._invokeApi('setCustomCss', {css});
+ }
+
+ clearAutoPlayTimer() {
+ if (this._isInjected) {
+ this._invokeApi('clearAutoPlayTimer');
+ }
+ }
+
+ // Popup-only public functions
+
+ setParent(parent) {
+ if (parent === null) {
+ throw new Error('Cannot set popup parent to null');
+ }
+ if (this._parent !== null) {
+ throw new Error('Popup already has a parent');
+ }
+ if (parent._child !== null) {
+ throw new Error('Cannot parent popup to another popup which already has a child');
+ }
+ this._parent = parent;
+ parent._child = this;
+ }
+
+ isVisibleSync() {
+ return this._isInjected && (this._visibleOverride !== null ? this._visibleOverride : this._visible);
+ }
+
+ updateTheme() {
+ this._container.dataset.yomichanTheme = this._options.general.popupOuterTheme;
+ this._container.dataset.yomichanSiteColor = this._getSiteColor();
+ }
+
+ async setCustomOuterCss(css, injectDirectly) {
+ // Cannot repeatedly inject stylesheets using web extension APIs since there is no way to remove them.
+ if (this._stylesheetInjectedViaApi) { return; }
+
+ if (injectDirectly || Popup._isOnExtensionPage()) {
+ Popup.injectOuterStylesheet(css);
+ } else {
+ if (!css) { return; }
+ try {
+ await apiInjectStylesheet(css);
+ this._stylesheetInjectedViaApi = true;
+ } catch (e) {
+ // NOP
+ }
+ }
+ }
+
+ setChildrenSupported(value) {
+ this._childrenSupported = value;
+ }
+
+ getContainer() {
+ return this._container;
+ }
+
+ getContainerRect() {
+ return this._container.getBoundingClientRect();
+ }
+
+ static injectOuterStylesheet(css) {
+ if (Popup.outerStylesheet === null) {
+ if (!css) { return; }
+ Popup.outerStylesheet = document.createElement('style');
+ Popup.outerStylesheet.id = 'yomichan-popup-outer-stylesheet';
+ }
+
+ const outerStylesheet = Popup.outerStylesheet;
+ if (css) {
+ outerStylesheet.textContent = css;
+
+ const par = document.head;
+ if (par && outerStylesheet.parentNode !== par) {
+ par.appendChild(outerStylesheet);
+ }
+ } else {
+ outerStylesheet.textContent = '';
+ }
+ }
+
+ // Private functions
+
+ _inject() {
+ if (this._injectPromise === null) {
+ this._injectPromise = this._createInjectPromise();
+ }
+ return this._injectPromise;
+ }
+
+ async _createInjectPromise() {
try {
- const {frameId} = await this.frameIdPromise;
+ const {frameId} = await this._frameIdPromise;
if (typeof frameId === 'number') {
- this.frameId = frameId;
+ this._frameId = frameId;
}
} catch (e) {
// NOP
}
return new Promise((resolve) => {
- const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
- this.container.addEventListener('load', () => {
- this.invokeApi('initialize', {
- options: this.options,
+ const parentFrameId = (typeof this._frameId === 'number' ? this._frameId : null);
+ this._container.addEventListener('load', () => {
+ this._invokeApi('initialize', {
+ options: this._options,
popupInfo: {
- id: this.id,
- depth: this.depth,
+ id: this._id,
+ depth: this._depth,
parentFrameId
},
url: this.url,
- childrenSupported: this.childrenSupported
+ childrenSupported: this._childrenSupported
});
resolve();
});
- this.observeFullscreen();
- this.onFullscreenChanged();
- this.setCustomOuterCss(this.options.general.customPopupOuterCss, false);
- this.isInjected = true;
+ this._observeFullscreen();
+ this._onFullscreenChanged();
+ this.setCustomOuterCss(this._options.general.customPopupOuterCss, false);
+ this._isInjected = true;
});
}
- isInitialized() {
- return this.options !== null;
+ _isInitialized() {
+ return this._options !== null;
}
- async setOptions(options) {
- this.options = options;
- this.updateTheme();
- }
+ async _show(elementRect, writingMode) {
+ await this._inject();
- async showContent(elementRect, writingMode, type=null, details=null) {
- if (!this.isInitialized()) { return; }
- await this.show(elementRect, writingMode);
- if (type === null) { return; }
- this.invokeApi('setContent', {type, details});
- }
-
- async show(elementRect, writingMode) {
- await this.inject();
-
- const optionsGeneral = this.options.general;
- const container = this.container;
+ const optionsGeneral = this._options.general;
+ const container = this._container;
const containerRect = container.getBoundingClientRect();
const getPosition = (
writingMode === 'horizontal-tb' || optionsGeneral.popupVerticalTextPosition === 'default' ?
- Popup.getPositionForHorizontalText :
- Popup.getPositionForVerticalText
+ Popup._getPositionForHorizontalText :
+ Popup._getPositionForVerticalText
);
const [x, y, width, height, below] = getPosition(
@@ -126,13 +267,78 @@ class Popup {
container.style.width = `${width}px`;
container.style.height = `${height}px`;
- this.setVisible(true);
- if (this.child !== null) {
- this.child.hide(true);
+ this._setVisible(true);
+ if (this._child !== null) {
+ this._child.hide(true);
+ }
+ }
+
+ _setVisible(visible) {
+ this._visible = visible;
+ this._updateVisibility();
+ }
+
+ _updateVisibility() {
+ this._container.style.setProperty('visibility', this.isVisibleSync() ? 'visible' : 'hidden', 'important');
+ }
+
+ _focusParent() {
+ if (this._parent !== null) {
+ // Chrome doesn't like focusing iframe without contentWindow.
+ const contentWindow = this._parent._container.contentWindow;
+ if (contentWindow !== null) {
+ 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();
+ }
+ }
+
+ _getSiteColor() {
+ const color = [255, 255, 255];
+ Popup._addColor(color, Popup._getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
+ Popup._addColor(color, Popup._getColorInfo(window.getComputedStyle(document.body).backgroundColor));
+ const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
+ return dark ? 'dark' : 'light';
+ }
+
+ _invokeApi(action, params={}) {
+ this._container.contentWindow.postMessage({action, params}, '*');
+ }
+
+ _observeFullscreen() {
+ const fullscreenEvents = [
+ 'fullscreenchange',
+ 'MSFullscreenChange',
+ 'mozfullscreenchange',
+ 'webkitfullscreenchange'
+ ];
+ for (const eventName of fullscreenEvents) {
+ document.addEventListener(eventName, () => this._onFullscreenChanged(), false);
}
}
- static getPositionForHorizontalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral) {
+ _getFullscreenElement() {
+ return (
+ document.fullscreenElement ||
+ document.msFullscreenElement ||
+ document.mozFullScreenElement ||
+ document.webkitFullscreenElement
+ );
+ }
+
+ _onFullscreenChanged() {
+ const parent = (this._getFullscreenElement() || document.body || null);
+ if (parent !== null && this._container.parentNode !== parent) {
+ parent.appendChild(this._container);
+ }
+ }
+
+ static _getPositionForHorizontalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral) {
let x = elementRect.left + optionsGeneral.popupHorizontalOffset;
const overflowX = Math.max(x + width - maxWidth, 0);
if (overflowX > 0) {
@@ -147,7 +353,7 @@ class Popup {
const preferBelow = (optionsGeneral.popupHorizontalTextPosition === 'below');
const verticalOffset = optionsGeneral.popupVerticalOffset;
- const [y, h, below] = Popup.limitGeometry(
+ const [y, h, below] = Popup._limitGeometry(
elementRect.top - verticalOffset,
elementRect.bottom + verticalOffset,
height,
@@ -158,19 +364,19 @@ class Popup {
return [x, y, width, h, below];
}
- static getPositionForVerticalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral, writingMode) {
- const preferRight = Popup.isVerticalTextPopupOnRight(optionsGeneral.popupVerticalTextPosition, writingMode);
+ static _getPositionForVerticalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral, writingMode) {
+ const preferRight = Popup._isVerticalTextPopupOnRight(optionsGeneral.popupVerticalTextPosition, writingMode);
const horizontalOffset = optionsGeneral.popupHorizontalOffset2;
const verticalOffset = optionsGeneral.popupVerticalOffset2;
- const [x, w] = Popup.limitGeometry(
+ const [x, w] = Popup._limitGeometry(
elementRect.left - horizontalOffset,
elementRect.right + horizontalOffset,
width,
maxWidth,
preferRight
);
- const [y, h, below] = Popup.limitGeometry(
+ const [y, h, below] = Popup._limitGeometry(
elementRect.bottom - verticalOffset,
elementRect.top + verticalOffset,
height,
@@ -180,12 +386,12 @@ class Popup {
return [x, y, w, h, below];
}
- static isVerticalTextPopupOnRight(positionPreference, writingMode) {
+ static _isVerticalTextPopupOnRight(positionPreference, writingMode) {
switch (positionPreference) {
case 'before':
- return !Popup.isWritingModeLeftToRight(writingMode);
+ return !Popup._isWritingModeLeftToRight(writingMode);
case 'after':
- return Popup.isWritingModeLeftToRight(writingMode);
+ return Popup._isWritingModeLeftToRight(writingMode);
case 'left':
return false;
case 'right':
@@ -193,7 +399,7 @@ class Popup {
}
}
- static isWritingModeLeftToRight(writingMode) {
+ static _isWritingModeLeftToRight(writingMode) {
switch (writingMode) {
case 'vertical-lr':
case 'sideways-lr':
@@ -203,7 +409,7 @@ class Popup {
}
}
- static limitGeometry(positionBefore, positionAfter, size, limit, preferAfter) {
+ static _limitGeometry(positionBefore, positionAfter, size, limit, preferAfter) {
let after = preferAfter;
let position = 0;
const overflowBefore = Math.max(0, size - positionBefore);
@@ -225,72 +431,7 @@ class Popup {
return [position, size, after];
}
- hide(changeFocus) {
- if (!this.isVisible()) {
- return;
- }
-
- this.setVisible(false);
- if (this.child !== null) {
- this.child.hide(false);
- }
- if (changeFocus) {
- this.focusParent();
- }
- }
-
- async isVisibleAsync() {
- return this.isVisible();
- }
-
- isVisible() {
- return this.isInjected && (this.visibleOverride !== null ? this.visibleOverride : this.visible);
- }
-
- setVisible(visible) {
- this.visible = visible;
- this.updateVisibility();
- }
-
- setVisibleOverride(visible) {
- this.visibleOverride = visible;
- this.updateVisibility();
- }
-
- updateVisibility() {
- this.container.style.setProperty('visibility', this.isVisible() ? 'visible' : 'hidden', 'important');
- }
-
- focusParent() {
- if (this.parent !== null) {
- // Chrome doesn't like focusing iframe without contentWindow.
- const contentWindow = this.parent.container.contentWindow;
- if (contentWindow !== null) {
- 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();
- }
- }
-
- updateTheme() {
- this.container.dataset.yomichanTheme = this.options.general.popupOuterTheme;
- this.container.dataset.yomichanSiteColor = this.getSiteColor();
- }
-
- getSiteColor() {
- const color = [255, 255, 255];
- Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
- Popup.addColor(color, Popup.getColorInfo(window.getComputedStyle(document.body).backgroundColor));
- const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
- return dark ? 'dark' : 'light';
- }
-
- static addColor(target, color) {
+ static _addColor(target, color) {
if (color === null) { return; }
const a = color[3];
@@ -302,7 +443,7 @@ class Popup {
}
}
- static getColorInfo(cssColor) {
+ static _getColorInfo(cssColor) {
const m = /^\s*rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)\s*$/.exec(cssColor);
if (m === null) { return null; }
@@ -315,80 +456,7 @@ class Popup {
];
}
- 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 setCustomCss(css) {
- this.invokeApi('setCustomCss', {css});
- }
-
- async setCustomOuterCss(css, injectDirectly) {
- // Cannot repeatedly inject stylesheets using web extension APIs since there is no way to remove them.
- if (this.stylesheetInjectedViaApi) { return; }
-
- if (injectDirectly || Popup.isOnExtensionPage()) {
- Popup.injectOuterStylesheet(css);
- } else {
- if (!css) { return; }
- try {
- await apiInjectStylesheet(css);
- this.stylesheetInjectedViaApi = true;
- } catch (e) {
- // NOP
- }
- }
- }
-
- clearAutoPlayTimer() {
- if (this.isInjected) {
- this.invokeApi('clearAutoPlayTimer');
- }
- }
-
- invokeApi(action, params={}) {
- this.container.contentWindow.postMessage({action, params}, '*');
- }
-
- observeFullscreen() {
- const fullscreenEvents = [
- 'fullscreenchange',
- 'MSFullscreenChange',
- 'mozfullscreenchange',
- 'webkitfullscreenchange'
- ];
- for (const eventName of fullscreenEvents) {
- document.addEventListener(eventName, () => this.onFullscreenChanged(), false);
- }
- }
-
- getFullscreenElement() {
- return (
- document.fullscreenElement ||
- document.msFullscreenElement ||
- document.mozFullScreenElement ||
- document.webkitFullscreenElement
- );
- }
-
- onFullscreenChanged() {
- const parent = (this.getFullscreenElement() || document.body || null);
- if (parent !== null && this.container.parentNode !== parent) {
- parent.appendChild(this.container);
- }
- }
-
- get url() {
- return window.location.href;
- }
-
- static isOnExtensionPage() {
+ static _isOnExtensionPage() {
try {
const url = chrome.runtime.getURL('/');
return window.location.href.substring(0, url.length) === url;
@@ -396,26 +464,6 @@ class Popup {
// NOP
}
}
-
- static injectOuterStylesheet(css) {
- if (Popup.outerStylesheet === null) {
- if (!css) { return; }
- Popup.outerStylesheet = document.createElement('style');
- Popup.outerStylesheet.id = 'yomichan-popup-outer-stylesheet';
- }
-
- const outerStylesheet = Popup.outerStylesheet;
- if (css) {
- outerStylesheet.textContent = css;
-
- const par = document.head;
- if (par && outerStylesheet.parentNode !== par) {
- par.appendChild(outerStylesheet);
- }
- } else {
- outerStylesheet.textContent = '';
- }
- }
}
Popup.outerStylesheet = null;