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.
 
 
 
 
 
 

300 lines
7.6 KiB

  1. <div class="comment-view mb-6">
  2. {% if not comment_list %}
  3. <div class="no-comment">
  4. <p class="text-muted small">{{ _("No comments yet. ") }}
  5. <span class="hidden login-required">
  6. <a href="/login?redirect-to={{ pathname }}">{{ _("Login to start a new discussion") }}</a>
  7. </span>
  8. <span class="hidden start-discussion">{{ _("Start a new discussion") }}</span>
  9. </p>
  10. </div>
  11. {% endif %}
  12. {% if not is_communication %}
  13. <div class="add-comment-section mb-5">
  14. <div class="comment-form-wrapper">
  15. <div id="comment-form">
  16. <form class="new-comment">
  17. <fieldset class="new-comment-fields">
  18. <div class="user-details row" style="margin-bottom: 15px; display:none;">
  19. <div class="comment-by col-sm-6 pb-4">
  20. <div class="form-label mb-1">{{ _("Your Name") }}</div>
  21. <input class="form-control comment_by" name="comment_by" type="text">
  22. </div>
  23. <div class="col-sm-6">
  24. <div class="form-label mb-1">{{ _("Email") }}</div>
  25. <input class="form-control comment_email" name="comment_email" type="email">
  26. </div>
  27. </div>
  28. <div class="comment-text-area">
  29. <div class="form-label mb-1">{{ _("Add a comment") }}</div>
  30. <textarea class="form-control" name="comment" rows=5 ></textarea>
  31. <div class="text-muted small mt-1 mb-4">{{ _("Ctrl+Enter to add comment") }}</div>
  32. </div>
  33. <button class="btn btn-sm small" id="submit-comment">{{ _("Comment") }}</button>
  34. </fieldset>
  35. </form>
  36. </div>
  37. </div>
  38. </div>
  39. {% endif %}
  40. <hr class="add-comment-hr my-5">
  41. <div itemscope itemtype="http://schema.org/UserComments" id="comment-list">
  42. <div class="add-comment mb-5">
  43. <div class="timeline-dot"></div>
  44. <button class="btn btn-sm small add-comment-button">{{ _("Add a comment") }}</button>
  45. </div>
  46. <div class="comment-list">
  47. {% for comment in comment_list %}
  48. {% include "templates/includes/comments/comment.html" %}
  49. {% endfor %}
  50. </div>
  51. </div>
  52. </div>
  53. <script>
  54. frappe.ready(function() {
  55. let guest_allowed = parseInt("{{ guest_allowed or 0}}");
  56. let comment_count = "{{ comment_count }}";
  57. let full_name = ""
  58. let user_id = "";
  59. let update_timeline_line_length = function(direction, size) {
  60. if ($('.blog-container').length) {
  61. if (direction == 'top') {
  62. $('.blog-container')[0].style.setProperty('--comment-timeline-top', size);
  63. } else {
  64. let comment_timeline_bottom = $('.comment-list .comment-row:last-child').height() - 10;
  65. $('.blog-container')[0].style.setProperty('--comment-timeline-bottom', comment_timeline_bottom +'px');
  66. }
  67. }
  68. }
  69. let show_comment_box = function() {
  70. $('.comment-form-wrapper').show();
  71. update_timeline_line_length('top', '-20px');
  72. $('.add-comment-hr').hide();
  73. $('.add-comment').hide();
  74. }
  75. let hide_comment_box = function() {
  76. $('.comment-form-wrapper').hide();
  77. update_timeline_line_length('top', '8px');
  78. update_timeline_line_length('bottom');
  79. $('.add-comment-hr').show();
  80. $('.add-comment').show();
  81. }
  82. let $comment_count = $(`
  83. <div class="feedback-item comments">
  84. <span class="comment-icon">${frappe.utils.icon('small-message', 'md')}</span>
  85. <span class="comment-count">${comment_count}</span>
  86. </div>
  87. `);
  88. $('form').keydown(function(event) {
  89. if (event.ctrlKey && event.keyCode === 13) {
  90. $(this).find('#submit-comment').trigger('click');
  91. }
  92. })
  93. if (!frappe.is_user_logged_in()) {
  94. $(".user-details").toggle('hide');
  95. if (guest_allowed) {
  96. $('.start-discussion').removeClass('hidden');
  97. } else {
  98. $(".login-required, .comment-form-wrapper").toggleClass("hidden");
  99. $('.add-comment-button').text('{{ _("Login to comment") }}');
  100. $('.add-comment-button').click(() => {
  101. window.location.href = '/login?redirect-to={{ pathname }}';
  102. });
  103. }
  104. } else {
  105. $('input.comment_by').prop("disabled", true);
  106. $('input.comment_email').prop("disabled", true);
  107. full_name = frappe.get_cookie("full_name");
  108. user_id = frappe.get_cookie("user_id");
  109. if(user_id != "Guest") {
  110. $("[name='comment_email']").val(user_id);
  111. $("[name='comment_by']").val(full_name);
  112. }
  113. $('.start-discussion').removeClass('hidden');
  114. }
  115. $('.blog-feedback').append($comment_count);
  116. $("#comment-form textarea").val("");
  117. update_timeline_line_length('bottom');
  118. let n_comments = $(".comment-row").length;
  119. n_comments ? $(".no_comment").toggle(false) : show_comment_box();
  120. if(n_comments > 50) {
  121. $(".add-comment").toggle(false)
  122. .parent().append("<div class='text-muted'>Comments are closed.</div>")
  123. }
  124. $('.add-comment-button').click(() => {
  125. show_comment_box();
  126. });
  127. $("#submit-comment").click(function() {
  128. var args = {
  129. comment_by: $("[name='comment_by']").val(),
  130. comment_email: $("[name='comment_email']").val(),
  131. comment: $("[name='comment']").val(),
  132. reference_doctype: "{{ reference_doctype or doctype }}",
  133. reference_name: "{{ reference_name or name }}",
  134. comment_type: "Comment",
  135. route: "{{ pathname }}",
  136. }
  137. if(!args.comment_by || !args.comment_email || !args.comment) {
  138. frappe.msgprint('{{ _("All fields are necessary to submit the comment.") }}');
  139. return false;
  140. }
  141. if (args.comment_email!=='Administrator' && !validate_email(args.comment_email)) {
  142. frappe.msgprint('{{ _("Please enter a valid email address.") }}');
  143. return false;
  144. }
  145. if(!args.comment || !args.comment.trim()) {
  146. frappe.msgprint('{{ _("Please add a valid comment.") }}');
  147. return false;
  148. }
  149. frappe.call({
  150. btn: this,
  151. type: "POST",
  152. method: "frappe.templates.includes.comments.comments.add_comment",
  153. args: args,
  154. callback: function(r) {
  155. if(r.exc) {
  156. if(r._server_messages)
  157. frappe.msgprint(r._server_messages);
  158. } else {
  159. if (r.message) {
  160. $(r.message).prependTo(".comment-list");
  161. comment_count = cint(comment_count) + 1;
  162. $('.comment-count').text(comment_count);
  163. }
  164. $(".no-comment").toggle(false);
  165. $("#comment-form textarea").val("");
  166. hide_comment_box();
  167. }
  168. }
  169. })
  170. return false;
  171. });
  172. });
  173. </script>
  174. <style>
  175. .add-comment-button {
  176. margin-left: 35px;
  177. }
  178. .timeline-dot {
  179. width: 16px;
  180. height: 16px;
  181. border-radius: 50%;
  182. position: absolute;
  183. top: 8px;
  184. left: 22px;
  185. background-color: var(--fg-color);
  186. border: 1px solid var(--dark-border-color);
  187. }
  188. .timeline-dot::before {
  189. content: ' ';
  190. background: var(--gray-600);
  191. position: absolute;
  192. top: 5px;
  193. left: 5px;
  194. border-radius: 50%;
  195. height: 4px;
  196. width: 4px;
  197. }
  198. .comment-form-wrapper {
  199. display: none;
  200. }
  201. .login-required {
  202. padding: var(--padding-sm);
  203. border-radius: var(--border-radius-sm);
  204. box-shadow: var(--card-shadow);
  205. }
  206. .new-comment {
  207. display: flex;
  208. padding: var(--padding-lg);
  209. box-shadow: var(--card-shadow);
  210. border-radius: var(--border-radius-md);
  211. background-color: var(--fg-color);
  212. }
  213. .new-comment-fields {
  214. flex: 1;
  215. }
  216. .new-comment .form-label {
  217. font-weight: var(--text-bold);
  218. }
  219. .new-comment .comment-text-area textarea {
  220. resize: none;
  221. }
  222. @media (min-width: 576px) {
  223. .comment-by {
  224. padding-right: 0px !important;
  225. padding-bottom: 0px !important;
  226. }
  227. }
  228. #comment-list {
  229. position: relative;
  230. padding-left: var(--padding-xl);
  231. }
  232. #comment-list::before {
  233. content: " ";
  234. position: absolute;
  235. top: var(--comment-timeline-top);
  236. bottom: var(--comment-timeline-bottom);
  237. border-left: 1px solid var(--dark-border-color);
  238. }
  239. .comment-row {
  240. position: relative;
  241. }
  242. .comment-avatar {
  243. position: absolute;
  244. top: 10px;
  245. left: -17px;
  246. }
  247. .comment-content {
  248. box-shadow: var(--card-shadow);
  249. background-color: var(--fg-color);
  250. border-radius: var(--border-radius-md);
  251. padding: var(--padding-md);
  252. margin-left: 35px;
  253. flex: 1;
  254. }
  255. .comment-content .content p{
  256. margin-bottom: 0px;
  257. }
  258. </style>