support media endpoint, autosave notes in local storage

* looks for a media endpoint in the micropub config
* if media endpoint is available, both the note interface and the editor will upload files to it instead of posting the photo directly
* the note interface autosaves in-progress notes in localstorage

5 files changed, 101 insertions, 6 deletions

diff --git a/views/auth_start.php b/views/auth_start.php
index 8635f07..93f45e3 100644
--- a/views/auth_start.php
+++ b/views/auth_start.php
@@ -36,7 +36,9 @@
   <p><i>The Micropub endpoint is the URL this app will use to post new photos.</i></p>
 
   <?php if($this->micropubEndpoint): ?>
-    <div class="bs-callout bs-callout-success">Found your Micropub endpoint: <code><?= $this->micropubEndpoint ?></code></div>
+    <div class="bs-callout bs-callout-success">
+      Found your Micropub endpoint: <code><?= $this->micropubEndpoint ?></code>
+    </div>
   <?php else: ?>
     <div class="bs-callout bs-callout-danger">Could not find your Micropub endpoint!</div>
     <p>You need to set your Micropub endpoint in a <code>&lt;link&gt;</code> tag on your home page.</p>
diff --git a/views/editor.php b/views/editor.php
index 6d235c4..44b2987 100644
--- a/views/editor.php
+++ b/views/editor.php
@@ -30,7 +30,7 @@
     <script src="/editor-files/handlebars.min.js"></script>
     <script src="/editor-files/medium-editor/js/medium-editor.min.js"></script>
     <script src="/editor-files/medium-editor/js/medium-editor-insert-plugin.min.js"></script>
-    <script src="/editor-files/localforage/localforage.js"></script>
+    <script src="/libs/localforage.js"></script>
 
     <link rel="apple-touch-icon" sizes="57x57" href="/images/quill-icon-57.png">
     <link rel="apple-touch-icon" sizes="72x72" href="/images/quill-icon-72.png">
diff --git a/views/layout.php b/views/layout.php
index 03929b1..59025b1 100644
--- a/views/layout.php
+++ b/views/layout.php
@@ -33,6 +33,7 @@
     <meta name="theme-color" content="#428bca">
 
     <script src="/js/jquery-1.7.1.min.js"></script>
+    <script src="/libs/localforage.js"></script>
     <script src="/js/script.js"></script>
     <script src="/js/date.js"></script>
     <script src="/js/cassis.js"></script>
diff --git a/views/new-post.php b/views/new-post.php
index da3927d..18e81d1 100644
--- a/views/new-post.php
+++ b/views/new-post.php
@@ -108,6 +108,12 @@
             <td>micropub endpoint</td>
             <td><code><?= $this->micropub_endpoint ?></code> (should be a URL)</td>
           </tr>
+          <?php if($this->media_endpoint): ?>
+          <tr>
+            <td>media endpoint</td>
+            <td><code><?= $this->media_endpoint ?></code> (should be a URL)</td>
+          </tr>
+          <?php endif; ?>
           <tr>
             <td>access token</td>
             <td>String of length <b><?= strlen($this->micropub_access_token) ?></b><?= (strlen($this->micropub_access_token) > 0) ? (', ending in <code>' . substr($this->micropub_access_token, -7) . '</code>') : '' ?> (should be greater than length 0)</td>
@@ -137,14 +143,93 @@
 </style>
 
 <script>
+function saveNoteState() {
+  var state = {
+    content: $("#note_content").val(),
+    inReplyTo: $("#note_in_reply_to").val(),
+    category: $("#note_category").val(),
+    slug: $("#note_slug").val(),
+    photo: $("#note_photo_url").val()
+  };
+  state.syndications = [];
+  $("#syndication-container button.btn-info").each(function(i,btn){
+    state.syndications[$(btn).data('syndicate-to')] = 'selected';
+  });
+  localforage.setItem('current-note', state);
+}
+
+function restoreNoteState() {
+  localforage.getItem('current-note', function(err,note){
+    if(note) {
+      $("#note_content").val(note.content);
+      $("#note_in_reply_to").val(note.inReplyTo);
+      $("#note_category").val(note.category);
+      $("#note_slug").val(note.slug);
+      if(note.photo) {
+        replacePhotoWithPhotoURL(note.photo);
+      }
+      console.log(note.syndications)
+      $("#syndication-container button").each(function(i,btn){
+        if($(btn).data('syndicate-to') in note.syndications) {
+          $(btn).addClass('btn-info');
+        }
+      });
+      $("#note_content").change();
+    }
+  });  
+}
+
+function replacePhotoWithPhotoURL(url) {
+  $("#note_photo").after('<input type="url" name="note_photo_url" id="note_photo_url" value="" class="form-control">');
+  $("#note_photo_url").val(url);
+  $("#note_photo").remove();  
+  $("#photo_preview").attr("src", url);
+  $("#photo_preview_container").removeClass("hidden");
+}
+
 $(function(){
 
   var userHasSetCategory = false;
 
+  var hasMediaEndpoint = <?= $this->media_endpoint ? 'true' : 'false' ?>;
+
+  $("#note_content, #note_category, #note_in_reply_to, #note_slug").on('keyup change', function(e){
+    saveNoteState();
+  })
+
+  // Preview the photo when one is chosen
   $("#photo_preview_container").addClass("hidden");
   $("#note_photo").on("change", function(e){
-    $("#photo_preview_container").removeClass("hidden");
-    $("#photo_preview").attr("src", URL.createObjectURL(e.target.files[0]) );
+    // If the user has a media endpoint, upload the photo to it right now
+    if(hasMediaEndpoint) {
+      // TODO: add loading state indicator here
+      console.log("Uploading file to media endpoint...");
+      var formData = new FormData();
+      formData.append("null","null");
+      formData.append("photo", e.target.files[0]);
+      var request = new XMLHttpRequest();
+      request.open("POST", "/micropub/media");
+      request.onreadystatechange = function() {
+        if(request.readyState == XMLHttpRequest.DONE) {
+          try {
+            var response = JSON.parse(request.responseText);
+            if(response.location) {
+              // Replace the file upload form with the URL
+              replacePhotoWithPhotoURL(response.location);
+              saveNoteState();
+            } else {
+              console.log("Endpoint did not return a location header", response);
+            }
+          } catch(e) {
+            console.log(e);
+          }
+        }
+      }
+      request.send(formData);
+    } else {
+      $("#photo_preview").attr("src", URL.createObjectURL(e.target.files[0]) );
+      $("#photo_preview_container").removeClass("hidden");
+    }
   });
   $("#remove_photo").on("click", function(){
     $("#note_photo").val("");
@@ -163,7 +248,7 @@ $(function(){
 
     // If the user didn't enter any categories, add them from the post
     if(!userHasSetCategory) {
-      var tags = $("#note_content").val().match(/#[a-z0-9]+/g);
+      var tags = $("#note_content").val().match(/#[a-z][a-z0-9]+/ig);
       if(tags) {
         $("#note_category").val(tags.map(function(tag){ return tag.replace('#',''); }).join(", "));
       }
@@ -223,8 +308,11 @@ $(function(){
       formData.append("slug", v);
     }
 
-    if(document.getElementById("note_photo").files[0]) {
+    // Add either the photo as a file, or the photo URL depending on whether the user has a media endpoint
+    if(document.getElementById("note_photo") && document.getElementById("note_photo").files[0]) {
       formData.append("photo", document.getElementById("note_photo").files[0]);
+    } else if($("#note_photo_url").val()) {
+      formData.append("photo", $("#note_photo_url").val());
     }
 
     // Need to append a placeholder field because if the file size max is hit, $_POST will
@@ -240,6 +328,7 @@ $(function(){
         console.log(request.responseText);
         try {
           var response = JSON.parse(request.responseText);
+          localforage.removeItem('current-note');
           if(response.location) {
             window.location = response.location;
             // console.log(response.location);
@@ -362,6 +451,8 @@ $(function(){
   }
 
   bind_syndication_buttons();
+
+  restoreNoteState();
 });
 
 <?= partial('partials/syndication-js') ?>
diff --git a/views/partials/syndication-js.php b/views/partials/syndication-js.php
index 6267327..cd50c3b 100644
--- a/views/partials/syndication-js.php
+++ b/views/partials/syndication-js.php
@@ -20,6 +20,7 @@ function reload_syndications() {
 function bind_syndication_buttons() {
   $("#syndication-container button").unbind("click").click(function(){
     $(this).toggleClass('btn-info');
+    saveNoteState();
     return false;
   });
 }