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

Added a changed flag to chip list and the component now fires a change event if there were any changes to the component.

Browse Source
This commit is contained in:
Matt Mo 2020-11-17 14:51:05 -08:00
parent 4c8085ec00
commit f54f7f3f05
1 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
chip-list.js
View File

@ -78,7 +78,8 @@ class ChipList extends IgniteElement {
documentListener: null, documentListener: null,
freeForm: true, freeForm: true,
chipBackground: null, chipBackground: null,
chipColor: null chipColor: null,
changed: false,
}; };
} }
@ -100,7 +101,11 @@ class ChipList extends IgniteElement {
.id(item.id) .id(item.id)
.property("color", item.chipColor ? item.chipColor : this.chipColor) .property("color", item.chipColor ? item.chipColor : this.chipColor)
.property("background", item.chipBackground ? item.chipBackground : this.chipBackground) .property("background", item.chipBackground ? item.chipBackground : this.chipBackground)
.property("onDelete", () => { this.items = this.items.filter(needle => needle != item); }) .property("onDelete", () =>
{
this.items = this.items.filter(needle => needle != item);
this.changed = true; //Make sure changed flag was set.
})
.child(item.content); .child(item.content);
}), }),
new div() new div()
@ -124,13 +129,19 @@ class ChipList extends IgniteElement {
this.items.push({ content: this.input.textContent.trim() }); this.items.push({ content: this.input.textContent.trim() });
this.input.innerHTML = ""; this.input.innerHTML = "";
this.searching = false; //Reset searching since we just added a item. this.searching = false; //Reset searching since we just added a item.
this.changed = true; //Make sure changed flag was set.
} }
}) })
.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();
if (this.items) {
this.items.pop();
this.changed = true; //Make sure changed flag was set.
}
this.searching = false; this.searching = false;
} }
}) })
@ -150,6 +161,12 @@ class ChipList extends IgniteElement {
if (this.stopEditingOnBlur) { if (this.stopEditingOnBlur) {
this.editing = false; this.editing = false;
//Fire a change event if there was a change.
if (this.changed) {
this.changed = false;
this.dispatchEvent(new Event("change"));
}
} }
this.input.innerHTML = ""; this.input.innerHTML = "";
@ -215,6 +232,12 @@ class ChipList extends IgniteElement {
if (e.target != this && !this.contains(e.target)) { if (e.target != this && !this.contains(e.target)) {
if (this.stopEditingOnBlur) { if (this.stopEditingOnBlur) {
this.editing = false; this.editing = false;
//Fire a change event if there was a change.
if (this.changed) {
this.changed = false;
this.dispatchEvent(new Event("change"));
}
} }
this.searching = false; this.searching = false;
this.input.blur(); this.input.blur();
@ -228,6 +251,7 @@ class ChipList extends IgniteElement {
this.items = []; this.items = [];
} }
this.changed = true; //Make sure changed flag is set.
this.items.push(item); this.items.push(item);
this.searching = false; this.searching = false;
this.input.innerHTML = ""; this.input.innerHTML = "";