Saving the post content using localstorage

If a post is created and the browser window crashes or the Composer window is hard-closed in some other way, all content is lost. Content is now saved temporarily so that it can be displayed again when the browser is restarted.

The content in the localstorage is discarded after 10 minutes after the editor has been exited.

The system now checks whether the editor field is filled. If there are no characters, there is no reload check.
This commit is contained in:
loma-one 2024-09-16 18:22:58 +02:00 committed by GitHub
parent 9a224a8ca9
commit 54370319fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -127,25 +127,9 @@
// Set initial height
textarea.style.height = "auto";
textarea.style.height = (textarea.scrollHeight) + "px";
// Restore saved content
const savedContent = localStorage.getItem(`comment-edit-text-${textarea.id}`);
if (savedContent) {
textarea.value = savedContent;
textarea.style.height = "auto";
textarea.style.height = (textarea.scrollHeight) + "px";
}
});
});
// Auto-save content to localStorage every 5 seconds
setInterval(() => {
var textareas = document.querySelectorAll(".expandable-textarea");
textareas.forEach(function(textarea) {
localStorage.setItem(`comment-edit-text-${textarea.id}`, textarea.value);
});
}, 5000);
function togglePermissions() {
var permissionsSection = document.getElementById('permissions-section');
if (permissionsSection.style.display === 'none' || permissionsSection.style.display === '') {
@ -160,18 +144,75 @@
function setFormSubmitting() {
formSubmitting = true;
// Remove saved content from localStorage when form is submitted
}
document.addEventListener("DOMContentLoaded", function() {
var textareas = document.querySelectorAll(".expandable-textarea");
textareas.forEach(function(textarea) {
// Set initial height and restore saved content
textarea.style.height = "auto";
textarea.style.height = (textarea.scrollHeight) + "px";
const savedContent = localStorage.getItem(`comment-edit-text-${textarea.id}`);
const lastSaved = localStorage.getItem(`last-saved-${textarea.id}`);
if (savedContent && lastSaved) {
// Check whether 10 minutes have elapsed since the last save
const currentTime = new Date().getTime();
const timeElapsed = currentTime - parseInt(lastSaved, 10);
if (timeElapsed <= 600000) { // 600000 ms = 10 Minuten
textarea.value = savedContent;
textarea.style.height = "auto";
textarea.style.height = (textarea.scrollHeight) + "px";
} else {
// Content is older than 10 minutes, therefore delete
localStorage.removeItem(`comment-edit-text-${textarea.id}`);
localStorage.removeItem(`last-saved-${textarea.id}`);
}
}
});
});
// Auto-save content to localStorage every 5 seconds
setInterval(() => {
var textareas = document.querySelectorAll(".expandable-textarea");
textareas.forEach(function(textarea) {
if (textarea.value.trim() !== "") {
// Saving the content
localStorage.setItem(`comment-edit-text-${textarea.id}`, textarea.value);
// Saving the timestamp of the last save
const currentTime = new Date().getTime();
localStorage.setItem(`last-saved-${textarea.id}`, currentTime.toString());
}
});
}, 5000);
// Remove content saved when submitting the form
function setFormSubmitting() {
formSubmitting = true;
// Removing the content from localStorage
var textareas = document.querySelectorAll(".expandable-textarea");
textareas.forEach(function(textarea) {
localStorage.removeItem(`comment-edit-text-${textarea.id}`);
localStorage.removeItem(`last-saved-${textarea.id}`);
});
}
window.addEventListener("beforeunload", function (event) {
if (!formSubmitting) {
var confirmationMessage = 'Are you sure you want to reload the page? All unsaved changes will be lost.';
event.returnValue = confirmationMessage;
return confirmationMessage;
// Get the value of the text field
var textField = document.getElementById('comment-edit-text-{{$id}}').value.trim();
// Check whether the text field contains at least one character
if (textField.length > 0) {
var confirmationMessage = 'Are you sure you want to reload the page? All unsaved changes will be lost.';
event.returnValue = confirmationMessage;
return confirmationMessage;
}
}
});