mirror of
https://github.com/silverstripe/silverstripe-comments
synced 2024-10-22 11:05:49 +02:00
334 lines
9.1 KiB
JavaScript
Executable File
334 lines
9.1 KiB
JavaScript
Executable File
/**
|
|
* @package comments
|
|
*/
|
|
(function($) {
|
|
$(document).ready(function () {
|
|
|
|
var container = $('.comments-holder-container'),
|
|
commentsHolder = $('.comments-holder'),
|
|
commentsList = $('.comments-list', commentsHolder),
|
|
pagination = $('.comments-pagination'),
|
|
noCommentsYet = $('.no-comments-yet', commentsHolder),
|
|
form = $('form', container),
|
|
previewEl = form.find('#PreviewComment');
|
|
|
|
if (container.length > 0) {
|
|
/**
|
|
* Init
|
|
*/
|
|
previewEl.hide();
|
|
$(':submit[name=action_doPreviewComment]').show();
|
|
|
|
/**
|
|
* Validate
|
|
*/
|
|
form.validate({
|
|
invalidHandler : function(form, validator){
|
|
$('html, body').animate({
|
|
scrollTop: $(validator.errorList[0].element).offset().top - 30
|
|
}, 200);
|
|
},
|
|
showErrors: function(errorMap, errorList) {
|
|
this.defaultShowErrors();
|
|
// hack to add the extra classes we need to the validation message elements
|
|
form.find('span.error').addClass('message required');
|
|
},
|
|
|
|
errorElement: "span",
|
|
errorClass: "error",
|
|
ignore: '.hidden',
|
|
rules: {
|
|
Name : {
|
|
required : true
|
|
},
|
|
Email : {
|
|
required : true,
|
|
email : true
|
|
},
|
|
Comment: {
|
|
required : true
|
|
},
|
|
URL: {
|
|
url : true
|
|
}
|
|
},
|
|
messages: {
|
|
Name : {
|
|
required : form.find('[name="Name"]').data('message-required')
|
|
},
|
|
Email : {
|
|
required : form.find('[name="Email"]').data('message-required'),
|
|
email : form.find('[name="Email"]').data('message-email')
|
|
},
|
|
Comment: {
|
|
required : form.find('[name="Comment"]').data('message-required')
|
|
},
|
|
URL: {
|
|
url : form.find('[name="Comment"]').data('message-url')
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
function applyAjaxButtonClick() {
|
|
form = $('form', container);
|
|
form.submit( function (e) {
|
|
var formbutton = $('#Form_CommentsForm_action_doPostComment');
|
|
formbutton.prop('disabled', true);
|
|
|
|
$.event.trigger({
|
|
type: "onBeforeValidateNewCommentForm",
|
|
});
|
|
|
|
// trigger validation
|
|
if(!form.validate().valid()) {
|
|
formbutton.prop('disabled', false);
|
|
return false;
|
|
}
|
|
|
|
formbutton.html("Posting...");
|
|
|
|
$.event.trigger({
|
|
type: "onBeforeSubmitNewCommentForm",
|
|
});
|
|
|
|
$.ajax({
|
|
type: form.attr('method'),
|
|
url: form.attr('action'),
|
|
data: form.serialize(),
|
|
// accepts:"application/json",
|
|
dataType: 'json',
|
|
success: function (dataj) {
|
|
|
|
if (typeof(dataj.success) === 'undefined') {
|
|
$.event.trigger({
|
|
type: "onAfterServerValidationFailedNewCommentForm",
|
|
commentid: dataj.commentid,
|
|
parentcommentid: dataj.parentcommentid,
|
|
success: dataj.success,
|
|
message: dataj.message,
|
|
formhtml: dataj.html,
|
|
requiresmoderation: dataj.requiresmoderation,
|
|
depth: dataj.depth
|
|
});
|
|
|
|
var message = dataj[0].message;
|
|
var fieldName = dataj[0].fieldName;
|
|
var errormsg='<span for="'+fieldName+'" class="error message">'+message+'</span>';
|
|
var field=$('#'+fieldName);
|
|
|
|
$(errormsg).insertAfter(field);
|
|
|
|
var formbutton = $('#Form_CommentsForm_action_doPostComment');
|
|
formbutton.html("Post");
|
|
formbutton.prop('disabled', false);
|
|
} else {
|
|
|
|
var data = dataj;
|
|
var wrapper = $('#commentFormInnerWrapper');
|
|
wrapper.html(data.html);
|
|
|
|
var msg = $('#commentFormWrapper').find('p.message').first();
|
|
var commentbox = $('#comment-'+data.parentcommentid);
|
|
msg.insertAfter(commentbox);//.parent().parent());
|
|
|
|
var formbutton = $('#Form_CommentsForm_action_doPostComment');
|
|
formbutton.html("Post");
|
|
formbutton.removeAttr('disabled');
|
|
|
|
// click the canel button to reset the comment form
|
|
commentbox.find('li.cancelReplyButton').find('button').click();
|
|
|
|
// remove submitted comment
|
|
$('#Form_CommentsForm_Comment').val('');
|
|
|
|
applyAjaxButtonClick();
|
|
|
|
$.event.trigger({
|
|
type: "onAfterSuccessfulNewComment",
|
|
commentid: data.commentid,
|
|
parentcommentid: data.parentcommentid,
|
|
success: data.success,
|
|
message: data.message,
|
|
formhtml: data.html,
|
|
requiresmoderation: data.requiresmoderation,
|
|
depth: data.depth
|
|
});
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
|
|
applyAjaxButtonClick();
|
|
$.event.trigger({
|
|
type: "commentFormInitliased",
|
|
});
|
|
|
|
/**
|
|
* Preview comment by fetching it from the server via ajax.
|
|
*/
|
|
$(':submit[name=action_doPreviewComment]', form).click(function(e) {
|
|
e.preventDefault();
|
|
|
|
if(!form.validate().valid()) {
|
|
return false;
|
|
}
|
|
|
|
previewEl.show().addClass('loading').find('.middleColumn').html(' ');
|
|
|
|
form.ajaxSubmit({
|
|
success: function(response) {
|
|
var responseEl = $(response);
|
|
if(responseEl.is('form')) {
|
|
// Validation failed, renders form instead of single comment
|
|
form.find(".data-fields").replaceWith(responseEl.find(".data-fields"));
|
|
} else {
|
|
// Default behaviour
|
|
previewEl.removeClass('loading').find('.middleColumn').html(responseEl);
|
|
}
|
|
},
|
|
data: {'action_doPreviewComment': 1}
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Hide outdated preview on form changes
|
|
*/
|
|
$(':input', form).on('change keydown', function() {
|
|
previewEl.removeClass('loading').hide();
|
|
});
|
|
|
|
/**
|
|
* Clicking one of the metalinks performs the operation via ajax
|
|
* this inclues the spam and approve links
|
|
*/
|
|
commentsList.on('click', '.action-links a', function(e) {
|
|
var link = $(this);
|
|
var comment = link.parents('.comment:first');
|
|
|
|
$.event.trigger({
|
|
type: "onBeforeModerationClick",
|
|
});
|
|
|
|
$.ajax({
|
|
url: $(this).attr('href'),
|
|
cache: false,
|
|
success: function(html){
|
|
if(link.hasClass('ham')) {
|
|
// comment has been marked as not spam
|
|
comment.html(html);
|
|
comment.removeClass('spam').hide().fadeIn();
|
|
}
|
|
else if(link.hasClass('approve')) {
|
|
// comment has been approved
|
|
comment.html(html);
|
|
comment.removeClass('unmoderated').hide().fadeIn();
|
|
}
|
|
else if(link.hasClass('delete')) {
|
|
comment.fadeOut(1000, function() {
|
|
comment.remove();
|
|
|
|
if(commentsList.children().length == 0) {
|
|
noCommentsYet.show();
|
|
}
|
|
});
|
|
}
|
|
else if(link.hasClass('spam')) {
|
|
comment.html(html).addClass('spam').hide().fadeIn();
|
|
}
|
|
|
|
$.event.trigger({
|
|
type: "onAfterModerationClick",
|
|
commentNode: comment
|
|
});
|
|
},
|
|
failure: function(html) {
|
|
alert(html)
|
|
}
|
|
});
|
|
|
|
e.preventDefault();
|
|
});
|
|
|
|
/*
|
|
Deal with reply to buttons
|
|
*/
|
|
$(document).on("click",".replyButton button",function(e){
|
|
// get the root node of the comment
|
|
var commentbox = $(this).closest('.comment');
|
|
|
|
commentbox.append($('#CommentsFormContainer'));//.parent().parent());
|
|
$(this).parent().addClass('hidden'); // hide reply button
|
|
|
|
$(this).parent().parent().find('.cancelReplyButton').removeClass('hidden'); // show cancel reply button
|
|
$('.whenReplying').removeClass('hidden');
|
|
$('.newComment').addClass('hidden');
|
|
var parentCommentID = $(this).attr('data-comment-to-reply-to-id');
|
|
$('#Form_CommentsForm_ParentCommentID').val(parentCommentID);
|
|
$.event.trigger({
|
|
type: "replyToCommentButtonClicked",
|
|
commentid: commentbox.attr('data-comment-id')
|
|
});
|
|
});
|
|
|
|
|
|
$(document).on("click",".cancelReplyButton button",function(e){
|
|
$($('#CommentsFormContainer')).insertAfter($('#postYourCommentHeader'));
|
|
$(this).parent().parent().find('.replyButton').removeClass('hidden');
|
|
$(this).parent().addClass('hidden');
|
|
|
|
$('.newComment').removeClass('hidden');
|
|
$('.whenReplying').addClass('hidden');
|
|
var commentid = $('#Form_CommentsForm_ParentCommentID').val();
|
|
$('#Form_CommentsForm_ParentCommentID').val(0);
|
|
e.preventDefault();
|
|
$.event.trigger({
|
|
type: "cancelReplyToCommentButtonClicked",
|
|
commentid: commentid
|
|
});
|
|
return false;
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
* Ajax pagination
|
|
*/
|
|
pagination.find('a').on('click', function(e){
|
|
commentsList.addClass('loading');
|
|
$.event.trigger({
|
|
type: "onBeforeLoadNewPageOfComments",
|
|
page: $(this).html()
|
|
});
|
|
$.ajax({
|
|
url: $(this).attr('href'),
|
|
cache: false,
|
|
success: function(html){
|
|
html = $(html);
|
|
commentsList.hide().html(html.find('.comments-list:first').html()).fadeIn();
|
|
pagination.hide().html(html.find('.comments-pagination:first').html()).fadeIn();
|
|
commentsList.removeClass('loading');
|
|
$('html, body').animate({
|
|
scrollTop: commentsList.offset().top - 30
|
|
}, 200);
|
|
$.event.trigger({
|
|
type: "onAfterLoadNewPageOfComments",
|
|
page: $(e.target).html()
|
|
});
|
|
},
|
|
failure: function(html) {
|
|
alert('Error loading comments');
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
}
|
|
|
|
|
|
});
|
|
})(jQuery);
|