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

Working on new search select control. Improved popper.

Browse Source
This commit is contained in:
MattMo
2023-07-25 20:50:50 -07:00
parent c29273871b
commit a52f0e86a1
2 changed files with 80 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
popper.js
View File

@@ -28,18 +28,19 @@ class Popper extends IgniteElement {
}
render() {
return this.template.child(
new slot(this)
.style("position", "absolute")
.style("top", this.position, true, value => value == "bottom" ? "100%" : null)
.style("bottom", this.position, true, value => value == "top" ? "100%" : null)
.style("margin-top", this.position, true, value => this.position == "bottom" ? this.offset : null)
.style("margin-bottom", this.position, true, value => this.position == "top" ? this.offset : null)
.style("left", "0")
.style("width", "100%")
.style("z-index", "99999")
.hide(this.show, value => !value)
);
return this.template
.show(this.show)
.style("position", "absolute")
.style("top", this.position, true, value => value == "bottom" ? "100%" : null)
.style("bottom", this.position, true, value => value == "top" ? "100%" : null)
.style("margin-top", this.position, true, value => this.position == "bottom" ? this.offset : null)
.style("margin-bottom", this.position, true, value => this.position == "top" ? this.offset : null)
.style("left", "0")
.style("width", "100%")
.style("z-index", "99999")
.child(
new slot(this)
);
}
ready() {
@@ -55,15 +56,15 @@ class Popper extends IgniteElement {
}
//Only perform the calculation if we are ready.
if (this.offsetParent && this.firstChild) {
var bounds = this.firstChild.getBoundingClientRect();
var parentBounds = this.offsetParent.getBoundingClientRect();
if (this.offsetParent) {
var bounds = this.getBoundingClientRect();
var parentBounds = this.getBoundingClientRect();
var offset = 0;
if (this.firstChild.offsetTop < 0) {
offset = Math.abs(this.firstChild.offsetTop + bounds.height);
if (this.offsetTop < 0) {
offset = Math.abs(this.offsetTop + bounds.height);
} else {
offset = this.firstChild.offsetTop - parentBounds.height;
offset = this.offsetTop - parentBounds.height;
}
if (bounds.y < 0 && this.position != "bottom" && (bounds.y + (bounds.height * 2) + (offset * 2) + parentBounds.height) < window.innerHeight) {