You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
8.9 KiB
257 lines
8.9 KiB
<div class="narrow">
|
|
<?= partial('partials/header') ?>
|
|
|
|
<div style="clear: both;">
|
|
<div class="alert alert-success hidden" id="test_success"><strong>Success! </strong><a href="" id="post_href">View your post</a></div>
|
|
<div class="alert alert-danger hidden" id="test_error"><strong>Something went wrong!</strong><br>Your Micropub endpoint indicated that something went wrong creating the post.</div>
|
|
</div>
|
|
|
|
<form role="form" style="margin-top: 20px;" id="note_form">
|
|
|
|
<h2>Product</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">
|
|
.alert {
|
|
margin-top: 1em;
|
|
}
|
|
.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-product"],
|
|
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>
|