splitting all js into individual files to comparmentalize and getting rid of onload event (in favour of defer)

HaWeb/Controllers/RegisterController.cs

@@ -114,7 +114,6 @@ public class RegisterController : Controller {
         var title = "Forschungsbibliographie";
         ViewData["Title"] = "Forschungsbibliographie";
         ViewData["SEODescription"] = "Johann Georg Hamann: Kommentierte Briefausgabe. Forschungsbibliographie.";
-        ViewData["Mark"] = "He";
 
         // Normalisation and Validation
         if (String.IsNullOrWhiteSpace(id)) return Redirect(url + defaultLetter);

HaWeb/Views/Admin/Dynamic/Upload.cshtml

@@ -5,6 +5,8 @@
     ViewData["showCredits"] = "false";
 }
 
+<script defer src="/js/upload.js" asp-append-version="true"></script>
+
 <div class="ha-adminuploadfields" id="ha-adminuploadfields">
   @foreach (var item in Model.AvailableRoots!.OrderBy(x => x.Type)) {
       <a class="ha-uploadfield" asp-controller="Upload" asp-action="Index" asp-route-id="@item.Prefix">
@@ -96,32 +98,3 @@
   }
 
 </div>
-
-  <script>
-    "use strict";
-    const hideshowfiles = function() {
-      let elem = document.getElementById("ha-availablefileslist");
-      if (elem.classList.contains('hidden')) {
-        
-        elem.classList.remove('hidden');
-        elem.classList.add('block');
-      }
-      else {
-        elem.classList.add('hidden');
-        elem.classList.remove('block');
-      }
-    }
-
-    function getCookie(name) {
-      var value = "; " + document.cookie;
-      var parts = value.split("; " + name + "=");
-      if (parts.length == 2) return parts.pop().split(";").shift();
-    }
-
-    window.addEventListener("load", function () {
-      var filesbutton = document.getElementById("ha-availablefiles");
-      if (filesbutton !== null)
-        filesbutton.addEventListener("click", () => hideshowfiles());
-    });
-  </script>
-

HaWeb/Views/HKB/Dynamic/Briefe.cshtml

@@ -7,10 +7,8 @@
     if (Model.MinWidthTrad)
         minwidthtrads = "ha-minwidth"; 
 }
-@* No JavaScript Settings *@
+
-<noscript>
+<script defer src="/js/briefe.js" asp-append-version="true"></script>
-@* TODO *@
-</noscript>
 
 <div class="ha-letterheader">
     @await Html.PartialAsync("/Views/Shared/_LetterHead.cshtml", (Model.MetaData, false, false))
@@ -155,11 +153,3 @@
         }
     </div>
 </div>
-
-
-@* <script src="~/js/mark.min.js" asp-append-version="true"></script>
-<script>
-    var instance = new Mark(document.querySelectorAll(".ha-letterbody"));
-    instance.mark('l', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"]});
-    
-</script> *@

HaWeb/Views/HKB/Dynamic/Index.cshtml

@@ -5,6 +5,8 @@
     ViewData["showCredits"] = "true";
 }
 
+<script defer src="/js/index.js" asp-append-version="true"></script>
+
 <div class="ha-index">
     @if (Model.Letters != null) {
 
@@ -49,41 +51,14 @@
                 @* Go To Letter *@
                 <div class="ha-gotofilter">
                     <div class="ha-filtertitle">H&hairsp;K&hairsp;B</div>
-                    <form class="ha-gotoform" id="ha-gotoform">
+                    <form class="ha-gotoform" id="ha-gotoform" asp-controller="Briefe" asp-action="Index" method="get">
                         <div class="ha-gototext">
                             Briefnummer
                         </div>
-                        <input type="text" id="ha-gotoletternumber" class="ha-gotoletternumber" />
+                        <input name="id" type="text" id="ha-gotoletternumber" class="ha-gotoletternumber" />
                         <button type="submit" id="ha-gotoformsubmit">Nachschlagen</button>
                     </form>
                 </div>
-                <script>
-                    const ACTIVATEGOTOFILTER = function(filter, button) {
-                        let f = filter.value;
-                        if (f === "") {
-                            button.disabled = true;
-                            return;
-                        }
-                        button.disabled = false;
-                    }
-
-                    const SUBMITGOTO = function(filter) {
-                        let f = filter.value;
-                        window.location.href = "/HKB/" + f;
-                    }
-
-                    window.addEventListener("load", () => {
-                        let gotofilter = document.getElementById("ha-gotoletternumber");
-                        let gotosubmitbtn = document.getElementById("ha-gotoformsubmit");
-                        let gotoform = document.getElementById("ha-gotoform");
-                        ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn);
-                        gotofilter.addEventListener("input", () => ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn));
-                        gotoform.addEventListener("submit", (ev) => { 
-                            ev.preventDefault();
-                            SUBMITGOTO(gotofilter);
-                        });
-                    });
-                </script>
 
                 @* ZH Loopkup *@
                 @if (Model.AvailablePages != null) {
@@ -99,47 +74,17 @@
                     </div>
                      <form class="ha-zhform" id="ha-zhform">
                         <span>Z&hairsp;H Band</span>
-                        <select id="ha-zhformvolume">
+                        <select name="zhvolume" id="ha-zhformvolume">
                             @foreach (var volume in Model.AvailablePages) {
                                 <option>@volume.Volume</option> 
                             }
                         </select>
                         <span>/ </span>
-                        <input id="ha-zhformpage" type="text" value="@Model.ActivePage" placeholder="Seite"/>
+                        <input name="zhpage" id="ha-zhformpage" type="text" value="@Model.ActivePage" placeholder="Seite"/>
                         <button id="ha-zhformsubmit" type="submit">Nachschlagen</button>
                      </form>
                 </div>
-                <script>
-                    const ACTIVATEZHSEARCH = function(volume, page, button) {
-                        let vol = volume.options[volume.selectedIndex].value;
-                        let pg = page.value;
-                        if (pg === "") {
-                            button.disabled = true;
-                            return;
-                        }
-                        button.disabled = false;
-                    }
                 
-                    const SUBMITZHSEARCH = function(volume, page) {
-                        let vol = volume.options[volume.selectedIndex].value;
-                        let pg = page.value;
-                        window.location.href = "/HKB/" + vol + "/" + pg;
-                    }
-                    
-                    window.addEventListener("load", () => {
-                        let vol = document.getElementById("ha-zhformvolume");
-                        let pg = document.getElementById("ha-zhformpage");
-                        let zhsubmitbtn = document.getElementById("ha-zhformsubmit");
-                        let zhsearchform = document.getElementById("ha-zhform");
-                        ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn);
-                        vol.addEventListener("change", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
-                        pg.addEventListener("input", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
-                        zhsearchform.addEventListener("submit", (ev) => { 
-                            ev.preventDefault();
-                            SUBMITZHSEARCH(vol, pg);
-                        });
-                    });
-                </script>
                 }
     
                  @* Full-Text-Search *@
@@ -153,24 +98,6 @@
                         <button id="ha-searchformsubmit" type="submit">Suchen</button>
                      </form>
                 </div>
-                <script>
-                    const ACTIVATESEARCHFILTER = function(filter, button) {
-                        let f = filter.value;
-                        if (f === "") {
-                            button.disabled = true;
-                            return;
-                        }
-                        button.disabled = false;
-                    }
-
-                    window.addEventListener("load", () => {
-                        let searchfilter = document.getElementById("ha-searchformtext");
-                        let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
-                        let searchform = document.getElementById("ha-searchform");
-                        ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
-                        searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));
-                    });
-                </script>
 
                 @* Person Filter *@
                 @if(Model.AvailablePersons != null) {

HaWeb/Views/HKB/Dynamic/Register.cshtml

@@ -24,6 +24,8 @@
         : "ha-bibel";
 }
 
+<script defer src="/js/register.js"></script>
+
 <div class="ha-register">
     <div class="@commentClass">
         <div class="ha-register-head">
@@ -51,25 +53,6 @@
                     </form>
                 }
 
-            <script>
-                const ACTIVATESEARCHFILTER = function(filter, button) {
-                    let f = filter.value;
-                    if (f === "") {
-                        button.disabled = true;
-                        return;
-                    }
-                    button.disabled = false;
-                }
-
-                window.addEventListener("load", () => {
-                    let searchfilter = document.getElementById("ha-searchformtext");
-                    let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
-                    let searchform = document.getElementById("ha-searchform");
-                    ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
-                    searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));
-                });
-            </script>
-
             @* <form asp-controller="Suche" asp-action="Index" method="GET" >
                 <input type="text" name="search" placeholder="Suchbegriff" />
                 <button type="submit">Suchen</button>

HaWeb/Views/HKB/Dynamic/Suche.cshtml

@@ -5,6 +5,7 @@
     ViewData["showCredits"] = "false";
     ViewData["Mark"] = Model.ActiveSearch;
 }
+<script defer src="/js/search.js"></script>
 
 <div class="ha-search">
     <div class="ha-searchhead">
@@ -61,24 +62,6 @@
             }
         </div>
         </div>
-        <script>
-            const ACTIVATESEARCHFILTER = function(filter, button) {
-                let f = filter.value;
-                if (f === "") {
-                    button.disabled = true;
-                    return;
-                }
-                button.disabled = false;
-            }
-
-            window.addEventListener("load", () => {
-                let searchfilter = document.getElementById("ha-searchformtext");
-                let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
-                let searchform = document.getElementById("ha-searchform");
-                ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
-                searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));
-            });
-        </script>
 
         <div class="ha-searchnav">
         @if (Model.AvailablePages != null && Model.AvailablePages.Any() && Model.AvailablePages.Count > 1) {
@@ -112,7 +95,7 @@
                             <div class="ha-letterlistsearchresult">
                                 <div class="ha-searchresultlocation">
                                     <a asp-controller="Briefe" asp-action="Index" asp-route-id="@letter.Meta.Autopsic" asp-route-search="@Model.ActiveSearch" asp-fragment="@sr.Page-@sr.Line">
-                                    HKB @sr.Page/@sr.Line
+                                    HKB @letter.Meta.Autopsic @sr.Page/@sr.Line
                                     </a>
                                 </div>
                                 <div class="ha-searchresultpreview">

HaWeb/Views/Shared/_FileListForm.cshtml

@@ -1,5 +1,8 @@
 @model (List<FileModel>? files, string title, string aspcontrolller, string aspaction, string id, string downloadprefix, bool multipleallowed);
 
+
+<script defer src="/js/filelistform.js"></script>
+
 <fieldset class="ha-filelistfieldset">
     <legend class="ha-filelistlegend">@Model.title</legend>
     @if(Model.files != null && Model.files.Any()) {
@@ -48,36 +51,3 @@
         <div>Keine Dateien gefunden! Es wird eine fallback-Datei verwendet!</div>
     }
 </fieldset>
-
-<script>
-    const USESubmit = async function (oFormElement, file = null) {
-      let fd = new FormData(oFormElement);
-      document.getElementById("ha-filelistbutton").style.pointerEvents = "none";
-      document.getElementById("ha-lds-ellipsis-load").style.display = "inline-block";
-      await fetch(oFormElement.action, {
-          method: 'POST',
-          headers: {
-            'RequestVerificationToken': getCookie('RequestVerificationToken')
-          },
-          body: fd
-        })
-        .then(response => response.json())
-        .then(json => {
-          if ("Error" in json) {
-              document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
-              document.getElementById("ha-lds-ellipsis-load").style.display = "none";
-            document.getElementById("ha-filelistoutput").textContent = json.Error;
-          } 
-          else {
-              document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
-              document.getElementById("ha-lds-ellipsis-load").style.display = "none";
-            location.reload(); 
-          }
-        })
-        .catch ((e) => {
-            document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
-            document.getElementById("ha-lds-ellipsis-load").style.display = "none";
-            document.getElementById("ha-filelistoutput").textContent = e;
-        })
-    }
-</script>

HaWeb/Views/Shared/_Footer.cshtml

@@ -21,5 +21,3 @@
           </div>
      </div>
 </div>
-
-@await Html.PartialAsync("/Views/Shared/_Javascript.cshtml")

HaWeb/Views/Shared/_Head.cshtml

@@ -9,12 +9,16 @@
     <link rel="preload" href="/fonts/LinLibertine_R_G.ttf" as="font" crossorigin/>
     <link rel="preload" href="/fonts/LinBiolinum_R_G.ttf" as="font" crossorigin/>
 -->
-<link rel="preload" href="/css/output.css" as="style" asp-append-version="true"/>
+
+@* Resources *@
 <link rel="preload" href="/img/subtlenet2.png" as="image" />
 <link rel="preload" href="/fonts/LinBiolinum_Rah.ttf" as="font" crossorigin/>
 <link rel="preload" href="/fonts/LinLibertine_Rah.ttf" as="font" crossorigin/>
 <link rel="preload" href="/fonts/LinLibertine_RIah.ttf" as="font" crossorigin/>
 <link rel="preload" href="/fonts/LinLibertine_RBah.ttf" as="font" crossorigin/>
 
-
+@* Styles *@
 <link rel="stylesheet" href="/css/output.css" asp-append-version="true" />
+
+@* JavaScript *@
+@await Html.PartialAsync("/Views/Shared/_JavaScript.cshtml")

HaWeb/Views/Shared/_Javascript.cshtml

@@ -1,490 +1,25 @@
-@* Javascript gets inlined because it ain't much (but it's honest work) *@
 
-@* Mark searched term *@
+@* Global Scripts  -- These are not inside .cshtml to not loose deferred execution posibility *@
-@if (ViewData.ContainsKey("Mark"))
+<script defer src="/js/theme.js" asp-append-version="true"></script>
-{
+<script defer src="/js/active.js" asp-append-version="true"></script>
-    <script src="~/js/mark.min.js" asp-append-version="true"></script>
+<script defer src="/js/anchor.js" asp-append-version="true"></script>
+<script defer src="/js/marginals.js" asp-append-version="true"></script>
+<script defer src="/js/mobilemenu.js" asp-append-version="true"></script>
+<script defer src="/js/scrollbutton.js" asp-append-version="true"></script>
+
+@if (ViewData.ContainsKey("Mark")) {
+    <script src="/js/mark.min.js" asp-append-version="true"></script>
+    @* This uses Razor Syntax so it is inlined into this razor file *@
     <script>
-        var elements = document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-comment");
+        document.addEventListener("DOMContentLoaded", (event) => {
-        if (elements.length < 1000) {
+            var elements = document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-comment");
-            var instancesearch = new Mark(elements);
+            if (elements.length < 1000) {
-            instancesearch.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
+                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, "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, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
+        });
     </script>
 }
 
-@* Mark anchor *@
-<script>
-    function markanchor() {
-        var currentUrl = document.URL,
-            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")) {
-                pointerelement.classList.add("-left-5");
-                pointerelement.classList.add("-top-1.5")
-                element.prepend(pointerelement);
-            } else if (element !== null && element.classList.contains("ha-commenthead")) {
-                pointerelement.classList.add("-left-6");
-                element.prepend(pointerelement);
-            }
-        }
-    }
-
-    window.addEventListener("load", function () {
-        markanchor();
-    });
-</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>

HaWeb/Views/Shared/_PublishForm.cshtml

@@ -1,4 +1,6 @@
 @model UploadViewModel;
+<script defer src="/js/publishform.js"></script>
+
 @if (Model.UsedFiles != null && Model.UsedFiles.Any()) {
       <div class="ha-publishfilelisttitle">Aktuell geladene Dateien</div>
         <table class="ha-publishfilelistlist">
@@ -31,45 +33,3 @@
           </div>
       </form>
 }
-
-<script>
-    const LOCALPUBLISHSubmit = async function (oFormElement) {
-      var fd = new FormData();
-      document.getElementById("ha-publishfilelabel").style.pointerEvents = "none";
-      document.getElementById("ha-lds-ellipsis-publish").style.display = "inline-block";
-      document.getElementById("ha-publishmessage").style.opacity = "0";
-      await fetch(oFormElement.action, {
-          method: 'POST',
-          headers: {
-            'RequestVerificationToken': getCookie('RequestVerificationToken')
-          }
-        })
-        .then(response => response.json())
-        .then(json => {
-          if ("Error" in json) {
-            document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
-            document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
-            document.getElementById("ha-publishmessage").style.opacity = "1";
-            document.getElementById("publish-result").value = json.Error;
-          } else {
-            document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
-            document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
-            document.getElementById("ha-publishmessage").style.opacity = "1";
-            document.getElementById("publish-result").value = "Erfolg!";
-            location.reload();
-          }
-        })
-        .catch ((e) => {
-          document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
-          document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
-          document.getElementById("publish-result").value = "Keine Antwort. Bitte Seite neu laden!";
-      })
-    }
-
-    window.addEventListener("load", () => {
-        var publishelement = document.getElementById("ha-publishform");
-        var publishbutton = document.getElementById("ha-publishfilelabel");
-        publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement));
-    })
-    
-</script>

HaWeb/Views/Shared/_UploadForm.cshtml

@@ -1,5 +1,7 @@
 @model UploadViewModel;
 
+<script defer src="/js/uploadform.js"></script>
+
 <form class="ha-uploadform" id="uploadForm" asp-controller="API" asp-action="Upload" method="post" enctype="multipart/form-data">
     <label class="ha-uploadfilelabel" id="dropzone">
         <input class="hidden" id="file" type="file" accept=".xml" name="file" />
@@ -11,81 +13,3 @@
         <output form="uploadForm" name="upload-result"></output>
     </div>
 </form>
-
-<script>
-    const dropHandler = function (formelement, ev, dropzone) {
-      ev.preventDefault();
-      if (ev.dataTransfer.items) {
-        if (ev.dataTransfer.items[0].kind === 'file') {
-          var file = ev.dataTransfer.items[0].getAsFile();
-          UPLOADSubmit(formelement, file);
-        } else {
-          var file = ev.dataTransfer.files[0];
-          UPLOADSubmit(formelement, file);
-        }
-      }
-    }
-
-    const dragOverHandler = function (ev, dropzone) {
-      ev.preventDefault();
-    }
-
-    const dragLeaveHander = function (ev, dropzone) {
-      ev.preventDefault();
-    }
-
-    const dragEnterHandler = function (ev, dropzone) {
-      ev.preventDefault();
-    }
-
-    const UPLOADSubmit = async function (oFormElement, file = null) {
-      var fd = new FormData();
-      if (file !== null) fd.append("file", file);
-      else fd = new FormData(oFormElement);
-      document.getElementById("dropzone").style.pointerEvents = "none";
-      document.getElementById("ha-lds-ellipsis-upload").style.display = "inline-block";
-      document.getElementById("ha-uploadmessage").style.opacity = "0";
-      await fetch(oFormElement.action, {
-          method: 'POST',
-          headers: {
-            'RequestVerificationToken': getCookie('RequestVerificationToken')
-          },
-          body: fd
-        })
-        .then(response => response.json())
-        .then(json => {
-          if ("Error" in json) {
-            document.getElementById("dropzone").style.pointerEvents = "auto";
-            document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
-            document.getElementById("ha-uploadmessage").style.opacity = "1";
-            oFormElement.elements.namedItem("upload-result").value = json.Error;
-          } else {
-            document.getElementById("dropzone").style.pointerEvents = "auto";
-            document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
-            oFormElement.elements.namedItem("upload-result").value = "Erfolg!";
-            if ("Prefix" in json[0]) {
-              document.getElementById("dropzone").style.pointerEvents = "auto";
-              document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
-              window.location.replace("/Admin/Upload/" + json[0].Prefix);
-            }
-          }
-        })
-        .catch ((e) => { 
-          document.getElementById("dropzone").style.pointerEvents = "auto";
-          document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
-          document.getElementById("ha-uploadmessage").style.opacity = "1";
-          oFormElement.elements.namedItem("upload-result").value = "Keine Antwort. Bitte Seite neu laden!";
-        })
-    }
-
-    window.addEventListener("load", () => {
-        var submitelement = document.getElementById("file");
-        var formelement = document.getElementById("uploadForm");
-        var dropzone = document.getElementById("dropzone");
-        submitelement.addEventListener("change", () => UPLOADSubmit(formelement));
-        dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));
-        dropzone.addEventListener("dragover", (ev) => dragOverHandler(ev, dropzone));
-        dropzone.addEventListener("dragleave", (ev) => dragLeaveHander(ev, dropzone));
-        dropzone.addEventListener("dragenter", (ev) => dragEnterHandler(ev, dropzone));
-    });
-</script>

HaWeb/tailwind.config.js

@@ -44,6 +44,9 @@ module.exports = {
       '2xl': '1680px',    
     },
     extend: {
+      screens: {
+        'print': { 'raw': 'print' },
+      },
       colors: {
         'hamannHighlight': '#d80000',
         'hamannLightHighlight': '#cc7878',

HaWeb/wwwroot/css/print.css

@@ -0,0 +1,24 @@
+/* PRINT */
+header {
+    @apply print:hidden
+  }
+
+.ha-footer {
+    @apply print:hidden
+}
+
+.ha-letterheadernav {
+    @apply print:!hidden
+}
+
+.ha-letterheader {
+    @apply print:!border-none
+}
+
+.ha-scrollbutton {
+    @apply print:!hidden
+}
+
+html {
+    @apply print:text-base
+}

HaWeb/wwwroot/css/site.css

@@ -14,6 +14,7 @@
 @import "./upload.css";
 @import "./index.css";
 @import "./search.css";
+@import "./print.css";
 
 @layer components {
   /* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */  

HaWeb/wwwroot/js/active.js

@@ -0,0 +1,68 @@
+// Gives active classes to links with active URLs
+// 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";
+            }
+        }
+    }
+};
+
+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"));

HaWeb/wwwroot/js/anchor.js

@@ -0,0 +1,22 @@
+// Marks anchors, if anchors are present in the URL
+const markanchor = function () {
+    var currentUrl = document.URL,
+        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")) {
+            pointerelement.classList.add("-left-5");
+            pointerelement.classList.add("-top-1.5")
+            element.prepend(pointerelement);
+        } else if (element !== null && element.classList.contains("ha-commenthead")) {
+            pointerelement.classList.add("-left-6");
+            element.prepend(pointerelement);
+        }
+    }
+}
+
+markanchor();

HaWeb/wwwroot/js/briefe.js

@@ -0,0 +1,92 @@
+// Code specifically for the letter view
+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");
+            }
+        });
+    }
+};
+
+// 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
+    );
+}

HaWeb/wwwroot/js/filelistform.js

@@ -0,0 +1,30 @@
+const USESubmit = async function (oFormElement, file = null) {
+    let fd = new FormData(oFormElement);
+    document.getElementById("ha-filelistbutton").style.pointerEvents = "none";
+    document.getElementById("ha-lds-ellipsis-load").style.display = "inline-block";
+    await fetch(oFormElement.action, {
+        method: 'POST',
+        headers: {
+        'RequestVerificationToken': getCookie('RequestVerificationToken')
+        },
+        body: fd
+    })
+    .then(response => response.json())
+    .then(json => {
+        if ("Error" in json) {
+            document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
+            document.getElementById("ha-lds-ellipsis-load").style.display = "none";
+        document.getElementById("ha-filelistoutput").textContent = json.Error;
+        } 
+        else {
+            document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
+            document.getElementById("ha-lds-ellipsis-load").style.display = "none";
+        location.reload(); 
+        }
+    })
+    .catch ((e) => {
+        document.getElementById("ha-filelistbutton").style.pointerEvents = "auto";
+        document.getElementById("ha-lds-ellipsis-load").style.display = "none";
+        document.getElementById("ha-filelistoutput").textContent = e;
+    })
+}

HaWeb/wwwroot/js/index.js

@@ -0,0 +1,61 @@
+const ACTIVATEGOTOFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+const ACTIVATEZHSEARCH = function(volume, page, button) {
+    let vol = volume.options[volume.selectedIndex].value;
+    let pg = page.value;
+    if (pg === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+const SUBMITZHSEARCH = function(volume, page) {
+    let vol = volume.options[volume.selectedIndex].value;
+    let pg = page.value;
+    window.location.href = "/HKB/" + vol + "/" + pg;
+}
+
+const ACTIVATESEARCHFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+// Go to letter HKB number
+let gotofilter = document.getElementById("ha-gotoletternumber");
+let gotosubmitbtn = document.getElementById("ha-gotoformsubmit");
+let gotoform = document.getElementById("ha-gotoform");
+ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn);
+gotofilter.addEventListener("input", () => ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn));
+
+// ZH Volume / Page Lookup
+let vol = document.getElementById("ha-zhformvolume");
+let pg = document.getElementById("ha-zhformpage");
+let zhsubmitbtn = document.getElementById("ha-zhformsubmit");
+let zhsearchform = document.getElementById("ha-zhform");
+ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn);
+vol.addEventListener("change", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
+pg.addEventListener("input", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
+// Need to implement send bc razor tag helpers do not work here
+zhsearchform.addEventListener("submit", (ev) => { 
+    ev.preventDefault();
+    SUBMITZHSEARCH(vol, pg);
+});
+
+// Full-text search
+let searchfilter = document.getElementById("ha-searchformtext");
+let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
+let searchform = document.getElementById("ha-searchform");
+ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
+searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));

HaWeb/wwwroot/js/marginals.js

@@ -0,0 +1,169 @@
+// Script for auto collapsing marginal boxes
+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);
+};
+
+marginalboxwidthset();
+collapseboxes();
+var doit;
+this.window.addEventListener("resize", function () {
+    this.clearTimeout(doit);
+    marginalboxwidthset();
+    doit = this.setTimeout(collapseboxes, 250);
+});

HaWeb/wwwroot/js/mobilemenu.js

@@ -0,0 +1,31 @@
+// Code for showing and hiding the mobile menu
+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", "");
+};
+
+// 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);
+}

HaWeb/wwwroot/js/publishform.js

@@ -0,0 +1,37 @@
+const LOCALPUBLISHSubmit = async function (oFormElement) {
+    var fd = new FormData();
+    document.getElementById("ha-publishfilelabel").style.pointerEvents = "none";
+    document.getElementById("ha-lds-ellipsis-publish").style.display = "inline-block";
+    document.getElementById("ha-publishmessage").style.opacity = "0";
+    await fetch(oFormElement.action, {
+        method: 'POST',
+        headers: {
+          'RequestVerificationToken': getCookie('RequestVerificationToken')
+        }
+      })
+      .then(response => response.json())
+      .then(json => {
+        if ("Error" in json) {
+          document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
+          document.getElementById("ha-publishmessage").style.opacity = "1";
+          document.getElementById("publish-result").value = json.Error;
+        } else {
+          document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
+          document.getElementById("ha-publishmessage").style.opacity = "1";
+          document.getElementById("publish-result").value = "Erfolg!";
+          location.reload();
+        }
+      })
+      .catch ((e) => {
+        document.getElementById("ha-publishfilelabel").style.pointerEvents = "auto";
+        document.getElementById("ha-lds-ellipsis-publish").style.display = "none";
+        document.getElementById("publish-result").value = "Keine Antwort. Bitte Seite neu laden!";
+    })
+  }
+
+var publishelement = document.getElementById("ha-publishform");
+var publishbutton = document.getElementById("ha-publishfilelabel");
+publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement));
+  

HaWeb/wwwroot/js/register.js

@@ -0,0 +1,14 @@
+const ACTIVATESEARCHFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+let searchfilter = document.getElementById("ha-searchformtext");
+let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
+let searchform = document.getElementById("ha-searchform");
+ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
+searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));

HaWeb/wwwroot/js/scrollbutton.js

@@ -0,0 +1,25 @@
+// Script for showing and acting upon the "scroll to top button"
+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";
+        }
+    }
+}
+
+// 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);
+}

HaWeb/wwwroot/js/search.js

@@ -0,0 +1,14 @@
+const ACTIVATESEARCHFILTER = function(filter, button) {
+    let f = filter.value;
+    if (f === "") {
+        button.disabled = true;
+        return;
+    }
+    button.disabled = false;
+}
+
+let searchfilter = document.getElementById("ha-searchformtext");
+let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
+let searchform = document.getElementById("ha-searchform");
+ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
+searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));

HaWeb/wwwroot/js/theme.js

@@ -0,0 +1,30 @@
+// 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();
+};
+
+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");

HaWeb/wwwroot/js/upload.js

@@ -0,0 +1,22 @@
+const hideshowfiles = function() {
+    let elem = document.getElementById("ha-availablefileslist");
+    if (elem.classList.contains('hidden')) {
+        
+        elem.classList.remove('hidden');
+        elem.classList.add('block');
+    }
+    else {
+        elem.classList.add('hidden');
+        elem.classList.remove('block');
+    }
+    }
+
+    function getCookie(name) {
+    var value = "; " + document.cookie;
+    var parts = value.split("; " + name + "=");
+    if (parts.length == 2) return parts.pop().split(";").shift();
+}
+
+var filesbutton = document.getElementById("ha-availablefiles");
+if (filesbutton !== null)
+    filesbutton.addEventListener("click", () => hideshowfiles());

HaWeb/wwwroot/js/uploadform.js

@@ -0,0 +1,73 @@
+const dropHandler = function (formelement, ev, dropzone) {
+    ev.preventDefault();
+    if (ev.dataTransfer.items) {
+      if (ev.dataTransfer.items[0].kind === 'file') {
+        var file = ev.dataTransfer.items[0].getAsFile();
+        UPLOADSubmit(formelement, file);
+      } else {
+        var file = ev.dataTransfer.files[0];
+        UPLOADSubmit(formelement, file);
+      }
+    }
+  }
+
+  const dragOverHandler = function (ev, dropzone) {
+    ev.preventDefault();
+  }
+
+  const dragLeaveHander = function (ev, dropzone) {
+    ev.preventDefault();
+  }
+
+  const dragEnterHandler = function (ev, dropzone) {
+    ev.preventDefault();
+  }
+
+  const UPLOADSubmit = async function (oFormElement, file = null) {
+    var fd = new FormData();
+    if (file !== null) fd.append("file", file);
+    else fd = new FormData(oFormElement);
+    document.getElementById("dropzone").style.pointerEvents = "none";
+    document.getElementById("ha-lds-ellipsis-upload").style.display = "inline-block";
+    document.getElementById("ha-uploadmessage").style.opacity = "0";
+    await fetch(oFormElement.action, {
+        method: 'POST',
+        headers: {
+          'RequestVerificationToken': getCookie('RequestVerificationToken')
+        },
+        body: fd
+      })
+      .then(response => response.json())
+      .then(json => {
+        if ("Error" in json) {
+          document.getElementById("dropzone").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+          document.getElementById("ha-uploadmessage").style.opacity = "1";
+          oFormElement.elements.namedItem("upload-result").value = json.Error;
+        } else {
+          document.getElementById("dropzone").style.pointerEvents = "auto";
+          document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+          oFormElement.elements.namedItem("upload-result").value = "Erfolg!";
+          if ("Prefix" in json[0]) {
+            document.getElementById("dropzone").style.pointerEvents = "auto";
+            document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+            window.location.replace("/Admin/Upload/" + json[0].Prefix);
+          }
+        }
+      })
+      .catch ((e) => { 
+        document.getElementById("dropzone").style.pointerEvents = "auto";
+        document.getElementById("ha-lds-ellipsis-upload").style.display = "none";
+        document.getElementById("ha-uploadmessage").style.opacity = "1";
+        oFormElement.elements.namedItem("upload-result").value = "Keine Antwort. Bitte Seite neu laden!";
+      })
+  }
+
+var submitelement = document.getElementById("file");
+var formelement = document.getElementById("uploadForm");
+var dropzone = document.getElementById("dropzone");
+submitelement.addEventListener("change", () => UPLOADSubmit(formelement));
+dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));
+dropzone.addEventListener("dragover", (ev) => dragOverHandler(ev, dropzone));
+dropzone.addEventListener("dragleave", (ev) => dragLeaveHander(ev, dropzone));
+dropzone.addEventListener("dragenter", (ev) => dragEnterHandler(ev, dropzone));