From ea2dc3f10d975977691bf920b72e180635a5912f Mon Sep 17 00:00:00 2001
From: Adam Hovorka <adamhovorka@gmail.com>
Date: Sun, 26 Apr 2020 16:58:12 -0600
Subject: Add "read-only" mode

---
 index.html |  2 ++
 main.js    | 11 ++++++++++-
 style.css  |  6 ++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f6ce0ea..752be1f 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,10 @@
     <div id="toolbar">
       <input type="file" id="open-file" accept=".json,application/json">
       <div id="theme" class="material-icons">brightness_medium</div>
+      <div id="disable-edit" class="material-icons">lock_outline</div>
       <label id="open" for="open-file" class="material-icons">folder_open</label>
       <a id="save" class="material-icons">save_alt</a>
+      <div id="enable-edit" class="material-icons">edit</div>
     </div>
     <div id="main"></div>
     <div id="unreachable"></div>
diff --git a/main.js b/main.js
index cd64ecb..6eccc24 100644
--- a/main.js
+++ b/main.js
@@ -63,6 +63,7 @@ document.getElementById("open-file").addEventListener("change", e => {
 
 function loadFile(path) {
   fetch("./stories/"+path).then(r => r.json()).then(d => {
+    d.readOnly = true;
     db.files.put({name:"main",data:(data=d)});
     //location.hash = "#/"+data.current;
     location.hash = "#/";
@@ -158,6 +159,8 @@ function renderPath() {
   const main = document.getElementById("main");
   const o = main.cloneNode(false);
 
+  document.documentElement.classList[data.readOnly?"add":"remove"]("read-only");
+
   state.addcount = 0;
   if (!path.startsWith("/")) {
     if (/^[0-9]+$/.test(path) && data.pages[+path] &&
@@ -167,7 +170,8 @@ function renderPath() {
     } else path = "";
   } else path = path.slice(1);
   state.editing = path.endsWith("edit");
-  if (state.editing) path = path.slice(0,-5);
+  if (state.editing) { path = path.slice(0,-5);
+    if (data.readOnly) { state.editing = false; location.hash = "#/"+path; }}
   if (!/^[0-9]+(-[0-9]+)*$/.test(path)) path = "";
 
   const pieces = path.split("-");
@@ -292,4 +296,9 @@ document.getElementById("theme").addEventListener("click", () =>
       "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" :
        "=; expires=Thu, 01 Jan 1970 00:00:00 GMT"));
 
+document.getElementById("enable-edit").addEventListener("click", () => {
+  delete data.readOnly; state.path = renderPath(); });
+document.getElementById("disable-edit").addEventListener("click", () => {
+  data.readOnly = true; state.path = renderPath(); });
+
 });
diff --git a/style.css b/style.css
index bba39b5..fe59f89 100644
--- a/style.css
+++ b/style.css
@@ -96,6 +96,12 @@ div.material-icons {
   color: var(--text);
 }
 
+html.read-only #open { display: none; }
+html.read-only #save { display: none; }
+html.read-only .edit-btn { display: none; }
+html.read-only #disable-edit { display: none; }
+html:not(.read-only) #enable-edit { display: none; }
+
 h1 {
   margin-bottom: 12px;
   font-size: 42px;
-- 
cgit v1.2.3-54-g00ecf