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

Improved search select and made it mostly functional.

Browse Source
This commit is contained in:
MattMo 2023-07-26 17:36:49 -07:00
parent e0cee31096
commit c7113dc71b
1 changed files with 178 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
search-select.js
View File

@ -1,6 +1,6 @@
import { IgniteHtml } from '../ignite-html/ignite-html.js';
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot, span, div, html, converter } from "../ignite-html/ignite-template.js";
import { IgniteTemplate, button, ul, slot, span, div, i, html, list, converter } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";
import { Popper } from "./popper.js";
@ -9,49 +9,206 @@ class SearchSelect extends IgniteElement {
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,
optionConverter: null,
results: null,
value: null,
search: null
valueConverter: null,
searchSelector: null,
searchCallback: null,
searchDelay: 200,
searchMaxHeight: "15em",
searching: false,
documentListener: null
};
}
render() {
return this.template
.class("w-100 position-relative form-control form-control-lg d-flex flex-row")
.class("w-100 position-relative form-control form-control-lg d-flex flex-row justify-content-between")
.attribute("tabindex", "0")
.onFocus(() => this.onFocus())
.child(
//Placeholder
new div()
.hide([this.value, this.searching], (value, searching) => value || searching)
.style("flex", 1)
.style("opacity", "0.5")
.style("overflow", "auto")
.innerText(this.placeholder),
//Search input
new div()
.show(this.searching)
.style("flex", 1)
.style("border", "none")
.style("outline", "none")
.style("overflow", "auto")
.attribute("contenteditable", true)
.ref(this.inputElement),
.ref(this.inputElement)
.onFocus(() => this.onFocus())
.on("keydown", (e) => {
//If the escape key is pressed stop searching until something else happens.
if (e.key == "Escape") {
this.searching = false;
this.inputElement.blur();
this.inputElement.textContent = null;
e.preventDefault();
e.stopPropagation();
new div().child(
new converter(this.value, this.optionsRenderer)
return;
}
//Reset the searching and input if we get a tab, since the browser
//will focus the next avaiable element.
if (e.key == "Tab") {
this.searching = false;
this.inputElement.blur();
this.inputElement.textContent = null;
return;
}
//If we are not searching and a key was pressed, open the search box.
if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && this.options && this.options.length > 0) {
this.searching = true;
}
//If we are searching and we have a on search function invoke it.
if (this.searching) {
if (this.searchCallback) {
clearTimeout(this.searchCallback);
}
this.searchCallback = setTimeout(() => this.search(e.target.textContent.trim()), this.searchDelay);
}
}),
//Value
new div().show(this.value).child(
new converter(this.value, this.valueConverter)
),
new button().class("btn btn-none").child("<i class='fa-solid fa-times' />"),
//Clear value button
new button().show(this.value)
.class("btn btn-none")
.child(new i().class("fa-solid fa-times"))
.onClick(() => {
this.value = null;
new Popper().class("form-control form-control-lg shadow").property("show", true).child(
"Test"
)
);
this.dispatchEvent(new Event("change"));
this.onFocus();
}),
//Search results popper
new Popper()
.class("form-control form-control-lg shadow d-flex flex-column gap-3 overflow-auto p-3")
.style("max-height", this.searchMaxHeight)
.property("show", this.searching)
.child(
new span().class("text-muted").innerText(this.results, results => results && results.length > 0 ? `Showing ${results.length} ${results.length == 1 ? "result" : "results"}` : "No results"),
new list(this.results, option =>
new div()
.class("cursor-pointer")
.child(
new converter(option, this.optionConverter)
)
.onClick(e => {
e.preventDefault();
e.stopPropagation();
this.value = option;
this.searching = false;
this.dispatchEvent(new Event("change"));
})
)
)
)
.on("keydown", e => {
if (!this.searching && e.key == "Backspace" && this.value) {
this.value = null;
this.dispatchEvent(new Event("change"));
this.onFocus();
}
});
}
ready() {
//Add a listener to the document click to blur our element.
this.documentListener = (e) => this.onBlur(e);
window.document.addEventListener("click", this.documentListener);
}
cleanup() {
window.document.removeEventListener("click", this.documentListener);
}
onBlur(e) {
//Only blur if we are editing and the target is not ourself or any of our children.
if (this.searching) {
if (e.target != this && !this.contains(e.target)) {
this.searching = false;
this.inputElement.blur();
this.inputElement.textContent = null;
}
}
}
onFocus() {
if (!this.searching && !this.value) {
this.searching = true;
this.inputElement.focus();
this.inputElement.textContent = null;
this.search(this.inputElement.textContent.trim());
}
}
search(text) {
var results = [];
results = results.concat(this.options);
if (text && text != "" && text != " ") {
var regex = new RegExp(text, 'i');
results = results.filter(result => {
if (this.searchSelector) {
var values = this.searchSelector(result);
if (values) {
if (Array.isArray(values)) {
for (var i = 0; i < values.length; i++) {
if (values[i] && values[i].toString().match(regex)) {
return true;
}
}
} else if (values.toString().match(regex)) {
return true;
}
}
} else if (result && result.toString().match(regex)) {
return true;
}
return false;
});
}
this.results = results;
}
}