jon
/
Quill
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add h-review interface

pull/64/head
Aaron Parecki 8 years ago
parent
d3e523b990
commit
64452d3d6c
No known key found for this signature in database GPG Key ID: 276C2817346D6056
4 changed files with 269 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      controllers/controllers.php
  2. 3
      views/dashboard.php
  3. 2
      views/new-post.php
  4. 254
      views/review.php

12
controllers/controllers.php
View File

@ -178,6 +178,18 @@ $app->get('/photo', function() use($app) {
} }
}); });
$app->get('/review', function() use($app) {
if($user=require_login($app)) {
$params = $app->request()->params();
$html = render('review', array(
'title' => 'Review',
'authorizing' => false
));
$app->response()->body($html);
}
});
$app->get('/repost', function() use($app) { $app->get('/repost', function() use($app) {
if($user=require_login($app)) { if($user=require_login($app)) {
$params = $app->request()->params(); $params = $app->request()->params();

3
views/dashboard.php
View File

@ -9,6 +9,7 @@
<li><a href="/favorite">👍</a></li> <li><a href="/favorite">👍</a></li>
<li><a href="/repost">♺</a></li> <li><a href="/repost">♺</a></li>
<li><a href="/itinerary">✈️</a></li> <li><a href="/itinerary">✈️</a></li>
<li><a href="/review">⭐️</a></li>
<li><a href="/email">✉️</a></li> <li><a href="/email">✉️</a></li>
</ul> </ul>
@ -17,7 +18,7 @@
.post-type-icons { .post-type-icons {
margin-top: 0; margin-top: 0;
list-style-type: none; list-style-type: none;
font-size: 48pt;
font-size: 42pt;
} }
.post-type-icons li { .post-type-icons li {
float: left; float: left;

2
views/new-post.php
View File

@ -347,7 +347,7 @@ $(function(){
request.open("POST", "/micropub/multipart"); request.open("POST", "/micropub/multipart");
request.onreadystatechange = function() { request.onreadystatechange = function() {
if(request.readyState == XMLHttpRequest.DONE) { if(request.readyState == XMLHttpRequest.DONE) {
console.log(request.responseText);
// console.log(request.responseText);
try { try {
var response = JSON.parse(request.responseText); var response = JSON.parse(request.responseText);
localforage.removeItem('current-note'); localforage.removeItem('current-note');

254
views/review.php
View File

@ -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