@lucsoft/webgen
Version:
Collection of lucsofts Components
113 lines (112 loc) • 4.73 kB
JavaScript
import { createElement, draw, img, span } from "../Components";
import '../../css/search.webgen.static.css';
import { CommonIcon, Icon } from "../generic/Icon";
export const searchCard = (settings) => ({
getSize: () => ({ height: undefined, width: settings.width }),
draw: (card) => {
let search = createElement("div");
search.classList.add("search");
let input = createElement("input");
let ul = createElement("ul");
input.placeholder = settings.placeholder || "Search...";
if (settings.actions?.close) {
let icon = draw(Icon(settings.icons?.close ?? CommonIcon(2 /* Close */)));
icon.onclick = settings.actions?.close;
search.append(icon);
}
let list = [];
let lastsearch = "";
const reRenderElements = (x) => {
let tags = [];
x.tags?.filter((tag) => tags.push(span(tag, "tag")));
let li = createElement("li");
li.onclick = () => settings.actions?.click?.(x);
const left = createElement("left");
const right = createElement("right");
if (x.icon) {
const image = img(x.icon);
image.loading = "lazy";
left.append(image);
}
left.append(x.name);
if (x.category)
right.append(span(x.category, "tag", "category"));
if (x.suffix)
right.append(x.suffix);
right.append(...tags);
if (settings.actions?.download) {
const download = draw(Icon(settings.icons?.download ?? CommonIcon(3 /* Download */)));
download.onclick = () => settings.actions?.download?.(x);
right.append(download);
}
if (settings.actions?.edit) {
const edit = draw(Icon(settings.icons?.edit ?? CommonIcon(4 /* Edit */)));
edit.onclick = () => settings.actions?.edit?.(x);
right.append(edit);
}
if (settings.actions?.remove) {
const remove = draw(Icon(settings.icons?.remove ?? CommonIcon(5 /* Delete */)));
remove.onclick = () => settings.actions?.remove?.(x);
right.append(remove);
}
li.append(left);
li.append(right);
ul.append(li);
};
input.onkeyup = (d) => {
if (d.key == "Enter") {
if (ul.children.item.length == 1) {
let element = ul.children[0];
element?.click();
}
}
if (lastsearch == input.value)
return;
lastsearch = input.value;
if (settings.mode === 2 /* HideWhenEmpty */ && lastsearch === "") {
ul.innerHTML = "";
return;
}
if (settings.type == "smart" && settings.index) {
let smart = input.value.split(` `);
let tags = [];
let name = "";
smart.forEach(e => {
if (e.startsWith("#") || e.startsWith("!"))
tags.push(e);
else
name += " " + e;
});
name = name.slice(1);
list = settings.index;
tags.forEach(e => {
if (e.startsWith("#"))
list = list.filter(x => x.tags ? x.tags.indexOf(e.slice(1)) != -1 : false);
else if (e.startsWith("!"))
list = list.filter(x => x.tags ? x.tags.indexOf(e.slice(1)) == -1 : false);
if (list.length == 0)
return;
});
list = list.filter(x => x.name.toLowerCase().includes(name.toLowerCase()));
}
else
list = settings.index.filter(x => x.name.toLowerCase().includes(input.value.toLowerCase()));
ul.innerHTML = "";
list.forEach(x => reRenderElements(x));
if (ul.childNodes.length == 0 && settings.notfound !== undefined) {
let li = createElement("li");
li.onclick = () => settings?.actions?.click?.({ id: "notfound", name: "notfound" });
li.classList.add("gray");
li.innerText = settings.notfound;
ul.append(li);
}
};
search.append(input);
search.append(ul);
if (settings.mode === 0 /* ShowBegin */) {
settings.index.forEach(x => reRenderElements(x));
}
card.append(search);
return card;
}
});