aboutsummaryrefslogtreecommitdiff
path: root/ext/fg/js/popup.js
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2017-08-17 19:19:34 -0700
committerAlex Yatskov <alex@foosoft.net>2017-08-17 19:19:34 -0700
commit7586572fbaab7de698ec13f8712cc95e24ab6273 (patch)
tree665417b73c928694b96c00a98dd882c618e1fd1d /ext/fg/js/popup.js
parent3475150b2d1424d43f5be6fcfbdbb719a576866f (diff)
parent191336522c220b0a3cfe41515ed23946b3462217 (diff)
Merge branch 'dev'
Diffstat (limited to 'ext/fg/js/popup.js')
-rw-r--r--ext/fg/js/popup.js111
1 files changed, 54 insertions, 57 deletions
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index cd7e846a..03958832 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2016 Alex Yatskov <alex@foosoft.net>
+ * Copyright (C) 2016-2017 Alex Yatskov <alex@foosoft.net>
* Author: Alex Yatskov <alex@foosoft.net>
*
* This program is free software: you can redistribute it and/or modify
@@ -20,10 +20,10 @@
class Popup {
constructor() {
this.container = document.createElement('iframe');
- this.container.id = 'yomichan-popup';
+ this.container.id = 'yomichan-float';
this.container.addEventListener('mousedown', e => e.stopPropagation());
this.container.addEventListener('scroll', e => e.stopPropagation());
- this.container.setAttribute('src', chrome.extension.getURL('/fg/frame.html'));
+ this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html'));
this.container.style.width = '0px';
this.container.style.height = '0px';
this.injected = null;
@@ -40,51 +40,56 @@ class Popup {
return this.injected;
}
- 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;
- }
- }
+ async show(elementRect, options) {
+ await 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 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);
- }
+ 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;
+ } else {
+ height = Math.max(height - overflowAbove, 0);
+ y = Math.max(yAbove - height, 0);
}
+ } else {
+ y = yBelow;
+ }
+
+ 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';
+ }
- 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';
- });
+ async showOrphaned(elementRect, options) {
+ await this.show(elementRect, options);
+ this.invokeApi('orphaned');
}
hide() {
@@ -95,22 +100,14 @@ class Popup {
return this.injected && this.container.style.visibility !== 'hidden';
}
- showTermDefs(elementRect, definitions, options, context) {
- this.show(elementRect, options).then(() => {
- this.invokeApi('showTermDefs', {definitions, options, context});
- });
- }
-
- showKanjiDefs(elementRect, definitions, options, context) {
- this.show(elementRect, options).then(() => {
- this.invokeApi('showKanjiDefs', {definitions, options, context});
- });
+ async termsShow(elementRect, definitions, options, context) {
+ await this.show(elementRect, options);
+ this.invokeApi('termsShow', {definitions, options, context});
}
- showOrphaned(elementRect, options) {
- this.show(elementRect, options).then(() => {
- this.invokeApi('showOrphaned');
- });
+ async kanjiShow(elementRect, definitions, options, context) {
+ await this.show(elementRect, options);
+ this.invokeApi('kanjiShow', {definitions, options, context});
}
invokeApi(action, params={}) {