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

Fixing issues and improving design.

Browse Source
This commit is contained in:
Matt Mo 2020-10-05 18:23:18 -07:00
parent ee2c5ae707
commit 34ba6ee7dd
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
chip-list.js
View File

@ -39,6 +39,8 @@ class ChipList extends IgniteElement {
flex-direction: column;
justify-content: center;
flex: 1;
flex-basis: auto;
flex-shrink: 1;
}
mt-chip-list > .input-container > .input {
@ -61,6 +63,7 @@ class ChipList extends IgniteElement {
editing: false,
input: null,
searchBox: null,
search: true,
searching: false,
showSearchResults: true,
searchResults: [
@ -72,6 +75,8 @@ class ChipList extends IgniteElement {
blurTimeout: null,
documentListener: null,
freeForm: true,
chipBackground: null,
chipColor: null
};
}
@ -89,6 +94,8 @@ class ChipList extends IgniteElement {
new list(this.items, (item) => {
return new Chip()
.id(item.id)
.property("color", this.chipColor)
.property("background", this.chipBackground)
.property("onDelete", () => { this.items = this.items.filter(needle => needle != item); })
.child(item.content);
}),
@ -133,7 +140,7 @@ class ChipList extends IgniteElement {
}
//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.items == null || this.items.length < this.itemsMax)) {
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;
this.showSearchResults = true;
} else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") {

27
chip.js
View File

@ -1,5 +1,5 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js";
import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";
class Chip extends IgniteElement {
constructor() {
@ -8,7 +8,9 @@ class Chip extends IgniteElement {
get properties() {
return {
onDelete: () => { }
onDelete: () => { },
background: null,
color: null
}
}
@ -22,17 +24,24 @@ class Chip extends IgniteElement {
padding-left: 0.6em;
padding-right: 0.6em;
}
mt-chip:hover {
filter: brightness(0.9);
}
`;
}
render() {
return this.template.child(
new slot(this),
new button()
.class("btn ml-1 p-0")
.child(`<i class="fad fa-times-circle"></i>`)
.onClick(() => this.onDelete())
);
return this.template
.style("background", this.background)
.style("color", this.color)
.child(
new slot(this),
new button()
.class("btn ml-1 p-0")
.child(`<i class="fad fa-times-circle" style="--fa-secondary-color: rgba(0,0,0,0.3); --fa-primary-color: rgba(0,0,0,0.5);"></i>`)
.onClick(() => this.onDelete())
);
}
}