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 09:15:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Last comment on letter+ FIX marginal issue + vite build options

Browse Source
This commit is contained in:
Simon Martens
2024-01-27 00:30:28 +01:00
parent d1994ad9fb
commit cc740d6150
5 changed files with 95 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
HaWeb/Views/HKB/Dynamic/Register.cshtml
View File

@@ -72,7 +72,7 @@
</div> </div>
</div> </div>
<div class="ha-register-body"> <div id="ha-register-body" class="ha-register-body">
@foreach (var k in Model.ParsedComments) { @foreach (var k in Model.ParsedComments) {
<div class="ha-comment"> <div class="ha-comment">
<div class="ha-headcomment">@Html.Raw(k.ParsedComment)</div> <div class="ha-headcomment">@Html.Raw(k.ParsedComment)</div>

1
HaWeb/vite.config.js
View File

@@ -7,6 +7,7 @@ export default defineConfig({
entry: resolve(__dirname, 'wwwroot/js/main.js'), entry: resolve(__dirname, 'wwwroot/js/main.js'),
name: 'HaWeb', name: 'HaWeb',
fileName: 'scripts', fileName: 'scripts',
formats: ['es']
}, },
outDir: resolve(__dirname, 'wwwroot/dist/'), outDir: resolve(__dirname, 'wwwroot/dist/'),
} }

4
HaWeb/wwwroot/css/letter.css
View File

@@ -58,7 +58,7 @@
} }
.ha-text .ha-marginalbox { .ha-text .ha-marginalbox {
@apply bg-slate-50 dark:bg-slate-900 @apply bg-slate-50 dark:bg-slate-900 duration-200
} }
.ha-text .ha-marginalbox.ha-expanded-box .ha-marginallist { .ha-text .ha-marginalbox.ha-expanded-box .ha-marginallist {
@@ -172,7 +172,7 @@
} }
.ha-text .ha-marginalbox { .ha-text .ha-marginalbox {
@apply hidden overflow-hidden select-none hover:select-auto hyphenate pl-1 md:inline-block absolute left-full ml-6 desktop:ml-10 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans @apply hidden whitespace-normal overflow-hidden select-none hover:select-auto hyphenate pl-1 md:inline-block absolute left-full ml-6 desktop:ml-10 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans
} }
.ha-text .ha-marginalbox .ha-marginallist { .ha-text .ha-marginalbox .ha-marginallist {

156
HaWeb/wwwroot/js/marginals.mjs
View File

@@ -1,5 +1,8 @@
// Script for auto collapsing marginal boxes // Script for auto collapsing marginal boxes
const startup_marginals = function () { const startup_marginals = function () {
let debounce_resize;
let collapsedboxes = [];
const getLineHeight = function (element) { const getLineHeight = function (element) {
var temp = document.createElement(element.nodeName), var temp = document.createElement(element.nodeName),
ret; ret;
@@ -11,18 +14,22 @@ const startup_marginals = function () {
return ret; return ret;
}; };
const collapsebox = function (element, height, lineheight) { const collapsebox = function (element, height, lineheight, setheight = true) {
element.style.maxHeight = height + "px"; element.style.maxHeight = height + "px";
element.classList.add("ha-collapsed-box"); element.classList.add("ha-collapsed-box");
element.classList.remove("ha-expanded-box"); element.classList.remove("ha-expanded-box");
setTimeout(function () {
element.classList.remove("transition-all");
}, 130);
}; };
const uncollapsebox = function (element) { const uncollapsebox = function (element) {
element.classList.add("transition-all");
element.classList.remove("ha-collapsed-box"); element.classList.remove("ha-collapsed-box");
element.classList.add("ha-expanded-box"); element.classList.add("ha-expanded-box");
}; };
const addbuttoncaollapsebox = function (element, height, hoverfunction) { const addbuttoncaollapsebox = function (element, height, hoverfunction, topmove) {
let btn = document.createElement("div"); let btn = document.createElement("div");
btn.classList.add("ha-btn-collapsed-box"); btn.classList.add("ha-btn-collapsed-box");
@@ -36,10 +43,16 @@ const startup_marginals = function () {
ev.stopPropagation(); ev.stopPropagation();
if (element.classList.contains("ha-collapsed-box")) { if (element.classList.contains("ha-collapsed-box")) {
uncollapsebox(element); uncollapsebox(element);
if (topmove > 0) element.style.bottom = "0px";
btn.classList.add("ha-close-btn-collapsed-box"); btn.classList.add("ha-close-btn-collapsed-box");
btn.classList.add("ha-collapsed-box-manually-toggled"); btn.classList.add("ha-collapsed-box-manually-toggled");
} else { } else {
collapsebox(element, height); if (topmove > 0) {
collapsebox(element, height, 0, false);
element.style.bottom = "unset";
} else {
collapsebox(element, height, 0, true);
}
btn.classList.remove("ha-close-btn-collapsed-box"); btn.classList.remove("ha-close-btn-collapsed-box");
btn.classList.remove("ha-collapsed-box-manually-toggled"); btn.classList.remove("ha-collapsed-box-manually-toggled");
} }
@@ -53,6 +66,7 @@ const startup_marginals = function () {
timer = setTimeout(function () { timer = setTimeout(function () {
if (element.classList.contains("ha-collapsed-box")) { if (element.classList.contains("ha-collapsed-box")) {
uncollapsebox(element); uncollapsebox(element);
if (topmove > 0) element.style.bottom = "0px";
btn.classList.add("ha-close-btn-collapsed-box"); btn.classList.add("ha-close-btn-collapsed-box");
} }
}, 80); }, 80);
@@ -67,7 +81,12 @@ const startup_marginals = function () {
element.classList.contains("ha-expanded-box") && element.classList.contains("ha-expanded-box") &&
!btn.classList.contains("ha-collapsed-box-manually-toggled") !btn.classList.contains("ha-collapsed-box-manually-toggled")
) { ) {
collapsebox(element, height); if (topmove > 0) {
collapsebox(element, height, 0, false);
element.style.bottom = "unset";
} else {
collapsebox(element, height, 0, true);
}
btn.classList.remove("ha-close-btn-collapsed-box"); btn.classList.remove("ha-close-btn-collapsed-box");
} }
}); });
@@ -75,7 +94,11 @@ const startup_marginals = function () {
element.parentNode.insertBefore(btn, element); element.parentNode.insertBefore(btn, element);
}; };
const overlappingcollapsebox = function (selector, hoverfunction) { const overlappingcollapsebox = function (selector, hoverfunction, containerid) {
let container = document.getElementById(containerid);
if (!container) return;
container.classList.add("overflow-hidden");
let containerrect = document.getElementById(containerid).getBoundingClientRect();;
let boxes = document.querySelectorAll(selector); let boxes = document.querySelectorAll(selector);
let lineheight = 1; let lineheight = 1;
@@ -84,57 +107,64 @@ const startup_marginals = function () {
} }
for (var i = 0; i < boxes.length; i++) { for (var i = 0; i < boxes.length; i++) {
if (i < boxes.length - 1) { let element = boxes[i];
let element = boxes[i]; let thisrect = element.getBoundingClientRect();
let thisrect = element.getBoundingClientRect(); let overlap = -2;
let topmove = 0;
if (thisrect.bottom > containerrect.bottom) {
overlap = thisrect.bottom - containerrect.bottom;
topmove = thisrect.bottom - containerrect.bottom;
} else if (i < boxes.length - 1) {
let nextrect = boxes[i + 1].getBoundingClientRect(); let nextrect = boxes[i + 1].getBoundingClientRect();
let overlap = thisrect.bottom - nextrect.top; overlap = thisrect.bottom - nextrect.top;
if ( }
// -1 for catching lines that perfectly close up on each other if (
overlap >= -1 && // -1 for catching lines that perfectly close up on each other
!(window.getComputedStyle(element).display === "none") overlap >= -1 &&
) { !(window.getComputedStyle(element).display === "none")
let newlength = 0; ) {
if (overlap >= 0) let newlength = 0;
newlength = thisrect.height - overlap; if (overlap >= 0)
else newlength = thisrect.height - overlap;
newlength = thisrect.height - lineheight; else
if (newlength % (lineheight * 3) <= 2) newlength = thisrect.height - lineheight;
newlength -= lineheight; if (newlength % (lineheight * 3) <= 2)
let remainder = newlength % lineheight; newlength -= lineheight;
newlength = newlength - remainder; let remainder = newlength % lineheight;
newlength = newlength - remainder;
// Line clamping for Marginals // Line clamping for Marginals
if (element.classList.contains("ha-marginalbox")) { if (element.classList.contains("ha-marginalbox")) {
let marginals = element.querySelectorAll(".ha-marginal"); let marginals = element.querySelectorAll(".ha-marginal");
let h = 0; let h = 0;
for (let m of marginals) { for (let m of marginals) {
let cr = m.getBoundingClientRect(); let cr = m.getBoundingClientRect();
let eh = cr.bottom - cr.top; let eh = cr.bottom - cr.top;
h += eh; h += eh;
if (h >= newlength) { if (h >= newlength) {
let lines = Math.floor(eh / lineheight); let lines = Math.floor(eh / lineheight);
let cutoff = Math.floor((h - newlength) / lineheight); let cutoff = Math.floor((h - newlength) / lineheight);
m.style.cssText += "-webkit-line-clamp: " + (lines - cutoff) + ";"; m.style.cssText += "-webkit-line-clamp: " + (lines - cutoff) + ";";
m.style.cssText += "line-clamp: " + (lines - cutoff) + ";"; m.style.cssText += "line-clamp: " + (lines - cutoff) + ";";
}
} }
} }
requestAnimationFrame(() => {
collapsedboxes.push(element);
collapsebox(element, newlength, lineheight);
addbuttoncaollapsebox(element, newlength, hoverfunction);
});
} }
requestAnimationFrame(() => {
collapsedboxes.push(element);
if (topmove > 0) collapsebox(element, newlength, lineheight, false);
else collapsebox(element, newlength, lineheight, true);
addbuttoncaollapsebox(element, newlength, hoverfunction, topmove);
});
} }
} }
}; };
const marginalboxwidthset = function () { const marginalboxwidthset = function (containerid, classes) {
let lt = document.getElementById("ha-letterbody"); let lt = document.getElementById(containerid);
if (lt !== null) { if (lt !== null) {
let mg = lt.querySelectorAll(".ha-text .ha-marginalbox"); let mg = lt.querySelectorAll(classes);
if (mg.length > 0) { if (mg.length > 0) {
let ltbcr = lt.getBoundingClientRect(); let ltbcr = lt.getBoundingClientRect();
let mgbcr = mg[0].getBoundingClientRect(); let mgbcr = mg[0].getBoundingClientRect();
@@ -145,19 +175,10 @@ const startup_marginals = function () {
} }
} }
} }
}
const collapseboxes = function () {
overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
overlappingcollapsebox(".ha-commentlist .ha-letlinks", true);
overlappingcollapsebox(".ha-text .ha-marginalbox", true);
}; };
let collapsedboxes = [];
const clearcollapsedboxes = function () { const clearcollapsedboxes = function () {
let elements = document.querySelectorAll(".ha-text .ha-marginalbox"); let elements = document.querySelectorAll(".ha-marginalbox");
elements.forEach(element => { elements.forEach(element => {
element.removeAttribute("style"); element.removeAttribute("style");
}); });
@@ -171,23 +192,28 @@ const startup_marginals = function () {
elements.forEach(element => { elements.forEach(element => {
element.remove(); element.remove();
}); });
} };
const resetall = function () { const resetall = function () {
clearcollapsedboxes(); clearcollapsedboxes();
marginalboxwidthset(); marginalboxwidthset("ha-letterbody", ".ha-marginalbox");
marginalboxwidthset("ha-register-body", ".ha-letlinks");
startup_marginals(); startup_marginals();
} };
const collapseboxes = function () {
overlappingcollapsebox(".ha-letlinks", true, "ha-register-body");
overlappingcollapsebox(".ha-marginalbox", true, "ha-letterbody");
};
marginalboxwidthset();
collapseboxes();
var doit;
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
clearTimeout(doit); clearTimeout(debounce_resize);
doit = setTimeout(resetall, 17); debounce_resize = setTimeout(resetall, 17);
}); });
marginalboxwidthset("ha-letterbody", ".ha-marginalbox");
marginalboxwidthset("ha-register-body", ".ha-letlinks");
collapseboxes();
}; };
export { startup_marginals }; export { startup_marginals };

1
HaWeb/wwwroot/js/websocket.mjs
View File

@@ -42,7 +42,6 @@ const startup_websocket = function () {
var msg = JSON.parse(event.data); var msg = JSON.parse(event.data);
if (msg.ValidationState != null) { if (msg.ValidationState != null) {
stateValidation = msg.ValidationState; stateValidation = msg.ValidationState;
console.log(msg.ValidationState);
switch (msg.ValidationState) { switch (msg.ValidationState) {
case 0: case 0:
commsNot.classList.remove("loading"); commsNot.classList.remove("loading");