synchronous events, updating title works fully

src/public/javascripts/widgets/note_title.js

@@ -2,6 +2,7 @@ import TabAwareWidget from "./tab_aware_widget.js";
 import utils from "../services/utils.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import treeCache from "../services/tree_cache.js";
+import server from "../services/server.js";
 
 const TPL = `
 <div class="note-title-container">
@@ -23,7 +24,61 @@ const TPL = `
     <input autocomplete="off" value="" class="note-title" tabindex="1">
 </div>`;
 
+class SpacedUpdate {
+    constructor(updater, updateInterval = 1000) {
+        this.updater = updater;
+        this.lastUpdated = Date.now();
+        this.changed = false;
+        this.updateInterval = updateInterval;
+    }
+
+    scheduleUpdate() {
+        this.changed = true;
+        setTimeout(() => this.triggerUpdate())
+    }
+
+    async updateNowIfNecessary() {
+        if (this.changed) {
+            this.changed = false;
+            await this.updater();
+        }
+    }
+
+    triggerUpdate() {
+        if (!this.changed) {
+            return;
+        }
+
+        if (Date.now() - this.lastUpdated > this.updateInterval) {
+            this.updater();
+            this.lastUpdated = Date.now();
+            this.changed = false;
+        }
+        else {
+            // update not triggered but changes are still pending so we need to schedule another check
+            this.scheduleUpdate();
+        }
+    }
+}
+
 export default class NoteTitleWidget extends TabAwareWidget {
+    constructor(appContext) {
+        super(appContext);
+
+        this.spacedUpdate = new SpacedUpdate(async () => {
+            const noteId = this.tabContext.note.noteId;
+            const title = this.$noteTitle.val();
+
+            const resp = await server.put(`notes/${noteId}/change-title`, {title});
+
+            // FIXME: minor - does not propagate to other tab contexts with this note though
+            this.tabContext.note.dateModified = resp.dateModified;
+            this.tabContext.note.utcDateModified = resp.utcDateModified;
+
+            this.trigger('noteChangesSaved', {noteId})
+        });
+    }
+
     doRender() {
         this.$widget = $(TPL);
         this.$noteTitle = this.$widget.find(".note-title");
@@ -46,6 +101,8 @@ export default class NoteTitleWidget extends TabAwareWidget {
 
         note.title = this.$noteTitle.val();
 
+        this.spacedUpdate.scheduleUpdate();
+
         const noteFromCache = await treeCache.getNote(note.noteId);
         noteFromCache.title = note.title;
 
@@ -74,4 +131,10 @@ export default class NoteTitleWidget extends TabAwareWidget {
             this.$noteTitle.prop("readonly", true);
         }
     }
+
+    async beforeNoteSwitch({tabId}) {
+        if (this.isTab(tabId)) {
+            await this.spacedUpdate.updateNowIfNecessary();
+        }
+    }
 }