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

Fixed issues with the chip list and editable label. Added initial collapsable-region and icon tabs code.

Browse Source
This commit is contained in:
Matt Mo
2020-10-26 15:27:43 -07:00
parent 84bb64a8a8
commit 7217f2bd9e
4 changed files with 159 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
chip-list.js
View File

@@ -61,6 +61,7 @@ class ChipList extends IgniteElement {
items: [],
itemsMax: Number.MAX_SAFE_INTEGER,
placeholder: null,
stopEditingOnBlur: true,
editing: false,
input: null,
searchBox: null,
@@ -82,6 +83,8 @@ class ChipList extends IgniteElement {
return this.template
.style("position", "relative")
.class(this.editing, value => { return value ? "editing" : null })
.attribute("tabindex", "0")
.onFocus((e) => this.onFocus())
.class([this.editing, this.items], (editing, items) => {
return !editing && (items == null || items.length == 0) ? "placeholder" : null;
})
@@ -137,6 +140,14 @@ class ChipList extends IgniteElement {
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.input.innerHTML = "";
return;
}
//If we are not searching and a key was pressed, open the search box.
if (!this.searching && this.search && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
this.searching = true;
@@ -151,8 +162,10 @@ class ChipList extends IgniteElement {
.property("show", this.searching)
.child(
new div()
.class("shadow d-flex flex-column justify-content-center p-2")
.class("d-flex flex-column justify-content-center p-2")
.style("background-color", "#fff")
.style("border-radius", "0.4em")
.style("box-shadow", "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px")
.child(
new span(this.searchPlaceholder).class("mt-2").hide([this.searchResults, this.showSearchResults], (searchResults, showSearchResults) => {
//Dont show the placeholder if we have search results, or if we are not showing search results.
@@ -165,41 +178,47 @@ class ChipList extends IgniteElement {
)
),
)
.onClick((e) => {
this.focus(); //Focus our element if we are not already.
})
}
ready() {
//Add a listener to the document click to blur our element.
this.documentListener = (e) => this.blur(e);
this.documentListener = (e) => this.onBlur(e);
window.document.addEventListener("click", this.documentListener);
}
cleanup() {
window.document.removeEventListener("click", this.documentListener);
}
focus() {
onFocus() {
console.log("ChpiList, focus called");
if (!this.editing) {
this.editing = true;
this.input.focus();
this.input.textContent = " ";
} else {
this.input.focus();
}
}
blur(e) {
onBlur(e) {
//Only blur if we are editing and the target is not ourself or any of our children.
if (this.editing && e.target != this && !this.contains(e.target)) {
this.editing = false;
this.searching = false;
this.input.blur();
this.input.innerHTML = "";
if (this.editing) {
if (e.target != this && !this.contains(e.target)) {
if (this.stopEditingOnBlur) {
this.editing = false;
}
this.searching = false;
this.input.blur();
this.input.innerHTML = "";
}
}
}
searchResultClick(item) {
console.log("Search result click");
if (this.items == null) {
this.items = [];
}