Theodor-Springmann-Stiftung/jacoblenz
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/jacoblenz.git synced 2025-10-29 17:25:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Suche (Geschwindikeit und Auswahlfeld)

Browse Source
This commit is contained in:
Simon Martens
2023-02-06 23:00:42 +01:00
parent ae2b1a7bcd
commit 1e24f763c1
7 changed files with 177 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

35
src/dynamic/sekundaerliteratur.njk
View File

@@ -18,23 +18,24 @@ eleventyNavigation:
<div class="sticky top-0 z-20"> <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"> <div class="hideifsearching">
<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..."> Jahr&nbsp;
<a class="shrink ml-2 px-1.5 py-0.5 border border-slate-400" id="scrollbutton" href="#top">↑&nbsp;nach oben</a> <select class="bg-white px-1.5 pt-1.5 pb-1 border border-slate-300" onchange="window.location.href=this.value" >
</div> {% set jahr = "" %}
{% set jahr = "" %} {% set count = 0 %}
{% set count = 1 %} {%- for post in collections.sekundaer -%}
<div class="hideifsearching"> {% if count % 40 == 0 and jahr !== post.data.Jahr %}
Springe:&nbsp;&nbsp; <option value="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</option>&nbsp;&nbsp;
{%- for post in collections.sekundaer -%} {% set jahr = post.data.Jahr %}
{% if count % 80 == 0 and jahr !== post.data.Jahr %} {% endif %}
<a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp; {% set count = count + 1 %}
{% set jahr = post.data.Jahr %} {%- endfor -%}
{% endif %} </select>
{% set count = count + 1 %} </div>
{%- endfor -%} <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...">
</div> <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>
</div> </div>

2
src/dynamic/theaterauffuehrungen.njk
View File

@@ -24,7 +24,7 @@ eleventyNavigation:
<div class="hideifsearching"> <div class="hideifsearching">
Springe:&nbsp;&nbsp; Springe:&nbsp;&nbsp;
{%- for post in collections.theater -%} {%- 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; <a class="underline decoration-dotted" href="#{{ post.data.Jahr }}">{{ post.data.Jahr }}</a>&nbsp;&nbsp;
{% set jahr = post.data.Jahr %} {% set jahr = post.data.Jahr %}
{% endif %} {% endif %}

249
src/layouts/base.njk
View File

@@ -1,18 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de" dir="ltr" class="h-full"> <html lang="de" dir="ltr" class="h-full">
<head> <head>
<link rel="canonical" href="{{ config.url }}{{ page.url }}"> <link rel="canonical" href="{{ config.url }}{{ page.url }}">
<link rel="stylesheet" href="/css/output.css" > <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 --> <!-- Icons -->
<!-- Enable if favicons installed into the static/img/ directory --> <!-- Enable if favicons installed into the static/img/ directory -->
{# <link rel="shortcut icon" type="image/png" href="/images/x16-favicon.png" sizes="16x16" /> {# <link rel="shortcut icon" type="image/png" href="/images/x16-favicon.png" sizes="16x16" />
<link rel="shortcut icon" type="image/png" href="/images/x32-favicon.png" sizes="32x32" /> <link rel="shortcut icon" type="image/png" href="/images/x32-favicon.png" sizes="32x32" />
<link rel="shortcut icon" type="image/png" href="/images/x64-favicon.png" sizes="64x64" />#} <link rel="shortcut icon" type="image/png" href="/images/x64-favicon.png" sizes="64x64" />#}
<link rel="shortcut icon" type="image/png" href="/favicon.png" /> <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="apple-touch-icon" type="image/png" href="/favicon.png" /> <link rel="apple-touch-icon" type="image/png" href="/favicon.png"/>
<script src="/js/jquery.min.js"></script> <script src="/js/jquery.min.js"></script>
<script src="/js/jquery.mark.min.js"></script> <script src="/js/jquery.mark.min.js"></script>
@@ -48,13 +49,13 @@
mx-auto mx-auto
flex flex-row"> flex flex-row">
<aside class="shrink-0 grow-0 basis-[26rem] sticky top-0 max-h-screen min-h-screen flex flex-col bg-slate-50"> <aside class="shrink-0 grow-0 basis-[26rem] sticky top-0 max-h-screen min-h-screen flex flex-col bg-slate-50">
{% include "sidebar.njk" %} {% include "sidebar.njk" %}
</aside> </aside>
<main class="px-8 pt-[7.5rem] min-h-full max-w-[1120px]"> <main class="px-8 pt-[7.5rem] min-h-full max-w-[1120px]">
<div> <div>
<h2 class="text-3xl font-bold pb-4"> <h2 class="text-3xl font-bold pb-4">
{{ title | safe }} {{ title | safe }}
</h2> </h2>
{{ content | safe }} {{ content | safe }}
</div> </div>
@@ -65,139 +66,177 @@
</div> #} </div> #}
</div> </div>
<script> <script>
// Script for showing and acting upon the "scroll to top button" // Script for showing and acting upon the "scroll to top button"
const scrollFunction = function () { const scrollFunction = function () {
button = document.getElementById("scrollbutton"); button = document.getElementById("scrollbutton");
if (button !== null) { if (button !== null) {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
// button.style.display = "block"; // button.style.display = "block";
button.style.pointerEvents = "auto"; button.style.pointerEvents = "auto";
button.classList.remove("hidden"); button
} else { .classList
// button.style.display = "none"; .remove("hidden");
button.style.pointerEvents = "none"; } else {
button.classList.add("hidden"); // button.style.display = "none";
} button.style.pointerEvents = "none";
button
.classList
.add("hidden");
}
} }
}
// Scripts for filtering lists
let dictionary = [];
function createIndex(id, searchable){
$("#" + id + " " + searchable).each( (ind, el) => {
dictionary.push({
category: $(el).parents(".category"),
element: el,
searchitem: $(el).text().toLowerCase()
});
});
}
function findWord(word, d){
var sw = word.trim().toLowerCase();
return d.filter(function(e){
if (e.searchitem.indexOf(sw) !== -1) {
return true;
} else {
return false;
};
})
}
$(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")) {
var searchable = "";
if (document.getElementsByClassName("searchable").length > 0) {
searchable = ".searchable";
} else if (document.getElementsByClassName("handschrift").length > 0) {
searchable = ".handschrift";
} }
createIndex("list", searchable);
// Scripts for filtering lists
let dictionary = [];
let categories = document
.getElementById("list")
.getElementsByClassName("category");
let found = dictionary; let found = dictionary;
let sw = ""; let sw = "";
let swl = 0; let swl = 0;
$("input[name='keyword']").keyup(function() { $(".showifsearching").each((ind, el) => {
var term = $(this).val().trim() || ''; $(el).hide();
});
if( term ) { function createIndex(id, searchable) {
$("#" + id + " " + searchable).each((ind, el) => {
dictionary.push({
category: el.closest(".category"), element: el, searchitem: $(el)
.text()
.toLowerCase()
});
});
}
function findWord(word, d) {
var sw = word
.trim()
.toLowerCase();
return d.filter(function (e) {
if (e.searchitem.indexOf(sw) !== -1) {
return true;
} else {
return false;
};
})
}
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 // Hide everything tagged hideifseaching
$(".hideifsearching").each( (ind, el) => { $(".hideifsearching").each((ind, el) => {
$(el).hide(); $(el).hide();
}); });
$(".ueberschrift-gruppe").each( (ind, el) => { $(".showifsearching").each((ind, el) => {
$(el).show();
});
$(".ueberschrift-gruppe").each((ind, el) => {
$(el).hide(); $(el).hide();
}); });
// Unmark everything previously marked // Hide all categories by default
if (sw.length > 0) { for (let cat of categories) {
for (let item of found) { cat
$(item.element).unmark(); .classList
} .add("hidden");
} }
// Only search in prior found elements if word starts the same // Only search in prior found elements if word starts the same
if (term.length > swl && term.startsWith(sw)) { if (term.length > swl && term.startsWith(sw)) {
found = findWord( term, found ); found = findWord(term, found);
} else { } else {
found = findWord( term, dictionary ); found = findWord(term, dictionary);
} }
// Hide all categories by default
requestAnimationFrame(function() {
$("#list .category").hide();
});
for (let item of dictionary) { for (let item of dictionary) {
if (found.indexOf(item) !== -1) { if (found.indexOf(item) !== -1) {
requestAnimationFrame(function() { item
$(item.category).addClass("search-expanded").show(); .category
$(item.element).show(); .classList
if (term.length >= 3) { .add("search-expanded");
$(item.element).mark(term, { item
"separateWordSearch": false, .category
"acrossElements": true .classList
}); .remove("hidden");
} item
}); .element
.classList
.remove("hidden");
if (term.length >= 2) {
$(item.element).mark(term, {
"separateWordSearch": false,
"acrossElements": true
});
}
} else { } else {
requestAnimationFrame(function() { item
$(item.element).hide(); .element
}); .classList
.add("hidden");
} }
} }
sw = term; sw = term;
swl = term.length; swl = term.length;
} } else {
var hidden = document
else { .getElementById("list")
$("#list .category").show().removeClass("search-expanded").unmark(); .querySelectorAll(".hidden");
$("#list " + searchable).show(); for (let item of hidden) {
item
.classList
.remove("hidden");
}
found = dictionary; found = dictionary;
sw = ""; sw = "";
swl = 0; swl = 0;
$(".hideifsearching").each( (ind, el) => { $(".hideifsearching").each((ind, el) => {
$(el).show(); $(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.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")) {
var searchable = "";
if (document.getElementsByClassName("searchable").length > 0) {
searchable = ".searchable";
} else if (document.getElementsByClassName("handschrift").length > 0) {
searchable = ".handschrift";
}
createIndex("list", searchable);
$("input[name='keyword']").focus();
$("input[name='keyword']").keyup(search);
} }
}); });
} </script>
});
</script>
</body> </body>
</html> </html>

2
src/static/css/output.css
View File

File diff suppressed because one or more lines are too long

1
src/static/css/output.css;
View File

File diff suppressed because one or more lines are too long

13
src/static/css/site.css
View File

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