Added darkmode and linecount options

6 files changed, 340 insertions, 15 deletions

diff --git a/.flooignore b/.flooignore
index 1c308a0..83bf421 100644
--- a/.flooignore
+++ b/.flooignore
@@ -40,3 +40,4 @@ hs_err_pid*
 out/
 files/
 .idea
+*.db
diff --git a/src/main/resources/css/darkTheme.css b/src/main/resources/css/darkTheme.css
new file mode 100644
index 0000000..61f2099
--- /dev/null
+++ b/src/main/resources/css/darkTheme.css
@@ -0,0 +1,118 @@
+/*
+ * Derived from einaros's Sons of Obsidian theme at
+ * http://studiostyl.es/schemes/son-of-obsidian by
+ * Alex Ford of CodeTunnel:
+ * http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
+ */
+
+.str {
+    color: #EC7600;
+}
+
+.kwd {
+    color: #93C763;
+}
+
+.com {
+    color: #66747B;
+}
+
+.typ {
+    color: #678CB1;
+}
+
+.lit {
+    color: #FACD22;
+}
+
+.pun {
+    color: #F1F2F3;
+}
+
+.pln {
+    color: #F1F2F3;
+}
+
+.tag {
+    color: #8AC763;
+}
+
+.atn {
+    color: #E0E2E4;
+}
+
+.atv {
+    color: #EC7600;
+}
+
+.dec {
+    color: purple;
+}
+
+pre.prettyprint {
+    border: 0px solid #888;
+}
+
+ol.linenums {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.prettyprint {
+    background: #000;
+}
+
+li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
+    color: #555;
+    list-style-type: decimal;
+}
+
+li.L1, li.L3, li.L5, li.L7, li.L9 {
+    background: #111;
+}
+
+@media print {
+    .str {
+        color: #060;
+    }
+
+    .kwd {
+        color: #006;
+        font-weight: bold;
+    }
+
+    .com {
+        color: #600;
+        font-style: italic;
+    }
+
+    .typ {
+        color: #404;
+        font-weight: bold;
+    }
+
+    .lit {
+        color: #044;
+    }
+
+    .pun {
+        color: #440;
+    }
+
+    .pln {
+        color: #000;
+    }
+
+    .tag {
+        color: #006;
+        font-weight: bold;
+    }
+
+    .atn {
+        color: #404;
+    }
+
+    .atv {
+        color: #060;
+    }
+}
diff --git a/src/main/resources/css/fileview.css b/src/main/resources/css/fileview.css
index 60aa9c9..349980b 100644
--- a/src/main/resources/css/fileview.css
+++ b/src/main/resources/css/fileview.css
@@ -1,4 +1,4 @@
-.preview, .switch {
+.preview, .switch, .settings {
     display: none;
 }
 
diff --git a/src/main/resources/css/lightTheme.css b/src/main/resources/css/lightTheme.css
new file mode 100644
index 0000000..aa4e57f
--- /dev/null
+++ b/src/main/resources/css/lightTheme.css
@@ -0,0 +1,160 @@
+/**
+ * @license
+ * Copyright (C) 2015 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Pretty printing styles. Used with prettify.js. */
+
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln {
+    color: #000
+}
+
+/* plain text */
+
+@media screen {
+    .str {
+        color: #080
+    }
+
+    /* string content */
+    .kwd {
+        color: #008
+    }
+
+    /* a keyword */
+    .com {
+        color: #800
+    }
+
+    /* a comment */
+    .typ {
+        color: #606
+    }
+
+    /* a type name */
+    .lit {
+        color: #066
+    }
+
+    /* a literal value */
+    /* punctuation, lisp open bracket, lisp close bracket */
+    .pun, .opn, .clo {
+        color: #660
+    }
+
+    .tag {
+        color: #008
+    }
+
+    /* a markup tag name */
+    .atn {
+        color: #606
+    }
+
+    /* a markup attribute name */
+    .atv {
+        color: #080
+    }
+
+    /* a markup attribute value */
+    .dec, .var {
+        color: #606
+    }
+
+    /* a declaration; a variable name */
+    .fun {
+        color: red
+    }
+
+    /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+    .str {
+        color: #060
+    }
+
+    .kwd {
+        color: #006;
+        font-weight: bold
+    }
+
+    .com {
+        color: #600;
+        font-style: italic
+    }
+
+    .typ {
+        color: #404;
+        font-weight: bold
+    }
+
+    .lit {
+        color: #044
+    }
+
+    .pun, .opn, .clo {
+        color: #440
+    }
+
+    .tag {
+        color: #006;
+        font-weight: bold
+    }
+
+    .atn {
+        color: #404
+    }
+
+    .atv {
+        color: #060
+    }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint {
+    padding: 2px;
+    border: 1px solid #888
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+    margin-top: 0;
+    margin-bottom: 0
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 {
+    list-style-type: none
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+    background: #eee
+}
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 = "";
         }
     });
 }
diff --git a/src/main/resources/views/fileview.rocker.html b/src/main/resources/views/fileview.rocker.html
index 1029b9b..bef1ad0 100644
--- a/src/main/resources/views/fileview.rocker.html
+++ b/src/main/resources/views/fileview.rocker.html
@@ -12,7 +12,11 @@
 }
 
 @layout.template("File " + filename, css, js) -> {
-<button class="switch" id="switch">Show raw</button>
+<button class="switch" id="raw">Show raw</button>
+<span class="settings" id="settings">
+    <label for="code">Linecount</label><input id="code" type="checkbox">
+    <label for="dark">Dark mode</label><input id="dark" type="checkbox">
+</span>
 <pre class="prettyprint" id="content"><code class="lang-@extension">@content</code></pre>
 <div class="preview" id="preview"></div>
 }