aboutsummaryrefslogtreecommitdiff
path: root/ext/fg/js/popup.js
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2017-03-16 22:13:54 -0700
committerAlex Yatskov <alex@foosoft.net>2017-03-16 22:13:54 -0700
commit231b471f45505a8b8fc4a8b25aa685f6f877953c (patch)
treeb457c7fbe80948a5a69c054b0bcab7a67af79305 /ext/fg/js/popup.js
parent8893db14caa6d34117dcb7e38ec1af32baa89b95 (diff)
wip
Diffstat (limited to 'ext/fg/js/popup.js')
-rw-r--r--ext/fg/js/popup.js112
1 files changed, 58 insertions, 54 deletions
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 210a3688..cd7e846a 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -26,67 +26,65 @@ class Popup {
this.container.setAttribute('src', chrome.extension.getURL('/fg/frame.html'));
this.container.style.width = '0px';
this.container.style.height = '0px';
- this.injected = false;
+ this.injected = null;
}
inject() {
if (!this.injected) {
- document.body.appendChild(this.container);
- this.injected = true;
+ this.injected = new Promise((resolve, reject) => {
+ this.container.addEventListener('load', resolve);
+ document.body.appendChild(this.container);
+ });
}
- }
-
- showAt(rect) {
- this.inject();
- this.container.style.left = `${rect.x}px`;
- this.container.style.top = `${rect.y}px`;
- this.container.style.height = `${rect.height}px`;
- this.container.style.width = `${rect.width}px`;
- this.container.style.visibility = 'visible';
+ return this.injected;
}
- showNextTo(elementRect, options) {
- this.inject();
-
- const containerStyle = window.getComputedStyle(this.container);
- const containerHeight = parseInt(containerStyle.height);
- const containerWidth = parseInt(containerStyle.width);
-
- const limitX = document.body.clientWidth;
- const limitY = window.innerHeight;
-
- let x = elementRect.left;
- let width = Math.max(containerWidth, options.general.popupWidth);
- const overflowX = Math.max(x + width - limitX, 0);
- if (overflowX > 0) {
- if (x >= overflowX) {
- x -= overflowX;
- } else {
- width = limitX;
- x = 0;
+ show(elementRect, options) {
+ return this.inject().then(() => {
+ const containerStyle = window.getComputedStyle(this.container);
+ const containerHeight = parseInt(containerStyle.height);
+ const containerWidth = parseInt(containerStyle.width);
+
+ const limitX = document.body.clientWidth;
+ const limitY = window.innerHeight;
+
+ let x = elementRect.left;
+ let width = Math.max(containerWidth, options.general.popupWidth);
+ const overflowX = Math.max(x + width - limitX, 0);
+ if (overflowX > 0) {
+ if (x >= overflowX) {
+ x -= overflowX;
+ } else {
+ width = limitX;
+ x = 0;
+ }
}
- }
- let y = 0;
- let height = Math.max(containerHeight, options.general.popupHeight);
- const yBelow = elementRect.bottom + options.general.popupOffset;
- const yAbove = elementRect.top - options.general.popupOffset;
- const overflowBelow = Math.max(yBelow + height - limitY, 0);
- const overflowAbove = Math.max(height - yAbove, 0);
- if (overflowBelow > 0 || overflowAbove > 0) {
- if (overflowBelow < overflowAbove) {
- height = Math.max(height - overflowBelow, 0);
- y = yBelow;
+ let y = 0;
+ let height = Math.max(containerHeight, options.general.popupHeight);
+ const yBelow = elementRect.bottom + options.general.popupOffset;
+ const yAbove = elementRect.top - options.general.popupOffset;
+ const overflowBelow = Math.max(yBelow + height - limitY, 0);
+ const overflowAbove = Math.max(height - yAbove, 0);
+ if (overflowBelow > 0 || overflowAbove > 0) {
+ if (overflowBelow < overflowAbove) {
+ height = Math.max(height - overflowBelow, 0);
+ y = yBelow;
+ } else {
+ height = Math.max(height - overflowAbove, 0);
+ y = Math.max(yAbove - height, 0);
+ }
} else {
- height = Math.max(height - overflowAbove, 0);
- y = Math.max(yAbove - height, 0);
+ y = yBelow;
}
- } else {
- y = yBelow;
- }
- this.showAt({x, y, width, height});
+ this.container.style.left = `${x}px`;
+ this.container.style.top = `${y}px`;
+ this.container.style.width = `${width}px`;
+ this.container.style.height = `${height}px`;
+ this.container.style.visibility = 'visible';
+ });
}
hide() {
@@ -97,16 +95,22 @@ class Popup {
return this.injected && this.container.style.visibility !== 'hidden';
}
- showTermDefs(definitions, options, context) {
- this.invokeApi('showTermDefs', {definitions, options, context});
+ showTermDefs(elementRect, definitions, options, context) {
+ this.show(elementRect, options).then(() => {
+ this.invokeApi('showTermDefs', {definitions, options, context});
+ });
}
- showKanjiDefs(definitions, options, context) {
- this.invokeApi('showKanjiDefs', {definitions, options, context});
+ showKanjiDefs(elementRect, definitions, options, context) {
+ this.show(elementRect, options).then(() => {
+ this.invokeApi('showKanjiDefs', {definitions, options, context});
+ });
}
- showOrphaned() {
- this.invokeApi('showOrphaned');
+ showOrphaned(elementRect, options) {
+ this.show(elementRect, options).then(() => {
+ this.invokeApi('showOrphaned');
+ });
}
invokeApi(action, params={}) {