add h-review interface

3 files changed, 257 insertions, 2 deletions

diff --git a/views/dashboard.php b/views/dashboard.php
index 385f3c2..59cd41e 100644
--- a/views/dashboard.php
+++ b/views/dashboard.php
@@ -9,6 +9,7 @@
     <li><a href="/favorite">👍</a></li>
     <li><a href="/repost">♺</a></li>
     <li><a href="/itinerary">✈️</a></li>
+    <li><a href="/review">⭐️</a></li>
     <li><a href="/email">✉️</a></li>
   </ul>
 
@@ -17,7 +18,7 @@
 .post-type-icons {
   margin-top: 0;
   list-style-type: none;
-  font-size: 48pt;
+  font-size: 42pt;
 }
 .post-type-icons li {
   float: left;
diff --git a/views/new-post.php b/views/new-post.php
index 748dc0b..21571ec 100644
--- a/views/new-post.php
+++ b/views/new-post.php
@@ -347,7 +347,7 @@ $(function(){
     request.open("POST", "/micropub/multipart");
     request.onreadystatechange = function() {
       if(request.readyState == XMLHttpRequest.DONE) {
-        console.log(request.responseText);
+        // console.log(request.responseText);
         try {
           var response = JSON.parse(request.responseText);
           localforage.removeItem('current-note');
diff --git a/views/review.php b/views/review.php
new file mode 100644
index 0000000..4379747
--- /dev/null
+++ b/views/review.php
@@ -0,0 +1,254 @@
+<div class="narrow">
+  <?= partial('partials/header') ?>
+
+    <div style="clear: both;">
+      <div class="alert alert-success hidden" id="post_success"><strong>Success! Your post should be on your website now!</strong><br><a href="" id="post_href">View your post</a></div>
+      <div class="alert alert-danger hidden" id="post_error"><strong>There was a problem saving your post. 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>
+
+    <form role="form" style="margin-top: 20px;" id="note_form">
+
+      <h2>Item</h2>
+
+      <div class="row">
+        <div class="col-xs-6">
+          <div class="form-group">
+            <label>Name</label>
+            <input type="text" class="form-control" id="item_name" placeholder="" value="">
+          </div>
+        </div>
+        <div class="col-xs-6">
+          <div class="form-group">
+            <label>URL</label>
+            <input type="url" class="form-control" id="item_url" placeholder="" value="">
+          </div>
+        </div>
+      </div>
+
+      <h2>Review</h2>
+
+      <div class="rating-stars">
+        <a href="" data-rating="1"></a><a href="" data-rating="2"></a><a href="" data-rating="3"></a><a href="" data-rating="4"></a><a href="" data-rating="5"></a>
+        <span class="description">It's okay</span>
+      </div>
+
+      <div class="row review-content hidden">
+        <div class="col-xs-12">
+          <div class="form-group">
+            <textarea id="review_content" value="" class="form-control" style="height: 4em;" placeholder="Write your review here"></textarea>          
+            <div id="review-html-note">
+              <input type="checkbox" id="review_is_html" value="1"> Post as HTML
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row review-summary hidden">
+        <div class="col-xs-12">
+          <div class="form-group">
+            <input id="review_summary" value="" class="form-control" placeholder="Review summary">
+          </div>
+        </div>
+      </div>
+
+      <div class="row review-save hidden">
+        <div class="col-xs-12">
+          <div style="float: right; margin-top: 6px;">
+            <button class="btn btn-success" id="btn_post">Post Review</button>
+          </div>
+        </div>
+      </div>
+
+    </form>
+
+</div>
+<style type="text/css">
+.rating-stars {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.rating-stars .description {
+  display: none;
+  font-weight: bold;
+  margin-left: 20px;
+}
+.rating-stars .description.visible {
+  display: inline-block;
+}
+.rating-stars a {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9IiNBN0E5QUMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjMxLjg2Niw2LjYxOCA0MC4wOSwyMy4yODEgNTguNDc5LDI1Ljk1MyA0NS4xNzIsMzguOTIzIDQ4LjMxMyw1Ny4yMzkgMzEuODY2LDQ4LjU5MiAxNS40MTgsNTcuMjM5IDE4LjU2LDM4LjkyMyA1LjI1MywyNS45NTMgMjMuNjQyLDIzLjI4MSAiLz48L3N2Zz4=");
+
+}
+.rating-stars a.hover {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiCiAgIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiM1MUFFQ0QiIHN0cm9rZT0iIzUxQUVDRCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzEuODY2LDYuNjE4IDQwLjA5LDIzLjI4MSA1OC40NzksMjUuOTUzIDQ1LjE3MiwzOC45MjMgNDguMzEzLDU3LjIzOSAzMS44NjYsNDguNTkyIDE1LjQxOCw1Ny4yMzkgMTguNTYsMzguOTIzIDUuMjUzLDI1Ljk1MyAyMy42NDIsMjMuMjgxICIvPjwvc3ZnPgo=");
+}
+.rating-stars a.selected {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkVDMjBGIiBzdHJva2U9IiNGRUMyMEYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjMxLjg2Niw2LjYxOCA0MC4wOSwyMy4yODEgNTguNDc5LDI1Ljk1MyA0NS4xNzIsMzguOTIzIDQ4LjMxMyw1Ny4yMzkgMzEuODY2LDQ4LjU5MiAxNS40MTgsNTcuMjM5IDE4LjU2LDM4LjkyMyA1LjI1MywyNS45NTMgMjMuNjQyLDIzLjI4MSAiLz48L3N2Zz4=");
+}
+
+.review-content {
+  margin-top: 1em;
+}
+#review-html-note {
+  font-size: 12px;
+  text-align: right;
+}
+
+</style>
+<script>
+var selectedRating = 0;
+var userSelectedHTML = null;
+
+function isHTML(str) {
+  var doc = new DOMParser().parseFromString(str, "text/html");
+  return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
+}
+
+function isTouchDevice() {
+  return 'ontouchstart' in document.documentElement;
+}
+
+function setSaveButtonState() {
+  if(selectedRating > 0 && $("#item_name").val() != "" && $("#item_url").val() != "") {
+    $(".review-save").removeClass("hidden");
+  } else {
+    $(".review-save").addClass("hidden");
+  }
+}
+
+$(function(){
+
+  $(".rating-stars a").on("mouseover",function(){
+    // Disable hover effects on touch devices
+    if(isTouchDevice()) { return; }
+
+    $(this).addClass("hover");
+    var to = intval($(this).data("rating"));
+    $(".rating-stars a").removeClass("selected");
+    for(var i=1; i<=to; i++) {
+      $(".rating-stars a[data-rating="+i+"]").addClass("hover").removeClass("selected");
+    }
+    var description;
+    switch(to) {
+      case 1:
+        description = "I hate it"; break;
+      case 2:
+        description = "I don't like it"; break;
+      case 3:
+        description = "It's okay"; break;
+      case 4:
+        description = "I like it"; break;
+      case 5:
+        description = "I love it!"; break;
+    }
+    $(".rating-stars .description").text(description);
+    $(".rating-stars span").addClass("visible");
+  });
+  $(".rating-stars a").on("mouseout",function(){
+    $(this).removeClass("hover");
+  });
+  $(".rating-stars").on("mouseout",function(){
+    $(".rating-stars span").removeClass("visible");
+    $(".rating-stars a").removeClass("hover");
+    if(selectedRating) {
+      for(var i=1; i<=selectedRating; i++) {
+        $(".rating-stars a[data-rating="+i+"]").addClass("selected")
+      }
+    }
+  });
+  $(".rating-stars a").on("click",function(){
+    selectedRating = intval($(this).data("rating"));
+    $(".rating-stars a").removeClass("hover").removeClass("selected");
+    for(var i=1; i<=selectedRating; i++) {
+      $(".rating-stars a[data-rating="+i+"]").addClass("selected")
+    }
+    $(".review-content").removeClass("hidden");
+    setSaveButtonState();
+    return false;
+  });
+
+  $("#review_is_html").on("click", function(){
+    if($(this).attr("checked") == "checked") {
+      userSelectedHTML = 1;
+    } else {
+      userSelectedHTML = -1;
+    }
+  });
+  $("#review_content").on("keyup", function(){
+    if(userSelectedHTML == null) {
+      if(isHTML($(this).val())) {
+        $("#review_is_html").attr("checked", "checked");
+      } else {
+        $("#review_is_html").removeAttr("checked");
+      }
+    }
+    if($(this).val() != "") {
+      $(".review-summary").removeClass("hidden");
+    } else {
+      $(".review-summary").addClass("hidden");
+    }
+
+    var scrollHeight = document.getElementById("review_content").scrollHeight;
+    var currentHeight = parseInt($("#review_content").css("height"));
+    if(Math.abs(scrollHeight - currentHeight) > 20) {
+      $("#review_content").css("height", (scrollHeight+30)+"px");
+    }
+  });
+
+  $("#item_name").on("keyup", setSaveButtonState);
+  $("#item_url").on("keyup", setSaveButtonState);
+
+  $("#btn_post").click(function(){
+    $("#btn_post").addClass("loading disabled").text("Working...");
+
+    var review = {
+      item: [{
+              type: "h-item",
+              properties: {
+                name: [$("#item_name").val()],
+                url: [$("#item_url").val()]
+              }
+            }],
+      rating: [selectedRating],
+    };
+    if($("#review_content").val() != "") {
+      if($("#review_is_html").attr("checked") == "checked") {
+        review["content"] = [{html: $("#review_content").val()}];
+      } else {
+        review["content"] = [$("#review_content").val()];
+      }
+    }
+    if($("#review_summary").val() != "") {
+      review["summary"] = [$("#review_summary").val()];
+    }
+
+    $.post("/micropub/postjson", {
+      data: JSON.stringify({
+        "type": "h-review",
+        "properties": review
+      })
+    }, function(response){
+      $("#btn_post").removeClass("loading disabled").text("Post Review");
+
+      if(response.location != false) {
+        $("#post_success").removeClass('hidden');
+        $("#post_error").addClass('hidden');
+        $("#post_href").attr("href", response.location);
+        $("#note_form").addClass("hidden");
+      } else {
+        $("#post_success").addClass('hidden');
+        $("#post_error").removeClass('hidden');
+      }
+
+    });
+    return false;
+
+  });
+
+});
+</script>