Scroll Button

views/assets/scripts.js

@@ -1,20 +1,20 @@
 var _ = (i) => {
   throw TypeError(i);
 };
-var g = (i, r, t) => r.has(i) || _("Cannot " + t);
-var c = (i, r, t) => (g(i, r, "read from private field"), t ? t.call(i) : r.get(i)), l = (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), d = (i, r, t) => (g(i, r, "access private method"), t);
-const v = "script[xslt-onload]", m = "xslt-template", A = "xslt-transformed", F = "filter-list", f = "filter-list-list", w = "filter-list-item", I = "filter-list-input", E = "filter-list-searchable";
-var a, p, b;
-class $ {
+var L = (i, r, t) => r.has(i) || _("Cannot " + t);
+var d = (i, r, t) => (L(i, r, "read from private field"), t ? t.call(i) : r.get(i)), o = (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), a = (i, r, t, e) => (L(i, r, "write to private field"), e ? e.call(i, t) : r.set(i, t), t), u = (i, r, t) => (L(i, r, "access private method"), t);
+const v = "script[xslt-onload]", b = "xslt-template", w = "xslt-transformed", k = "filter-list", f = "filter-list-list", y = "filter-list-item", A = "filter-list-input", m = "filter-list-searchable", F = "scroll-button";
+var l, p, E;
+class H {
   constructor() {
-    l(this, p);
-    l(this, a);
-    o(this, a, /* @__PURE__ */ new Map());
+    o(this, p);
+    o(this, l);
+    a(this, l, /* @__PURE__ */ new Map());
   }
   setup() {
     let r = htmx.findAll(v);
     for (let t of r)
-      d(this, p, b).call(this, t);
+      u(this, p, E).call(this, t);
   }
   hookupHTMX() {
     htmx.on("htmx:load", (r) => {
@@ -22,27 +22,27 @@ class $ {
     });
   }
 }
-a = new WeakMap(), p = new WeakSet(), b = function(r) {
-  if (r.getAttribute(A) === "true" || !r.hasAttribute(m))
+l = new WeakMap(), p = new WeakSet(), E = function(r) {
+  if (r.getAttribute(w) === "true" || !r.hasAttribute(b))
     return;
-  let t = "#" + r.getAttribute(m), e = c(this, a).get(t);
+  let t = "#" + r.getAttribute(b), e = d(this, l).get(t);
   if (!e) {
-    let u = htmx.find(t);
-    if (u) {
-      let S = u.innerHTML ? new DOMParser().parseFromString(u.innerHTML, "application/xml") : u.contentDocument;
-      e = new XSLTProcessor(), e.importStylesheet(S), c(this, a).set(t, e);
+    let c = htmx.find(t);
+    if (c) {
+      let x = c.innerHTML ? new DOMParser().parseFromString(c.innerHTML, "application/xml") : c.contentDocument;
+      e = new XSLTProcessor(), e.importStylesheet(x), d(this, l).set(t, e);
     } else
       throw new Error("Unknown XSLT template: " + t);
   }
-  let s = new DOMParser().parseFromString(r.innerHTML, "application/xml"), L = e.transformToFragment(s, document), x = new XMLSerializer().serializeToString(L);
-  r.outerHTML = x;
+  let s = new DOMParser().parseFromString(r.innerHTML, "application/xml"), T = e.transformToFragment(s, document), S = new XMLSerializer().serializeToString(T);
+  r.outerHTML = S;
 };
-var n, h, T;
-class k extends HTMLElement {
+var n, h, g;
+class I extends HTMLElement {
   constructor() {
     super();
-    l(this, h);
-    l(this, n, !1);
+    o(this, h);
+    o(this, n, !1);
     this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render();
   }
   static get observedAttributes() {
@@ -55,7 +55,7 @@ class k extends HTMLElement {
     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...", 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));
+    this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && a(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) {
     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,14 +64,14 @@ class k extends HTMLElement {
     t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList());
   }
   onGainFocus(t) {
-    t.target && t.target.tagName.toLowerCase() === "input" && (o(this, n, !1), this.renderList());
+    t.target && t.target.tagName.toLowerCase() === "input" && (a(this, n, !1), this.renderList());
   }
   onLoseFocus(t) {
     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();
+      e.value = "", this._filter = "", this._filterstart && a(this, n, !0), this.renderList();
     }
   }
   onEnter(t) {
@@ -87,7 +87,7 @@ class k extends HTMLElement {
     let t = this.querySelector("#" + f);
     if (!t)
       return;
-    let e = new Mark(t.querySelectorAll("." + E));
+    let e = new Mark(t.querySelectorAll("." + m));
     this._filter && e.mark(this._filter, {
       separateWordSearch: !0
     });
@@ -124,7 +124,7 @@ class k extends HTMLElement {
   }
   getLinkText(t) {
     let e = this.getSearchText(t);
-    return e === "" ? "" : `<span class="${E}">${e}</span>`;
+    return e === "" ? "" : `<span class="${m}">${e}</span>`;
   }
   renderList() {
     let t = this.querySelector("#" + f);
@@ -139,7 +139,7 @@ class k extends HTMLElement {
         `;
   }
   ActiveDot(t) {
-    return d(this, h, T).call(this, t), "";
+    return u(this, h, g).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>' : "";
@@ -152,7 +152,7 @@ class k extends HTMLElement {
 						<input
 								type="text"
 								placeholder="${this._placeholder}"
-								class="${I} w-full placeholder:italic px-2 py-0.5" />
+								class="${A} w-full placeholder:italic px-2 py-0.5" />
 						</div>
 				</div>
 				`;
@@ -164,16 +164,16 @@ class k extends HTMLElement {
         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())));
+        t = this._items.filter((s) => e.every((T) => this.getSearchText(s).toLowerCase().includes(T.toLowerCase())));
       }
     return `
-							<div id="${f}" class="${f} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${c(this, n) ? "hidden" : ""}">
+							<div id="${f}" class="${f} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${d(this, n) ? "hidden" : ""}">
 								${t.map(
       (e, s) => `
 									<a
 										href="${this._url}${this.getHREF(e)}"
-										class="${w} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
-										${d(this, h, T).call(this, e) ? 'aria-current="page"' : ""}>
+										class="${y} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
+										${u(this, h, g).call(this, e) ? 'aria-current="page"' : ""}>
 										${this.ActiveDot(e)}
 										${this.getLinkText(e)}
 									</a>
@@ -184,14 +184,52 @@ class k extends HTMLElement {
 				`;
   }
 }
-n = new WeakMap(), h = new WeakSet(), T = function(t) {
+n = new WeakMap(), h = new WeakSet(), g = function(t) {
   if (!t)
     return !1;
   let e = this.getHREF(t);
   return !(e === "" || !window.location.href.endsWith(e));
 };
-customElements.define(F, k);
+class M extends HTMLElement {
+  constructor() {
+    super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this);
+  }
+  connectedCallback() {
+    this.innerHTML = `
+          <button
+            class="
+              scroll-to-top
+              fixed bottom-5 right-5
+              hidden
+              bg-gray-800 text-white
+              p-2
+              rounded-md
+              cursor-pointer
+              text-2xl
+              hover:opacity-80
+              transition-opacity
+              border-0
+            "
+            aria-label="Scroll to top"
+          >
+					<i class="ri-arrow-up-double-line"></i>
+          </button>
+        `, this._button = this.querySelector(".scroll-to-top"), window.addEventListener("scroll", this.handleScroll), this._button.addEventListener("click", this.scrollToTop);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("scroll", this.handleScroll), this._button.removeEventListener("click", this.scrollToTop);
+  }
+  handleScroll() {
+    (window.scrollY || document.documentElement.scrollTop) > 300 ? this._button.classList.remove("hidden") : this._button.classList.add("hidden");
+  }
+  scrollToTop() {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
+customElements.define(k, I);
+customElements.define(F, M);
 export {
-  k as FilterList,
-  $ as XSLTParseProcess
+  I as FilterList,
+  M as ScrollButton,
+  H as XSLTParseProcess
 };

views/layouts/default/root.gohtml

@@ -45,6 +45,8 @@
 				{{ block "_footer" . }}
 				{{ end }}
 			</footer>
+
+			<scroll-button></scroll-button>
 		</div>
 	</body>
 </html>

views/transform/main.js

@@ -4,12 +4,15 @@ 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 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";
 
+const SCROLL_BUTTON_ELEMENT = "scroll-button";
+
 class XSLTParseProcess {
 	#processors;
 
@@ -360,6 +363,69 @@ class FilterList extends HTMLElement {
 	}
 }
 
-customElements.define(FILTER_LIST_ELEMENT, FilterList);
+class ScrollButton extends HTMLElement {
+	constructor() {
+		super();
+		this.handleScroll = this.handleScroll.bind(this);
+		this.scrollToTop = this.scrollToTop.bind(this);
+	}
 
-export { XSLTParseProcess, FilterList };
+	connectedCallback() {
+		// Insert Tailwind-styled button in light DOM
+		this.innerHTML = `
+          <button
+            class="
+              scroll-to-top
+              fixed bottom-5 right-5
+              hidden
+              bg-gray-800 text-white
+              p-2
+              rounded-md
+              cursor-pointer
+              text-2xl
+              hover:opacity-80
+              transition-opacity
+              border-0
+            "
+            aria-label="Scroll to top"
+          >
+					<i class="ri-arrow-up-double-line"></i>
+          </button>
+        `;
+
+		this._button = this.querySelector(".scroll-to-top");
+
+		// Listen for scroll events
+		window.addEventListener("scroll", this.handleScroll);
+
+		// Listen for clicks on the button
+		this._button.addEventListener("click", this.scrollToTop);
+	}
+
+	disconnectedCallback() {
+		window.removeEventListener("scroll", this.handleScroll);
+		this._button.removeEventListener("click", this.scrollToTop);
+	}
+
+	handleScroll() {
+		// Show/hide button based on scroll position
+		const scrollTop = window.scrollY || document.documentElement.scrollTop;
+		if (scrollTop > 300) {
+			// Remove 'hidden' so it becomes visible
+			this._button.classList.remove("hidden");
+		} else {
+			// Add 'hidden' so it's not displayed
+			this._button.classList.add("hidden");
+		}
+	}
+
+	scrollToTop() {
+		// Smoothly scroll back to top
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}
+}
+
+customElements.define(FILTER_LIST_ELEMENT, FilterList);
+customElements.define(SCROLL_BUTTON_ELEMENT, ScrollButton);
+
+export { XSLTParseProcess, FilterList, ScrollButton };