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.

system/admin/views/add-content.html.php

@@ -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>

system/admin/views/add-page.html.php

@@ -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>

system/resources/css/autosave.css

@@ -0,0 +1,16 @@
+.notice {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 10px 20px;
+  background-color: #f0f9ff;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  color: #333;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  display: none;
+}

system/resources/js/save_draft.js

@@ -0,0 +1,57 @@
+const response = document.getElementById("response");
+
+function updateData() {
+  var title = $("#pTitle").val();
+  var url = $("#pURL").val();
+  var content = $("#wmd-input").val();
+  var description = $("#pMeta").val();
+  var tag = $("#pTag").val();
+  var category = $("#pCategory").val();
+  var posttype = $("#pType").val();
+  var pimage = $("#pImage").val();
+  var paudio = $("#pAudio").val();
+  var pvideo = $("#pVideo").val();
+  var pquote = $("#pQuote").val();
+  var plink = $("#pLink").val();
+  var pDate = $("#pDate").val();
+  var pTime = $("#pTime").val();
+  var dateTime = pDate + " " + pTime;
+
+  // Prepare data to send to PHP
+  var data = {
+    title: title,
+    url: url,
+    content: content,
+    description: description,
+    tag: tag,
+    category: category,
+    posttype: posttype,
+    pimage: pimage,
+	paudio: paudio,
+	pvideo: pvideo,
+	pquote: pquote,
+	plink: plink,
+    dateTime: dateTime
+  };
+  
+  $.ajax({
+	url: base_path + 'autosave.php',
+    type: "POST",
+    data: data,
+    success: function(response) {
+      $("#response").html(response);
+	  $("#response").fadeIn(600, function() {
+        $("#response").css("display", "block");
+	  });
+	  setTimeout(function() {
+		$("#response").fadeOut(600, function() {
+          $("#response").css("display", "none");
+        });
+	  }, 3000);
+    }
+  });
+}
+
+$(document).ready(function() {
+  setInterval(updateData, 60000);
+});