Added darkmode and linecount options

1 files changed, 55 insertions, 13 deletions

diff --git a/src/main/resources/js/fileview.js b/src/main/resources/js/fileview.js
index a9cb5be..b0ceaf5 100644
--- a/src/main/resources/js/fileview.js
+++ b/src/main/resources/js/fileview.js
@@ -1,22 +1,64 @@
+const preview = document.getElementById("preview");
+const content = document.getElementById("content");
+const contentCode = document.querySelector("#content > code");
+
+// buttons
+const raw = document.getElementById("raw");
+const code = document.getElementById("code");
+const dark = document.getElementById("dark");
+const settings = document.getElementById("settings");
+
+const originalContent = content.innerText;
+
 if (extension === "md" || extension === "html") {
     if (extension === "md")
-        document.getElementById("preview").innerHTML = marked(document.getElementById("content").innerText);
+        preview.innerHTML = marked(originalContent);
     else if (extension === "html")
-        document.getElementById("preview").innerHTML = marked(document.getElementById("content").innerText);
+        preview.innerHTML = marked(originalContent);
 
-    document.getElementById("preview").style.display = "block";
-    document.getElementById("switch").style.display = "block";
-    document.getElementById("content").style.display = "none";
+    preview.style.display = "block";
+    raw.style.display = "block";
+    content.style.display = "none";
+
+    raw.addEventListener("click", () => {
+        if (preview.style.display === "block") {
+            raw.innerText = "Show preview";
+            preview.style.display = "none";
+            content.style.display = "block";
+            settings.style.display = "block";
+        } else {
+            raw.innerText = "Show raw";
+            preview.style.display = "block";
+            content.style.display = "none";
+            settings.style.display = "none";
+        }
+    });
+
+    code.addEventListener("change", () => {
+        if (code.checked) {
+            content.classList.remove("prettyprinted");
+            content.innerHTML = "";
+            content.classList.add("linenums");
+            content.innerHTML = originalContent;
+            PR.prettyPrint();
+        } else {
+            content.classList.remove("prettyprinted");
+            content.innerHTML = "";
+            content.classList.remove("linenums");
+            content.innerHTML = originalContent;
+            PR.prettyPrint();
+        }
+    });
 
-    document.getElementById("switch").addEventListener("click", () => {
-        if (document.getElementById("preview").style.display === "block") {
-            document.getElementById("switch").innerText = "Show preview";
-            document.getElementById("preview").style.display = "none";
-            document.getElementById("content").style.display = "block";
+    dark.addEventListener("change", () => {
+        if (dark.checked) {
+            document.getElementsByTagName("head")[0]
+                .insertAdjacentHTML("beforeend", '<link id="darkTheme" href="/css/darkTheme.css" rel="stylesheet" />');
+            document.getElementById("lightTheme").outerHTML = "";
         } else {
-            document.getElementById("switch").innerText = "Show raw";
-            document.getElementById("preview").style.display = "block";
-            document.getElementById("content").style.display = "none";
+            document.getElementsByTagName("head")[0]
+                .insertAdjacentHTML("beforeend", '<link id="lightTheme" href="/css/lightTheme.css" rel="stylesheet" />');
+            document.getElementById("darkTheme").outerHTML = "";
         }
     });
 }