Added filter functionality to list IV

src/dynamic/posthume_ausgaben.njk

@@ -12,12 +12,15 @@ eleventyNavigation:
 </div>
 
 <div class="sticky top-0 z-20">
-  <div class="flex flex-row">
   <div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
-    <input class="w-full p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+    <div class="w-full flex flex-row items-baseline">
+      <input class="grow p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+      <a class="shrink ml-2 px-1.5 py-0.5 border border-slate-400" id="scrollbutton" href="#top">↑&nbsp;nach oben</a>
+    </div>
     {% set jahr = "" %}
     {% set count = 1 %}
-    <a href="#top">↑</a>&nbsp;&nbsp;
+    <div class="hideifsearching">
+      Springe:&nbsp;&nbsp;
       {%- for post in collections.posthumeausgaben -%}
           {% if count % 5 == 0 and jahr !== post.data.Jahr %}
               <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;

src/dynamic/sekundaerliteratur.njk

@@ -18,12 +18,15 @@ eleventyNavigation:
 
 
 <div class="sticky top-0 z-20">
-  <div class="flex flex-row">
   <div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
-    <input class="w-full p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+    <div class="w-full flex flex-row items-baseline">
+      <input class="grow p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+      <a class="shrink ml-2 px-1.5 py-0.5 border border-slate-400" id="scrollbutton" href="#top">↑&nbsp;nach oben</a>
+    </div>
     {% set jahr = "" %}
     {% set count = 1 %}
-    <a href="#top">↑</a>&nbsp;&nbsp;
+    <div class="hideifsearching">
+      Springe:&nbsp;&nbsp;
       {%- for post in collections.sekundaer -%}
           {% if count % 80 == 0 and jahr !== post.data.Jahr %}
               <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;

src/dynamic/selbstaendige_drucke.njk

@@ -13,12 +13,15 @@ eleventyNavigation:
 </div>
 
 <div class="sticky top-0 z-20">
-  <div class="flex flex-row">
   <div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
-    <input class="w-full p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+    <div class="w-full flex flex-row items-baseline">
+      <input class="grow p-0.5 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+      <a class="shrink ml-2 px-1.5 py-0.5 border border-slate-400" id="scrollbutton" href="#top">↑&nbsp;nach oben</a>
+    </div>
     {% set jahr = "" %}
     {% set count = 1 %}
-    <a href="#top">↑</a>&nbsp;&nbsp;
+    <div class="hideifsearching">
+      Springe:&nbsp;&nbsp;
       {%- for post in collections.selbststaendigedrucke -%}
           {% if count % 1 == 0 and jahr !== post.data.Jahr %}
               <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;

src/dynamic/unselbststaendige_drucke.njk

@@ -31,8 +31,8 @@ eleventyNavigation:
 
 <div class="sticky top-0 z-20">
   <div class="flex flex-row z-10 bg-slate-100 px-4 py-2 self-start w-full items-baseline">
-    <a class="block" href="#top">↑</a>
     <input class="grow ml-2 p-0.5 pl-1 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+    <a class="shrink ml-2 px-1.5 py-0.5 border border-slate-400" id="scrollbutton" href="#top">↑&nbsp;nach oben</a>
   </div>
 </div>
 

src/layouts/base.njk

@@ -66,6 +66,24 @@
     </div>
 
   <script>
+    // Script for showing and acting upon the "scroll to top button"
+    const scrollFunction = function () {
+        button = document.getElementById("scrollbutton");
+        if (button !== null) {
+            if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
+                // button.style.display = "block";
+                button.style.pointerEvents = "auto";
+                button.classList.remove("hidden");
+            } else {
+                // button.style.display = "none";
+                button.style.pointerEvents = "none";
+                button.classList.add("hidden");
+            }
+        }
+    }
+
+
+    // Scripts for filtering lists
     let dictionary = [];
     function createIndex(id){
       $("#" + id + " .searchable").each( (ind, el) => {
@@ -90,6 +108,17 @@
 
 
   $(document).ready(function( $ ) {
+    // Scroll button
+    if (document.getElementById("scrollbutton") !== null) {
+        scrollFunction();
+        document.getElementById("scrollbutton").addEventListener("click", () => {
+            document.body.scrollTop = 0; // For Safari
+            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+        })
+        window.addEventListener("scroll", scrollFunction);
+    }
+
+    // List filtering
     if (document.getElementById("list")) {
       createIndex("list");
       let found = dictionary;
@@ -98,6 +127,9 @@
       $("input[name='keyword']").keyup(function() {
         var term = $(this).val() || '';
         if( term ) {
+          $(".hideifsearching").each( (ind, el) => {
+            $(el).hide();
+          });
           for (let item of found) {
             $(item.element).unmark().hide();
             $(item.category).hide();
@@ -122,6 +154,9 @@
           found = dictionary;
           sw = "";
           swl = 0;
+          $(".hideifsearching").each( (ind, el) => {
+            $(el).show();
+          });
         }
       });
     }