Suche (Geschwindikeit und Auswahlfeld)

.gitignore

@@ -105,4 +105,4 @@ dist
 
 # Eleventy output file
 dist/
-src/css/output.css
+src/static/css/output.css

src/dynamic/sekundaerliteratur.njk

@@ -18,23 +18,24 @@ eleventyNavigation:
 
 
 <div class="sticky top-0 z-20">
-  <div class="z-10 bg-slate-100 px-4 py-2 self-start w-full">
+  <div class="z-10 bg-slate-100 px-4 py-0.5 pt-1 self-start w-full flex flex-row items-baseline gap-x-3">
-    <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 %}
       <div class="hideifsearching">
-      Springe:&nbsp;&nbsp;
+        Jahr&nbsp;
+        <select class="bg-white px-1.5 pt-1.5 pb-1 border border-slate-300" onchange="window.location.href=this.value" >
+          {% set jahr = "" %}
+          {% set count = 0 %}
           {%- for post in collections.sekundaer -%}
-          {% if count % 80 == 0 and jahr !== post.data.Jahr %}
+            {% if count % 40 == 0 and jahr !== post.data.Jahr %}
-              <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;
+                <option value="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</option>&nbsp;&nbsp;
                 {% set jahr = post.data.Jahr %}
             {% endif %}
             {% set count = count + 1 %}
           {%- endfor -%}
+        </select>
       </div>
+      <input class="grow p-0.5 px-1 my-1 mb-2 border border-slate-300" type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
+      <button class="bg-white shrink py-0.5 px-1.5 border border-slate-300 showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
+      <a class="bg-white shrink py-0.5 px-1.5 border border-slate-300" id="scrollbutton" href="#top">↑&nbsp;nach oben</a>
   </div>
 </div>
 

src/dynamic/theaterauffuehrungen.njk

@@ -24,7 +24,7 @@ eleventyNavigation:
     <div class="hideifsearching">
       Springe:&nbsp;&nbsp;
       {%- for post in collections.theater -%}
-          {% if count % 1 == 0 and jahr !== post.data.Jahr %}
+          {% if count % 3 == 0 and jahr !== post.data.Jahr %}
               <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;
               {% set jahr = post.data.Jahr %}
           {% endif %}

src/layouts/base.njk

@@ -4,7 +4,8 @@
     <link rel="canonical" href="{{ config.url }}{{ page.url }}">
     <link rel="stylesheet" href="/css/output.css" >
 
-    <title>{% if title and title != 'Home' %}{{title}} - {% endif %}{{ config.title }}</title>
+    <title>
+      {% if title and title != 'Home' %}{{title}} - {% endif %}{{ config.title }}</title>
 
     <!-- Icons -->
     <!-- Enable if favicons installed into the static/img/ directory -->
@@ -73,31 +74,46 @@
           if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
             // button.style.display = "block";
             button.style.pointerEvents = "auto";
-                button.classList.remove("hidden");
+            button
+              .classList
+              .remove("hidden");
           } else {
             // button.style.display = "none";
             button.style.pointerEvents = "none";
-                button.classList.add("hidden");
+            button
+              .classList
+              .add("hidden");
           }
         }
       }
 
-
       // Scripts for filtering lists
       let dictionary = [];
-    function createIndex(id, searchable){
+      let categories = document
+        .getElementById("list")
+        .getElementsByClassName("category");
+      let found = dictionary;
+      let sw = "";
+      let swl = 0;
 
+      $(".showifsearching").each((ind, el) => {
+        $(el).hide();
+      });
+
+      function createIndex(id, searchable) {
         $("#" + id + " " + searchable).each((ind, el) => {
           dictionary.push({
-          category: $(el).parents(".category"),
+            category: el.closest(".category"), element: el, searchitem: $(el)
-          element: el,
+              .text()
-          searchitem: $(el).text().toLowerCase()
+              .toLowerCase()
           });
         });
       }
 
       function findWord(word, d) {
-      var sw = word.trim().toLowerCase();
+        var sw = word
+          .trim()
+          .toLowerCase();
         return d.filter(function (e) {
           if (e.searchitem.indexOf(sw) !== -1) {
             return true;
@@ -107,12 +123,101 @@
         })
       }
 
+      const search = function () {
+        term = $("input[name='keyword']")
+          .val()
+          .trim() || '';
+
+        // Unmark everything previously marked
+        for (let item of found) {
+          $(item.element).unmark();
+        }
+
+        if (term) {
+          // Hide everything tagged hideifseaching
+          $(".hideifsearching").each((ind, el) => {
+            $(el).hide();
+          });
+
+          $(".showifsearching").each((ind, el) => {
+            $(el).show();
+          });
+
+          $(".ueberschrift-gruppe").each((ind, el) => {
+            $(el).hide();
+          });
+
+          // Hide all categories by default
+          for (let cat of categories) {
+            cat
+              .classList
+              .add("hidden");
+          }
+
+          // Only search in prior found elements if word starts the same
+          if (term.length > swl && term.startsWith(sw)) {
+            found = findWord(term, found);
+          } else {
+            found = findWord(term, dictionary);
+          }
+
+          for (let item of dictionary) {
+            if (found.indexOf(item) !== -1) {
+              item
+                .category
+                .classList
+                .add("search-expanded");
+              item
+                .category
+                .classList
+                .remove("hidden");
+              item
+                .element
+                .classList
+                .remove("hidden");
+              if (term.length >= 2) {
+                $(item.element).mark(term, {
+                  "separateWordSearch": false,
+                  "acrossElements": true
+                });
+              }
+            } else {
+              item
+                .element
+                .classList
+                .add("hidden");
+            }
+          }
+          sw = term;
+          swl = term.length;
+        } else {
+          var hidden = document
+            .getElementById("list")
+            .querySelectorAll(".hidden");
+          for (let item of hidden) {
+            item
+              .classList
+              .remove("hidden");
+          }
+          found = dictionary;
+          sw = "";
+          swl = 0;
+          $(".hideifsearching").each((ind, el) => {
+            $(el).show();
+          });
+          $(".showifsearching").each((ind, el) => {
+            $(el).hide();
+          });
+        }
+      }
 
       $(document).ready(function () {
         // Scroll button
         if (document.getElementById("scrollbutton") !== null) {
           scrollFunction();
-        document.getElementById("scrollbutton").addEventListener("click", () => {
+          document
+            .getElementById("scrollbutton")
+            .addEventListener("click", () => {
               document.body.scrollTop = 0; // For Safari
               document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
             })
@@ -128,74 +233,8 @@
             searchable = ".handschrift";
           }
           createIndex("list", searchable);
-      let found = dictionary;
+          $("input[name='keyword']").focus();
-      let sw = "";
+          $("input[name='keyword']").keyup(search);
-      let swl = 0;
-
-      $("input[name='keyword']").keyup(function() {
-        var term = $(this).val().trim() || '';
-
-        if( term ) {
-          // Hide everything tagged hideifseaching
-          $(".hideifsearching").each( (ind, el) => {
-            $(el).hide();
-          });
-
-          $(".ueberschrift-gruppe").each( (ind, el) => {
-            $(el).hide();
-          });
-          
-          // Unmark everything previously marked
-          if (sw.length > 0) {
-            for (let item of found) {
-              $(item.element).unmark();
-            }
-          }
-
-          // Only search in prior found elements if word starts the same
-          if (term.length > swl && term.startsWith(sw)) {
-            found = findWord( term, found );
-          } else {
-            found = findWord( term, dictionary );
-          }
-
-          // Hide all categories by default
-          requestAnimationFrame(function() {
-            $("#list .category").hide();
-          });
-          for (let item of dictionary) {
-            if (found.indexOf(item) !== -1) {
-              requestAnimationFrame(function() {
-                $(item.category).addClass("search-expanded").show();
-                $(item.element).show();
-                if (term.length >= 3) {
-                  $(item.element).mark(term, {
-                    "separateWordSearch": false,
-                    "acrossElements": true
-                  });
-                }
-              });
-            } else {
-              requestAnimationFrame(function() {
-                $(item.element).hide();
-              });
-            }
-          }
-          sw = term;
-          swl = term.length;
-        } 
-        
-        else {
-          $("#list .category").show().removeClass("search-expanded").unmark();
-          $("#list " + searchable).show();
-          found = dictionary;
-          sw = "";
-          swl = 0;
-          $(".hideifsearching").each( (ind, el) => {
-            $(el).show();
-          });
-        }
-      });
         }
       });
     </script>

src/static/css/site.css

@@ -110,7 +110,7 @@
     }
 
     .Kommentar {
-      @apply !indent-0 !pl-0 text-base
+      @apply !indent-0 !pl-0
     }
 
     .handschrift-sammlung .handschrift {
@@ -151,3 +151,14 @@
     max-height: calc(10rem + 100vh);
   }
 
+  .twocolumns {
+    columns: 2;
+  }
+
+  .Einzug {
+    break-inside: avoid;
+  }
+
+  .Kommentar {
+
+  }