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

Code Quality Check

Browse Source
This commit is contained in:
Simon Martens
2023-02-15 14:21:55 +01:00
parent 00570cca9b
commit 31ec83597b
2 changed files with 226 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/layouts/base.njk
View File

@@ -60,261 +60,6 @@
</div> </div>
</main> </main>
<script> <script src="/static/js/scripts.js" defer></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> </body>
</html> </html>

225
src/static/js/scripts.js Normal file
View File

@@ -0,0 +1,225 @@
// Basic variables
const scrollbuttonid = "scrollbutton";
const navbuttonid = "navigation-button";
const navid = "navigation";
const listid = "list";
const listselectid = "listselect";
const inputselector = "input[name='keyword']";
const hiddenclass = "hidden-important";
const showifsearchingclasses = ["showifsearching"];
const hideifsearchingclasses = [
"hideifsearching",
"ueberschrift-gruppe",
"category",
];
const categoryclass = "category";
const searchableclasses = ["searchable", "handschrift"];
// Elements
let listelement = document.getElementById(listid);
let navelelement = document.getElementById(navid);
let navbtnelement = document.getElementById(navbuttonid);
let scrollbtnelement = document.getElementById(scrollbuttonid);
let listselectelement = document.getElementById(listselectid);
let inputelement = document.querySelector(inputselector);
let categoryelements = document.getElementsByClassName(categoryclass);
let showifsearchingelements = document.querySelectorAll("." + showifsearchingclasses.join(", ."));
let hideifsearchingelements = document.querySelectorAll("." + hideifsearchingclasses.join(", ."));
let searchableelements = document.querySelectorAll("." + searchableclasses.join(", ."));
// State
let dictionary = [];
let found = dictionary;
let sw = "";
let swl = 0;
let term = "";
const hideifinarr = function (arr) {
for (var el of arr) {
el.classList.add(hiddenclass);
}
};
const showifinarr = function (arr) {
for (var el of arr) {
el.classList.remove(hiddenclass);
}
};
// Script for showing and acting upon the "scroll to top button"
const scrollFunction = function () {
if (scrollbtnelement !== null) {
if (
document.body.scrollTop > 400 ||
document.documentElement.scrollTop > 400
) {
scrollbtnelement.style.pointerEvents = "auto";
scrollbtnelement.classList.remove(hiddenclass);
} else {
scrollbtnelement.style.pointerEvents = "none";
scrollbtnelement.classList.add(hiddenclass);
}
}
};
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)
);
}
function createIndex(id) {
for (var s of searchableelements) {
dictionary.push({
category: s.closest("." + categoryclass),
element: s,
searchitem: $(s).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;
if (evt !== undefined) {
var isEscape = false;
if ("key" in evt) {
isEscape = evt.key === "Escape" || evt.key === "Esc";
} else {
isEscape = evt.keyCode === 27;
}
if (isEscape) {
searchreset();
return;
}
}
term = $(inputselector).val().trim() || "";
// Unmark everything previously marked
for (let item of found) {
$(item.element).unmark();
}
if (term) {
// Hide everything tagged hideifseaching
showifinarr(showifsearchingelements);
hideifinarr(hideifsearchingelements);
// 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(hiddenclass);
item.element.classList.remove(hiddenclass);
if (term.length >= 2) {
$(item.element).mark(term, {
separateWordSearch: false,
acrossElements: true,
});
}
} else {
item.element.classList.add(hiddenclass);
}
}
sw = term;
swl = term.length;
} else {
searchreset();
}
};
const searchreset = function () {
for (let item of found) {
$(item.element).unmark();
}
var hidden = listelement.querySelectorAll("." + hiddenclass);
for (let item of hidden) {
item.classList.remove(hiddenclass);
}
found = dictionary;
sw = "";
swl = 0;
showifinarr(hideifsearchingelements);
hideifinarr(showifsearchingelements);
inputelement.value = "";
inputelement.focus();
};
hideifinarr(showifsearchingelements);
// Mobile menu
if (navbtnelement !== null && navelelement !== null) {
navbtnelement.addEventListener("click", () => {
if (navelelement.classList.contains(hiddenclass)) {
navelelement.classList.remove(hiddenclass);
} else {
navelelement.classList.add(hiddenclass);
}
});
}
// Scroll button
if (scrollbtnelement !== null) {
scrollFunction();
scrollbtnelement.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 (listelement) {
var searchable = "";
createIndex(listid);
if (inputelement !== null && isInViewport(inputelement)) {
inputelement.focus();
}
$(inputelement).keyup(search);
search(null);
// Scrolling & List updating
if (listselectelement !== null) {
var sections = {};
var i = 0;
Array.prototype.forEach.call(categoryelements, 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 = listselectelement.querySelector('option[value="#' + i + '"]');
if (opt !== null) {
opt.selected = true;
}
}
}
};
}
}