Attempt at autosave

assets/js/page_image_detail.js

+function postData(url, data) {
+    return fetch(url, {
+        body: data,
+        cache: 'no-cache',
+        credentials: 'same-origin',
+        method: 'POST',
+        mode: 'cors',
+        redirect: 'follow'
+    }).then(response => response.json())
+}
+
 const fakeTitle = document.querySelector(".title.fake-input[contenteditable]");
 const fakeDescription = document.querySelector(".description.fake-input[contenteditable]");
 
 const actualTitle = document.querySelector(".update-form input[name=title]");
 const actualDescription = document.querySelector(".update-form input[name=description]");
 
+const save = document.querySelector("#save");
+const updateForm = document.querySelector(".update-form");
+
+let lastTimeOut = null;
+
+const doSave = () => {
+    const data = new FormData(document.forms.namedItem("upload"));
+    save.value = "Saving…";
+    postData(location.href, data).then((json) => {
+        save.value = "Saved";
+    })
+};
+
+const scheduleSave = () => {
+    if (lastTimeOut !== null) {
+        clearTimeout(lastTimeOut);
+    }
+    lastTimeOut = setTimeout(doSave, 300)
+};
+
 const fakeTitleListener = (event) => {
     requestAnimationFrame(() => {
         document.title = event.target.innerText + " | i.k8r";
         actualTitle.value = fakeTitle.innerText;
-    })
+    });
+    scheduleSave();
 
 };
 const fakeDescriptionListener = (event) => {
     requestAnimationFrame(() => {
         actualDescription.value = fakeDescription.innerText;
-    })
-
+    });
+    scheduleSave();
 };
 
 // Insert <br> between lines instead of \n for editing
@@ -32,4 +64,10 @@ fakeTitle.addEventListener("input", fakeTitleListener);
 fakeTitle.addEventListener("keypress", fakeTitleListener);
 
 fakeDescription.addEventListener("input", fakeDescriptionListener);
-fakeDescription.addEventListener("keypress", fakeDescriptionListener);
+fakeDescription.addEventListener("keypress", fakeDescriptionListener);
\ No newline at end of file
+
+save.addEventListener("click", (e) => {
+    e.preventDefault();
+
+    doSave();
+});
\ No newline at end of file

templates/image_detail.html

@@ -20,17 +20,17 @@
     <div class="sidebar">
     {{if .IsMine}}
         <div class="actions">
-            <form class="delete-form" method="post">
+            <form name="delete" class="delete-form" method="post">
                 <input type="hidden" name="action" value="delete">
                 <input type="hidden" name="id" value="{{.Image.Id}}">
                 <input type="submit" value="Delete">
             </form>
-            <form class="update-form" method="post">
+            <form name="upload" class="update-form" method="post">
                 <input type="hidden" name="action" value="update">
                 <input type="hidden" name="id" value="{{.Image.Id}}">
                 <input type="hidden" name="title" value="{{.Image.Title}}">
                 <input type="hidden" name="description" value="{{.Image.Description}}">
-                <input type="submit" value="Save">
+                <input type="submit" id="save" value="Save">
             </form>
         </div>
     {{end}}