Added autosave feature to posts/pages

Added a feature to automatically save posts/pages every 60 seconds as a draft to avoid lost work. Includes a notification in the bottom right of the screen. Still needs a bit more work to avoid saving multiple drafts under different file names. Only auto saves for new posts/pages, not edits.
This commit is contained in:
KuJoe 2024-05-18 03:22:31 -04:00
commit 25fee781cf
5 changed files with 292 additions and 2 deletions

View file

@ -35,6 +35,7 @@ $images = image_gallery(null, 1, 40);
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Editor.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Extra.js"></script>
<link rel="stylesheet" href="<?php echo site_url() ?>system/resources/css/jquery-ui.css">
<link rel="stylesheet" href="<?php echo site_url() ?>system/resources/css/autosave.css">
<script>
$( function() {
var availableTags = [
@ -86,7 +87,7 @@ $( function() {
<?php if (isset($error)) { ?>
<div class="error-message"><?php echo $error ?></div>
<?php } ?>
<div class="notice" id="response"></div>
<div class="row">
<div class="wmd-panel" style="width:100%;">
<form method="POST">
@ -177,6 +178,7 @@ $( function() {
<div class="row">
<div class="col-sm-6">
<div>
<input type="hidden" id="pType" name="posttype" value="<?php echo $type; ?>">
<label for="wmd-input"><?php echo i18n('Content');?> <span class="required">*</span></label>
<div id="wmd-button-bar" class="wmd-button-bar"></div>
<textarea id="wmd-input" class="form-control wmd-input <?php if (isset($postContent)) { if (empty($postContent)) { echo 'error'; } } ?>" name="content" cols="20" rows="15"><?php if (isset($postContent)) { echo $postContent;} ?></textarea><br>
@ -311,3 +313,4 @@ $('.img-container').on("click", ".the-img", function(e) {
$('#insertImageDialogURL').val($(e.target).attr('src'));
});
</script>
<script src="<?php echo site_url() ?>system/resources/js/save_draft.js"></script>

View file

@ -8,11 +8,12 @@
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Editor.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Extra.js"></script>
<link rel="stylesheet" href="<?php echo site_url() ?>system/resources/css/jquery-ui.css">
<link rel="stylesheet" href="<?php echo site_url() ?>system/resources/css/autosave.css">
<?php if (isset($error)) { ?>
<div class="error-message"><?php echo $error ?></div>
<?php } ?>
<div class="notice" id="response"></div>
<div class="row">
<div class="wmd-panel" style="width:100%;">
<form method="POST">
@ -40,6 +41,7 @@
<div id="wmd-button-bar" class="wmd-button-bar"></div>
<textarea id="wmd-input" class="form-control wmd-input <?php if (isset($postContent)) {if (empty($postContent)) {echo 'error';}} ?>" name="content" cols="20" rows="10"><?php if (isset($postContent)) {echo $postContent;} ?></textarea>
<br>
<input type="hidden" id="pType" name="posttype" value="<?php echo $type; ?>">
<input type="hidden" name="csrf_token" value="<?php echo get_csrf() ?>">
<?php if ($type == 'is_page') :?>
<input type="submit" name="submit" class="btn btn-primary submit" value="<?php echo i18n('Publish');?>"/> <input type="submit" name="draft" class="btn btn-primary draft" value="<?php echo i18n('Save_as_draft');?>"/>
@ -137,3 +139,4 @@ $('.img-container').on("click", ".the-img", function(e) {
$('#insertImageDialogURL').val($(e.target).attr('src'));
});
</script>
<script src="<?php echo site_url() ?>system/resources/js/save_draft.js"></script>