-
+
+
{{ range $id, $r := .letters }}
{{ $r }}
{{ end }}
@@ -21,28 +23,37 @@
-
-
-
-
-
- {{ if $model.search }}
+
{{ end }}
diff --git a/views/routes/components/_reihenfilter.gohtml b/views/routes/components/_reihenfilter.gohtml
new file mode 100644
index 0000000..f34e7f0
--- /dev/null
+++ b/views/routes/components/_reihenfilter.gohtml
@@ -0,0 +1,51 @@
+{{ $model := . }}
+
+
+
+
+
+
+
+
+ {{ if .agents }}
+
diff --git a/views/routes/reihen/body.gohtml b/views/routes/reihen/body.gohtml
index d92e014..89dfa63 100644
--- a/views/routes/reihen/body.gohtml
+++ b/views/routes/reihen/body.gohtml
@@ -1,14 +1,18 @@
{{ $model := . }}
-
- {{ template "_alphabet" Dict "active" .letter "letters" .letters "search" .search }}
+
+
+
+Bände nach Reihentiteln
+
+ {{ template "_alphabet" Dict "active" .letter "letters" .letters "search" .search }}
+
+
+ {{ template "_reihenfilter" . }}
- {{ if .search }}
-
-
-Reihen für {{ .search }} gefunden.
- {{ end }}
{{ if or .series .altseries }}
{{ range $id, $r := .series }}
@@ -33,41 +37,3 @@
{{ end }}
- {{ if .agents }}
-
diff --git a/views/transform/main.js b/views/transform/main.js
index 5628f64..be103fc 100644
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -1,48 +1,66 @@
+// INFO: We import this so vite processes the stylesheet
import "./site.css";
const ATTR_XSLT_ONLOAD = "script[xslt-onload]";
const ATTR_XSLT_TEMPLATE = "xslt-template";
const ATTR_XSLT_STATE = "xslt-transformed";
+const FILTER_LIST_ELEMENT = "filter-list";
-const xslt_processors = new Map();
+class XSLTParseProcess {
+ #processors;
-function setup_xslt() {
- let els = htmx.findAll(ATTR_XSLT_ONLOAD);
- for (let element of els) {
- transform_xslt(element);
- }
-}
-
-function transform_xslt(element) {
- if (
- element.getAttribute(ATTR_XSLT_STATE) === "true" ||
- !element.hasAttribute(ATTR_XSLT_TEMPLATE)
- ) {
- return;
+ constructor() {
+ this.#processors = new Map();
}
- let templateId = "#" + element.getAttribute(ATTR_XSLT_TEMPLATE);
- let processor = xslt_processors.get(templateId);
- if (!processor) {
- let template = htmx.find(templateId);
- if (template) {
- let content = template.innerHTML
- ? new DOMParser().parseFromString(template.innerHTML, "application/xml")
- : template.contentDocument;
- processor = new XSLTProcessor();
- processor.importStylesheet(content);
- xslt_processors.set(templateId, processor);
- } else {
- throw new Error("Unknown XSLT template: " + templateId);
+ setup() {
+ let els = htmx.findAll(ATTR_XSLT_ONLOAD);
+ for (let element of els) {
+ this.#transform_xslt(element);
}
}
- let data = new DOMParser().parseFromString(element.innerHTML, "application/xml");
- let frag = processor.transformToFragment(data, document);
- let s = new XMLSerializer().serializeToString(frag);
- element.outerHTML = s;
+ hookupHTMX() {
+ // INFO: We can instead use afterSettle; and also clear the map with
+ // xslt_processors.clear();
+ htmx.on("htmx:load", (_) => {
+ this.setup();
+ });
+ }
+
+ #transform_xslt(element) {
+ if (
+ element.getAttribute(ATTR_XSLT_STATE) === "true" ||
+ !element.hasAttribute(ATTR_XSLT_TEMPLATE)
+ ) {
+ return;
+ }
+
+ let templateId = "#" + element.getAttribute(ATTR_XSLT_TEMPLATE);
+ let processor = this.#processors.get(templateId);
+ if (!processor) {
+ let template = htmx.find(templateId);
+ if (template) {
+ let content = template.innerHTML
+ ? new DOMParser().parseFromString(template.innerHTML, "application/xml")
+ : template.contentDocument;
+ processor = new XSLTProcessor();
+ processor.importStylesheet(content);
+ this.#processors.set(templateId, processor);
+ } else {
+ throw new Error("Unknown XSLT template: " + templateId);
+ }
+ }
+
+ let data = new DOMParser().parseFromString(element.innerHTML, "application/xml");
+ let frag = processor.transformToFragment(data, document);
+ let s = new XMLSerializer().serializeToString(frag);
+ element.outerHTML = s;
+ }
}
+// INFO: these is a function to define simple reusable templates which we don't need.
+// Since we can include templates server-side.
function setup_templates() {
let templates = document.querySelectorAll("template[simple]");
templates.forEach((template) => {
@@ -77,45 +95,213 @@ function setup_templates() {
});
}
-// INFO: This is intended to be callled once on website load
-function setup() {
- setup_xslt();
-
- htmx.on("htmx:load", function (_) {
- // INFO: We can instead use afterSettle; and also clear the map with
- // xslt_processors.clear();
- setup_xslt();
- });
-
- setup_templates();
-}
-
-function setMenuActive(url) {
- if (!url) {
- url = window.location.href;
+class FilterList extends HTMLElement {
+ #hiddenlist = false;
+ constructor() {
+ super();
+ this._items = [];
+ this._url = "";
+ this._filterstart = false;
+ this._placeholder = "Liste filtern...";
+ this.render();
}
- const menus = document.querySelectorAll("nav");
- if (menus && menus.length > 0) {
- for (const menu of menus) {
- const links = menu.querySelectorAll("a, [data-url]");
- links.forEach((link) => {
- if (link.dataset.url && link.dataset.url !== "") {
- let fullurl = window.location.origin + link.dataset.url;
- if (url.startsWith(fullurl)) {
- link.setAttribute("aria-current", "page");
- } else {
- link.removeAttribute("aria-current");
- }
- } else if (link.href) {
- if (url.startsWith(link.href)) {
- link.setAttribute("aria-current", "page");
- } else {
- link.removeAttribute("aria-current");
- }
- }
- });
+
+ static get observedAttributes() {
+ return ["data-url"];
+ }
+
+ set items(data) {
+ if (Array.isArray(data)) {
+ this._items = data;
+ this.render();
}
}
+
+ get items() {
+ return this._items;
+ }
+
+ connectedCallback() {
+ this._url = this.getAttribute("data-url") || "./";
+ this._filterstart = this.getAttribute("data-filterstart") === "true";
+ this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...";
+
+ if (this._filterstart) {
+ this.#hiddenlist = true;
+ }
+
+ 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(name, oldValue, newValue) {
+ if (name === "data-url" && oldValue !== newValue) {
+ this._url = newValue;
+ this.render();
+ }
+ if (name === "data-filterstart" && oldValue !== newValue) {
+ this._filterstart = newValue === "true";
+ this.render();
+ }
+ if (name === "data-placeholder" && oldValue !== newValue) {
+ this._placeholder = newValue;
+ this.render();
+ }
+ }
+
+ onInput(e) {
+ if (e.target && e.target.tagName.toLowerCase() === "input") {
+ this._filter = e.target.value;
+ this.renderList();
+ }
+ }
+
+ onGainFocus(e) {
+ if (e.target && e.target.tagName.toLowerCase() === "input") {
+ this.#hiddenlist = false;
+ this.renderList();
+ }
+ }
+
+ onLoseFocus(e) {
+ if (e.target && e.target.tagName.toLowerCase() === "input") {
+ e.target.value = "";
+ this._filter = "";
+ if (this._filterstart) {
+ this.#hiddenlist = true;
+ }
+ this.renderList();
+ }
+ }
+
+ onEnter(e) {
+ if (e.target && e.target.tagName.toLowerCase() === "input" && e.key === "Enter") {
+ e.preventDefault();
+ const link = this.querySelector("a");
+ if (link) {
+ link.click();
+ }
+ }
+ }
+
+ setHREFFunc(fn) {
+ this.getHREF = fn;
+ this.render();
+ }
+
+ setLinkTextFunc(fn) {
+ this.getLinkText = fn;
+ this.render();
+ }
+
+ getHREF(item) {
+ if (!item) {
+ return "";
+ } else if (!item.id) {
+ return "";
+ }
+ return item.id;
+ }
+
+ getLinkText(item) {
+ if (!item) {
+ return "";
+ } else if (!item.name) {
+ return "";
+ }
+ return item.name;
+ }
+
+ #isActive(item) {
+ if (!item) {
+ return "";
+ }
+
+ let href = this.getHREF(item);
+ if (href === "") {
+ return "";
+ }
+
+ if (!window.location.href.endsWith(href)) {
+ return "";
+ }
+
+ return "aria-current='page'";
+ }
+
+ #hiddenList() {
+ if (this.#hiddenlist) {
+ return "hidden";
+ }
+ return "";
+ }
+
+ renderList() {
+ let list = this.querySelector("#list");
+ if (list) {
+ list.outerHTML = this.List();
+ }
+ }
+
+ render() {
+ this.innerHTML = `
+
- {{ range $id, $r := .agents }}
-
- {{ end }}
-
- {{ if .places }}
-
- {{ $r.Name }}
-
- {{ end }}
-
- {{ range $id, $r := .places }}
-
- {{ end }}
-
- {{ if .years }}
-
- {{ end }}
-
- {{ $r.Name }}
-
- {{ end }}
-
+ ${this.Input()}
+ ${this.List()}
+
+ `;
+ }
+
+ Input() {
+ return `
+
+
+
+ `;
+ }
+
+ List() {
+ let filtereditems = this._items;
+ if (this._filter) {
+ if (!this._filterstart)
+ filtereditems = this._items.filter((item) => {
+ return this.getLinkText(item).toLowerCase().includes(this._filter.toLowerCase());
+ });
+ else
+ filtereditems = this._items.filter((item) => {
+ return this.getLinkText(item).toLowerCase().startsWith(this._filter.toLowerCase());
+ });
+ }
+
+ return `
+
+
+
+
+ ${filtereditems
+ .map(
+ (item, index) => `
+
+ ${this.getLinkText(item)}
+
+ `,
+ )
+ .join("")}
+
+ `;
+ }
}
-export { setup, setMenuActive };
+customElements.define(FILTER_LIST_ELEMENT, FilterList);
+
+export { XSLTParseProcess, FilterList };
diff --git a/views/transform/site.css b/views/transform/site.css
index bb59ab2..fa87c27 100644
--- a/views/transform/site.css
+++ b/views/transform/site.css
@@ -99,11 +99,24 @@
@apply font-variant-small-caps;
}
- .alphabet a[aria-current="page"] {
+ .alphabet a[aria-current="page"]:not(.inactive) {
@apply pb-3 pt-2 font-bold italic !bg-stone-50 relative -bottom-3 border-b;
}
- .alphabet a:hover:not([aria-current="page"]) {
+ .alphabet a:hover:not([aria-current="page"]:not(.inactive)) {
@apply pb-1 pt-0.5 !bg-stone-50 relative;
}
+
+ .headingcontainer:before {
+ content: "";
+ @apply bg-zinc-300 w-[50%] absolute top-0 left-[50%] h-[1px];
+ }
+
+ .headingcontainer {
+ @apply mt-10 border-r border-zinc-300 relative;
+ }
+
+ .headingcontainer h1 {
+ @apply text-3xl font-bold px-3 bg-stone-50 relative -translate-y-[50%] w-min whitespace-nowrap mx-auto;
+ }
}