add loading indicator to post buttons

fixes #42

5 files changed, 23 insertions, 3 deletions

diff --git a/public/css/style.css b/public/css/style.css
index f9f9ac2..5e6556c 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -197,3 +197,7 @@ body {
   .callout table {
     margin-bottom: 0;
   }
+
+  .notice-pad {
+    margin-top: 20px;
+  }
\ No newline at end of file
diff --git a/views/new-bookmark.php b/views/new-bookmark.php
index 1ac208c..4b4eebb 100644
--- a/views/new-bookmark.php
+++ b/views/new-bookmark.php
@@ -69,11 +69,17 @@ $(function(){
 
   $("#btn_post").click(function(){
 
+    if($("#note_bookmark").val() == "") {
+      return false;
+    }
+
     var syndications = [];
     $("#syndication-container button.btn-info").each(function(i,btn){
       syndications.push($(btn).data('syndicate-to'));
     });
 
+    $("#btn_post").addClass("loading disabled").text("Working...");
+
     $.post("/micropub/post", {
       'bookmark-of': $("#note_bookmark").val(),
       name: $("#note_name").val(),
@@ -86,6 +92,7 @@ $(function(){
         $("#test_success").removeClass('hidden');
         $("#test_error").addClass('hidden');
         $("#post_href").attr("href", response.location);
+        $("#note_form").addClass('hidden');
 
         // $("#note_bookmark").val("");
         // $("#note_content").val("");
@@ -95,6 +102,7 @@ $(function(){
       } else {
         $("#test_success").addClass('hidden');
         $("#test_error").removeClass('hidden');
+        $("#btn_post").removeClass("loading disabled").text("Post");
       }
 
     });
diff --git a/views/new-favorite.php b/views/new-favorite.php
index 3231ab2..9977d69 100644
--- a/views/new-favorite.php
+++ b/views/new-favorite.php
@@ -1,7 +1,7 @@
   <div class="narrow">
     <?= partial('partials/header') ?>
 
-      <div style="clear: both;">
+      <div style="clear: both;" class="notice-pad">
         <div class="alert alert-success hidden" id="test_success"><strong>Success! We found a Location header in the response!</strong><br>Your post should be on your website now!<br><a href="" id="post_href">View your post</a></div>
         <div class="alert alert-danger hidden" id="test_error"><strong>Your endpoint did not return a Location header.</strong><br>See <a href="/creating-a-micropub-endpoint">Creating a Micropub Endpoint</a> for more information.</div>
       </div>
@@ -38,6 +38,7 @@ $(function(){
   }
 
   $("#btn_post").click(function(){
+    $("#btn_post").addClass("loading disabled").text("Working...");
 
     var syndications = [];
     $("#syndication-container button.btn-info").each(function(i,btn){
@@ -61,6 +62,7 @@ $(function(){
       } else {
         $("#test_success").addClass('hidden');
         $("#test_error").removeClass('hidden');
+        $("#btn_post").removeClass("loading disabled").text("Post");
       }
 
     });
diff --git a/views/new-itinerary.php b/views/new-itinerary.php
index 4f07476..f3ef8ff 100644
--- a/views/new-itinerary.php
+++ b/views/new-itinerary.php
@@ -1,7 +1,7 @@
 <div class="narrow">
   <?= partial('partials/header') ?>
 
-    <div style="clear: both;">
+    <div style="clear: both;" class="notice-pad">
       <div class="alert alert-success hidden" id="test_success"><strong>Success! We found a Location header in the response!</strong><br>Your post should be on your website now!<br><a href="" id="post_href">View your post</a></div>
       <div class="alert alert-danger hidden" id="test_error"><strong>Your endpoint did not return a Location header.</strong><br>See <a href="/creating-a-micropub-endpoint">Creating a Micropub Endpoint</a> for more information.</div>
     </div>
@@ -177,6 +177,7 @@ $(function(){
 
     var category = csv_to_array($("#note_category").val());
 
+    $("#btn_post").addClass("loading disabled").text("Working...");
     $.post("/micropub/postjson", {
       data: JSON.stringify({
         "type": "h-entry",
@@ -191,9 +192,11 @@ $(function(){
         $("#test_success").removeClass('hidden');
         $("#test_error").addClass('hidden');
         $("#post_href").attr("href", response.location);
+        $("#note_form").addClass("hidden");
       } else {
         $("#test_success").addClass('hidden');
         $("#test_error").removeClass('hidden');
+        $("#btn_post").removeClass("loading disabled").text("Post");
       }
 
     });
diff --git a/views/new-repost.php b/views/new-repost.php
index 354083b..e67ab93 100644
--- a/views/new-repost.php
+++ b/views/new-repost.php
@@ -1,7 +1,7 @@
   <div class="narrow">
     <?= partial('partials/header') ?>
 
-      <div style="clear: both;">
+      <div style="clear: both;" class="notice-pad">
         <div class="alert alert-success hidden" id="test_success"><strong>Success! We found a Location header in the response!</strong><br>Your post should be on your website now!<br><a href="" id="post_href">View your post</a></div>
         <div class="alert alert-danger hidden" id="test_error"><strong>Your endpoint did not return a Location header.</strong><br>See <a href="/creating-a-micropub-endpoint">Creating a Micropub Endpoint</a> for more information.</div>
       </div>
@@ -27,6 +27,7 @@
 $(function(){
 
   $("#btn_post").click(function(){
+    $("#btn_post").addClass("loading disabled").text("Working...");
 
     $.post("/repost", {
       url: $("#note_url").val()
@@ -37,11 +38,13 @@ $(function(){
         $("#test_success").removeClass('hidden');
         $("#test_error").addClass('hidden');
         $("#post_href").attr("href", response.location);
+        $("#note_form").addClass('hidden');
 
         window.location = response.location;
       } else {
         $("#test_success").addClass('hidden');
         $("#test_error").removeClass('hidden');
+        $("#btn_post").removeClass("loading disabled").text("Post");
       }
 
     });