95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
|
import { IgniteTemplate, slot } from "../ignite-html/ignite-template.js";
|
|
import { IgniteProperty } from "../ignite-html/ignite-html.js";
|
|
|
|
class Popper extends IgniteElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
get properties() {
|
|
return {
|
|
position: "bottom",
|
|
show: new IgniteProperty(false, () => {
|
|
if (this.show) {
|
|
this.firstUpdate();
|
|
} else {
|
|
if (this.updateTimeout) {
|
|
clearTimeout(this.updateTimeout);
|
|
}
|
|
|
|
this.updateTimeout = null;
|
|
}
|
|
}),
|
|
updateTimeout: null,
|
|
offset: "0.5em"
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return this.template.child(
|
|
new slot(this)
|
|
.style("position", "absolute")
|
|
.style("top", this.position, true, value => { return value == "bottom" ? "100%" : null; })
|
|
.style("bottom", this.position, true, value => { return value == "top" ? "100%" : null; })
|
|
.style("margin-top", this.position, true, value => { return this.position == "bottom" ? this.offset : null })
|
|
.style("margin-bottom", this.position, true, value => { return this.position == "top" ? this.offset : null })
|
|
.style("left", "0")
|
|
.style("width", "100%")
|
|
.style("z-index", "99999")
|
|
.hide(this.show, value => { return !value; })
|
|
);
|
|
}
|
|
|
|
ready() {
|
|
this.firstUpdate();
|
|
}
|
|
|
|
firstUpdate() {
|
|
if (this.show && this.updateTimeout == null) {
|
|
this.updateTimeout = setTimeout(() => this.update(), 200);
|
|
}
|
|
}
|
|
|
|
update() {
|
|
if (this.show) {
|
|
this.updateTimeout = setTimeout(() => this.update(), 200);
|
|
}
|
|
|
|
var thisBounds = 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;
|
|
}
|
|
|
|
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";
|
|
}
|
|
}
|
|
|
|
cleanup() {
|
|
if (this.updateTimeout) {
|
|
clearTimeout(this.updateTimeout);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("mt-popper", Popper);
|
|
|
|
class PopperTemplate extends IgniteTemplate {
|
|
constructor(...children) {
|
|
super("mt-popper", children);
|
|
}
|
|
}
|
|
|
|
export {
|
|
PopperTemplate as Popper
|
|
} |