Aaron Parecki
8 years ago
No known key found for this signature in database
GPG Key ID: 276C2817346D6056
4 changed files with 269 additions and 2 deletions
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue