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

Abschluss einfache Inhaltsuche

Browse Source
This commit is contained in:
Simon Martens
2025-03-01 04:48:47 +01:00
parent 8bc1fdb79c
commit 64c24480ca
8 changed files with 226 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
views/transform/main.js
View File

@@ -17,6 +17,7 @@ const ABBREV_TOOLTIPS_ELEMENT = "abbrev-tooltips";
const INT_LINK_ELEMENT = "int-link";
const POPUP_IMAGE_ELEMENT = "popup-image";
const TABLIST_ELEMENT = "tab-list";
const FILTER_PILL_ELEMENT = "filter-pill";
class XSLTParseProcess {
#processors;
@@ -107,6 +108,100 @@ function setup_templates() {
});
}
class FilterPill extends HTMLElement {
constructor() {
super();
this._value = "";
this.render();
}
static get observedAttributes() {
return ["data-text", "data-queryparam", "data-value"];
}
set value(value) {
this.setAttribute("data-value", value);
}
get value() {
return this.getAttribute("data-value") || "";
}
set text(value) {
this.setAttribute("data-text", value);
}
get text() {
return this.getAttribute("data-text") || "";
}
set queryparam(value) {
this.setAttribute("data-queryparam", value);
}
get queryparam() {
return this.getAttribute("data-queryparam") || "";
}
connectedCallback() {
this._filter = this.text;
this._queryparam = this.queryparam;
this.render();
htmx.process(this);
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
if (name === "data-text") {
this._filter = newValue;
}
if (name === "data-queryparam") {
this._queryparam = newValue;
}
if (name === "data-value") {
this._value = newValue;
}
this.render();
}
}
getURL() {
if (this._queryparam) {
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
params.delete(this._queryparam);
params.delete("page");
url.search = params.toString();
return url.toString();
}
return "#";
}
render() {
this.innerHTML = `
<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-swap="outerHTML show:window:top">
<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:-saturate-100 px-2.5 mt-2">
<div href="${this.getURL()}" class="filter-pill-close no-underline font-bold mr-1 text-orange-900 hover:text-orange-800">
<i class="ri-close-circle-line"></i>
</div>
<div class="flex flex-row filter-pill-label-value !items-baseline text-slate-700">
<div class="filter-pill-label font-bold mr-1.5 align-baseline">${this.text}</div>
${this.renderValue()}
</div>
</div>
</a>
`;
}
renderValue() {
const isBool = this.value === "true" || this.value === "false";
if (isBool) return ``;
return `
<div class="filter-pill-value">${this.value}</div>
`;
}
}
class FilterList extends HTMLElement {
#hiddenlist = false;
#activequery = "";
@@ -318,6 +413,7 @@ class FilterList extends HTMLElement {
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
params.set(this._queryparam, this.getHREF(item));
params.delete("page");
url.search = params.toString();
return url.toString();
}
@@ -1018,5 +1114,6 @@ customElements.define(SCROLL_BUTTON_ELEMENT, ScrollButton);
customElements.define(TOOLTIP_ELEMENT, ToolTip);
customElements.define(POPUP_IMAGE_ELEMENT, PopupImage);
customElements.define(TABLIST_ELEMENT, Tablist);
customElements.define(FILTER_PILL_ELEMENT, FilterPill);
export { XSLTParseProcess, FilterList, ScrollButton, AbbreviationTooltips };