grav-plugin-comments/templates/partials/comments.html.twig

126 lines
3.8 KiB
Twig

{% set use_captcha = grav.config.plugins.comments.use_captcha %}
<h3>Add a Comment</h3>
<script>
$(function() {
function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}
$(document).on('click tap', '.js__add-new-comment', function(event) {
event.preventDefault();
var text = $('.js__new-comment-text').val();
var name = $('.js__new-comment-name').val();
var email = $('.js__new-comment-email').val();
var captcha = $('#g-recaptcha-response').val();
if (text.length == 0 || email.length == 0 || name.length == 0) {
$('.alert').html('Please fill all the fields');
$('.alert-container').show();
return;
}
if (!validateEmail(email)) {
$('.alert').html('Please enter a valid email');
$('.alert-container').show();
return;
}
{% if use_captcha %}
if (!captcha) {
$('.alert').html("Error validating the security code");
$('.alert-container').show();
return;
}
{% endif %}
$.ajax({
url: "{{ grav.uri.rootUrl }}/add-comment",
data: {
text: $('.js__new-comment-text').val(),
name: $('.js__new-comment-name').val(),
email: $('.js__new-comment-email').val(),
title: "{{ grav.page.header.title }}",
lang: "{{ grav.language.getActive }}",
path: "{{ grav.uri.path }}",
{% if use_captcha %}recaptchaResponse: captcha{% endif %}
},
type: 'POST'
})
.success(function() {
$('.alert-container').hide();
window.location.reload();
})
.error(function() {
$('.alert').html("Error while posting the comment");
$('.alert-container').show();
});
});
});
</script>
{% if use_captcha %}
<script src="https://www.google.com/recaptcha/api.js?onload=captchaOnloadCallback&render=explicit" async defer></script>
<script>
$(function() {
var captchaOnloadCallback = function captchaOnloadCallback() {
grecaptcha.render('g-recaptcha', {
'sitekey': "{{grav.config.plugins.comments.recatpcha_site_key}}",
'callback': captchaValidatedCallback,
'expired-callback': captchaExpiredCallback
});
}
var captchaValidatedCallback = function captchaValidatedCallback() {
};
var captchaExpiredCallback = function captchaExpiredCallback() {
grecaptcha.reset();
};
});
</script>
{% endif %}
<div class="alert-container" style="display: none">
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p class="alert"></p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</div>
<form>
<textarea class="js__new-comment-text"></textarea>
Name: <input type="text" class="js__new-comment-name" />
Email: <input type="email" class="js__new-comment-email" />
{% if use_captcha %}
<div class="g-recaptcha" id="g-recaptcha"></div>
{% endif %}
<input type="submit" class="js__add-new-comment" />
</form>
{% if grav.twig.comments|length %}
<h3>Comments</h3>
<table>
{% for comment in grav.twig.comments|array_reverse %}
<tr>
<td>
{{comment.text|e}}
<br />
Written on {{comment.date|e}} by {{comment.author|e}}
</td>
</tr>
{% endfor %}
</table>
{% endif %}