From 3921f907fb428328c10100d583b0b6eccfd416a1 Mon Sep 17 00:00:00 2001 From: Simon-Martens Date: Thu, 25 Jan 2024 13:41:44 +0100 Subject: [PATCH] JavaScript Refactor p1 --- HaWeb/Program.cs | 7 +- HaWeb/wwwroot/js/active.js | 127 +++++++------ HaWeb/wwwroot/js/anchor.js | 4 +- HaWeb/wwwroot/js/briefe.js | 61 +++--- HaWeb/wwwroot/js/clipboard.js | 10 +- HaWeb/wwwroot/js/filelistform.js | 208 ++++++++++---------- HaWeb/wwwroot/js/index.js | 159 ++++++++-------- HaWeb/wwwroot/js/marginals.js | 317 ++++++++++++++++--------------- HaWeb/wwwroot/js/mobilemenu.js | 60 +++--- HaWeb/wwwroot/js/publishform.js | 28 +-- HaWeb/wwwroot/js/scrollbutton.js | 51 ++--- HaWeb/wwwroot/js/search.js | 27 +-- HaWeb/wwwroot/js/theme.js | 59 +++--- HaWeb/wwwroot/js/uploadform.js | 73 ------- HaWeb/wwwroot/js/websocket.js | 301 ++++++++++++++--------------- 15 files changed, 723 insertions(+), 769 deletions(-) delete mode 100644 HaWeb/wwwroot/js/uploadform.js diff --git a/HaWeb/Program.cs b/HaWeb/Program.cs index c106395..4f7979a 100644 --- a/HaWeb/Program.cs +++ b/HaWeb/Program.cs @@ -9,9 +9,9 @@ using Microsoft.AspNetCore.HttpOverrides; using Microsoft.Extensions.Primitives; var builder = WebApplication.CreateBuilder(args); -List configpaths = new List(); // Add additional configuration +List configpaths = new List(); if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows)) { var p = builder.Configuration.GetValue("WorkingTreePathWindows") + "settings.json"; configpaths.Add(p); @@ -38,6 +38,8 @@ builder.Services.AddSingleton(_ => XMLFP); builder.Services.AddSingleton(); builder.Services.AddTransient(); builder.Services.AddFeatureManagement(); + + var app = builder.Build(); // Reload config on change @@ -48,12 +50,13 @@ ChangeToken.OnChange( app.Environment ); +// Websockets for realtime notification of changes app.UseWebSockets( new WebSocketOptions { KeepAliveInterval = TimeSpan.FromMinutes(180), }); app.UseMiddleware(); -// Configure the HTTP request pipeline. +// Production Options if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); diff --git a/HaWeb/wwwroot/js/active.js b/HaWeb/wwwroot/js/active.js index 8d04f01..e1d85cc 100644 --- a/HaWeb/wwwroot/js/active.js +++ b/HaWeb/wwwroot/js/active.js @@ -1,68 +1,73 @@ -// 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 +const startup_active = function () { + // 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")) { + 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")); }; -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")); + +startup_active(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/anchor.js b/HaWeb/wwwroot/js/anchor.js index 5bffb64..3f04417 100644 --- a/HaWeb/wwwroot/js/anchor.js +++ b/HaWeb/wwwroot/js/anchor.js @@ -1,5 +1,5 @@ // Marks anchors, if anchors are present in the URL -const markanchor = function () { +const startup_markanchor = function () { var currentUrl = document.URL, urlParts = currentUrl.split('#'); var anchor = (urlParts.length > 1) ? urlParts[1] : null; @@ -19,4 +19,4 @@ const markanchor = function () { } } -markanchor(); \ No newline at end of file +startup_markanchor(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/briefe.js b/HaWeb/wwwroot/js/briefe.js index f79e9a1..5a3973f 100644 --- a/HaWeb/wwwroot/js/briefe.js +++ b/HaWeb/wwwroot/js/briefe.js @@ -1,33 +1,38 @@ // // Code specifically for the letter view -let activetab = null; -let activetabbtn = null; -let activetabbtn2 = null; -let tabbtnlist = document.querySelectorAll(".ha-tabbtn"); -let tablist = document.querySelectorAll(".ha-tab"); -for (let i = 0; i < tabbtnlist.length; i++) { - tablist[i % tablist.length].classList.add("hidden"); - tabbtnlist[i].addEventListener("click", () => { - if (activetab != null) - activetab.classList.add("hidden"); - if (activetabbtn != null) - activetabbtn.classList.remove("active"); - if (activetabbtn2 != null) - activetabbtn2.classList.remove("active"); +const startup_briefe = function () { + let activetab = null; + let activetabbtn = null; + let activetabbtn2 = null; + let tabbtnlist = document.querySelectorAll(".ha-tabbtn"); + let tablist = document.querySelectorAll(".ha-tab"); - tablist[i % tablist.length].classList.remove("hidden"); - tabbtnlist[i].classList.add("active"); - tabbtnlist[(i + tablist.length) % tabbtnlist.length].classList.add("active"); - activetab = tablist[i % tablist.length]; - activetabbtn = tabbtnlist[i]; - activetabbtn2 = tabbtnlist[(i + tablist.length) % tabbtnlist.length]; + for (let i = 0; i < tabbtnlist.length; i++) { + tablist[i % tablist.length].classList.add("hidden"); + tabbtnlist[i].addEventListener("click", () => { + if (activetab != null) + activetab.classList.add("hidden"); + if (activetabbtn != null) + activetabbtn.classList.remove("active"); + if (activetabbtn2 != null) + activetabbtn2.classList.remove("active"); - // if (resetall != null) { - // console.log("RESET MARG") - // requestAnimationFrame(() => { resetall(); }); - // } - }); -} + tablist[i % tablist.length].classList.remove("hidden"); + tabbtnlist[i].classList.add("active"); + tabbtnlist[(i + tablist.length) % tabbtnlist.length].classList.add("active"); + activetab = tablist[i % tablist.length]; + activetabbtn = tabbtnlist[i]; + activetabbtn2 = tabbtnlist[(i + tablist.length) % tabbtnlist.length]; -if (tabbtnlist.length > 0) - tabbtnlist[0].click(); \ No newline at end of file + // if (resetall != null) { + // console.log("RESET MARG") + // requestAnimationFrame(() => { resetall(); }); + // } + }); + } + + if (tabbtnlist.length > 0) + tabbtnlist[0].click(); +}; + +startup_briefe(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/clipboard.js b/HaWeb/wwwroot/js/clipboard.js index 9a2f7df..71f04f6 100644 --- a/HaWeb/wwwroot/js/clipboard.js +++ b/HaWeb/wwwroot/js/clipboard.js @@ -1,7 +1,13 @@ -document.addEventListener('copy', function(e){ + +const startup_clipboard = function () { + document.addEventListener('copy', function (e) { var e = navigator.clipboard.read(); var text = window.getSelection().toString(); e.clipboardData.setData('text/plain', text); e.preventDefault(); - }); \ No newline at end of file + }); +} + + +startup_clipboard(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/filelistform.js b/HaWeb/wwwroot/js/filelistform.js index f2a8c5c..f001a2e 100644 --- a/HaWeb/wwwroot/js/filelistform.js +++ b/HaWeb/wwwroot/js/filelistform.js @@ -1,113 +1,105 @@ -function getCookie(name) { - var value = "; " + document.cookie; - var parts = value.split("; " + name + "="); - if (parts.length == 2) return parts.pop().split(";").shift(); -} +const startup_filelistform = function () { + function getCookie(name) { + var value = "; " + document.cookie; + var parts = value.split("; " + name + "="); + if (parts.length == 2) return parts.pop().split(";").shift(); + } -const USESubmit = async function (oFormElement, file = null) { - let fd = new FormData(oFormElement); - document.getElementById("ha-filelistbutton").style.pointerEvents = "none"; - document.getElementById("ha-filelistbutton").classList.add("loading"); - await fetch(oFormElement.action, { - method: 'POST', - headers: { - 'RequestVerificationToken': getCookie('RequestVerificationToken') - }, - body: fd - }) - .then(response => response.json()) - .then(json => { - document.getElementById("ha-filelistbutton").classList.remove("loading"); - document.getElementById("ha-filelistbutton").style.pointerEvents = "auto"; - if ("Error" in json) { - document.getElementById("ha-filelistoutput").textContent = json.Error; - } - else { - location.reload(); - } - }) - .catch ((e) => { - document.getElementById("ha-filelistbutton").classList.remove("loading"); - document.getElementById("ha-filelistbutton").style.pointerEvents = "auto"; - document.getElementById("ha-filelistoutput").textContent = e; - }) -} - -const GETSyntaxCheck = async function (oFormElement, file = null) { - document.getElementById("ha-scbutton").style.pointerEvents = "none"; - document.getElementById("ha-scbutton").classList.toggle("loading"); - await fetch(oFormElement.action) - .then(response => response.json()) - .then(j => { - Object.entries(j).forEach(([key, value]) => { - var e = document.getElementById(key); - if (e !== null && !e.classList.contains("red")) { - var h = e.querySelector(".ha-managedfileheader"); - var i = e.querySelector(".ha-filestatusicon"); - var a = e.querySelector(".ha-managedfileannotations"); - if (value.errors === null) { - h.classList.add("green"); - } else { - var icon = i.querySelector("svg"); - icon.remove(); - i.insertAdjacentHTML("afterbegin", 'alert-decagram-outline'); - h.classList.add("expandable"); - h.classList.add("orange"); - h.addEventListener("click", () => { - h.classList.toggle("expanded"); - }); - var t = document.createElement("table"); - var thr = document.createElement("tr"); - var thl = document.createElement("th"); - var thc = document.createElement("th"); - var thm = document.createElement("th"); - thl.append("Zeile"); - thc.append("Spalte"); - thm.append("Fehler"); - thr.append(thl, thc, thm); - t.append(thr); - value.errors.forEach((error) => { - var tr = document.createElement("tr"); - var tdl = document.createElement("td"); - var tdc = document.createElement("td"); - var tdm = document.createElement("td"); - tdl.append(error.line); - tdc.append(error.column); - tdm.append(error.message); - tr.append(tdl, tdc, tdm); - t.append(tr); - }) - a.append(t); - } + const USESubmit = async function (oFormElement, file = null) { + let fd = new FormData(oFormElement); + document.getElementById("ha-filelistbutton").style.pointerEvents = "none"; + document.getElementById("ha-filelistbutton").classList.add("loading"); + await fetch(oFormElement.action, { + method: 'POST', + headers: { + 'RequestVerificationToken': getCookie('RequestVerificationToken') + }, + body: fd + }) + .then(response => response.json()) + .then(json => { + document.getElementById("ha-filelistbutton").classList.remove("loading"); + document.getElementById("ha-filelistbutton").style.pointerEvents = "auto"; + if ("Error" in json) { + document.getElementById("ha-filelistoutput").textContent = json.Error; } - console.log(e, h, i, a); - }); - // let coll = document.getElementsByClassName("ha-managedfile"); - // for (i = 0; i < coll.length; i++) { - // let e = coll[i]; - // if (j[e.id] !== null) { - // if(j[e.id].errors === null) { - // console.log(e.id + " hat keine errors"); - // } else { - // console.log(e.id + " hat errors"); - // } - // } - // } - document.getElementById("ha-scbutton").classList.toggle("hidden"); + else { + location.reload(); + } + }) + .catch((e) => { + document.getElementById("ha-filelistbutton").classList.remove("loading"); + document.getElementById("ha-filelistbutton").style.pointerEvents = "auto"; + document.getElementById("ha-filelistoutput").textContent = e; + }) + } - }) - .catch ((e) => { - console.log(e); - document.getElementById("ha-scbutton").classList.toggle("loading"); - document.getElementById("ha-scbutton").style.pointerEvents = "auto"; - }) -} + const GETSyntaxCheck = async function (oFormElement, file = null) { + document.getElementById("ha-scbutton").style.pointerEvents = "none"; + document.getElementById("ha-scbutton").classList.toggle("loading"); + await fetch(oFormElement.action) + .then(response => response.json()) + .then(j => { + Object.entries(j).forEach(([key, value]) => { + var e = document.getElementById(key); + if (e !== null && !e.classList.contains("red")) { + var h = e.querySelector(".ha-managedfileheader"); + var i = e.querySelector(".ha-filestatusicon"); + var a = e.querySelector(".ha-managedfileannotations"); + if (value.errors === null) { + h.classList.add("green"); + } else { + var icon = i.querySelector("svg"); + icon.remove(); + i.insertAdjacentHTML("afterbegin", 'alert-decagram-outline'); + h.classList.add("expandable"); + h.classList.add("orange"); + h.addEventListener("click", () => { + h.classList.toggle("expanded"); + }); + var t = document.createElement("table"); + var thr = document.createElement("tr"); + var thl = document.createElement("th"); + var thc = document.createElement("th"); + var thm = document.createElement("th"); + thl.append("Zeile"); + thc.append("Spalte"); + thm.append("Fehler"); + thr.append(thl, thc, thm); + t.append(thr); + value.errors.forEach((error) => { + var tr = document.createElement("tr"); + var tdl = document.createElement("td"); + var tdc = document.createElement("td"); + var tdm = document.createElement("td"); + tdl.append(error.line); + tdc.append(error.column); + tdm.append(error.message); + tr.append(tdl, tdc, tdm); + t.append(tr); + }) + a.append(t); + } + } + console.log(e, h, i, a); + }); + document.getElementById("ha-scbutton").classList.toggle("hidden"); -var coll = document.getElementsByClassName("expandable"); + }) + .catch((e) => { + console.log(e); + document.getElementById("ha-scbutton").classList.toggle("loading"); + document.getElementById("ha-scbutton").style.pointerEvents = "auto"; + }) + } -for (i = 0; i < coll.length; i++) { - let element = coll[i] - coll[i].addEventListener("click", () => { - element.classList.toggle("expanded"); - }); -} \ No newline at end of file + var coll = document.getElementsByClassName("expandable"); + for (i = 0; i < coll.length; i++) { + let element = coll[i] + coll[i].addEventListener("click", () => { + element.classList.toggle("expanded"); + }); + } +}; + +startup_filelistform(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/index.js b/HaWeb/wwwroot/js/index.js index fd80d8a..c11c7a8 100644 --- a/HaWeb/wwwroot/js/index.js +++ b/HaWeb/wwwroot/js/index.js @@ -1,91 +1,96 @@ -function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})} +const startup_index = function () { -const ACTIVATEGOTOFILTER = function(filter, button) { - let f = filter.value; - let gotoinfo = document.getElementById("ha-gotoinfo"); + function encode(e) { return e.replace(/[^]/g, function (e) { return "&#" + e.charCodeAt(0) + ";" }) } - if (f === "") { - if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); - button.disabled = true; - return; - } + const ACTIVATEGOTOFILTER = function (filter, button) { + let f = filter.value; + let gotoinfo = document.getElementById("ha-gotoinfo"); - if (typeof AvailableLetters !== 'undefined' && AvailableLetters != null && !AvailableLetters.has(f)) { - if (gotoinfo != null) { - gotoinfo.classList.remove("opacity-0"); - gotoinfo.innerHTML = "Brief Nr. " + encode(f) + " gibt es nicht."; + if (f === "") { + if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); + button.disabled = true; + return; } - button.disabled = true; - return; - } - if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); - button.disabled = false; -} - -const ACTIVATEZHSEARCH = function(volume, page, button) { - let vol = volume.options[volume.selectedIndex].value; - let pg = page.value; - let gotoinfo = document.getElementById("ha-zhsearchinfo"); - - if (pg === "") { - if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); - button.disabled = true; - return; - } - - if (typeof AvailablePages !== 'undefined' && AvailablePages != null && AvailablePages[vol] != null && !(AvailablePages[vol].indexOf(pg) >= 0)) { - if (gotoinfo != null) { - gotoinfo.classList.remove("opacity-0"); - gotoinfo.innerHTML = "ZH Bd. " + encode(vol) + ", S. " + encode(pg) + " gibt es nicht."; + if (typeof AvailableLetters !== 'undefined' && AvailableLetters != null && !AvailableLetters.has(f)) { + if (gotoinfo != null) { + gotoinfo.classList.remove("opacity-0"); + gotoinfo.innerHTML = "Brief Nr. " + encode(f) + " gibt es nicht."; + } + button.disabled = true; + return; } - button.disabled = true; - return; + + if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); + button.disabled = false; } - if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); - button.disabled = false; -} + const ACTIVATEZHSEARCH = function (volume, page, button) { + let vol = volume.options[volume.selectedIndex].value; + let pg = page.value; + let gotoinfo = document.getElementById("ha-zhsearchinfo"); -const SUBMITZHSEARCH = function(volume, page) { - let vol = volume.options[volume.selectedIndex].value; - let pg = page.value; - window.location.href = "/HKB/" + vol + "/" + pg; -} + if (pg === "") { + if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); + button.disabled = true; + return; + } -const ACTIVATESEARCHFILTER = function(filter, button) { - let f = filter.value; - if (f === "") { - button.disabled = true; - return; + if (typeof AvailablePages !== 'undefined' && AvailablePages != null && AvailablePages[vol] != null && !(AvailablePages[vol].indexOf(pg) >= 0)) { + if (gotoinfo != null) { + gotoinfo.classList.remove("opacity-0"); + gotoinfo.innerHTML = "ZH Bd. " + encode(vol) + ", S. " + encode(pg) + " gibt es nicht."; + } + button.disabled = true; + return; + } + + if (gotoinfo != null && !gotoinfo.classList.contains("opacity-0")) gotoinfo.classList.add("opacity-0"); + button.disabled = false; } - 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)); + const SUBMITZHSEARCH = function (volume, page) { + let vol = volume.options[volume.selectedIndex].value; + let pg = page.value; + window.location.href = "/HKB/" + vol + "/" + pg; + } -// 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); -}); + const ACTIVATESEARCHFILTER = function (filter, button) { + let f = filter.value; + if (f === "") { + button.disabled = true; + return; + } + button.disabled = false; + } -// 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)); \ No newline at end of file + // 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)); +}; + +startup_index(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/marginals.js b/HaWeb/wwwroot/js/marginals.js index e0e45ec..e292394 100644 --- a/HaWeb/wwwroot/js/marginals.js +++ b/HaWeb/wwwroot/js/marginals.js @@ -1,190 +1,193 @@ // Script for auto collapsing marginal boxes -const getLineHeight = function (element) { - var temp = document.createElement(element.nodeName), - ret; - temp.setAttribute("class", element.className); - temp.innerHTML = "Üj"; - element.parentNode.appendChild(temp); - ret = temp.getBoundingClientRect().height; - temp.parentNode.removeChild(temp); - return ret; -}; +const startup_marginals = function () { + const getLineHeight = function (element) { + var temp = document.createElement(element.nodeName), + ret; + temp.setAttribute("class", element.className); + temp.innerHTML = "Üj"; + 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 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 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"); + 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.add("ha-close-btn-collapsed-box"); - btn.classList.add("ha-collapsed-box-manually-toggled"); + btn.classList.add("ha-open-btn-collapsed-box"); } else { - collapsebox(element, height); - btn.classList.remove("ha-close-btn-collapsed-box"); - btn.classList.remove("ha-collapsed-box-manually-toggled"); + btn.classList.add("ha-close-btn-collapsed-box"); } - }); - if (hoverfunction) { - let timer = null; - - element.addEventListener("mouseenter", function (ev) { + btn.addEventListener("click", function (ev) { ev.stopPropagation(); - timer = setTimeout(function () { - if (element.classList.contains("ha-collapsed-box")) { - uncollapsebox(element); - btn.classList.add("ha-close-btn-collapsed-box"); - } - }, 80); - }); - - 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") - ) { + if (element.classList.contains("ha-collapsed-box")) { + uncollapsebox(element); + 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"); } }); - } - element.parentNode.insertBefore(btn, element); -}; -const overlappingcollapsebox = function (selector, hoverfunction) { - let boxes = document.querySelectorAll(selector); - let lineheight = 1; + if (hoverfunction) { + let timer = null; - if (boxes.length >= 1) { - lineheight = getLineHeight(boxes[0]); - } + element.addEventListener("mouseenter", function (ev) { + ev.stopPropagation(); + timer = setTimeout(function () { + if (element.classList.contains("ha-collapsed-box")) { + uncollapsebox(element); + btn.classList.add("ha-close-btn-collapsed-box"); + } + }, 80); + }); - 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; + 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"); + } + }); + } + element.parentNode.insertBefore(btn, element); + }; - // 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) + ";"; + 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; + + // 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); + }); + } + } + } + }; + + const marginalboxwidthset = function () { + let lt = document.getElementById("ha-letterbody"); + if (lt !== null) { + let mg = lt.querySelectorAll(".ha-text .ha-marginalbox"); + if (mg.length > 0) { + let ltbcr = lt.getBoundingClientRect(); + let mgbcr = mg[0].getBoundingClientRect(); + let nw = ltbcr.right - mgbcr.left - 20; + + for (let element of mg) { + element.style.width = nw + "px"; } - - requestAnimationFrame(() => { - collapsedboxes.push(element); - collapsebox(element, newlength, lineheight); - addbuttoncaollapsebox(element, newlength, hoverfunction); - }); } } } -}; -const marginalboxwidthset = function () { - let lt = document.getElementById("ha-letterbody"); - if (lt !== null) { - let mg = lt.querySelectorAll(".ha-text .ha-marginalbox"); - if (mg.length > 0) { - let ltbcr = lt.getBoundingClientRect(); - let mgbcr = mg[0].getBoundingClientRect(); - let nw = ltbcr.right - mgbcr.left - 20; + 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); + }; - for (let element of mg) { - element.style.width = nw + "px"; - } - } + var collapsedboxes = []; + + const clearcollapsedboxes = function () { + var elements = document.querySelectorAll(".ha-text .ha-marginalbox"); + elements.forEach(element => { + element.removeAttribute("style"); + }); + collapsedboxes.forEach(element => { + element.classList.remove("ha-expanded-box"); + element.classList.remove("ha-collapsed-box"); + element.outerHTML = element.outerHTML; + }); + collapsedboxes = []; + var elements = document.querySelectorAll(".ha-btn-collapsed-box"); + elements.forEach(element => { + element.remove(); + }); + } + + const resetall = function () { + clearcollapsedboxes(); + marginalboxwidthset(); + collapseboxes(); } -} - -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); -}; - -var collapsedboxes = []; - -const clearcollapsedboxes = function () { - var elements = document.querySelectorAll(".ha-text .ha-marginalbox"); - elements.forEach(element => { - element.removeAttribute("style"); - }); - collapsedboxes.forEach(element => { - element.classList.remove("ha-expanded-box"); - element.classList.remove("ha-collapsed-box"); - element.outerHTML = element.outerHTML; - }); - collapsedboxes = []; - var elements = document.querySelectorAll(".ha-btn-collapsed-box"); - elements.forEach(element => { - element.remove(); - }); -} - -const resetall = function() { - clearcollapsedboxes(); marginalboxwidthset(); collapseboxes(); -} -marginalboxwidthset(); -collapseboxes(); + var doit; + this.window.addEventListener("resize", function () { + this.clearTimeout(doit); + doit = this.setTimeout(resetall, 17); + }); +}; -var doit; -this.window.addEventListener("resize", function () { - this.clearTimeout(doit); - doit = this.setTimeout(resetall, 17); -}); +startup_marginals(); diff --git a/HaWeb/wwwroot/js/mobilemenu.js b/HaWeb/wwwroot/js/mobilemenu.js index 9c58fe5..311017e 100644 --- a/HaWeb/wwwroot/js/mobilemenu.js +++ b/HaWeb/wwwroot/js/mobilemenu.js @@ -1,31 +1,35 @@ // 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 startup_mobilemenu = function () { + 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); + } }; -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); -} +startup_mobilemenu(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/publishform.js b/HaWeb/wwwroot/js/publishform.js index 1308152..6857477 100644 --- a/HaWeb/wwwroot/js/publishform.js +++ b/HaWeb/wwwroot/js/publishform.js @@ -1,14 +1,16 @@ -const LOCALPUBLISHSubmit = async function (oFormElement) { +const startup_publishform = function () { + + 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') - } - }) + method: 'POST', + headers: { + 'RequestVerificationToken': getCookie('RequestVerificationToken') + } + }) .then(response => response.json()) .then(json => { if ("Error" in json) { @@ -24,14 +26,16 @@ const LOCALPUBLISHSubmit = async function (oFormElement) { location.reload(); } }) - .catch ((e) => { + .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)); - \ No newline at end of file + var publishelement = document.getElementById("ha-publishform"); + var publishbutton = document.getElementById("ha-publishfilelabel"); + publishbutton.addEventListener("click", () => LOCALPUBLISHSubmit(publishelement)); +}; + +startup_publishform(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/scrollbutton.js b/HaWeb/wwwroot/js/scrollbutton.js index 3921476..7f53abe 100644 --- a/HaWeb/wwwroot/js/scrollbutton.js +++ b/HaWeb/wwwroot/js/scrollbutton.js @@ -1,26 +1,31 @@ -// 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"; +const startup_scrollbutton = function () { + + // 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 - }) - // TODO: workaround, bc window does not recieve scroll events anymore - setInterval(() => scrollFunction(), 1500); -} + // 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 + }) + // TODO: workaround, bc window does not recieve scroll events anymore + setInterval(() => scrollFunction(), 1500); + } +}; + +startup_scrollbutton(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/search.js b/HaWeb/wwwroot/js/search.js index b1c390c..475579f 100644 --- a/HaWeb/wwwroot/js/search.js +++ b/HaWeb/wwwroot/js/search.js @@ -1,14 +1,19 @@ -const ACTIVATESEARCHFILTER = function(filter, button) { - let f = filter.value; - if (f === "") { - button.disabled = true; - return; +const startup_search = function () { + + const ACTIVATESEARCHFILTER = function (filter, button) { + let f = filter.value; + if (f === "") { + button.disabled = true; + return; + } + button.disabled = false; } - 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)); } -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)); +startup_search(); diff --git a/HaWeb/wwwroot/js/theme.js b/HaWeb/wwwroot/js/theme.js index 7b89468..0df7e70 100644 --- a/HaWeb/wwwroot/js/theme.js +++ b/HaWeb/wwwroot/js/theme.js @@ -1,30 +1,35 @@ // Functions for switching theme -const go_to_dark = function () { - localStorage.setItem("theme", "ha-toggledark"); - document.documentElement.classList.add("dark"); +const startup_theme = function () { + + 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"); }; -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"); +startup_theme(); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/uploadform.js b/HaWeb/wwwroot/js/uploadform.js deleted file mode 100644 index 865fa67..0000000 --- a/HaWeb/wwwroot/js/uploadform.js +++ /dev/null @@ -1,73 +0,0 @@ -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)); \ No newline at end of file diff --git a/HaWeb/wwwroot/js/websocket.js b/HaWeb/wwwroot/js/websocket.js index 34b884a..a76a082 100644 --- a/HaWeb/wwwroot/js/websocket.js +++ b/HaWeb/wwwroot/js/websocket.js @@ -1,165 +1,150 @@ -var stateSC = null; -var stateValidation = null; -var stateReload = null; -var stateCommit = null; -var statePing = false; -var firstMessage = true; -var commsLog = document.getElementById("commsLog"); -var commsNot = document.getElementById("comm-notifications"); -var socket; - -var scheme = document.location.protocol === "https:" ? "wss" : "ws"; -var port = document.location.port ? (":" + document.location.port) : ""; -var wsPingInterval; -var connectionUrl = scheme + "://" + document.location.hostname + port + "/WS" ; - -function htmlEscape(str) { - return str.toString() - .replace(/&/g, '&') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(//g, '>'); -} +// Functions for change notifications and automatic reload via websockets +const startup_websocket = function () { + function htmlEscape(str) { + return str.toString() + .replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); + } -socket = new WebSocket(connectionUrl); -socket.onopen = function (event) { - socket.send("Hello"); - wsPingInterval = setInterval(() => { - socket.send("Ping"); - }, 30000); - updateMessage(); -}; -socket.onclose = function (event) { - clearInterval(wsPingInterval); - updateMessage(); -}; -socket.onerror = updateMessage; -socket.onmessage = function (event) { - 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"); - commsNot.classList.remove("green"); - if (!commsNot.classList.contains("red")) { - commsNot.classList.add("red"); - } - updateMessage(); - break; - case 1: - if (!commsNot.classList.contains("loading")) { - commsNot.classList.add("loading"); - } - updateMessage(); - break; - case 2: - commsNot.classList.remove("red"); - commsNot.classList.remove("loading"); - if (!commsNot.classList.contains("green")) { - commsNot.classList.add("green"); - } - updateMessage(); - break; - } - } else if (msg.Commit != null) { - stateCommit = msg; + var stateSC = null; + var stateValidation = null; + var stateReload = null; + var stateCommit = null; + var statePing = false; + var firstMessage = true; + var commsLog = document.getElementById("commsLog"); + var commsNot = document.getElementById("comm-notifications"); + var socket; + + var scheme = document.location.protocol === "https:" ? "wss" : "ws"; + var port = document.location.port ? (":" + document.location.port) : ""; + var wsPingInterval; + var connectionUrl = scheme + "://" + document.location.hostname + port + "/WS"; + + socket = new WebSocket(connectionUrl); + socket.onopen = function (event) { + socket.send("Hello"); + wsPingInterval = setInterval(() => { + socket.send("Ping"); + }, 30000); updateMessage(); - } else if (msg.reload != null) { - stateReload = msg.reload; - if (msg.reload) { - commsLog.innerHTML = 'Seite wird neu geladen.'; - commsNot.classList.add("imp"); - setTimeout(() => { - commsNot.remove(); - socket.close(1000, "bye"); - location.reload(); - }, 2000); + }; + socket.onclose = function (event) { + clearInterval(wsPingInterval); + updateMessage(); + }; + socket.onerror = updateMessage; + socket.onmessage = function (event) { + 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"); + commsNot.classList.remove("green"); + if (!commsNot.classList.contains("red")) { + commsNot.classList.add("red"); + } + updateMessage(); + break; + case 1: + if (!commsNot.classList.contains("loading")) { + commsNot.classList.add("loading"); + } + updateMessage(); + break; + case 2: + commsNot.classList.remove("red"); + commsNot.classList.remove("loading"); + if (!commsNot.classList.contains("green")) { + commsNot.classList.add("green"); + } + updateMessage(); + break; + } + } else if (msg.Commit != null) { + stateCommit = msg; + updateMessage(); + } else if (msg.reload != null) { + stateReload = msg.reload; + if (msg.reload) { + commsLog.innerHTML = 'Seite wird neu geladen.'; + commsNot.classList.add("imp"); + setTimeout(() => { + commsNot.remove(); + socket.close(1000, "bye"); + location.reload(); + }, 2000); + } + } else if (msg.SC != null) { + stateSC = msg.SC; + } else if (msg.Ping != null) { + statePing = true; + } else { + commsLog.innerHTML = htmlEscape(event.data); + } + + }; + + function updateMessage() { + function disable() { + commsNot.classList.remove("red"); + commsNot.classList.remove("loading"); + commsNot.classList.remove("green"); + } + function enable() { + + } + + if (!socket) { + disable(); + } else { + switch (socket.readyState) { + case WebSocket.CLOSED: + commsLog.innerHTML = "Keine Verbindung"; + disable(); + break; + case WebSocket.CLOSING: + commsLog.innerHTML = "Verbindung wird geschlossen..."; + disable(); + break; + case WebSocket.CONNECTING: + commsLog.innerHTML = "Verbinden..."; + disable(); + break; + case WebSocket.OPEN: + commsLog.innerHTML = ""; + // TODO: decide on state what the message is + if (stateValidation == 0) { + commsLog.innerHTML = 'Der angezeigte Stand ist nicht aktuell. ' + + 'Fehler beheben'; + if (!firstMessage) commsNot.classList.add("imp"); + } else if (stateValidation == 1) { + commsLog.innerHTML = "Der Server arbeitet..."; + } else { + if (stateCommit != null) { + commsLog.innerHTML = "commit " + + stateCommit.Commit.substring(0, 7) + + " geladen" + } else { + commsLog.innerHTML = "OK."; + } + } + firstMessage = false; + enable(); + break; + default: + commsLog.innerHTML = "Unknown WebSocket State: " + htmlEscape(socket.readyState); + disable(); + break; + } } - } else if (msg.SC != null) { - stateSC = msg.SC; - } else if (msg.Ping != null) { - statePing = true; - } else { - commsLog.innerHTML = htmlEscape(event.data); } - }; -function updateMessage() { - function disable() { - commsNot.classList.remove("red"); - commsNot.classList.remove("loading"); - commsNot.classList.remove("green"); - } - function enable() { - - } - - if (!socket) { - disable(); - } else { - switch (socket.readyState) { - case WebSocket.CLOSED: - commsLog.innerHTML = "Keine Verbindung"; - disable(); - break; - case WebSocket.CLOSING: - commsLog.innerHTML = "Verbindung wird geschlossen..."; - disable(); - break; - case WebSocket.CONNECTING: - commsLog.innerHTML = "Verbinden..."; - disable(); - break; - case WebSocket.OPEN: - commsLog.innerHTML = ""; - // TODO: decide on state what the message is - if (stateValidation == 0 ) { - commsLog.innerHTML = 'Der angezeigte Stand ist nicht aktuell. ' + - 'Fehler beheben'; - if (!firstMessage) commsNot.classList.add("imp"); - } else if (stateValidation == 1) { - commsLog.innerHTML = "Der Server arbeitet..."; - } else { - if (stateCommit != null) { - commsLog.innerHTML = "commit " + - stateCommit.Commit.substring(0, 7) + - " geladen" - } else { - commsLog.innerHTML = "OK."; - } - } - firstMessage = false; - enable(); - break; - default: - commsLog.innerHTML = "Unknown WebSocket State: " + htmlEscape(socket.readyState); - disable(); - break; - } - } -} - - // closeButton.onclick = function () { - // if (!socket || socket.readyState !== WebSocket.OPEN) { - // alert("socket not connected"); - // } - // socket.close(1000, "Closing from client"); - // }; - - // sendButton.onclick = function () { - // if (!socket || socket.readyState !== WebSocket.OPEN) { - // alert("socket not connected"); - // } - // var data = sendMessage.value; - // socket.send(data); - // commsLog.innerHTML += '' + - // 'Client' + - // 'Server' + - // '' + htmlEscape(data) + ''; - // }; - +startup_websocket(); \ No newline at end of file