aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2016-12-28 19:13:19 -0800
committerAlex Yatskov <alex@foosoft.net>2016-12-28 19:13:19 -0800
commitef24b4f236b863fe6b1491af804aeefa45c410f7 (patch)
treea27b66d8d048d922b2a12036a8dcb8108d423877
parentc7e9179b6839011131c442c7a835120fd433c119 (diff)
prevent popup from going off the window
-rw-r--r--ext/fg/js/popup.js28
1 files changed, 18 insertions, 10 deletions
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 2a2f7c54..398e975e 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -23,11 +23,13 @@ class Popup {
this.offset = 10;
}
- showAt(pos, content) {
+ show(rect, content) {
this.inject();
- this.container.style.left = pos.x + 'px';
- this.container.style.top = pos.y + 'px';
+ 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';
this.setContent(content);
@@ -38,17 +40,23 @@ class Popup {
const containerRect = this.container.getBoundingClientRect();
- let posX = elementRect.left;
- if (posX + containerRect.width >= window.innerWidth) {
- posX = window.innerWidth - containerRect.width;
+ let x = elementRect.left;
+ let width = containerRect.width;
+ if (x + width >= window.innerWidth) {
+ const widthMax = window.innerWidth - x;
+ width = Math.min(width, widthMax);
+ x = window.innerWidth - width;
}
- let posY = elementRect.bottom + this.offset;
- if (posY + containerRect.height >= window.innerHeight) {
- posY = elementRect.top - containerRect.height - this.offset;
+ let y = elementRect.bottom + this.offset;
+ let height = containerRect.height;
+ if (y + height >= window.innerHeight) {
+ const heightMax = window.innerHeight - y - this.offset;
+ height = Math.min(height, heightMax);
+ y = elementRect.top - height - this.offset;
}
- this.showAt({x: posX, y: posY}, content);
+ this.show({x, y, width, height}, content);
}
visible() {