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