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

Minor visual improvements, aligment of search and index page elements

Browse Source
This commit is contained in:
Simon Martens
2022-11-12 23:48:13 +01:00
parent 85bad9f96f
commit e5052dd4ea
8 changed files with 478 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
HaWeb/Views/Shared/_Head.cshtml
View File

@@ -18,4 +18,3 @@
<link rel="stylesheet" href="/css/output.css" asp-append-version="true" />
<script src="~/js/site.js" asp-append-version="true"></script>

480
HaWeb/Views/Shared/_Javascript.cshtml
View File

@@ -1,31 +1,38 @@
@* Javascript gets inlined because it ain't much (but it's honest work) *@
@* Mark searched term *@
@if(ViewData.ContainsKey("Mark")) {
@if (ViewData.ContainsKey("Mark"))
{
<script src="~/js/mark.min.js" asp-append-version="true"></script>
<script>
var instancesearch = new Mark(document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-comment"));
instancesearch.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"]});
var elements = document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-comment");
if (elements.length < 1000) {
var instancesearch = new Mark(elements);
instancesearch.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
}
var instanceletter = new Mark(document.querySelectorAll(".ha-letterbody"));
instanceletter.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "debug": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"]});
instanceletter.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
</script>
}
@* Mark anchor *@
<script>
function markanchor() {
var currentUrl = document.URL,
urlParts = currentUrl.split('#');
urlParts = currentUrl.split('#');
var anchor = (urlParts.length > 1) ? urlParts[1] : null;
if (anchor != null) {
var element = document.getElementById(anchor);
var pointerelement = document.createElement("span");
pointerelement.classList.add("ha-location");
pointerelement.prepend("☛");
if (element !== null && element.classList.contains("ha-linecount")) {
element.classList.add("ha-location");
element.classList.add("font-bold");
element.classList.add("mr-3");
element.prepend("● ");
pointerelement.classList.add("-left-5");
pointerelement.classList.add("-top-1.5")
element.prepend(pointerelement);
} else if (element !== null && element.classList.contains("ha-commenthead")) {
element.classList.add("ha-location");
element.classList.add("font-bold");
element.prepend("● ");
pointerelement.classList.add("-left-6");
element.prepend(pointerelement);
}
}
}
@@ -33,4 +40,451 @@
window.addEventListener("load", function () {
markanchor();
});
</script>
</script>
@* Mark links active *@
<script>
// Marks links as active which target URL starts with the current URL
const markactive_startswith = function (element) {
var all_links = element.getElementsByTagName("a"),
i = 0,
len = all_links.length,
full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
for (; i < len; i++) {
if (full_path.startsWith(all_links[i].href.toLowerCase())) {
all_links[i].className += " active";
}
}
};
// Marks links active which target URL is exact the same as the current URL
const markactive_exact = function (element) {
var all_links = element.getElementsByTagName("a"),
i = 0,
len = all_links.length,
full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
for (; i < len; i++) {
if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
all_links[i].className += " active";
}
}
};
// Marks links as active, single links mutch match exactly, dropdown only the beginning
const markactive_menu = function (element) {
var all_links = element.getElementsByTagName("a"),
i = 0,
len = all_links.length,
marked = false,
full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
full_path = full_path.split("?")[0];
for (; i < len; i++) {
if (all_links[i].parentNode.classList.contains("ha-topnav-dropdown")) {
if (full_path.startsWith(all_links[i].href.toLowerCase())) {
all_links[i].className += " active pointer-events-none";
marked = true;
}
} else {
if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
all_links[i].className += " active pointer-events-none";
marked = true;
}
}
}
i = 0;
if (marked === false) {
for (; i < len; i++) {
if (all_links[i].classList.contains("ha-active-default")) {
all_links[i].className += " active";
}
}
}
};
window.addEventListener("load", function () {
if (document.getElementById("ha-topnav") !== null)
markactive_menu(document.getElementById("ha-topnav"));
if (document.getElementById("ha-register-nav") !== null)
markactive_exact(document.getElementById("ha-register-nav"));
if (this.document.getElementById("ha-adminuploadfields") !== null)
markactive_exact(document.getElementById("ha-adminuploadfields"));
});
</script>
@* Menu view for mobile / small screen users *@
<script>
const openmenu = function () {
var x = document.getElementById("ha-topnav");
if (x !== null) x.className += " ha-topnav-collapsed";
let oldbutton = document.getElementById("openmenubutton");
if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
let newbutton = document.getElementById("closemenubutton");
if (newbutton !== null) newbutton.setAttribute("class", "");
};
const closemenu = function () {
var x = document.getElementById("ha-topnav");
if (x !== null) x.className = "ha-topnav";
let oldbutton = document.getElementById("closemenubutton");
if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
let newbutton = document.getElementById("openmenubutton");
if (newbutton !== null) newbutton.setAttribute("class", "");
};
window.addEventListener("load", function () {
// Menu: Show / Hide Buttons for mobile View
if (
document.getElementById("openmenubutton") !== null &&
document.getElementById("closemenubutton") !== null
) {
document
.getElementById("openmenubutton")
.addEventListener("click", openmenu);
document
.getElementById("closemenubutton")
.addEventListener("click", closemenu);
}
});
</script>
@* Scrolling Button *@
<script>
const scrollFunction = function () {
button = document.getElementById("ha-scrollbutton");
if (button !== null) {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
// button.style.display = "block";
button.style.pointerEvents = "auto";
button.style.opacity = "1";
} else {
// button.style.display = "none";
button.style.pointerEvents = "none";
button.style.opacity = "0";
}
}
}
window.addEventListener("load", function () {
// Scroll button
if (document.getElementById("ha-scrollbutton") !== null) {
scrollFunction();
document.getElementById("ha-scrollbutton").addEventListener("click", () => {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
})
window.addEventListener("scroll", scrollFunction);
}
});
</script>
@* Letter View: Tabs
TODO: Generalize, Integrate mobile-friendly version *@
<script>
const showhidebutton = function (
buttonid,
divid,
buttonlist,
divlist,
starthidden
) {
let button = document.getElementById(buttonid);
let div = document.getElementById(divid);
if (starthidden && div !== null) {
div.classList.add("hide");
}
if (!starthidden && button !== null) {
button.classList.add("active");
}
if (button !== null) {
button.addEventListener("click", function () {
for (let btn of buttonlist) {
let inactivebutton = document.getElementById(btn);
if (inactivebutton !== null) inactivebutton.classList.remove("active");
}
for (let element of divlist) {
let hiddenelement = document.getElementById(element);
if (hiddenelement !== null) {
hiddenelement.classList.add("hide")
hiddenelement.classList.remove("flow-root");
};
}
if (button !== null) button.classList.add("active");
if (div !== null) {
div.classList.add("flow-root");
div.classList.remove("hide");
}
});
}
};
window.addEventListener("load", function () {
// Letter View: Show / Hide Tabs
let buttonlist = ["ha-lettertextbtn", "ha-additionsbtn", "ha-marginalsbtn"];
let divlist = ["ha-lettertext", "ha-additions", "ha-marginals"];
if (this.document.getElementById("ha-lettertextbtn") !== null) {
showhidebutton(
"ha-lettertextbtn",
"ha-lettertext",
buttonlist,
divlist,
false
);
showhidebutton(
"ha-additionsbtn",
"ha-additions",
buttonlist,
divlist,
true
);
showhidebutton(
"ha-marginalsbtn",
"ha-marginals",
buttonlist,
divlist,
true
);
} else {
showhidebutton(
"ha-lettertextbtn",
"ha-lettertext",
buttonlist,
divlist,
true
);
showhidebutton(
"ha-additionsbtn",
"ha-additions",
buttonlist,
divlist,
false
);
showhidebutton(
"ha-marginalsbtn",
"ha-marginals",
buttonlist,
divlist,
true
);
}
});
</script>
@* Theme reading & switching *@
<script>
// Functions for switching theme
const go_to_dark = function () {
localStorage.setItem("theme", "ha-toggledark");
document.documentElement.classList.add("dark");
};
const go_to_bright = function () {
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "ha-togglebright");
};
// Functions for reading theme settings
const get_theme_settings = function (standard) {
var theme = localStorage.getItem("theme");
if (theme === null) theme = standard;
let toggleSwitch = document.getElementById(theme).click();
};
window.addEventListener("load", function () {
if (
document.getElementById("ha-togglebright") !== null &&
this.document.getElementById("ha-toggledark") !== null
) {
document
.getElementById("ha-togglebright")
.addEventListener("click", go_to_bright);
document
.getElementById("ha-toggledark")
.addEventListener("click", go_to_dark);
}
get_theme_settings("ha-togglebright");
});
</script>
@* Functions for collapsing marginals, and adding a button next to those*@
<script>
const getLineHeight = function (element) {
var temp = document.createElement(element.nodeName),
ret;
temp.setAttribute("class", element.className);
temp.innerHTML = "Ü";
element.parentNode.appendChild(temp);
ret = temp.getBoundingClientRect().height;
temp.parentNode.removeChild(temp);
return ret;
};
const collapsebox = function (element, height, lineheight) {
element.style.maxHeight = height + "px";
element.classList.add("ha-collapsed-box");
element.classList.remove("ha-expanded-box");
};
const uncollapsebox = function (element) {
element.classList.remove("ha-collapsed-box");
element.classList.add("ha-expanded-box");
};
const addbuttoncaollapsebox = function (element, height, hoverfunction) {
let btn = document.createElement("div");
btn.classList.add("ha-btn-collapsed-box");
if (element.classList.contains("ha-collapsed-box")) {
btn.classList.add("ha-open-btn-collapsed-box");
} else {
btn.classList.add("ha-close-btn-collapsed-box");
}
btn.addEventListener("click", function (ev) {
ev.stopPropagation();
if (element.classList.contains("ha-collapsed-box")) {
uncollapsebox(element);
btn.classList.remove("ha-open-btn-collapsed-box");
btn.classList.add("ha-close-btn-collapsed-box");
btn.classList.add("ha-collapsed-box-manually-toggled");
} else {
collapsebox(element, height);
btn.classList.remove("ha-close-btn-collapsed-box");
btn.classList.remove("ha-collapsed-box-manually-toggled");
btn.classList.add("ha-open-btn-collapsed-box");
}
});
if (hoverfunction) {
let timer = null;
element.addEventListener("mouseenter", function (ev) {
ev.stopPropagation();
timer = setTimeout(function () {
if (element.classList.contains("ha-collapsed-box")) {
uncollapsebox(element);
btn.classList.remove("ha-open-btn-collapsed-box");
btn.classList.add("ha-close-btn-collapsed-box");
}
}, 200);
});
element.addEventListener("mouseleave", function (ev) {
ev.stopPropagation();
if (timer != null) {
clearTimeout(timer);
}
if (
element.classList.contains("ha-expanded-box") &&
!btn.classList.contains("ha-collapsed-box-manually-toggled")
) {
collapsebox(element, height);
btn.classList.remove("ha-close-btn-collapsed-box");
btn.classList.add("ha-open-btn-collapsed-box");
}
});
}
element.parentNode.insertBefore(btn, element);
};
const overlappingcollapsebox = function (selector, hoverfunction) {
let boxes = document.querySelectorAll(selector);
let lineheight = 1;
if (boxes.length >= 1) {
lineheight = getLineHeight(boxes[0]);
}
for (var i = 0; i < boxes.length; i++) {
if (i < boxes.length - 1) {
let element = boxes[i];
let thisrect = element.getBoundingClientRect();
let nextrect = boxes[i + 1].getBoundingClientRect();
let overlap = thisrect.bottom - nextrect.top;
if (
// -1 for catching lines that perfectly close up on each other
overlap >= -1 &&
!(window.getComputedStyle(element).display === "none")
) {
let newlength = 0;
if (overlap >= 0)
newlength = thisrect.height - overlap;
else
newlength = thisrect.height - lineheight;
if (newlength % (lineheight * 3) <= 2)
newlength -= lineheight;
let remainder = newlength % lineheight;
newlength = newlength - remainder - 1;
// Line clamping for Marginals
if (element.classList.contains("ha-marginalbox")) {
let marginals = element.querySelectorAll(".ha-marginal");
let h = 0;
for (let m of marginals) {
let cr = m.getBoundingClientRect();
let eh = cr.bottom - cr.top;
h += eh;
if (h >= newlength) {
let lines = Math.floor(eh / lineheight);
let cutoff = Math.floor((h - newlength) / lineheight);
m.style.cssText += "-webkit-line-clamp: " + (lines - cutoff) + ";";
}
}
}
requestAnimationFrame(() => {
collapsebox(element, newlength, lineheight);
});
requestAnimationFrame(() => {
addbuttoncaollapsebox(element, newlength, hoverfunction);
});
}
}
}
};
const marginalboxwidthset = function () {
let lt = document.getElementById("ha-letterbody");
if (lt !== null) {
let mg = lt.querySelectorAll(".ha-lettertext .ha-marginalbox");
if (mg.length > 0) {
let ltbcr = lt.getBoundingClientRect();
let mgbcr = mg[0].getBoundingClientRect();
let nw = ltbcr.right - mgbcr.left - 18;
for (let element of mg) {
element.style.width = nw + "px";
}
}
}
}
const collapseboxes = function () {
overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
overlappingcollapsebox(".ha-commentlist .ha-letlinks", true);
overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
};
window.addEventListener("load", function () {
marginalboxwidthset();
collapseboxes();
var doit;
this.window.addEventListener("resize", function () {
this.clearTimeout(doit);
marginalboxwidthset();
doit = this.setTimeout(collapseboxes, 250);
});
});
</script>