From 57443a6f92c425a336582486faccfce7a523bc29 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 23:14:56 +0100
Subject: [PATCH] Attempt at autosave
---
assets/js/page_image_detail.js | 46 +++++++++++++++++++++++++++++++---
templates/image_detail.html | 6 ++---
2 files changed, 45 insertions(+), 7 deletions(-)
diff --git a/assets/js/page_image_detail.js b/assets/js/page_image_detail.js
index 1e3093d..139897a 100644
--- a/assets/js/page_image_detail.js
+++ b/assets/js/page_image_detail.js
@@ -1,21 +1,53 @@
+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);
\ No newline at end of file
+fakeDescription.addEventListener("keypress", fakeDescriptionListener);
+
+save.addEventListener("click", (e) => {
+ e.preventDefault();
+
+ doSave();
+});
\ No newline at end of file
diff --git a/templates/image_detail.html b/templates/image_detail.html
index e019d4f..73078b0 100644
--- a/templates/image_detail.html
+++ b/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}}
--
GitLab