BIGFIX: scrolling on fp, loading times

views/assets/scripts.js

@@ -3,7 +3,7 @@ var x = (r) => {
 };
 var _ = (r, t, e) => t.has(r) || x("Cannot " + e);
 var c = (r, t, e) => (_(r, t, "read from private field"), e ? e.call(r) : t.get(r)), n = (r, t, e) => t.has(r) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), u = (r, t, e, i) => (_(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e), g = (r, t, e) => (_(r, t, "access private method"), e);
-const S = "script[xslt-onload]", y = "xslt-template", k = "xslt-transformed", M = "filter-list", m = "filter-list-list", C = "filter-list-item", I = "filter-list-input", w = "filter-list-searchable", B = "scroll-button", q = "tool-tip", P = "abbrev-tooltips", R = "int-link", H = "popup-image", $ = "tab-list", N = "filter-pill", F = "image-reel";
+const S = "script[xslt-onload]", w = "xslt-template", k = "xslt-transformed", M = "filter-list", m = "filter-list-list", C = "filter-list-item", I = "filter-list-input", y = "filter-list-searchable", B = "scroll-button", q = "tool-tip", P = "abbrev-tooltips", H = "int-link", R = "popup-image", $ = "tab-list", N = "filter-pill", F = "image-reel";
 var d, b, E;
 class V {
   constructor() {
@@ -23,9 +23,9 @@ class V {
   }
 }
 d = new WeakMap(), b = new WeakSet(), E = function(t) {
-  if (t.getAttribute(k) === "true" || !t.hasAttribute(y))
+  if (t.getAttribute(k) === "true" || !t.hasAttribute(w))
     return;
-  let e = "#" + t.getAttribute(y), i = c(this, d).get(e);
+  let e = "#" + t.getAttribute(w), i = c(this, d).get(e);
   if (!i) {
     let h = htmx.find(e);
     if (h) {
@@ -119,7 +119,7 @@ class U extends HTMLElement {
     return ["data-url"];
   }
   set items(e) {
-    Array.isArray(e) && (this._items = e, this.render()), htmx && htmx.process(this);
+    Array.isArray(e) && (this._items = e, this.render());
   }
   get items() {
     return this._items;
@@ -157,7 +157,7 @@ class U extends HTMLElement {
     let e = this.querySelector("#" + m);
     if (!e)
       return;
-    let i = new Mark(e.querySelectorAll("." + w));
+    let i = new Mark(e.querySelectorAll("." + y));
     this._filter && i.mark(this._filter, {
       separateWordSearch: !0
     });
@@ -197,7 +197,7 @@ class U extends HTMLElement {
   }
   getLinkText(e) {
     let i = this.getSearchText(e);
-    return i === "" ? "" : `<span class="${w}">${i}</span>`;
+    return i === "" ? "" : `<span class="${y}">${i}</span>`;
   }
   getURL(e) {
     if (this._queryparam) {
@@ -216,7 +216,7 @@ class U extends HTMLElement {
 							${this.Input()}
 							${this.List()}
             </div>
-        `;
+        `, htmx && htmx.process(this);
   }
   ActiveDot(e) {
     return g(this, f, L).call(this, e), "";
@@ -253,6 +253,9 @@ class U extends HTMLElement {
 									<a
 										href="${this.getURL(i)}"
 										hx-indicator="body"
+										hx-swap="outerHTML show:none"
+										hx-select="main"
+										hx-target="main"
 										class="${C} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
 										${g(this, f, L).call(this, i) ? 'aria-current="page"' : ""}>
 										${this.ActiveDot(i)}
@@ -742,12 +745,12 @@ class X extends HTMLElement {
   }
 }
 v = new WeakMap();
-customElements.define(R, K);
+customElements.define(H, K);
 customElements.define(P, p);
 customElements.define(M, U);
 customElements.define(B, D);
 customElements.define(q, z);
-customElements.define(H, G);
+customElements.define(R, G);
 customElements.define($, j);
 customElements.define(N, O);
 customElements.define(F, X);

views/routes/personen/components/searchbox.gohtml

@@ -15,7 +15,7 @@
 				placeholder="Suchbegriff"
 				x-model="search"
 				hx-get=""
-				hx-trigger="input[if: this.value.length >= 3] delay:3000ms, keyup[enter, if: this.value.length >= 2]"
+				hx-trigger="input delay:1000ms, keyup[enter]"
 				hx-select="#searchresults"
 				hx-target="#searchresults"
 				hx-swap="outerHTML"

views/routes/reihen/components/alphabet.gohtml

@@ -11,12 +11,16 @@
 					:class="search ? 'inactive' : 'active'"
 					href="?letter={{ $r }}"
 					{{ if eq $model.active $r }}aria-current="page"{{ end }}
+					hx-indicator="body"
 					hx-select="main"
 					hx-target="main"
-					hx-swap="outerHTML scroll:#pageheading:top"
+					hx-swap="outerHTML show:none"
 					>{{ $r }}</a
 				>
 			{{ end }}
+
+
+			<i class="ml-2 pb-1 ri-hourglass-2-fill request-indicator spinning"></i>
 		</div>
 
 		<div class="flex-grow"></div>

views/transform/main.js

@@ -242,8 +242,6 @@ class FilterList extends HTMLElement {
 			this._items = data;
 			this.render();
 		}
-		if (!htmx) return;
-		htmx.process(this);
 	}
 
 	get items() {
@@ -451,6 +449,8 @@ class FilterList extends HTMLElement {
 							${this.List()}
             </div>
         `;
+		if (!htmx) return;
+		htmx.process(this);
 	}
 
 	ActiveDot(item) {
@@ -506,6 +506,9 @@ class FilterList extends HTMLElement {
 									<a
 										href="${this.getURL(item)}"
 										hx-indicator="body"
+										hx-swap="outerHTML show:none"
+										hx-select="main"
+										hx-target="main"
 										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"
 										}"