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

61
search-select.js Normal file
View File

@ -0,0 +1,61 @@
import { IgniteHtml } from '../ignite-html/ignite-html.js';
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";
import { Popper } from "./popper.js";
class SearchSelect extends IgniteElement {
constructor() {
super();
}
get styles() {
return /*css*/`
mt-search-select>div:empty:before {
content: attr(data-placeholder);
opacity: 0.5;
}
`;
}
get properties() {
return {
inputElement: null,
placeholder: null,
options: null,
optionsRenderer: null,
value: null,
search: null
};
}
render() {
return this.template
.class("w-100 position-relative")
.attribute("tabindex", "0")
.child(
new div()
.class("form-control form-control-lg")
.innerHTML(this.value)
.attribute("contenteditable", true)
.data("placeholder", this.placeholder)
.ref(this.inputElement),
new Popper().class("form-control form-control-lg shadow").property("show", true).child(
"Test"
)
);
}
}
class Template extends IgniteTemplate {
constructor(...children) {
super("mt-search-select", children);
}
}
IgniteHtml.register("mt-search-select", SearchSelect);
export {
Template as SearchSelect
}