prevent popup from going off the window
This commit is contained in:
parent
c7e9179b68
commit
ef24b4f236
@ -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() {
|
||||||
|
Loading…
Reference in New Issue
Block a user