diff options
-rw-r--r-- | index.html | 5 | ||||
-rw-r--r-- | main.js | 10 | ||||
-rw-r--r-- | style.css | 12 |
3 files changed, 24 insertions, 3 deletions
@@ -21,7 +21,10 @@ <div id="enable-edit" class="material-icons">edit</div> </div> <div id="main"></div> - <div id="unreachable"></div> + <div id="stats"> + <div id="word-count">Word Count: <span></span></div> + <div id="unreachable"></div> + </div> <template id="view-entry"> <a class="edit-btn material-icons">edit</a> @@ -16,6 +16,11 @@ let state = { path: "" }; +const wordCount = () => + document.querySelector("#word-count span").innerText = + data.pages.reduce((a,p) => a + p.body.trim().split(/\s+/).length + + p.choices.reduce((a,c) => a + c[1].trim().split(/\s+/).length, 0), 0); + const db = new Dexie("vanguard-editor"); db.version(1).stores({files:"name"}); db.on("populate", () => db.files.add({name: "main", data})); @@ -23,6 +28,7 @@ if (!/^#[0-9a-z.-]+\.json$/i.test(location.hash)) { db.files.get("main").then(d => { data = d.data; if (!location.hash || /^#\/?$/.test(location.hash)) location.hash = "#/"+data.current; + wordCount(); state.path = renderPath(); setTimeout(() => document.documentElement.scrollTop = document.getElementById("main").lastChild.offsetTop); @@ -54,6 +60,7 @@ document.getElementById("open-file").addEventListener("change", e => { data = JSON.parse(r.result); db.files.put({name:"main",data}); location.hash = "#/"+data.current; + wordCount(); state.path = renderPath(); setTimeout(() => document.documentElement.scrollTop = document.getElementById("main").lastChild.offsetTop); @@ -67,6 +74,7 @@ function loadFile(path) { db.files.put({name:"main",data:(data=d)}); //location.hash = "#/"+data.current; location.hash = "#/"; + wordCount(); state.path = renderPath(); //setTimeout(() => document.documentElement.scrollTop = // document.getElementById("main").lastChild.offsetTop); @@ -264,6 +272,8 @@ window.addEventListener("hashchange", () => { data.paths = newpaths; + wordCount(); + db.files.put({name:"main",data}); } @@ -99,6 +99,7 @@ div.material-icons { html.read-only #open { display: none; } html.read-only #save { display: none; } +html.read-only #stats { display: none; } html.read-only .edit-btn { display: none; } html.read-only #disable-edit { display: none; } html:not(.read-only) #enable-edit { display: none; } @@ -266,8 +267,15 @@ section textarea:focus { content: "◈"; /* ◆ ◇ ◈ */ } +#stats { + padding: 1em; + font-size: 16px; + border-radius: 6px; + border: 1px solid var(--border); + background-color: var(--selbg); +} + #unreachable { - font-size: 14px; - font-style: oblique; + font-weight: 600; color: var(--red); } |