[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).

javascript/CommentsInterface.js

@@ -2,87 +2,53 @@
  * @package comments
  */
 (function($) {
-	$.entwine( "ss.comments", function($) {
+	$(function() {
-
 		/**
 		 * 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',
 
-					/**
+			// 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({
+		$(".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
 		 */
-		$( ".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) {
 				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) {
+							if($('.comments-holder .comments-list').children().length === 0) {
-								noCommentsYet.show();
+								$('.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);
-
-

src/Controllers/CommentingController.php

@@ -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

src/Extensions/CommentsExtension.php

@@ -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('//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/admin:client/dist/js/i18n.js');
             Requirements::add_i18n_javascript('silverstripe/comments:javascript/lang');

src/Forms/CommentForm.php

@@ -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

templates/Includes/CommentsInterface_singlecomment.ss

@@ -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>