Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-29 09:15:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Startseite: fast ferting

Browse Source
This commit is contained in:
Simon Martens
2025-02-20 15:43:09 +01:00
parent cbbbec9273
commit 37a65ec902
12 changed files with 308 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
scratchpad.md
View File

@@ -27,3 +27,20 @@ Modelle umwandeln (zzt RecordProxy)
- Abfragen Person - Abfragen Person
- Ersellen & Abfragen FTS5-Tabellen - Ersellen & Abfragen FTS5-Tabellen
- Erstellen Textseiten - Erstellen Textseiten
- Man kann auf der Startseit nach Almanach-Nummern suchen
- Überall werden die Almanachnummer und Inhaltsnummer angezeigt
- Die URL referenziert die Almanachnummern, nicht mher die DB-IDs
- In der Almanach-Ansicht werden die Abkürzungen erklärt
- In der Almanach-Ansicht können die Beiträge nach Sammlungen gruppiert werden
- In der Almanach-Ansicht kann nach Inhalten frei gefiltert werden, oder nach Typ
- Es gibt neue URLs sowohl für die einzelne Reihe, als auch für den einzelnen Beitrag
- Die Suche ist klar nach Typ unterteilt
- Zusätzlich zur jetzigen Suchfunktion gibt es für jeden Typ noch eine Detailsuche
- Suchergebnisse können nach Typ, Person, Jahr gefiltert werden
- Suchergebnisse könnnen nach Jahr und Band, nach Band und Jahr (nach Personen) sortiert werden
- Jede Suche hat eine eindeutige URL

13
views/assets/js/mark.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

137
views/assets/scripts.js
View File

@@ -1,48 +1,48 @@
var p = (r) => { var _ = (i) => {
throw TypeError(r); throw TypeError(i);
}; };
var L = (r, i, t) => i.has(r) || p("Cannot " + t); var g = (i, r, t) => r.has(i) || _("Cannot " + t);
var u = (r, i, t) => (L(r, i, "read from private field"), t ? t.call(r) : i.get(r)), o = (r, i, t) => i.has(r) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(r) : i.set(r, t), h = (r, i, t, e) => (L(r, i, "write to private field"), e ? e.call(r, t) : i.set(r, t), t), f = (r, i, t) => (L(r, i, "access private method"), t); var c = (i, r, t) => (g(i, r, "read from private field"), t ? t.call(i) : r.get(i)), a = (i, r, t) => r.has(i) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, t), o = (i, r, t, e) => (g(i, r, "write to private field"), e ? e.call(i, t) : r.set(i, t), t), f = (i, r, t) => (g(i, r, "access private method"), t);
const v = "script[xslt-onload]", g = "xslt-template", w = "xslt-transformed", A = "filter-list"; const v = "script[xslt-onload]", m = "xslt-template", A = "xslt-transformed", F = "filter-list", d = "filter-list-list", I = "filter-list-item", w = "filter-list-input", E = "filter-list-searchable";
var a, c, T; var l, p, x;
class S { class $ {
constructor() { constructor() {
o(this, c); a(this, p);
o(this, a); a(this, l);
h(this, a, /* @__PURE__ */ new Map()); o(this, l, /* @__PURE__ */ new Map());
} }
setup() { setup() {
let i = htmx.findAll(v); let r = htmx.findAll(v);
for (let t of i) for (let t of r)
f(this, c, T).call(this, t); f(this, p, x).call(this, t);
} }
hookupHTMX() { hookupHTMX() {
htmx.on("htmx:load", (i) => { htmx.on("htmx:load", (r) => {
this.setup(); this.setup();
}); });
} }
} }
a = new WeakMap(), c = new WeakSet(), T = function(i) { l = new WeakMap(), p = new WeakSet(), x = function(r) {
if (i.getAttribute(w) === "true" || !i.hasAttribute(g)) if (r.getAttribute(A) === "true" || !r.hasAttribute(m))
return; return;
let t = "#" + i.getAttribute(g), e = u(this, a).get(t); let t = "#" + r.getAttribute(m), e = c(this, l).get(t);
if (!e) { if (!e) {
let d = htmx.find(t); let u = htmx.find(t);
if (d) { if (u) {
let E = d.innerHTML ? new DOMParser().parseFromString(d.innerHTML, "application/xml") : d.contentDocument; let b = u.innerHTML ? new DOMParser().parseFromString(u.innerHTML, "application/xml") : u.contentDocument;
e = new XSLTProcessor(), e.importStylesheet(E), u(this, a).set(t, e); e = new XSLTProcessor(), e.importStylesheet(b), c(this, l).set(t, e);
} else } else
throw new Error("Unknown XSLT template: " + t); throw new Error("Unknown XSLT template: " + t);
} }
let s = new DOMParser().parseFromString(i.innerHTML, "application/xml"), b = e.transformToFragment(s, document), x = new XMLSerializer().serializeToString(b); let s = new DOMParser().parseFromString(r.innerHTML, "application/xml"), L = e.transformToFragment(s, document), S = new XMLSerializer().serializeToString(L);
i.outerHTML = x; r.outerHTML = S;
}; };
var n, l, _, m; var n, h, T;
class k extends HTMLElement { class k extends HTMLElement {
constructor() { constructor() {
super(); super();
o(this, l); a(this, h);
o(this, n, !1); a(this, n, !1);
this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render(); this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render();
} }
static get observedAttributes() { static get observedAttributes() {
@@ -55,7 +55,7 @@ class k extends HTMLElement {
return this._items; return this._items;
} }
connectedCallback() { connectedCallback() {
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && h(this, n, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this)); this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && o(this, n, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
} }
attributeChangedCallback(t, e, s) { attributeChangedCallback(t, e, s) {
t === "data-url" && e !== s && (this._url = s, this.render()), t === "data-filterstart" && e !== s && (this._filterstart = s === "true", this.render()), t === "data-placeholder" && e !== s && (this._placeholder = s, this.render()); t === "data-url" && e !== s && (this._url = s, this.render()), t === "data-filterstart" && e !== s && (this._filterstart = s === "true", this.render()), t === "data-placeholder" && e !== s && (this._placeholder = s, this.render());
@@ -64,10 +64,15 @@ class k extends HTMLElement {
t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList()); t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList());
} }
onGainFocus(t) { onGainFocus(t) {
t.target && t.target.tagName.toLowerCase() === "input" && (h(this, n, !1), this.renderList()); t.target && t.target.tagName.toLowerCase() === "input" && (o(this, n, !1), this.renderList());
} }
onLoseFocus(t) { onLoseFocus(t) {
t.target && t.target.tagName.toLowerCase() === "input" && (t.target.value = "", this._filter = "", this._filterstart && h(this, n, !0), this.renderList()); let e = this.querySelector("input");
if (t.target && t.target === e) {
if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement))
return;
e.value = "", this._filter = "", this._filterstart && o(this, n, !0), this.renderList();
}
} }
onEnter(t) { onEnter(t) {
if (t.target && t.target.tagName.toLowerCase() === "input" && t.key === "Enter") { if (t.target && t.target.tagName.toLowerCase() === "input" && t.key === "Enter") {
@@ -76,12 +81,33 @@ class k extends HTMLElement {
e && e.click(); e && e.click();
} }
} }
mark() {
if (typeof Mark != "function")
return;
let t = this.querySelector("#" + d);
if (!t)
return;
let e = new Mark(t.querySelectorAll("." + E));
this._filter && e.mark(this._filter, {
separateWordSearch: !0
});
}
// INFO: allows for setting a custom HREF of the list item
// The function takes the item as parameter fn(item) and should return a string.
setHREFFunc(t) { setHREFFunc(t) {
this.getHREF = t, this.render(); this.getHREF = t, this.render();
} }
// INFO: allows for setting a custom link text of the list item
// The function takes the item as parameter fn(item) and should return a string or
// an HTML template literal.
setLinkTextFunc(t) { setLinkTextFunc(t) {
this.getLinkText = t, this.render(); this.getLinkText = t, this.render();
} }
// INFO: allows for setting the text that will be filtered for.
// The function takes the item as parameter fn(item) and should return a string.
setSearchTextFunc(t) {
this.getSearchText = t, this.render();
}
getHREF(t) { getHREF(t) {
if (t) { if (t) {
if (!t.id) if (!t.id)
@@ -89,66 +115,83 @@ class k extends HTMLElement {
} else return ""; } else return "";
return t.id; return t.id;
} }
getLinkText(t) { getSearchText(t) {
if (t) { if (t) {
if (!t.name) if (!t.name)
return ""; return "";
} else return ""; } else return "";
return t.name; return t.name;
} }
getLinkText(t) {
let e = this.getSearchText(t);
return e === "" ? "" : `<span class="${E}">${e}</span>`;
}
renderList() { renderList() {
let t = this.querySelector("#list"); let t = this.querySelector("#" + d);
t && (t.outerHTML = this.List()); t && (t.outerHTML = this.List()), this.mark();
} }
render() { render() {
this.innerHTML = ` this.innerHTML = `
<div class="p-4 font-serif text-base"> <div class="font-serif text-base">
${this.Input()} ${this.Input()}
${this.List()} ${this.List()}
</div> </div>
`; `;
} }
ActiveDot(t) {
return f(this, h, T).call(this, t), "";
}
NoItems(t) {
return t.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : "";
}
Input() { Input() {
return ` return `
<div class="flex w-full pb-0.5 border-b border-zinc-600"> <div class="flex w-full py-0.5 border-b border-zinc-600 bg-stone-50">
<i class="ri-arrow-right-s-line mr-1"></i> <i class="ri-arrow-right-s-line mr-1 pl-2"></i>
<div class="grow"> <div class="grow">
<input <input
type="text" type="text"
placeholder="${this._placeholder}" placeholder="${this._placeholder}"
class="w-full placeholder:italic px-2 " /> class="${w} w-full placeholder:italic px-2 py-0.5" />
</div> </div>
</div> </div>
`; `;
} }
List() { List() {
let t = this._items; let t = this._items;
return this._filter && (this._filterstart ? t = this._items.filter((e) => this.getLinkText(e).toLowerCase().startsWith(this._filter.toLowerCase())) : t = this._items.filter((e) => this.getLinkText(e).toLowerCase().includes(this._filter.toLowerCase()))), ` if (this._filter)
<div id="list" class="links min-h-72 max-h-60 overflow-auto border-b border-zinc-300 ${f(this, l, m).call(this)}"> if (this._filterstart)
t = this._items.filter((e) => this.getSearchText(e).toLowerCase().startsWith(this._filter.toLowerCase()));
else {
let e = this._filter.split(" ");
t = this._items.filter((s) => e.every((L) => this.getSearchText(s).toLowerCase().includes(L.toLowerCase())));
}
return `
<div id="${d}" class="${d} pt-1 min-h-72 max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${c(this, n) ? "hidden" : ""}">
${t.map( ${t.map(
(e, s) => ` (e, s) => `
<a <a
href="${this._url}${this.getHREF(e)}" href="${this._url}${this.getHREF(e)}"
class="block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}" class="${I} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
${f(this, l, _).call(this, e)}> ${f(this, h, T).call(this, e) ? 'aria-current="page"' : ""}>
${this.ActiveDot(e)}
${this.getLinkText(e)} ${this.getLinkText(e)}
</a> </a>
` `
).join("")} ).join("")}
${this.NoItems(t)}
</div> </div>
`; `;
} }
} }
n = new WeakMap(), l = new WeakSet(), _ = function(t) { n = new WeakMap(), h = new WeakSet(), T = function(t) {
if (!t) if (!t)
return ""; return !1;
let e = this.getHREF(t); let e = this.getHREF(t);
return e === "" || !window.location.href.endsWith(e) ? "" : "aria-current='page'"; return !(e === "" || !window.location.href.endsWith(e));
}, m = function() {
return u(this, n) ? "hidden" : "";
}; };
customElements.define(A, k); customElements.define(F, k);
export { export {
k as FilterList, k as FilterList,
S as XSLTParseProcess $ as XSLTParseProcess
}; };

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

1
views/layouts/default/root.gohtml
View File

@@ -19,6 +19,7 @@
<script src="/assets/js/htmx.min.js" defer></script> <script src="/assets/js/htmx.min.js" defer></script>
<script src="/assets/js/htmx-response-targets.js" defer></script> <script src="/assets/js/htmx-response-targets.js" defer></script>
<script src="/assets/js/client-side-templates.js" defer></script> <script src="/assets/js/client-side-templates.js" defer></script>
<script src="/assets/js/mark.min.js" defer></script>
<script type="module" src="/assets/scripts.js"></script> <script type="module" src="/assets/scripts.js"></script>

13
views/public/js/mark.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
views/routes/components/_alphabet.gohtml
View File

@@ -4,7 +4,7 @@
<div <div
class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14" class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14"
x-data="{ search : '{{ $model.search }}' }"> x-data="{ search : '{{ $model.search }}' }">
<div id="alphabet" class="alphabet flex flex-row items-end"> <div id="alphabet" class="alphabet flex flex-row items-end text-xl">
{{ range $id, $r := .letters }} {{ range $id, $r := .letters }}
<a <a
class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
@@ -37,7 +37,7 @@
name="search" name="search"
value="{{ $model.search }}" value="{{ $model.search }}"
x-model="search" x-model="search"
placeholder="Band-ID od. Suchbegriff" placeholder="Almanach-Nr od. Suchbegriff"
hx-get="" hx-get=""
hx-trigger="input changed delay:=200ms, keyup[key=='Enter']" hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
hx-select="#searchcontent" hx-select="#searchcontent"

49
views/routes/components/_reihe.gohtml
View File

@@ -2,20 +2,39 @@
{{ $r := index . 1 }} {{ $r := index . 1 }}
<a href="/reihe/{{ $r.MusenalmID }}">{{ $r.Title }}</a> <div class="flex flex-row mb-1.5">
<div> <div class="grow-0 shrink-0 w-[12rem] flex flex-col">
{{ Safe $r.Annotation }} {{ if $r.References }}
</div> <div class="text-sm font-sans px-2 py-1 bg-stone-100">{{ $r.References }}</div>
<div>
{{ $bds := index $model.relations $r.Id }}
{{ if $bds }}
{{ range $_, $rel := $bds }}
{{ $bd := index $model.entries $rel.Entry }}
{{ if $bd }}
<div>
<a href="/almanach/{{ $bd.MusenalmID }}">{{ $bd.Year }}</a>
</div>
{{ end }}
{{ end }} {{ end }}
{{ end }} <div class="font-sans py-0.5 text-xs">
<a href="/reihe/?={{ $r.Id }}" class="no-underline rounded bg-stone-100 px-1.5">
<i class="ri-links-line"></i> Permalink
</a>
</div>
</div>
<div class="grow-0 ml-8 -indent-3">
<span class="font-bold">{{ $r.Title }}</span>
{{ if $r.Annotation }}
<span>&ensp;&middot;&ensp;</span>
<span class="">{{ Safe $r.Annotation }}</span>
{{ end }}
<div class="ml-3">
{{ $bds := index $model.relations $r.Id }}
{{ if $bds }}
{{ range $_, $rel := $bds }}
{{ $bd := index $model.entries $rel.Entry }}
{{ if $bd }}
<a href="/almanach/{{ $bd.MusenalmID }}">
{{ if ne $bd.Year 0 }}
{{ $bd.Year }}
{{ else }}
[o.J.]
{{ end }} </a
>&ensp;
{{ end }}
{{ end }}
{{ end }}
</div>
</div>
</div> </div>

59
views/routes/components/_reihenfilter.gohtml
View File

@@ -1,23 +1,42 @@
{{ $model := . }} {{ $model := . }}
<div class="min-w-96 max-w-96 float-right flex flex-col gap-y-4"> <div
class="min-w-[32rem] max-w-[32rem] float-right ml-6 flex flex-col gap-y-8 [&>*]:py-12
[&>*]:px-12 -mr-36 [&>*]:bg-slate-100">
{{ if .agents }} {{ if .agents }}
<filter-list <div class="">
id="agent-list" <filter-list
data-url="/reihen/?agent=" id="agent-list"
data-placeholder="Personen und Körperschaften filtern..."></filter-list> data-url="/reihen/?agent="
data-placeholder="Personen und Körperschaften filtern..."></filter-list>
</div>
<script type="module"> <script type="module">
let agentList = document.getElementById("agent-list"); let agentList = document.getElementById("agent-list");
if (agentList) agentList.items = {{ .agents }}; if (agentList) {
agentList.items = {{ .agents }};
agentList.setSearchTextFunc((item) => {
return item.name;
});
agentList.setLinkTextFunc((item) => {
return `
<span class="filter-list-searchable">${item.name}</span>
<span class="text-xs text-stone-500 whitespace-nowrap">
${item.corporate_body ? "Verlag/Druck/Vertrieb" : item.biographical_data}
</span>
`;
});
}
</script> </script>
{{ end }} {{ end }}
{{ if .places }} {{ if .places }}
<filter-list <div>
id="place-list" <filter-list
data-url="/reihen/?place=" id="place-list"
data-placeholder="Erscheinungsorte filtern..."></filter-list> data-url="/reihen/?place="
data-placeholder="Erscheinungsorte filtern..."></filter-list>
</div>
<script type="module"> <script type="module">
let placeList = document.getElementById("place-list"); let placeList = document.getElementById("place-list");
if (placeList) placeList.items = {{ .places }}; if (placeList) placeList.items = {{ .places }};
@@ -25,20 +44,20 @@
{{ end }} {{ end }}
{{ if .years }} {{ if .years }}
<filter-list <div>
id="year-list" <filter-list
data-url="/reihen/?year=" id="year-list"
data-filterstart="true" data-url="/reihen/?year="
data-placeholder="Erscheinungsjahr filtern..."></filter-list> data-filterstart="true"
data-placeholder="Erscheinungsjahr filtern..."></filter-list>
</div>
<script type="module"> <script type="module">
let yearList = document.getElementById("year-list"); let yearList = document.getElementById("year-list");
if (yearList) { if (yearList) {
yearList.items = {{ .years }}; yearList.items = {{ .years }};
yearList.setHREFFunc((item) => { yearList.setHREFFunc((item) => {
if (item === 0) return "/reihen?year=0"; return String(item);
return `/reihen?year=${item}`;
}); });
yearList.setLinkTextFunc((item) => { yearList.setLinkTextFunc((item) => {

18
views/routes/reihen/body.gohtml
View File

@@ -8,24 +8,24 @@
</div> </div>
</div> </div>
<div class="mt-3"> <div class="mt-6">
{{ template "_reihenfilter" . }} {{ template "_reihenfilter" . }}
</div> </div>
<div id="searchcontent" class="pt-4 font-serif"> <div id="searchcontent" class="font-serif">
<div class="-ml-16">
{{ if or .series .altseries }} {{ if or .series .altseries }}
{{ range $id, $r := .series }} <div class="mb-1 max-w-[60rem] hyphens-auto">
<div class="mb-1.5"> {{ range $id, $r := .series }}
{{ template "_reihe" (Arr $model $r) }} {{ template "_reihe" (Arr $model $r) }}
</div> {{ end }}
{{ end }} </div>
</div>
{{ if .search }} {{ if .search }}
<div class="mt-8"> <div class="mt-8 max-w-96">
{{ range $id, $r := .altseries }} {{ range $id, $r := .altseries }}
<div class="mb-1.5">
{{ template "_reihe" (Arr $model $r) }} {{ template "_reihe" (Arr $model $r) }}
</div>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}

112
views/transform/main.js
View File

@@ -5,6 +5,10 @@ const ATTR_XSLT_ONLOAD = "script[xslt-onload]";
const ATTR_XSLT_TEMPLATE = "xslt-template"; const ATTR_XSLT_TEMPLATE = "xslt-template";
const ATTR_XSLT_STATE = "xslt-transformed"; const ATTR_XSLT_STATE = "xslt-transformed";
const FILTER_LIST_ELEMENT = "filter-list"; const FILTER_LIST_ELEMENT = "filter-list";
const FILTER_LIST_LIST = "filter-list-list";
const FILTER_LIST_ITEM = "filter-list-item";
const FILTER_LIST_INPUT = "filter-list-input";
const FILTER_LIST_SEARCHABLE = "filter-list-searchable";
class XSLTParseProcess { class XSLTParseProcess {
#processors; #processors;
@@ -166,8 +170,14 @@ class FilterList extends HTMLElement {
} }
onLoseFocus(e) { onLoseFocus(e) {
if (e.target && e.target.tagName.toLowerCase() === "input") { let input = this.querySelector("input");
e.target.value = ""; if (e.target && e.target === input) {
relatedElement = e.relatedTarget;
if (relatedElement && this.contains(relatedElement)) {
return;
}
input.value = "";
this._filter = ""; this._filter = "";
if (this._filterstart) { if (this._filterstart) {
this.#hiddenlist = true; this.#hiddenlist = true;
@@ -186,16 +196,46 @@ class FilterList extends HTMLElement {
} }
} }
mark() {
if (typeof Mark !== "function") {
return;
}
let list = this.querySelector("#" + FILTER_LIST_LIST);
if (!list) {
return;
}
let instance = new Mark(list.querySelectorAll("." + FILTER_LIST_SEARCHABLE));
if (this._filter) {
instance.mark(this._filter, {
separateWordSearch: true,
});
}
}
// INFO: allows for setting a custom HREF of the list item
// The function takes the item as parameter fn(item) and should return a string.
setHREFFunc(fn) { setHREFFunc(fn) {
this.getHREF = fn; this.getHREF = fn;
this.render(); this.render();
} }
// INFO: allows for setting a custom link text of the list item
// The function takes the item as parameter fn(item) and should return a string or
// an HTML template literal.
setLinkTextFunc(fn) { setLinkTextFunc(fn) {
this.getLinkText = fn; this.getLinkText = fn;
this.render(); this.render();
} }
// INFO: allows for setting the text that will be filtered for.
// The function takes the item as parameter fn(item) and should return a string.
setSearchTextFunc(fn) {
this.getSearchText = fn;
this.render();
}
getHREF(item) { getHREF(item) {
if (!item) { if (!item) {
return ""; return "";
@@ -205,7 +245,7 @@ class FilterList extends HTMLElement {
return item.id; return item.id;
} }
getLinkText(item) { getSearchText(item) {
if (!item) { if (!item) {
return ""; return "";
} else if (!item.name) { } else if (!item.name) {
@@ -216,53 +256,65 @@ class FilterList extends HTMLElement {
#isActive(item) { #isActive(item) {
if (!item) { if (!item) {
return ""; return false;
} }
let href = this.getHREF(item); let href = this.getHREF(item);
if (href === "") { if (href === "" || !window.location.href.endsWith(href)) {
return ""; return false;
} }
if (!window.location.href.endsWith(href)) { return true;
return "";
}
return "aria-current='page'";
} }
#hiddenList() { getLinkText(item) {
if (this.#hiddenlist) { let text = this.getSearchText(item);
return "hidden"; if (text === "") {
return ``;
} }
return ""; return `<span class="${FILTER_LIST_SEARCHABLE}">${text}</span>`;
} }
renderList() { renderList() {
let list = this.querySelector("#list"); let list = this.querySelector("#" + FILTER_LIST_LIST);
if (list) { if (list) {
list.outerHTML = this.List(); list.outerHTML = this.List();
} }
this.mark();
} }
render() { render() {
this.innerHTML = ` this.innerHTML = `
<div class="p-4 font-serif text-base"> <div class="font-serif text-base">
${this.Input()} ${this.Input()}
${this.List()} ${this.List()}
</div> </div>
`; `;
} }
ActiveDot(item) {
if (this.#isActive(item)) {
return ``;
}
return "";
}
NoItems(items) {
if (items.length === 0) {
return `<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>`;
}
return "";
}
Input() { Input() {
return ` return `
<div class="flex w-full pb-0.5 border-b border-zinc-600"> <div class="flex w-full py-0.5 border-b border-zinc-600 bg-stone-50">
<i class="ri-arrow-right-s-line mr-1"></i> <i class="ri-arrow-right-s-line mr-1 pl-2"></i>
<div class="grow"> <div class="grow">
<input <input
type="text" type="text"
placeholder="${this._placeholder}" placeholder="${this._placeholder}"
class="w-full placeholder:italic px-2 " /> class="${FILTER_LIST_INPUT} w-full placeholder:italic px-2 py-0.5" />
</div> </div>
</div> </div>
`; `;
@@ -271,32 +323,38 @@ class FilterList extends HTMLElement {
List() { List() {
let filtereditems = this._items; let filtereditems = this._items;
if (this._filter) { if (this._filter) {
if (!this._filterstart) if (!this._filterstart) {
let joins = this._filter.split(" ");
filtereditems = this._items.filter((item) => { filtereditems = this._items.filter((item) => {
return this.getLinkText(item).toLowerCase().includes(this._filter.toLowerCase()); return joins.every((join) => {
return this.getSearchText(item).toLowerCase().includes(join.toLowerCase());
});
}); });
else } else {
filtereditems = this._items.filter((item) => { filtereditems = this._items.filter((item) => {
return this.getLinkText(item).toLowerCase().startsWith(this._filter.toLowerCase()); return this.getSearchText(item).toLowerCase().startsWith(this._filter.toLowerCase());
}); });
}
} }
return ` return `
<div id="list" class="links min-h-72 max-h-60 overflow-auto border-b border-zinc-300 ${this.#hiddenList()}"> <div id="${FILTER_LIST_LIST}" class="${FILTER_LIST_LIST} pt-1 min-h-72 max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${this.#hiddenlist ? "hidden" : ""}">
${filtereditems ${filtereditems
.map( .map(
(item, index) => ` (item, index) => `
<a <a
href="${this._url}${this.getHREF(item)}" href="${this._url}${this.getHREF(item)}"
class="block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${ class="${FILTER_LIST_ITEM} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${
index % 2 === 0 ? "bg-stone-100" : "bg-stone-50" index % 2 === 0 ? "bg-stone-100" : "bg-stone-50"
}" }"
${this.#isActive(item)}> ${this.#isActive(item) ? 'aria-current="page"' : ""}>
${this.ActiveDot(item)}
${this.getLinkText(item)} ${this.getLinkText(item)}
</a> </a>
`, `,
) )
.join("")} .join("")}
${this.NoItems(filtereditems)}
</div> </div>
`; `;
} }

4
views/transform/site.css
View File

@@ -119,4 +119,8 @@
.headingcontainer h1 { .headingcontainer h1 {
@apply text-3xl font-bold px-3 bg-stone-50 relative -translate-y-[50%] w-min whitespace-nowrap mx-auto; @apply text-3xl font-bold px-3 bg-stone-50 relative -translate-y-[50%] w-min whitespace-nowrap mx-auto;
} }
.filter-list-list .filter-list-item[aria-current="page"] {
@apply border-l-4 border-zinc-300 font-bold;
}
} }