diff --git a/HaWeb/Views/HKB/Dynamic/Register.cshtml b/HaWeb/Views/HKB/Dynamic/Register.cshtml index fba557e..d59f484 100644 --- a/HaWeb/Views/HKB/Dynamic/Register.cshtml +++ b/HaWeb/Views/HKB/Dynamic/Register.cshtml @@ -72,7 +72,7 @@ -
+
@foreach (var k in Model.ParsedComments) {
@Html.Raw(k.ParsedComment)
diff --git a/HaWeb/vite.config.js b/HaWeb/vite.config.js index 2b81a56..a4904d7 100644 --- a/HaWeb/vite.config.js +++ b/HaWeb/vite.config.js @@ -7,6 +7,7 @@ export default defineConfig({ entry: resolve(__dirname, 'wwwroot/js/main.js'), name: 'HaWeb', fileName: 'scripts', + formats: ['es'] }, outDir: resolve(__dirname, 'wwwroot/dist/'), } diff --git a/HaWeb/wwwroot/css/letter.css b/HaWeb/wwwroot/css/letter.css index 43c163c..1fbbf79 100644 --- a/HaWeb/wwwroot/css/letter.css +++ b/HaWeb/wwwroot/css/letter.css @@ -58,7 +58,7 @@ } .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 { @@ -172,7 +172,7 @@ } .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 { diff --git a/HaWeb/wwwroot/js/marginals.mjs b/HaWeb/wwwroot/js/marginals.mjs index e8b70a9..64d0756 100644 --- a/HaWeb/wwwroot/js/marginals.mjs +++ b/HaWeb/wwwroot/js/marginals.mjs @@ -1,5 +1,8 @@ // Script for auto collapsing marginal boxes const startup_marginals = function () { + let debounce_resize; + let collapsedboxes = []; + const getLineHeight = function (element) { var temp = document.createElement(element.nodeName), ret; @@ -11,18 +14,22 @@ const startup_marginals = function () { return ret; }; - const collapsebox = function (element, height, lineheight) { + const collapsebox = function (element, height, lineheight, setheight = true) { element.style.maxHeight = height + "px"; element.classList.add("ha-collapsed-box"); element.classList.remove("ha-expanded-box"); + setTimeout(function () { + element.classList.remove("transition-all"); + }, 130); }; const uncollapsebox = function (element) { + element.classList.add("transition-all"); element.classList.remove("ha-collapsed-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"); btn.classList.add("ha-btn-collapsed-box"); @@ -36,10 +43,16 @@ const startup_marginals = function () { ev.stopPropagation(); if (element.classList.contains("ha-collapsed-box")) { uncollapsebox(element); + if (topmove > 0) element.style.bottom = "0px"; btn.classList.add("ha-close-btn-collapsed-box"); btn.classList.add("ha-collapsed-box-manually-toggled"); } 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-collapsed-box-manually-toggled"); } @@ -53,6 +66,7 @@ const startup_marginals = function () { timer = setTimeout(function () { if (element.classList.contains("ha-collapsed-box")) { uncollapsebox(element); + if (topmove > 0) element.style.bottom = "0px"; btn.classList.add("ha-close-btn-collapsed-box"); } }, 80); @@ -67,7 +81,12 @@ const startup_marginals = function () { element.classList.contains("ha-expanded-box") && !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"); } }); @@ -75,7 +94,11 @@ const startup_marginals = function () { 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 lineheight = 1; @@ -84,57 +107,64 @@ const startup_marginals = function () { } for (var i = 0; i < boxes.length; i++) { - if (i < boxes.length - 1) { - let element = boxes[i]; - let thisrect = element.getBoundingClientRect(); + let element = boxes[i]; + 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 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; + 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; - // 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) + ";"; - m.style.cssText += "line-clamp: " + (lines - cutoff) + ";"; - } + // 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) + ";"; + 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 () { - let lt = document.getElementById("ha-letterbody"); + const marginalboxwidthset = function (containerid, classes) { + let lt = document.getElementById(containerid); if (lt !== null) { - let mg = lt.querySelectorAll(".ha-text .ha-marginalbox"); + let mg = lt.querySelectorAll(classes); if (mg.length > 0) { let ltbcr = lt.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 () { - let elements = document.querySelectorAll(".ha-text .ha-marginalbox"); + let elements = document.querySelectorAll(".ha-marginalbox"); elements.forEach(element => { element.removeAttribute("style"); }); @@ -171,23 +192,28 @@ const startup_marginals = function () { elements.forEach(element => { element.remove(); }); - } + }; const resetall = function () { clearcollapsedboxes(); - marginalboxwidthset(); + marginalboxwidthset("ha-letterbody", ".ha-marginalbox"); + marginalboxwidthset("ha-register-body", ".ha-letlinks"); 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 () { - clearTimeout(doit); - doit = setTimeout(resetall, 17); + clearTimeout(debounce_resize); + debounce_resize = setTimeout(resetall, 17); }); + + marginalboxwidthset("ha-letterbody", ".ha-marginalbox"); + marginalboxwidthset("ha-register-body", ".ha-letlinks"); + collapseboxes(); }; export { startup_marginals }; diff --git a/HaWeb/wwwroot/js/websocket.mjs b/HaWeb/wwwroot/js/websocket.mjs index 27470fd..a71c575 100644 --- a/HaWeb/wwwroot/js/websocket.mjs +++ b/HaWeb/wwwroot/js/websocket.mjs @@ -42,7 +42,6 @@ const startup_websocket = function () { var msg = JSON.parse(event.data); if (msg.ValidationState != null) { stateValidation = msg.ValidationState; - console.log(msg.ValidationState); switch (msg.ValidationState) { case 0: commsNot.classList.remove("loading");