MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixing bugs within the popper component so that it renders correctly.

Browse Source
This commit is contained in:
Matt Mo 2020-12-01 14:55:51 -08:00
parent d24c50cacb
commit 5c58d35be4
1 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
popper.js
View File

@ -12,7 +12,7 @@ class Popper extends IgniteElement {
position: "bottom",
show: new IgniteProperty(false, () => {
if (this.show) {
this.firstUpdate();
this.update();
} else {
if (this.updateTimeout) {
clearTimeout(this.updateTimeout);
@ -42,36 +42,37 @@ class Popper extends IgniteElement {
}
ready() {
this.firstUpdate();
}
firstUpdate() {
if (this.show && this.updateTimeout == null) {
this.updateTimeout = setTimeout(() => this.update(), 200);
}
this.update();
}
update() {
if (this.show) {
if (this.updateTimeout) {
clearTimeout(this.updateTimeout);
}
this.updateTimeout = setTimeout(() => this.update(), 200);
}
var thisBounds = this.firstChild.getBoundingClientRect();
var parentBounds = this.offsetParent.getBoundingClientRect();
//Only perform the calculation if we are ready.
if (this.offsetParent && this.firstChild)
{
var bounds = this.firstChild.getBoundingClientRect();
var parentBounds = this.offsetParent.getBoundingClientRect();
var thisOffset = 0;
if (this.firstChild.offsetTop < 0) {
thisOffset = Math.abs(this.firstChild.offsetTop + thisBounds.height);
} else {
thisOffset = this.firstChild.offsetTop - parentBounds.height;
}
var offset = 0;
if (this.firstChild.offsetTop < 0) {
offset = Math.abs(this.firstChild.offsetTop + bounds.height);
} else {
offset = this.firstChild.offsetTop - parentBounds.height;
}
if (thisBounds.y < 0 && this.position != "bottom") {
this.position = "bottom";
} else if (thisBounds.y + thisBounds.height >= window.innerHeight && this.position != "top") {
this.position = "top";
} else if (parentBounds.height + parentBounds.y + thisBounds.height + thisOffset <= window.innerHeight && this.position != "bottom") {
this.position = "bottom";
if (bounds.y < 0 && this.position != "bottom" && (bounds.y + (bounds.height * 2) + offset + parentBounds.height) < window.innerHeight) {
this.position = "bottom";
} else if (bounds.y + bounds.height + offset >= window.innerHeight && this.position != "top") {
this.position = "top";
} else if (parentBounds.height + parentBounds.y + bounds.height + offset <= window.innerHeight && this.position != "bottom") {
this.position = "bottom";
}
}
}