tonyair
/
silverstripe-comments
mirror of https://github.com/silverstripe/silverstripe-comments
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[SS-2018-015] Update jQuery version, remove entwine from frontend use 

jQuery version was extremely old, and was probably stuck at that as a way
of enabling the frivilous use of entwine on the front end for somewhat
trivial ajax submisions. A mild refactor has taken place to leverage newer
jQuery features, and remove outdated dependencies.

Also accompanying this commit are alterations to the markup to make it
more semantically correct (probably not entirely though), and help with
testing the JS functionality of reply forms (when enabled).
This commit is contained in:
Dylan Wagstaff 2018-04-26 17:42:08 +12:00 committed by Robbie Averill
parent aa46291adf
commit 02db1cc86e
5 changed files with 59 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
javascript/CommentsInterface.js
View File

@ -2,87 +2,53 @@
* @package comments
*/
(function($) {
$.entwine( "ss.comments", function($) {
$(function() {
/**
* Enable form validation
*/
$('.comments-holder-container form').entwine({
onmatch: function() {
$('.comments-holder-container form').validate({
// @todo Reinstate preview-comment functionality
/**
* Validate
*/
$(this).validate({
/**
* Ignore hidden elements in this form
*/
// Ignore hidden elements in this form
ignore: ':hidden',
/**
* Use default 'required' for error labels
*/
// Use default 'required' for error labels
errorClass: "required",
/**
* Use span instead of labels
*/
// Use span instead of labels
errorElement: "span",
/**
* On error, scroll to the invalid element
*/
// On error, scroll to the invalid element
invalidHandler : function(form, validator){
$('html, body').animate({
scrollTop: $(validator.errorList[0].element).offset().top - 30
}, 200);
},
/**
* Ensure any new error message has the correct class and placement
*/
// Ensure any new error message has the correct class and placement
errorPlacement: function(error, element) {
error
.addClass('message')
.insertAfter(element);
}
});
this._super();
},
onunmatch: function() {
this._super();
}
});
/**
* Comment reply form
* Hide comment reply forms by default (unless visiting via permalink)
*/
$( ".comment-replies-container .comment-reply-form-holder" ).entwine({
onmatch: function() {
// If and only if this is not the currently selected form, hide it on page load
var selectedHash = window.document.location.hash.substr(1),
form = $(this).children('.reply-form');
if( !selectedHash || selectedHash !== form.prop( 'id' ) ) {
this.hide();
}
this._super();
},
onunmatch: function() {
this._super();
}
});
$(".comment")
.children('.info')
.not(window.document.location.hash)
.nextAll(".comment-replies-container")
.children(".comment-reply-form-holder")
.hide();
/**
* Toggle on/off reply form
*/
$( ".comment-reply-link" ).entwine({
onclick: function( e ) {
var allForms = $( ".comment-reply-form-holder" ),
formID = '#' + $( this ).attr('aria-controls');
form = $(formID).closest('.comment-reply-form-holder');
$('.comments-holder').on('click', '.comment-reply-link', function(e) {
var allForms = $('.comment-reply-form-holder');
var formID = '#' + $(this).attr('aria-controls');
var form = $(formID).closest('.comment-reply-form-holder');
$(this).attr('aria-expanded', function (i, attr) {
return attr == 'true' ? 'false' : 'true'
@ -97,53 +63,15 @@
allForms.not(form).slideUp();
form.slideDown();
}
}
});
/**
* Preview comment by fetching it from the server via ajax.
*/
/* @todo Migrate to work with nested comments
$(':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
*/
$('.comments-holder .comments-list').on('click', 'div.comment-moderation-options a', function(e) {
e.stopPropagation();
var link = $(this);
if (link.hasClass('delete')) {
var confirmationMsg = ss.i18n._t('CommentsInterface_singlecomment_ss.DELETE_CONFIRMATION');
@ -173,8 +101,8 @@
comment.fadeOut(1000, function() {
comment.remove();
if(commentsList.children().length === 0) {
noCommentsYet.show();
if($('.comments-holder .comments-list').children().length === 0) {
$('.no-comments-yet').show();
}
});
}
@ -190,32 +118,5 @@
e.preventDefault();
});
/**
* Ajax pagination
*/
/* @todo Migrate to work with nested comments
pagination.find('a').on('click', function(){
commentsList.addClass('loading');
$.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);
},
failure: function(html) {
alert('Error loading comments');
}
});
return false;
});*/
});
})(jQuery);

1
src/Controllers/CommentingController.php
View File

@ -432,6 +432,7 @@ class CommentingController extends Controller
// Enables multiple forms with different names to use the same handler
$form = $this->CommentsForm();
$form->setName('ReplyForm_' . $comment->ID);
$form->setHTMLID(null);
$form->addExtraClass('reply-form');
// Load parent into reply form

4
src/Extensions/CommentsExtension.php
View File

@ -450,9 +450,7 @@ class CommentsExtension extends DataExtension
// Check if enabled
$enabled = $this->getCommentsEnabled();
if ($enabled && $this->owner->getCommentsOption('include_js')) {
Requirements::javascript('silverstripe/admin:thirdparty/jquery/jquery.js');
Requirements::javascript('silverstripe/admin:thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
Requirements::javascript('silverstripe/admin:thirdparty/jquery-form/jquery.form.js');
Requirements::javascript('//code.jquery.com/jquery-3.3.1.min.js');
Requirements::javascript('silverstripe/comments:thirdparty/jquery-validate/jquery.validate.min.js');
Requirements::javascript('silverstripe/admin:client/dist/js/i18n.js');
Requirements::add_i18n_javascript('silverstripe/comments:javascript/lang');

4
src/Forms/CommentForm.php
View File

@ -126,10 +126,6 @@ class CommentForm extends Form
'ReturnURL' => $controller->getRequest()->getURL(),
'ParentClassName' => $controller->getParentClass()
));
if ($holder = $record->getCommentHolderID()) {
$this->setHTMLID($holder);
}
}
// Set it so the user gets redirected back down to the form upon form fail

2
templates/Includes/CommentsInterface_singlecomment.ss
View File

@ -11,7 +11,7 @@
<% if $Gravatar %>
<img class="gravatar" src="$Gravatar.ATT" alt="Gravatar for $Name.ATT" title="Gravatar for $Name.ATT" />
<% end_if %>
<div class="comment-text<% if $Gravatar %> hasGravatar<% end_if %>" id="<% if $isPreview %>comment-preview<% else %>$Permalink<% end_if %>">
<div class="comment-text<% if $Gravatar %> hasGravatar<% end_if %>" id="<% if $isPreview %>comment-preview<% else %>{$Permalink}-text<% end_if %>">
<p>$EscapedComment</p>
</div>