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

A placeholder class is now added to the chip list when the placeholder is shown. FreeForm and MaxItems can now be controlled via properties.

Browse Source
This commit is contained in:
Matt Mo 2020-09-29 14:24:59 -07:00
parent 3a1eaa37b1
commit 9167c9a4dd
1 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
chip-list.js
View File

@ -29,6 +29,11 @@ class ChipList extends IgniteElement {
border-radius: 0.3rem;
}
mt-chip-list.placeholder {
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
}
mt-chip-list > .input-container {
display: flex;
flex-direction: column;
@ -50,7 +55,8 @@ class ChipList extends IgniteElement {
get properties() {
return {
items: null,
items: [],
itemsMax: Number.MAX_SAFE_INTEGER,
placeholder: null,
editing: false,
input: null,
@ -63,7 +69,8 @@ class ChipList extends IgniteElement {
searchPlaceholder: "No results found.",
searchFooter: null,
blurTimeout: null,
documentListener: null
documentListener: null,
freeForm: true,
};
}
@ -71,6 +78,9 @@ class ChipList extends IgniteElement {
return this.template
.style("position", "relative")
.class(this.editing, value => { return value ? "editing" : null })
.class([this.editing, this.items], (editing, items) => {
return !editing && (items == null || items.length == 0) ? "placeholder" : null;
})
.child(
new span(this.placeholder).hide([this.editing, this.items], (editing, items) => {
return editing || (items != null && items.length > 0);
@ -91,21 +101,34 @@ class ChipList extends IgniteElement {
.ref(this.input)
.onEnter((e) => {
e.preventDefault();
//Add a new item to the chip list.
this.items.push({ content: this.input.textContent.trim() });
this.input.innerHTML = "";
//If this chip allows free form input then add a new item.
if (this.freeForm && this.input.textContent.trim().length >= 1) {
if (this.items == null) {
this.items = [];
}
//Add a new item to the chip list.
this.items.push({ content: this.input.textContent.trim() });
this.input.innerHTML = "";
this.searching = false; //Reset searching since we just added a item.
}
})
.onBackspace((e) => {
//If the backspace key is pressed and there is no content, try to remove the last item from the list.
if (this.input.textContent.length == 0 || (this.input.textContent.length == 1 && this.input.textContent[0] == " ")) {
e.preventDefault();
this.items.pop();
this.searching = false;
}
})
.on("keydown", (e) => {
//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 > 0))) {
if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
this.searching = true;
} else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") {
//Don't allow input if we reached the max number of items.
e.preventDefault();
}
})
),
@ -159,6 +182,10 @@ class ChipList extends IgniteElement {
}
searchResultClick(item) {
if (this.items == null) {
this.items = [];
}
this.items.push({ content: item.content });
this.searching = false;
this.input.innerHTML = "";