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