aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdam Hovorka <[email protected]>2020-04-26 16:58:12 -0600
committerAdam Hovorka <[email protected]>2020-04-26 16:58:12 -0600
commitea2dc3f10d975977691bf920b72e180635a5912f (patch)
tree0a899d30fc600f9c51a41cfe479aed2f526f27fb
parentfc875923d8cba63a9240f05244db5444fa4c3b55 (diff)
Add "read-only" mode
-rw-r--r--index.html2
-rw-r--r--main.js11
-rw-r--r--style.css6
3 files changed, 18 insertions, 1 deletions
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;