93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
import { $el } from "/scripts/ui.js";
|
|
|
|
import { utilitiesInstance } from "../common/Utilities.js";
|
|
|
|
import { ImageDrawerComponent, ClassInstanceFactory, imageDrawerComponentManagerInstance } from "./Core/ImageDrawerModule.js";
|
|
|
|
class ImageDrawerSearch extends ImageDrawerComponent {
|
|
|
|
constructor(args) {
|
|
|
|
super(args);
|
|
|
|
this.searchBarElement;
|
|
}
|
|
|
|
createSearchBar() {
|
|
this.searchBarElement = $el("input", {
|
|
type: "text",
|
|
id: "SearchInput",
|
|
placeholder: "Type here to search",
|
|
autocomplete: "off",
|
|
style: {
|
|
width: '100%',
|
|
}
|
|
});
|
|
|
|
// Attach the handleSearch function to the input's 'input' event
|
|
this.searchBarElement?.addEventListener('input', () => { this.executeSearchWithEnteredSearchText(); });
|
|
|
|
return this.searchBarElement;
|
|
}
|
|
|
|
clearSearch() {
|
|
if (!this.searchBarElement) { return; }
|
|
this.searchBarElement.value = "";
|
|
}
|
|
|
|
getSearchText() {
|
|
return this.searchBarElement.value;
|
|
}
|
|
|
|
setSearchText(newText) {
|
|
if (!this.searchBarElement) { return; }
|
|
this.searchBarElement.value = newText;
|
|
}
|
|
|
|
setSearchTextAndExecute(newText) {
|
|
if (!this.searchBarElement) { return; }
|
|
this.searchBarElement.value = newText;
|
|
this.executeSearchWithEnteredSearchText();
|
|
}
|
|
|
|
clearAndExecuteSearch() {
|
|
this.clearSearch();
|
|
this.executeSearchWithEnteredSearchText();
|
|
}
|
|
|
|
focusSearch() {
|
|
this.searchBarElement.focus();
|
|
}
|
|
|
|
focusAndSelectSearchText() {
|
|
this.searchBarElement.select(); // Select focuses already
|
|
}
|
|
|
|
// Function to execute seach with an explicit searchTerm
|
|
executeSearch(searchTerm) {
|
|
|
|
// Provision search string
|
|
const sanitizedSearchTerm = searchTerm.toLowerCase().trim();
|
|
|
|
// Loop through items and check for a match
|
|
const imageDrawerListInstance = imageDrawerComponentManagerInstance.getComponentByName("ImageDrawerList");
|
|
const children = imageDrawerListInstance.getImageListChildren();
|
|
for (let i = 0; i < children.length; i++) {
|
|
let itemText = children[i]?.searchTerms?.toLowerCase().trim();
|
|
//console.log(itemText + " matched against " + searchTerm + ": " + itemText.includes(searchTerm));
|
|
|
|
utilitiesInstance.setElementVisible(children[i], itemText ? itemText.includes(sanitizedSearchTerm) : true)
|
|
}
|
|
}
|
|
|
|
// Function to execute search using the term entered in the SearchBar
|
|
executeSearchWithEnteredSearchText() {
|
|
// Get input value
|
|
let searchTerm = this.searchBarElement?.value;
|
|
|
|
this.executeSearch(searchTerm);
|
|
}
|
|
}
|
|
|
|
const factoryInstance = new ClassInstanceFactory(ImageDrawerSearch);
|