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
9.1 KiB

5 years ago
5 years ago
  1. <div class="narrow">
  2. <?= partial('partials/header') ?>
  3. <div style="clear: both;">
  4. <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>
  5. <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>
  6. </div>
  7. <form role="form" style="margin-top: 20px;" id="note_form">
  8. <h2>Product</h2>
  9. <div class="row">
  10. <div class="col-xs-6">
  11. <div class="form-group">
  12. <label>Name</label>
  13. <input type="text" class="form-control" id="item_name" placeholder="" value="">
  14. </div>
  15. </div>
  16. <div class="col-xs-6">
  17. <div class="form-group">
  18. <label>URL</label>
  19. <input type="url" class="form-control" id="item_url" placeholder="" value="">
  20. </div>
  21. </div>
  22. </div>
  23. <h2>Review</h2>
  24. <div class="rating-stars">
  25. <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>
  26. <span class="description">It's okay</span>
  27. </div>
  28. <div class="row review-content hidden">
  29. <div class="col-xs-12">
  30. <div class="form-group">
  31. <textarea id="review_content" value="" class="form-control" style="height: 4em;" placeholder="Write your review here"></textarea>
  32. <div id="review-html-note">
  33. <input type="checkbox" id="review_is_html" value="1"> Post as HTML
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="row review-summary hidden">
  39. <div class="col-xs-12">
  40. <div class="form-group">
  41. <input id="review_summary" value="" class="form-control" placeholder="Review summary">
  42. </div>
  43. </div>
  44. </div>
  45. <div class="row review-save hidden">
  46. <div class="col-xs-12">
  47. <div style="float: right; margin-top: 6px;">
  48. <button class="btn btn-success" id="btn_post">Post Review</button>
  49. </div>
  50. </div>
  51. </div>
  52. </form>
  53. </div>
  54. <style type="text/css">
  55. .alert {
  56. margin-top: 1em;
  57. }
  58. .rating-stars {
  59. display: flex;
  60. flex-direction: row;
  61. align-items: center;
  62. }
  63. .rating-stars .description {
  64. display: none;
  65. font-weight: bold;
  66. margin-left: 20px;
  67. }
  68. .rating-stars .description.visible {
  69. display: inline-block;
  70. }
  71. .rating-stars a {
  72. display: inline-block;
  73. width: 64px;
  74. height: 64px;
  75. background-repeat: no-repeat;
  76. background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSJub25lIiBzdHJva2U9IiNBN0E5QUMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjMxLjg2Niw2LjYxOCA0MC4wOSwyMy4yODEgNTguNDc5LDI1Ljk1MyA0NS4xNzIsMzguOTIzIDQ4LjMxMyw1Ny4yMzkgMzEuODY2LDQ4LjU5MiAxNS40MTgsNTcuMjM5IDE4LjU2LDM4LjkyMyA1LjI1MywyNS45NTMgMjMuNjQyLDIzLjI4MSAiLz48L3N2Zz4=");
  77. }
  78. .rating-stars a.hover {
  79. background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiCiAgIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiM1MUFFQ0QiIHN0cm9rZT0iIzUxQUVDRCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMzEuODY2LDYuNjE4IDQwLjA5LDIzLjI4MSA1OC40NzksMjUuOTUzIDQ1LjE3MiwzOC45MjMgNDguMzEzLDU3LjIzOSAzMS44NjYsNDguNTkyIDE1LjQxOCw1Ny4yMzkgMTguNTYsMzguOTIzIDUuMjUzLDI1Ljk1MyAyMy42NDIsMjMuMjgxICIvPjwvc3ZnPgo=");
  80. }
  81. .rating-stars a.selected {
  82. background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkVDMjBGIiBzdHJva2U9IiNGRUMyMEYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjMxLjg2Niw2LjYxOCA0MC4wOSwyMy4yODEgNTguNDc5LDI1Ljk1MyA0NS4xNzIsMzguOTIzIDQ4LjMxMyw1Ny4yMzkgMzEuODY2LDQ4LjU5MiAxNS40MTgsNTcuMjM5IDE4LjU2LDM4LjkyMyA1LjI1MywyNS45NTMgMjMuNjQyLDIzLjI4MSAiLz48L3N2Zz4=");
  83. }
  84. .review-content {
  85. margin-top: 1em;
  86. }
  87. #review-html-note {
  88. font-size: 12px;
  89. text-align: right;
  90. }
  91. </style>
  92. <script>
  93. var selectedRating = 0;
  94. var userSelectedHTML = null;
  95. function isHTML(str) {
  96. var doc = new DOMParser().parseFromString(str, "text/html");
  97. return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
  98. }
  99. function isTouchDevice() {
  100. return 'ontouchstart' in document.documentElement;
  101. }
  102. function setSaveButtonState() {
  103. if(selectedRating > 0 && $("#item_name").val() != "" && $("#item_url").val() != "") {
  104. $(".review-save").removeClass("hidden");
  105. } else {
  106. $(".review-save").addClass("hidden");
  107. }
  108. }
  109. $(function(){
  110. $(".rating-stars a").on("mouseover",function(){
  111. // Disable hover effects on touch devices
  112. if(isTouchDevice()) { return; }
  113. $(this).addClass("hover");
  114. var to = intval($(this).data("rating"));
  115. $(".rating-stars a").removeClass("selected");
  116. for(var i=1; i<=to; i++) {
  117. $(".rating-stars a[data-rating="+i+"]").addClass("hover").removeClass("selected");
  118. }
  119. var description;
  120. switch(to) {
  121. case 1:
  122. description = "I hate it"; break;
  123. case 2:
  124. description = "I don't like it"; break;
  125. case 3:
  126. description = "It's okay"; break;
  127. case 4:
  128. description = "I like it"; break;
  129. case 5:
  130. description = "I love it!"; break;
  131. }
  132. $(".rating-stars .description").text(description);
  133. $(".rating-stars span").addClass("visible");
  134. });
  135. $(".rating-stars a").on("mouseout",function(){
  136. $(this).removeClass("hover");
  137. });
  138. $(".rating-stars").on("mouseout",function(){
  139. $(".rating-stars span").removeClass("visible");
  140. $(".rating-stars a").removeClass("hover");
  141. if(selectedRating) {
  142. for(var i=1; i<=selectedRating; i++) {
  143. $(".rating-stars a[data-rating="+i+"]").addClass("selected")
  144. }
  145. }
  146. });
  147. $(".rating-stars a").on("click",function(){
  148. selectedRating = intval($(this).data("rating"));
  149. $(".rating-stars a").removeClass("hover").removeClass("selected");
  150. for(var i=1; i<=selectedRating; i++) {
  151. $(".rating-stars a[data-rating="+i+"]").addClass("selected")
  152. }
  153. $(".review-content").removeClass("hidden");
  154. setSaveButtonState();
  155. return false;
  156. });
  157. $("#review_is_html").on("click", function(){
  158. if($(this).attr("checked") == "checked") {
  159. userSelectedHTML = 1;
  160. } else {
  161. userSelectedHTML = -1;
  162. }
  163. });
  164. $("#review_content").on("keyup", function(){
  165. if(userSelectedHTML == null) {
  166. if(isHTML($(this).val())) {
  167. $("#review_is_html").attr("checked", "checked");
  168. } else {
  169. $("#review_is_html").removeAttr("checked");
  170. }
  171. }
  172. if($(this).val() != "") {
  173. $(".review-summary").removeClass("hidden");
  174. } else {
  175. $(".review-summary").addClass("hidden");
  176. }
  177. var scrollHeight = document.getElementById("review_content").scrollHeight;
  178. var currentHeight = parseInt($("#review_content").css("height"));
  179. if(Math.abs(scrollHeight - currentHeight) > 20) {
  180. $("#review_content").css("height", (scrollHeight+30)+"px");
  181. }
  182. });
  183. $("#item_name").on("keyup", setSaveButtonState);
  184. $("#item_url").on("keyup", setSaveButtonState);
  185. $("#btn_post").click(function(){
  186. $("#btn_post").addClass("loading disabled").text("Working...");
  187. var review = {
  188. item: [{
  189. type: ["h-product"],
  190. properties: {
  191. name: [$("#item_name").val()],
  192. url: [$("#item_url").val()]
  193. }
  194. }],
  195. rating: [selectedRating],
  196. };
  197. if($("#review_content").val() != "") {
  198. if($("#review_is_html").attr("checked") == "checked") {
  199. review["content"] = [{html: $("#review_content").val()}];
  200. } else {
  201. review["content"] = [$("#review_content").val()];
  202. }
  203. }
  204. if($("#review_summary").val() != "") {
  205. review["summary"] = [$("#review_summary").val()];
  206. }
  207. $.post("/micropub/postjson", {
  208. data: JSON.stringify({
  209. "type": ["h-review"],
  210. "properties": review
  211. })
  212. }, function(response){
  213. $("#btn_post").removeClass("loading disabled").text("Post Review");
  214. if(response.location != false) {
  215. $("#post_success").removeClass('hidden');
  216. $("#post_error").addClass('hidden');
  217. $("#post_href").attr("href", response.location);
  218. $("#note_form").addClass("hidden");
  219. } else {
  220. $("#post_success").addClass('hidden');
  221. $("#post_error").removeClass('hidden');
  222. }
  223. });
  224. return false;
  225. });
  226. });
  227. </script>