summaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorAaron Parecki <aaron@parecki.com>2016-12-15 13:49:31 -0800
committerAaron Parecki <aaron@parecki.com>2016-12-15 13:49:31 -0800
commit64452d3d6c58cf12abbef83d0e09ca8404fcfcbd (patch)
treec6ec13c1455d139c1df748d2b909ea0f212ad919 /views
parentd3e523b990a7b59bcfb82eae338271e3a2e99899 (diff)
add h-review interface
Diffstat (limited to 'views')
-rw-r--r--views/dashboard.php3
-rw-r--r--views/new-post.php2
-rw-r--r--views/review.php254
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>