[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

View File

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

View File

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

View File

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

View File

@ -126,10 +126,6 @@ class CommentForm extends Form
'ReturnURL' => $controller->getRequest()->getURL(), 'ReturnURL' => $controller->getRequest()->getURL(),
'ParentClassName' => $controller->getParentClass() '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 // Set it so the user gets redirected back down to the form upon form fail

View File

@ -11,7 +11,7 @@
<% if $Gravatar %> <% if $Gravatar %>
<img class="gravatar" src="$Gravatar.ATT" alt="Gravatar for $Name.ATT" title="Gravatar for $Name.ATT" /> <img class="gravatar" src="$Gravatar.ATT" alt="Gravatar for $Name.ATT" title="Gravatar for $Name.ATT" />
<% end_if %> <% 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> <p>$EscapedComment</p>
</div> </div>