notes

15.7 KB

1. // notes-offline.js — THE NOTES AREA (ticket notes#2): the notes live in the browser (IndexedDB, one database per user)
2. // and are the ones the page shows and edits — online or not. Every change is written to IndexedDB first, then sent
3. // to the server through /api/notes; the server's changes (other devices) are pulled the same way. So the notes
4. // open and edit with no network, and what was changed offline is sent when the network is back.
5. //
6. // local note { id, text, base, at, dirty, fresh, gone, created }
7. // base = the server's `edited` of the version this device last saw (0 = never synced)
8. // at = when the note was last edited (ms; the server's time once synced)
9. // dirty = changed here, not yet sent fresh = made here, no server id yet (id = 'l…', server assigns its own)
10. // gone = deleted here, the delete not yet sent
11. // CONFLICT (a note changed here and on another device): the server keeps the later edit, the other version becomes
12. // a copy — a note of its own — that arrives here in the answer. Nothing is lost.
13. //
14. // The page (components/notes.hl) only carries <note-book id="notesapp">; this file fills it, with the same tags and
15. // ids the old server-rendered version had (styles.hl lays them out). It runs once per document (the shell re-creates
16. // its <script>s when the login state flips); a MutationObserver mounts and unmounts it as #notesapp comes and goes.
17. (() => {
18. if (window.__notesOffline) { window.__notesOffline.check(); return; }
20. const CACHE = 'notes-shell-v1';
21. const OFFLINE = 'Offline — your changes are kept in this browser and sent when you are back online.';
22. const S = { app: null, user: null, db: null, notes: new Map(), sel: null, loaded: false, timer: 0, poll: 0, bc: null, gen: 0, dirtyWait: 0 };
24. // ---- small helpers --------------------------------------------------------------------------------------------
25. const h = (tag, attrs, ...kids) => {
26. const el = document.createElement(tag);
27. for (const k in attrs || {}) { if (k === 'text') el.textContent = attrs[k]; else el.setAttribute(k, attrs[k]); }
28. for (const c of kids) el.append(c);
29. return el;
30. };
31. const $ = (sel) => S.app && S.app.querySelector(sel);
32. const rand = () => 'l' + Array.from(crypto.getRandomValues(new Uint8Array(8)), (b) => b.toString(16).padStart(2, '0')).join('');
33. const subjectOf = (text) => {
34. for (const raw of text.split('\n')) {
35. const line = raw.trim().replace(/^#+/, '').trim();
36. if (line) return line.length > 80 ? line.slice(0, 80) : line;
37. }
38. return 'Untitled note';
39. };
41. // ---- IndexedDB (promises around the one store) ------------------------------------------------------------------
42. const wrap = (req) => new Promise((ok, no) => { req.onsuccess = () => ok(req.result); req.onerror = () => no(req.error); });
43. const openDb = (user) => new Promise((ok, no) => {
44. const r = indexedDB.open('notes-' + user, 1);
45. r.onupgradeneeded = () => r.result.createObjectStore('notes', { keyPath: 'id' });
46. r.onsuccess = () => ok(r.result);
47. r.onerror = () => no(r.error);
48. });
49. const store = (mode) => S.db.transaction('notes', mode).objectStore('notes');
50. const dbAll = () => wrap(store('readonly').getAll());
51. const put = (rec) => { S.notes.set(rec.id, rec); return wrap(store('readwrite').put(rec)); };
52. const drop = (id) => { S.notes.delete(id); return wrap(store('readwrite').delete(id)); };
53. const reload = async () => { S.notes = new Map((await dbAll()).map((r) => [r.id, r])); };
54. const tell = () => { if (S.bc) S.bc.postMessage('changed'); };
56. // ---- the page ---------------------------------------------------------------------------------------------------
57. const alive = () => [...S.notes.values()].filter((r) => !r.gone).sort((a, b) => b.at - a.at);
58. const setState = (text) => { const p = $('#syncstate'); if (p) p.textContent = text; };
59. const setSaveError = (text) => { const p = $('#saveerror'); if (p) p.textContent = text; };
61. function build() {
62. const list = h('note-list', {},
63. h('header', {}, h('h1', { text: 'Notes' }), h('button', { id: 'newnote', type: 'button', text: 'New note' })),
64. h('p', { id: 'syncstate', class: 'muted' }),
65. h('p', { id: 'empty', class: 'empty', text: 'No notes yet.' }),
66. h('ol', { id: 'notes' }));
67. S.app.replaceChildren(list, h('note-reader'));
68. list.querySelector('#newnote').addEventListener('click', createNote);
69. }
71. function paintList() {
72. const rows = alive();
73. const ol = $('#notes');
74. if (!ol) return;
75. $('#empty').hidden = rows.length > 0;
76. ol.replaceChildren(...rows.map((r) => {
77. const a = h('a', { href: '/note/' + r.id, text: subjectOf(r.text) });
78. a.dataset.note = r.id;
79. if (r.id === S.sel) a.className = 'selected';
80. return h('li', {}, a);
81. }));
82. }
84. function paintReader() {
85. const reader = $('note-reader');
86. if (!reader) return;
87. S.app.classList.toggle('open', S.sel != null);
88. const rec = S.sel != null ? S.notes.get(S.sel) : null;
89. if (S.sel == null) return reader.replaceChildren(h('p', { id: 'pick', class: 'empty', text: 'Select a note or create a new one.' }));
90. if (!rec || rec.gone) {
91. if (!S.loaded) return reader.replaceChildren(h('p', { id: 'loading', class: 'empty', text: 'Loading…' }));
92. const a = h('a', { href: '/', text: 'Back to your notes' });
93. a.dataset.note = '';
94. return reader.replaceChildren(h('p', { id: 'missing', class: 'empty' }, 'This note does not exist any more. ', a));
95. }
96. const back = h('a', { class: 'back', href: '/', text: 'All notes' });
97. back.dataset.note = '';
98. const ta = h('textarea', { id: 'notetext', name: 'text', rows: '16' });
99. ta.value = rec.text;
100. ta.addEventListener('input', () => edited(ta.value));
101. const ask = h('p', { id: 'deleteask', class: 'ask' }, 'Delete this note for good? ',
102. h('button', { id: 'deleteyes', type: 'button', class: 'danger', text: 'Delete' }),
103. h('button', { id: 'deleteno', type: 'button', class: 'quiet', text: 'Keep' }));
104. const del = h('button', { id: 'delete', type: 'button', class: 'quiet', text: 'Delete note' });
105. del.addEventListener('click', () => { ask.className = 'ask open'; });
106. ask.querySelector('#deleteno').addEventListener('click', () => { ask.className = 'ask'; });
107. ask.querySelector('#deleteyes').addEventListener('click', () => removeNote(rec.id));
108. reader.replaceChildren(h('note-editor', {}, back, h('md-editor', {}, ta), h('p', { id: 'saveerror', class: 'message' }), h('footer', {}, del, ask)));
109. }
111. // the note open in the editor changed from OUTSIDE (a pull, another tab): show it, unless this tab is typing into it
112. function refreshOpen() {
113. const ta = $('#notetext');
114. const rec = S.sel != null ? S.notes.get(S.sel) : null;
115. if (!ta || !rec || rec.gone) { if (ta || (S.sel != null && !rec)) paintReader(); return; }
116. if (ta.value !== rec.text && !rec.dirty) paintReader();
117. }
119. function select(id) {
120. S.sel = id || null;
121. history.replaceState({}, '', S.sel ? '/note/' + S.sel : '/');
122. paintList();
123. paintReader();
124. }
126. // ---- what the person does ---------------------------------------------------------------------------------------
127. async function createNote() {
128. const t = Date.now();
129. const rec = { id: rand(), text: '', base: 0, at: t, dirty: true, fresh: true, gone: false, created: t };
130. await put(rec);
131. tell();
132. select(rec.id);
133. later();
134. }
136. async function edited(value) {
137. const rec = S.notes.get(S.sel);
138. if (!rec || rec.text === value) return;
139. rec.text = value; rec.at = Date.now(); rec.dirty = true;
140. await put(rec);
141. tell();
142. paintList();
143. later();
144. }
146. async function removeNote(id) {
147. const rec = S.notes.get(id);
148. if (!rec) return;
149. if (rec.fresh) await drop(id);
150. else { rec.gone = true; rec.dirty = true; await put(rec); }
151. tell();
152. select(null);
153. later();
154. }
156. // ---- the sync ---------------------------------------------------------------------------------------------------
157. const later = () => { clearTimeout(S.timer); S.timer = setTimeout(() => sync(), 600); };
158. const api = async (method, path, body) => {
159. const res = await fetch(path, { method, credentials: 'same-origin', cache: 'no-store', headers: body ? { 'Content-Type': 'application/json' } : {}, body: body ? JSON.stringify(body) : undefined });
160. if (res.status === 401) throw Object.assign(new Error('login'), { login: true });
161. const json = await res.json().catch(() => null);
162. if (!res.ok) throw Object.assign(new Error((json && json.error) || 'HTTP ' + res.status), { server: true });
163. return json;
164. };
165. const take = (rec, r) => ({ ...rec, id: r.id, text: r.text, base: r.edited, at: r.edited, dirty: false, fresh: false, gone: false });
167. async function pushOne(rec) {
168. if (rec.gone) {
169. const r = await api('POST', '/api/notes', { op: 'delete', id: rec.id, base: rec.base });
170. if (r.kept) await put(take(rec, r)); // changed elsewhere meanwhile: the note stays
171. else await drop(rec.id);
172. return;
173. }
174. const sent = rec.text;
175. const r = await api('POST', '/api/notes', { op: 'save', id: rec.fresh ? '' : rec.id, local: rec.fresh ? rec.id : '', text: sent, base: rec.base, at: rec.at });
176. const now = S.notes.get(rec.id) || rec;
177. const typedMeanwhile = now.text !== sent;
178. if (r.id !== rec.id) {
179. await drop(rec.id);
180. if (S.sel === rec.id) { S.sel = r.id; history.replaceState({}, '', '/note/' + r.id); }
181. }
182. if (typedMeanwhile) await put({ ...now, id: r.id, base: r.edited, fresh: false, dirty: true });
183. else await put(take(now, r));
184. if (r.copy) await put({ id: r.copy.id, text: r.copy.text, base: r.copy.edited, at: r.copy.edited, dirty: false, fresh: false, gone: false, created: r.copy.edited });
185. }
187. async function pull() {
188. const { notes } = await api('GET', '/api/notes');
189. const seen = new Set();
190. for (const m of notes) {
191. seen.add(m.id);
192. const loc = S.notes.get(m.id);
193. if (m.gone) { if (loc && !loc.dirty) await drop(m.id); continue; }
194. if (loc && (loc.dirty || loc.base === m.edited)) continue;
195. const one = await api('GET', '/api/notes?id=' + encodeURIComponent(m.id)).catch((e) => { if (e.server) return null; throw e; });
196. if (!one) continue;
197. const again = S.notes.get(m.id);
198. if (again && again.dirty) continue; // typed while this was on its way
199. await put({ id: one.id, text: one.text, base: one.edited, at: one.edited, dirty: false, fresh: false, gone: false, created: one.created });
200. }
201. for (const loc of [...S.notes.values()]) if (!loc.fresh && !loc.dirty && !seen.has(loc.id)) await drop(loc.id);
202. }
204. async function syncOnce() {
205. if (!S.db || navigator.onLine === false) throw new Error('offline');
206. try {
207. for (const rec of [...S.notes.values()].filter((r) => r.dirty)) await pushOne(rec);
208. await pull();
209. setState('');
210. } catch (e) {
211. if (e.login) setState('Your login has expired — log in again to sync your notes.');
212. else if (e.server) setState('Could not sync: ' + e.message);
213. else setState(OFFLINE);
214. throw e;
215. }
216. }
218. // one sync at a time across all tabs (Web Locks); a failed one just waits for the next try
219. async function sync() {
220. const gen = S.gen;
221. const run = async () => {
222. try { await syncOnce(); } catch (e) { /* shown in the state line */ }
223. S.loaded = true;
224. if (gen !== S.gen || !S.app) return;
225. tell();
226. paintList();
227. refreshOpen();
228. if (S.sel != null && !S.notes.get(S.sel)) paintReader();
229. };
230. if (navigator.locks) await navigator.locks.request('notes-sync', run); else await run();
231. }
233. // ---- offline pages: the service worker and the copy of the page it keeps ---------------------------------------
234. async function keepShell() {
235. if (!('serviceWorker' in navigator) || !window.caches) return;
236. try {
237. await navigator.serviceWorker.register('/sw.js');
238. await navigator.serviceWorker.ready;
239. const cache = await caches.open(CACHE);
240. const page = await fetch('/', { credentials: 'same-origin', cache: 'no-store' });
241. if (page.ok && !page.redirected) await cache.put('/shell', page);
242. const urls = performance.getEntriesByType('resource').map((e) => e.name).filter((u) => u.startsWith(location.origin) && !u.includes('/api/'));
243. urls.push(location.origin + '/md-editor.js', location.origin + '/notes-offline.js', location.origin + '/login.js');
244. for (const u of new Set(urls)) { if (!(await cache.match(u))) { try { await cache.add(u); } catch (e) { /* not kept */ } } }
245. } catch (e) { /* no service worker here: online use is unchanged */ }
246. }
248. // ---- mount / unmount ----------------------------------------------------------------------------------------------
249. async function whoAmI() {
250. try {
251. const j = await (await fetch('/api/me', { credentials: 'same-origin', cache: 'no-store' })).json();
252. if (j && j.user) { localStorage.setItem('notes.user', j.user); return j.user; }
253. return null; // online, and not logged in
254. } catch (e) { return localStorage.getItem('notes.user'); } // offline: the last user of this browser
255. }
257. async function mount(el) {
258. const gen = ++S.gen;
259. S.app = el; S.loaded = false;
260. const user = await whoAmI();
261. if (gen !== S.gen || S.app !== el) return;
262. if (!user) { el.replaceChildren(h('p', { class: 'muted', text: 'Log in with ident (top right) to see your notes.' })); return; }
263. S.user = user;
264. S.db = await openDb(user);
265. await reload();
266. const m = location.pathname.match(/^\/note\/([^/]+)$/);
267. S.sel = m ? decodeURIComponent(m[1]) : null;
268. build(); paintList(); paintReader();
269. if (window.BroadcastChannel) {
270. S.bc = new BroadcastChannel('notes-' + user);
271. S.bc.onmessage = async () => { await reload(); paintList(); refreshOpen(); };
272. }
273. el.addEventListener('click', (e) => {
274. const a = e.target.closest && e.target.closest('a[data-note]');
275. if (!a || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
276. e.preventDefault(); // claimed: the framework does not navigate
277. select(a.dataset.note);
278. });
279. S.poll = setInterval(() => { if (document.visibilityState === 'visible') sync(); }, 10000);
280. sync();
281. keepShell();
282. }
284. function unmount() {
285. S.gen++;
286. clearInterval(S.poll); clearTimeout(S.timer);
287. if (S.bc) S.bc.close();
288. if (S.db) S.db.close();
289. Object.assign(S, { app: null, db: null, bc: null, user: null, notes: new Map(), sel: null });
290. }
292. function check() {
293. const el = document.getElementById('notesapp');
294. if (el && el !== S.app) { if (S.app) unmount(); mount(el); }
295. else if (!el && S.app) unmount();
296. }
298. window.addEventListener('online', () => sync());
299. document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && S.app) sync(); });
301. // LOG OUT: what is not yet on the server goes first, then this browser forgets the notes (a shared computer)
302. document.addEventListener('click', async (e) => {
303. const b = e.target.closest && e.target.closest('#logout');
304. if (!b || b.__passed || !S.db) return;
305. e.stopImmediatePropagation(); e.preventDefault();
306. let clean = false;
307. try { await syncOnce(); clean = ![...S.notes.values()].some((r) => r.dirty); } catch (err) { /* offline: keep the notes */ }
308. if (clean) {
309. const name = 'notes-' + S.user;
310. const user = S.user;
311. unmount();
312. await new Promise((ok) => { const r = indexedDB.deleteDatabase(name); r.onsuccess = r.onerror = r.onblocked = () => ok(); });
313. localStorage.removeItem('notes.user');
314. if (window.caches) await caches.delete(CACHE);
315. }
316. b.__passed = true; b.click();
317. }, true);
319. window.__notesOffline = { check, sync: () => sync(), state: S };
320. new MutationObserver(check).observe(document.documentElement, { subtree: true, childList: true });
321. check();
322. })();