Added filter functionality to list IV

This commit is contained in:
Simon Martens
2023-02-02 23:20:10 +01:00
parent 44dfd60d5b
commit 7d742872ab
6 changed files with 79 additions and 35 deletions

View File

@@ -12,19 +12,22 @@ eleventyNavigation:
</div> </div>
<div class="sticky top-0 z-20"> <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">
<div class="z-10 bg-slate-100 px-4 py-2 self-start w-full"> <div class="w-full flex flex-row items-baseline">
<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..."> <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 jahr = "" %}
{% set count = 1 %} {% set count = 1 %}
<a href="#top">↑</a>&nbsp;&nbsp; <div class="hideifsearching">
{%- for post in collections.posthumeausgaben -%} Springe:&nbsp;&nbsp;
{% if count % 5 == 0 and jahr !== post.data.Jahr %} {%- for post in collections.posthumeausgaben -%}
<a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp; {% if count % 5 == 0 and jahr !== post.data.Jahr %}
{% set jahr = post.data.Jahr %} <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;
{% endif %} {% set jahr = post.data.Jahr %}
{% set count = count + 1 %} {% endif %}
{%- endfor -%} {% set count = count + 1 %}
{%- endfor -%}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -18,19 +18,22 @@ eleventyNavigation:
<div class="sticky top-0 z-20"> <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">
<div class="z-10 bg-slate-100 px-4 py-2 self-start w-full"> <div class="w-full flex flex-row items-baseline">
<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..."> <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 jahr = "" %}
{% set count = 1 %} {% set count = 1 %}
<a href="#top">↑</a>&nbsp;&nbsp; <div class="hideifsearching">
{%- for post in collections.sekundaer -%} Springe:&nbsp;&nbsp;
{% if count % 80 == 0 and jahr !== post.data.Jahr %} {%- for post in collections.sekundaer -%}
<a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp; {% if count % 80 == 0 and jahr !== post.data.Jahr %}
{% set jahr = post.data.Jahr %} <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;
{% endif %} {% set jahr = post.data.Jahr %}
{% set count = count + 1 %} {% endif %}
{%- endfor -%} {% set count = count + 1 %}
{%- endfor -%}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -13,19 +13,22 @@ eleventyNavigation:
</div> </div>
<div class="sticky top-0 z-20"> <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">
<div class="z-10 bg-slate-100 px-4 py-2 self-start w-full"> <div class="w-full flex flex-row items-baseline">
<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..."> <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 jahr = "" %}
{% set count = 1 %} {% set count = 1 %}
<a href="#top">↑</a>&nbsp;&nbsp; <div class="hideifsearching">
{%- for post in collections.selbststaendigedrucke -%} Springe:&nbsp;&nbsp;
{% if count % 1 == 0 and jahr !== post.data.Jahr %} {%- for post in collections.selbststaendigedrucke -%}
<a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp; {% if count % 1 == 0 and jahr !== post.data.Jahr %}
{% set jahr = post.data.Jahr %} <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;
{% endif %} {% set jahr = post.data.Jahr %}
{% set count = count + 1 %} {% endif %}
{%- endfor -%} {% set count = count + 1 %}
{%- endfor -%}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -31,8 +31,8 @@ eleventyNavigation:
<div class="sticky top-0 z-20"> <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"> <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..."> <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>
</div> </div>

View File

@@ -66,6 +66,24 @@
</div> </div>
<script> <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 = []; let dictionary = [];
function createIndex(id){ function createIndex(id){
$("#" + id + " .searchable").each( (ind, el) => { $("#" + id + " .searchable").each( (ind, el) => {
@@ -90,6 +108,17 @@
$(document).ready(function( $ ) { $(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")) { if (document.getElementById("list")) {
createIndex("list"); createIndex("list");
let found = dictionary; let found = dictionary;
@@ -98,6 +127,9 @@
$("input[name='keyword']").keyup(function() { $("input[name='keyword']").keyup(function() {
var term = $(this).val() || ''; var term = $(this).val() || '';
if( term ) { if( term ) {
$(".hideifsearching").each( (ind, el) => {
$(el).hide();
});
for (let item of found) { for (let item of found) {
$(item.element).unmark().hide(); $(item.element).unmark().hide();
$(item.category).hide(); $(item.category).hide();
@@ -122,6 +154,9 @@
found = dictionary; found = dictionary;
sw = ""; sw = "";
swl = 0; swl = 0;
$(".hideifsearching").each( (ind, el) => {
$(el).show();
});
} }
}); });
} }

File diff suppressed because one or more lines are too long