better autosave - only once per 5 seconds with guaranteed save when changing notes

static/js/note.js

@@ -11,11 +11,25 @@ let tags = {
 
 let noteChangeDisabled = false;
 
+let isNoteChanged = false;
+
 function noteChanged() {
     if (noteChangeDisabled) {
         return;
     }
 
+    isNoteChanged = true;
+}
+
+function saveNoteIfChanged(callback) {
+    if (!isNoteChanged) {
+        if (callback) {
+            callback();
+        }
+
+        return;
+    }
+
     let note = globalNote;
 
     let contents = $('#noteDetail').summernote('code');
@@ -36,7 +50,13 @@ function noteChanged() {
         data: JSON.stringify(note),
         contentType: "application/json",
         success: function(result) {
+            isNoteChanged = false;
+
             message("Saved!");
+
+            if (callback) {
+                callback();
+            }
         },
         error: function(result) {
             error("Error saving the note!");
@@ -44,6 +64,8 @@ function noteChanged() {
     });
 }
 
+setInterval(saveNoteIfChanged, 5000);
+
 $(document).ready(function() {
     $("#noteTitle").on('input', function() {
         noteChanged();

static/js/tree.js

@@ -39,7 +39,7 @@ $(function(){
                 const node = data.node.data;
                 const noteId = node.is_clone ? node.note_clone_id : node.note_id;
 
-                loadNote(noteId);
+                saveNoteIfChanged(() => loadNote(noteId));
             },
             expand: function(event, data) {
                 setExpanded(data.node.key, true);

static/js/utils.js

@@ -1,7 +1,7 @@
 function message(str) {
-    $("#top-message").show();
+    $("#top-message").fadeIn(1500);
     $("#top-message").html(str);
-    $("#top-message").fadeOut(3000);
+    $("#top-message").fadeOut(1500);
 }
 
 function error(str) {

static/style.css

@@ -6,8 +6,8 @@
 
 #top-message {
     display: none; /* initial state is hidden */
-    background-color: greenyellow;
-    color: green;
+    background-color: #e0e0e0;
+    color: #333;
     padding: 5px;
     border-radius: 10px;
 }