mirror of
https://github.com/silverstripe/silverstripe-comments
synced 2024-10-22 11:05:49 +02:00
ENHANCEMENT: started to incorporate the jQuery version of comments
This commit is contained in:
Will Rossiter
parent
008e2c0143
commit
f539a97d07
@ -1,246 +1,130 @@
|
|||||||
/**
|
/**
|
||||||
* Ajax to support the comment posting system
|
* @package userforms
|
||||||
*/
|
*/
|
||||||
|
|
||||||
PageCommentInterface = Class.create();
|
(function($) {
|
||||||
|
$(document).ready(function () {
|
||||||
PageCommentInterface.prototype = {
|
|
||||||
initialize: function() {
|
|
||||||
Behaviour.register({
|
|
||||||
'#PageCommentInterface_Form_PostCommentForm_action_postcomment' : {
|
|
||||||
onclick : this.postComment
|
|
||||||
},
|
|
||||||
|
|
||||||
'#PageComments a.deletelink' : {
|
|
||||||
onclick : this.deleteComment
|
|
||||||
},
|
|
||||||
'#PageComments a.spamlink' : {
|
|
||||||
onclick : this.reportSpam
|
|
||||||
},
|
|
||||||
'#PageComments a.hamlink' : {
|
|
||||||
onclick : this.reportHam
|
|
||||||
},
|
|
||||||
'#PageComments a.approvelink' : {
|
|
||||||
onclick : this.approveComment
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
loadSpamQuestion: function(response) {
|
|
||||||
var spamQuestionDiv = $('Math');
|
|
||||||
var mathLabel = spamQuestionDiv.getElementsByTagName('label')[0];
|
|
||||||
mathLabel.innerHTML = response.responseText;
|
|
||||||
var mathQuestion = spamQuestionDiv.getElementsByTagName('input')[0];
|
|
||||||
mathQuestion.value = '';
|
|
||||||
},
|
|
||||||
|
|
||||||
postComment: function() {
|
|
||||||
var form = $("PageCommentInterface_Form_PostCommentForm");
|
|
||||||
var message = $("PageCommentInterface_Form_PostCommentForm_error");
|
|
||||||
|
|
||||||
if(form.elements.Name.value && form.elements.Comment.value) {
|
|
||||||
if(noComments = $('NoComments')) {
|
|
||||||
Element.remove(noComments);
|
|
||||||
var pageComments = document.createElement('ul');
|
|
||||||
pageComments.id = 'PageComments';
|
|
||||||
$('CommentHolder').appendChild(pageComments);
|
|
||||||
}
|
|
||||||
|
|
||||||
message.style.display = 'none';
|
|
||||||
|
|
||||||
// Create a new <li> for the post
|
// @todo finish
|
||||||
var pageComments = $('PageComments').getElementsByTagName('li');
|
|
||||||
var __newComment = document.createElement('li');
|
|
||||||
|
|
||||||
|
|
||||||
// Add it to the list with a 'loading' message
|
|
||||||
$('PageComments').insertBefore(__newComment, pageComments[0]);
|
|
||||||
__newComment.innerHTML = '<p><img src="cms/images/network-save.gif" /> Loading...</p>';
|
|
||||||
|
|
||||||
|
|
||||||
// Submit the form via ajax
|
|
||||||
Ajax.SubmitForm(form, "action_postcomment", {
|
|
||||||
onSuccess : function(response) {
|
|
||||||
|
|
||||||
// Create an Ajax request to regenerate the spam protection question
|
|
||||||
//need to check if there is actually a spam question to change first
|
|
||||||
if(form.elements.Math){
|
|
||||||
new Ajax.Request(document.getElementsByTagName('base')[0].href+'PageCommentInterface_Controller/newspamquestion', {
|
|
||||||
onSuccess: loadSpamQuestion,
|
|
||||||
onFailure: Ajax.Evaluator
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if(response.responseText != "spamprotectionfailed"){
|
|
||||||
__newComment.className ="even";
|
|
||||||
// Load the response into the new <li>
|
|
||||||
__newComment.innerHTML = response.responseText;
|
|
||||||
Behaviour.apply(__newComment);
|
|
||||||
|
|
||||||
// Flash it using Scriptaculous
|
|
||||||
new Effect.Highlight(__newComment, { endcolor: '#e9e9e9' } );
|
|
||||||
if(response.responseText.match('<b>Spam detected!!</b>')) {
|
|
||||||
__newComment.className = 'spam';
|
|
||||||
}
|
|
||||||
|
|
||||||
}else{
|
|
||||||
__newComment.innerHTML = "";
|
|
||||||
Behaviour.apply(__newComment);
|
|
||||||
message.style.display = '';
|
|
||||||
message.innerHTML = "You got the spam question wrong.";
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
onFailure : function(response) {
|
|
||||||
alert(response.responseText);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
message.style.display = '';
|
|
||||||
message.innerHTML = "Please enter your name and a comment to be posted to the site.";
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ajax handler of moderation removal
|
|
||||||
*/
|
|
||||||
deleteComment: function() {
|
|
||||||
var __comment = this.parentNode.parentNode.parentNode;
|
|
||||||
|
|
||||||
__comment.getElementsByTagName('span')[0].innerHTML = "Removing...";
|
$('.comments-holder-container form').submit(function (e) {
|
||||||
|
|
||||||
new Ajax.Request(this.href + '?ajax=1', {
|
|
||||||
onSuccess : function(response) {
|
|
||||||
// Clear our wee status message
|
|
||||||
__comment.getElementsByTagName('span')[0].innerHTML = "Removing...";
|
|
||||||
|
|
||||||
// Remove it using Scriptaculous
|
if($('.comment-holder form [name=Name]').val() && $('.comment-holder form [name=Comment]').val()) {
|
||||||
new Effect.Highlight(__comment, {
|
// remove the no comments posted text
|
||||||
startcolor: '#cc9999' , endcolor: '#e9e9e9', duration: 0.5,
|
if($('.no-comments-yet').length > 0) {
|
||||||
afterFinish : function () {
|
$('.no-comments-yet').remove();
|
||||||
var commentList = __comment.parentNode;
|
|
||||||
commentList.removeChild(__comment);
|
|
||||||
if(!commentList.firstChild) {
|
|
||||||
$('CommentHolder').innerHTML = "<p id=\"NoComments\">No one has commented on this page yet.</p>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
},
|
|
||||||
|
|
||||||
onFailure : function(response) {
|
|
||||||
alert(response.responseText);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ajax handler of spam reporting
|
|
||||||
*/
|
|
||||||
reportSpam: function() {
|
|
||||||
var __comment = this.parentNode.parentNode.parentNode.parentNode;
|
|
||||||
|
|
||||||
__comment.getElementsByTagName('span')[0].innerHTML = "Reporting spam...";
|
|
||||||
|
|
||||||
|
|
||||||
new Ajax.Request(this.href + '?ajax=1', {
|
|
||||||
onSuccess : function(response) {
|
|
||||||
if(response.responseText != '') {
|
|
||||||
// Load the response into the <li>
|
|
||||||
__comment.innerHTML = response.responseText;
|
|
||||||
Behaviour.apply(__comment);
|
|
||||||
|
|
||||||
// Flash it using Scriptaculous
|
|
||||||
new Effect.Highlight(__comment, { endcolor: '#cc9999' } );
|
|
||||||
|
|
||||||
__comment.className = 'spam';
|
$(this).parents(".comments-holder-container")
|
||||||
} else {
|
.find(".comments-holder")
|
||||||
new Effect.Highlight(__comment, {
|
.append("<ul class='comments-list'></ul>");
|
||||||
startcolor: '#cc9999' , endcolor: '#e9e9e9', duration: 0.5,
|
|
||||||
afterFinish : function() {
|
|
||||||
var commentList = __comment.parentNode;
|
|
||||||
commentList.removeChild(__comment);
|
|
||||||
if(!commentList.firstChild) {
|
|
||||||
$('CommentHolder').innerHTML = "<p id=\"NoComments\">No one has commented on this page yet.</p>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
onFailure : function(response) {
|
|
||||||
alert(response.responseText);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ajax handler of ham reporting
|
|
||||||
*/
|
|
||||||
reportHam: function() {
|
|
||||||
var __comment = this.parentNode.parentNode.parentNode.parentNode;
|
|
||||||
|
|
||||||
__comment.getElementsByTagName('span')[0].innerHTML = "Reporting as not spam...";
|
|
||||||
|
|
||||||
new Ajax.Request(this.href + '?ajax=1', {
|
|
||||||
onSuccess : function(response) {
|
|
||||||
// Load the response into the <li>
|
|
||||||
__comment.innerHTML = response.responseText;
|
|
||||||
Behaviour.apply(__comment);
|
|
||||||
|
|
||||||
// Flash it using Scriptaculous
|
error.hide();
|
||||||
new Effect.Highlight(__comment, { endcolor: '#e9e9e9' } );
|
$('#PageComments').prepend('<li><p><img src="cms/images/network-save.gif" /> Loading...</p></li>');
|
||||||
__comment.className = 'notspam';
|
newComment = $('#PageComments').children()[0];
|
||||||
},
|
newComment = $(newComment);
|
||||||
|
|
||||||
onFailure : function(response) {
|
|
||||||
alert(response.responseText);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ajax handler of ham reporting
|
|
||||||
*/
|
|
||||||
approveComment: function() {
|
|
||||||
var __comment = this.parentNode.parentNode.parentNode.parentNode;
|
|
||||||
|
|
||||||
__comment.getElementsByTagName('span')[0].innerHTML = "Marking comment as approved...";
|
|
||||||
|
|
||||||
new Ajax.Request(this.href + '?ajax=1', {
|
|
||||||
onSuccess : function(response) {
|
|
||||||
// Load the response into the <li>
|
|
||||||
__comment.innerHTML = response.responseText;
|
|
||||||
Behaviour.apply(__comment);
|
|
||||||
|
|
||||||
// Flash it using Scriptaculous
|
$(this).ajaxSubmit(function(response) {
|
||||||
new Effect.Highlight(__comment, { endcolor: '#e9e9e9' } );
|
if($('#PageComments_holder [name=Math]').length > 0) {
|
||||||
__comment.className = 'notspam';
|
$.ajax({
|
||||||
},
|
url: jQuery('base').attr('href') + 'PageCommentInterface_Controller/newspamquestion',
|
||||||
|
cache: false,
|
||||||
onFailure : function(response) {
|
success: function(html){
|
||||||
alert(response.responseText);
|
// Load spam stuff goes in here
|
||||||
|
$('#PageComments_holder #Math label').text(html);
|
||||||
|
$('#PageComments_holder #Math input').val('');
|
||||||
|
},
|
||||||
|
failure: function(html) {
|
||||||
|
eval(html);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if(response.match('validationError')) {
|
||||||
|
newComment.remove();
|
||||||
|
eval(response);
|
||||||
|
} else if(response != "spamprotectionfailed") {
|
||||||
|
newComment.addClass('even');
|
||||||
|
newComment.html(response);
|
||||||
|
newComment.effects('highlight', {}, 1000);
|
||||||
|
if(response.match('<b>Spam detected!!</b>')) {
|
||||||
|
newComment.addClass('spam');
|
||||||
|
}
|
||||||
|
$(this).resetForm();
|
||||||
|
} else {
|
||||||
|
error.text('You got the spam question wrong');
|
||||||
|
error.show();
|
||||||
|
newComment.remove();
|
||||||
|
$('#PageComments_holder #Math input').focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// We're missing things, alert it here
|
||||||
|
|
||||||
|
error.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
return false;
|
/**
|
||||||
}
|
* Clicking one of the metalinks performs the operation via ajax
|
||||||
}
|
* this inclues the spam and approve links
|
||||||
|
*/
|
||||||
PageCommentInterface.applyTo("#PageComments_holder");
|
$(".action-links a").live('click', function(e) {
|
||||||
function loadSpamQuestion(response) {
|
var link = $(this);
|
||||||
var spamQuestionDiv = $('Math');
|
var hide = $(this).parents("li.comments");
|
||||||
var mathLabel = spamQuestionDiv.getElementsByTagName('label')[0];
|
|
||||||
mathLabel.innerHTML = response.responseText;
|
$.ajax({
|
||||||
var mathQuestion = spamQuestionDiv.getElementsByTagName('input')[0];
|
url: $(this).attr('href') + '?ajax=1',
|
||||||
mathQuestion.value = '';
|
cache: false,
|
||||||
}
|
success: function(html){
|
||||||
|
if(link.hasClass('ham')) {
|
||||||
|
// comment has been marked as not spam
|
||||||
|
comment.html(html);
|
||||||
|
comment.removeClass('spam');
|
||||||
|
comment.effect("highlight", {}, 1000);
|
||||||
|
}
|
||||||
|
else if(link.hasClass('approve')) {
|
||||||
|
// comment has been approved
|
||||||
|
comment.html(html);
|
||||||
|
comment.removeClass('unmoderated');
|
||||||
|
comment.effect("highlight", {}, 1000);
|
||||||
|
}
|
||||||
|
else if(link.hasClass('delete')) {
|
||||||
|
hide.fadeOut(1000, function() {
|
||||||
|
var comments = hide.parents("ul");
|
||||||
|
hide.remove();
|
||||||
|
|
||||||
|
if(comments.children().length == 0) {
|
||||||
|
comments.html("<p id=\"no-comments-yet\">No one has commented on this page yet.</p>");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if(link.hasClass('spam')) {
|
||||||
|
if(html) {
|
||||||
|
hide.html(html);
|
||||||
|
hide.effect("highlight", {}, 1000);
|
||||||
|
} else {
|
||||||
|
hide.fadeOut(1000, function() { // Fade out the comment
|
||||||
|
var comments = hide.parent(); // Grab the comments holder
|
||||||
|
hide.remove(); // remove the comment
|
||||||
|
|
||||||
|
if(comments.children().length == 0) {
|
||||||
|
comments.html("<p id=\"no-comments-yet\">No one has commented on this page yet.</p>");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
failure: function(html) {
|
||||||
|
alert(html)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
})
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<% if CommentsEnabled %>
|
<% if CommentsEnabled %>
|
||||||
<div id="$CommentHolderID">
|
<div id="$CommentHolderID" class="comments-holder-container">
|
||||||
|
|
||||||
<h4><% _t('POSTCOM','Post your comment') %></h4>
|
<h4><% _t('POSTCOM','Post your comment') %></h4>
|
||||||
|
|
||||||
@ -21,7 +21,7 @@
|
|||||||
<% if Comments %>
|
<% if Comments %>
|
||||||
<ul class="comments-list">
|
<ul class="comments-list">
|
||||||
<% control Comments %>
|
<% control Comments %>
|
||||||
<li class="$EvenOdd<% if FirstLast %> $FirstLast <% end_if %> $SpamClass">
|
<li class="comment $EvenOdd<% if FirstLast %> $FirstLast <% end_if %> $SpamClass">
|
||||||
<% include CommentsInterface_singlecomment %>
|
<% include CommentsInterface_singlecomment %>
|
||||||
</li>
|
</li>
|
||||||
<% end_control %>
|
<% end_control %>
|
||||||
@ -51,12 +51,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
<% else %>
|
<% else %>
|
||||||
<p id="NoComments"><% _t('NOCOMMENTSYET','No one has commented on this page yet.') %></p>
|
<p class="no-comments-yet"><% _t('NOCOMMENTSYET','No one has commented on this page yet.') %></p>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<% if DeleteAllLink %>
|
<% if DeleteAllLink %>
|
||||||
<p id="DeleteComments">
|
<p class="delete-comments">
|
||||||
<a href="$DeleteAllLink"><% _t('PageCommentInterface.DELETEALLCOMMENTS','Delete all comments on this page') %></a>
|
<a href="$DeleteAllLink"><% _t('PageCommentInterface.DELETEALLCOMMENTS','Delete all comments on this page') %></a>
|
||||||
</p>
|
</p>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
|
|||||||
@ -13,17 +13,17 @@
|
|||||||
<% end_if %>
|
<% end_if %>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul class="actionLinks">
|
<ul class="action-links">
|
||||||
<% if ApproveLink %>
|
<% if ApproveLink %>
|
||||||
<li><a href="$ApproveLink" class="approvelink"><% _t('APPROVE', 'approve this comment') %></a></li>
|
<li><a href="$ApproveLink" class="approve"><% _t('APPROVE', 'approve this comment') %></a></li>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
<% if SpamLink %>
|
<% if SpamLink %>
|
||||||
<li><a href="$SpamLink" class="spamlink"><% _t('ISSPAM','this comment is spam') %></a></li>
|
<li><a href="$SpamLink" class="spam"><% _t('ISSPAM','this comment is spam') %></a></li>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
<% if HamLink %>
|
<% if HamLink %>
|
||||||
<li><a href="$HamLink" class="hamlink"><% _t('ISNTSPAM','this comment is not spam') %></a></li>
|
<li><a href="$HamLink" class="ham"><% _t('ISNTSPAM','this comment is not spam') %></a></li>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
<% if DeleteLink %>
|
<% if DeleteLink %>
|
||||||
<li class="last"><a href="$DeleteLink" class="deletelink"><% _t('REMCOM','remove this comment') %></a></li>
|
<li class="last"><a href="$DeleteLink" class="delete"><% _t('REMCOM','remove this comment') %></a></li>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user