mirror of
https://github.com/Theodor-Springmann-Stiftung/jacoblenz.git
synced 2025-10-29 17:25:33 +00:00
319 lines
11 KiB
Plaintext
319 lines
11 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="de" dir="ltr" class="h-full">
|
|
<head>
|
|
<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>
|
|
|
|
<!-- Icons -->
|
|
<!-- 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/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="/favicon.png"/>
|
|
<link rel="apple-touch-icon" type="image/png" href="/favicon.png"/>
|
|
<script src="/js/jquery.min.js"></script>
|
|
<script src="/js/jquery.mark.min.js"></script>
|
|
|
|
<!-- Meta -->
|
|
<meta name="description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
|
|
<meta name="keywords" content="{% if keywords %}{{ keywords }}{% else %}{{ config.keywords }}{% endif %}">
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta http-equiv="Content-Language" content="en">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
<!-- Facebook -->
|
|
<meta property="og:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
|
|
<meta property="og:url" content="{{ config.url }}{{ page.url }}">
|
|
<meta property="og:image" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="{{ card }}">
|
|
<meta name="twitter:site" content="{{ twitter }}">
|
|
<meta name="twitter:title" content="{% if (title != 'Home') %}{{title}} - {% endif %}{{ config.title }}">
|
|
<meta name="twitter:description" content="{% if description %}{{ description }}{% else %}{{ config.description }}{% endif %}">
|
|
<meta name="twitter:creator" content="{{ twitter }}">
|
|
<meta name="twitter:image" content="{{ config.url }}{{ page.url }}">
|
|
<meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
|
|
|
|
</head>
|
|
<body class="bg-slate-50 mx-auto flex flex-col
|
|
desktop:px-12 desktop:max-w-screen-2xl desktop:flex-row">
|
|
<aside class="flex flex-col shrink py-4 px-3 w-full
|
|
desktop:px-0 desktop:py-0 desktop:w-auto
|
|
desktop:shrink-0 desktop:grow-0 desktop:basis-[26rem] desktop:sticky desktop:top-0 desktop:max-h-screen desktop:min-h-screen desktop:bg-slate-50">
|
|
{% include "bar.njk" %}
|
|
</aside>
|
|
|
|
<main class="px-8 desktop:pt-[7.5rem] pt-6 min-h-full max-w-[1120px] ">
|
|
<div>
|
|
<h2 class="text-3xl font-bold pb-4">
|
|
{{ title | safe }}
|
|
</h2>
|
|
{{ content | safe }}
|
|
</div>
|
|
</main>
|
|
|
|
<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-important");
|
|
} else {
|
|
// button.style.display = "none";
|
|
button.style.pointerEvents = "none";
|
|
button
|
|
.classList
|
|
.add("hidden-important");
|
|
}
|
|
}
|
|
}
|
|
|
|
function isInViewport(element) {
|
|
const rect = element.getBoundingClientRect();
|
|
return (
|
|
rect.top >= 0 &&
|
|
rect.left >= 0 &&
|
|
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
|
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
|
);
|
|
}
|
|
|
|
// Scripts for filtering lists
|
|
let dictionary = [];
|
|
let categories = [];
|
|
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.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 (evt) {
|
|
evt = evt || window.event;
|
|
var isEscape = false;
|
|
if ("key" in evt) {
|
|
isEscape = (evt.key === "Escape" || evt.key === "Esc");
|
|
} else {
|
|
isEscape = (evt.keyCode === 27);
|
|
}
|
|
if (isEscape) {
|
|
searchreset();
|
|
return;
|
|
}
|
|
|
|
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-important");
|
|
cat
|
|
.classList
|
|
.remove("search-expanded");
|
|
}
|
|
|
|
// 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-important");
|
|
item
|
|
.element
|
|
.classList
|
|
.remove("hidden-important");
|
|
if (term.length >= 2) {
|
|
$(item.element).mark(term, {
|
|
"separateWordSearch": false,
|
|
"acrossElements": true
|
|
});
|
|
}
|
|
} else {
|
|
item
|
|
.element
|
|
.classList
|
|
.add("hidden-important");
|
|
}
|
|
}
|
|
sw = term;
|
|
swl = term.length;
|
|
} else {
|
|
searchreset();
|
|
}
|
|
}
|
|
|
|
const searchreset = function() {
|
|
for (let item of found) {
|
|
$(item.element).unmark();
|
|
}
|
|
|
|
var hidden = document
|
|
.getElementById("list")
|
|
.querySelectorAll(".hidden-important");
|
|
for (let item of hidden) {
|
|
item
|
|
.classList
|
|
.remove("hidden-important");
|
|
}
|
|
found = dictionary;
|
|
sw = "";
|
|
swl = 0;
|
|
$(".hideifsearching").each((ind, el) => {
|
|
$(el).show();
|
|
});
|
|
$(".showifsearching").each((ind, el) => {
|
|
$(el).hide();
|
|
});
|
|
|
|
var input = document.querySelector("input[name='keyword']");
|
|
input.value = '';
|
|
input.focus();
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
// Mobile menu
|
|
var menubutton = document.getElementById("navigation-button");
|
|
var navigation = document.getElementById("navigation");
|
|
if (menubutton !== null && navigation !== null) {
|
|
menubutton.addEventListener("click", () => {
|
|
if (navigation.classList.contains("hidden")) {
|
|
navigation
|
|
.classList
|
|
.remove("hidden");
|
|
} else {
|
|
navigation
|
|
.classList
|
|
.add("hidden");
|
|
}
|
|
})
|
|
}
|
|
|
|
// 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);
|
|
categories = document
|
|
.getElementById("list")
|
|
.getElementsByClassName("category");
|
|
|
|
var searchinput = document.querySelector("input[name='keyword']");
|
|
if (searchinput !== null && isInViewport(searchinput)) {
|
|
$("input[name='keyword']").focus();
|
|
}
|
|
$("input[name='keyword']").keyup(search);
|
|
|
|
// Scrolling & List updating
|
|
let select = document.getElementById("listselect");
|
|
if (select !== null) {
|
|
var sections = {};
|
|
var i = 0;
|
|
Array
|
|
.prototype
|
|
.forEach
|
|
.call(categories, function (e) {
|
|
sections[e.id] = e.offsetTop;
|
|
});
|
|
window.onscroll = function () {
|
|
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
for (i in sections) {
|
|
if (sections[i] <= scrollPosition + 60) {
|
|
var opt = select.querySelector('option[value="#' + i + '"]');
|
|
if (opt !== null) {
|
|
opt.selected = true;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |