diff options
-rw-r--r-- | index.html | 2 | ||||
-rw-r--r-- | main.js | 11 | ||||
-rw-r--r-- | style.css | 6 |
3 files changed, 18 insertions, 1 deletions
@@ -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> @@ -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(); }); + }); @@ -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; |