Added placeholder support to editable-label. Implemented a chip list with chips and search/edit functionality. Added a simple popper class to help with pop overs.

2020-09-24 09:28:14 -07:00
parent a86986b1a3
commit 81acb1f000
4 changed files with 333 additions and 3 deletions
--- a/popper.js
+++ b/popper.js
@@ -0,0 +1,95 @@
+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
+}