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

Fixed an issue with sizing circular progress bars. Added search loading property to chip list.

Browse Source
This commit is contained in:
Matt Mo 2021-02-03 10:04:42 -08:00
parent c647825b9f
commit 857c9a2ecc
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
chip-list.js
View File

@ -2,6 +2,7 @@ import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, list, div, input, button, h4, span } from "../ignite-html/ignite-template.js";
import { Chip } from "./chip.js";
import { Popper } from "./popper.js";
import { LinearProgress } from "./linear-progress.js";
class ChipList extends IgniteElement {
constructor() {
@ -75,9 +76,13 @@ class ChipList extends IgniteElement {
search: true,
searching: false,
showSearchResults: true,
searchLoading: false,
searchResults: null,
searchPlaceholder: "No results found.",
searchFooter: null,
onSearch: null,
onSearchDelay: 200,
onSearchCallback: null,
blurTimeout: null,
documentListener: null,
freeForm: true,
@ -203,24 +208,31 @@ class ChipList extends IgniteElement {
//Don't allow input if we reached the max number of items.
e.preventDefault();
}
//If we are searching and we have a on search function invoke it.
if (this.searching && this.onSearch) {
if (this.onSearchCallback) {
clearTimeout(this.onSearchCallback);
}
this.onSearchCallback = setTimeout(() => this.onSearch(this.input.textContent.trim()), this.onSearchDelay);
}
})
),
new Popper()
.property("show", this.searching)
.child(
new div()
.class("d-flex flex-column justify-content-center p-2")
.style("background-color", "#fff")
.class("d-flex flex-column justify-content-center p-2 shadow bg-white")
.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) => {
new LinearProgress().class("my-2").property("loading", this.searchLoading),
new span(this.searchPlaceholder).class("mt-2").hide([this.searchResults, this.showSearchResults, this.searchLoading], (searchResults, showSearchResults, searchLoading) => {
//Dont show the placeholder if we have search results, or if we are not showing search results.
return (searchResults != null && searchResults.length > 0) || !showSearchResults;
return (searchResults != null && searchResults.length > 0 && !searchLoading) || (!showSearchResults || searchLoading);
}),
new list(this.searchResults, item => {
return new div(item.content).class("search-result p-2").onClick(() => this.searchResultClick(item));
}).hide(this.showSearchResults, value => { return !value; }),
}).hide([this.showSearchResults, this.searchLoading], (showSearchResults, searchLoading) => !showSearchResults || searchLoading),
this.searchFooter
)
),

4
circular-progress.js
View File

@ -11,8 +11,6 @@ class CircularProgress extends IgniteElement {
mt-circular-progress > div > svg {
position: absolute;
z-index: 1;
left: calc(50% - (4em / 2));
top: calc(50% - (4em / 2));
animation: rotator 2s linear infinite;
}
@ -81,6 +79,8 @@ class CircularProgress extends IgniteElement {
.attribute("viewBox", "22 22 44 44")
.style("width", this.size)
.style("height", this.size)
.style("left", this.size, null, size => `calc(50% - (${size} / 2))`)
.style("top", this.size, null, size => `calc(50% - (${size} / 2))`)
.show(this.loading)
.child(
new circle()