prevent popup from going off the window

This commit is contained in:
Alex Yatskov 2016-12-28 19:13:19 -08:00
parent c7e9179b68
commit ef24b4f236

View File

@ -23,11 +23,13 @@ class Popup {
this.offset = 10; this.offset = 10;
} }
showAt(pos, content) { show(rect, content) {
this.inject(); this.inject();
this.container.style.left = pos.x + 'px'; this.container.style.left = rect.x + 'px';
this.container.style.top = pos.y + '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.container.style.visibility = 'visible';
this.setContent(content); this.setContent(content);
@ -38,17 +40,23 @@ class Popup {
const containerRect = this.container.getBoundingClientRect(); const containerRect = this.container.getBoundingClientRect();
let posX = elementRect.left; let x = elementRect.left;
if (posX + containerRect.width >= window.innerWidth) { let width = containerRect.width;
posX = window.innerWidth - 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; let y = elementRect.bottom + this.offset;
if (posY + containerRect.height >= window.innerHeight) { let height = containerRect.height;
posY = elementRect.top - containerRect.height - this.offset; 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() { visible() {