on Fri 26 Feb 2021, 13:31 by LGforum
Add an Auto-Save Feature
This is a repost of an old tutorial, which should still work on your forums todayThanks to @Leo for this creative idea back in the day. The idea is while the user is typing a message, saving it periodically, so it can be restored when they move away from the page. so they do not lose their message.
It's simple to add, just put this code into a Javascript file [tip]Found at ACP - Modules - Javascript management[/tip] and tick "In all pages".
- Code:
[panda=js]function LGsave_message() {
('Copyright :copyright: AvacWeb. All Rights Reserved. No distribution without consent.');
//find the textarea and the editor.
let ta = $('#text_editor_textarea'),
sc = ta.sceditor('instance');
if(sc.updateOriginal && window.sessionStorage) {
//this fixes the sceditor so it updates the message field.
sc.updateOriginal();
if(ta[0].value.length > 5) {
sessionStorage.setItem('saved_msg', escape(ta[0].value));
let note = document.createElement('div');
note.id = 'saved_note';
note.innerHTML = 'Your message has been saved automatically.';
document.body.appendChild(note);
setTimeout(() => {
document.body.removeChild(document.getElementById('saved_note'));
}, 3000);
}
}
}
$(function() {
if(document.post && document.post.message && window.sessionStorage) {
let saved_msg = sessionStorage.getItem('saved_msg');
if(saved_msg && saved_msg.length > 0 && confirm('You have a message saved, do you wish to restore it?')) {
saved_msg = unescape(saved_msg);
let ta = $('#text_editor_textarea'),
sc = ta.sceditor('instance');
ta[0].value = saved_msg;
//if the editor has loaded before this script, we need to use its API
if(sc && sc.setSourceEditorValue) {
sc.setSourceEditorValue(saved_msg);
}
}
sessionStorage.removeItem('saved_msg');
setInterval(LGsave_message, 20000);
$(document.post.post).click(() => {
sessionStorage.removeItem('saved_msg')
});
}
});
This will save the message in the text box every 20 seconds. When it does, it will display a small message saying that the message has been saved.
Now to finish it up, we'll add some CSS to style the little message that pops up. Add this to your CSS[tip]Found at ACP - Display - Colors - CSS Stylesheet[/tip]:
- Code:
[panda=css]#saved_note {
background: #EEE;
border: 1px solid #CCC;
bottom: 5px;
color: #555;
padding: 15px 50px;
position: fixed;
right: 10px;
font-size: 1.5em;
z-index: 99999;
}
(You can edit this to your liking, it's very simple styling)
And you're done.
#avacwebtutorial, #officialtutorial, #tutorial