Feature: Add $D.selected Comment Documentation, Change .bind eventHan…

…dlers to .on (publiclab#8982)

* change .bind eventHandlers to on publiclab#8897

* write explanatory comments publiclab#8897

app/assets/javascripts/comment.js

@@ -2,7 +2,7 @@
 
   $('.comment-form').each(function() {
     if(!$(this).hasClass('bound-success')) {
-      $(this).addClass('bound-success').bind('ajax:success', function(e, data, status, xhr){
+      $(this).addClass('bound-success').on('ajax:success', function(e, data, status, xhr){
         $(this).find('.text-input').prop('disabled',false);
         $(this).find('.text-input').val('');
         $('#comments-container').append(xhr.responseText);
@@ -14,15 +14,15 @@
     }
 
     if(!$(this).hasClass('bound-beforeSend')) {
-      $(this).addClass('bound-beforeSend').bind('ajax:beforeSend', function(event){
+      $(this).addClass('bound-beforeSend').on('ajax:beforeSend', function(event){
         $(this).find(".text-input").prop('disabled',true)
         $(this).find('.text-input').val('');
         $(this).find(".btn-primary").button('loading',true);
       });
     }
 
     if(!$(this).hasClass('bound-error')) {
-      $(this).addClass('bound-error').bind('ajax:error', function(e,response){
+      $(this).addClass('bound-error').on('ajax:error', function(e,response){
         notyNotification('mint', 3000, 'error', 'topRight', 'Some error occured while adding comment');
         $(this).find('.text-input').prop('disabled',false);
         $(this).find('.control-group').addClass('has-error')

app/assets/javascripts/dragdrop.js

@@ -32,13 +32,19 @@ jQuery(function() {
     $('#side-dropzone').removeClass('hover');
   });
   $('.dropzone').on('drop',function(e) {
+    // this 'drop' listener is also reused for pages with just one form, ie. /wiki/new
     $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
     e.preventDefault();
     let params = {};
-    if ($D.selected.hasOwnProperty(0)) {
-      params['textarea'] = $D.selected[0].querySelector('textarea').id
+    // $D.selected will look different for multi vs. single form pages, because of what $.closest returns:
+    //   multiple comments: { 0: the_closest_element }
+    //   /wiki/new: .comment-form-wrapper doesn't exist!
+    if ($D.selected.hasOwnProperty(0)) { // eg. jQuery finds a .comment-form-wrapper somewhere on the page.
+      params['textarea'] = $D.selected[0].querySelector('textarea').id // assign the ID of the textarea within the closest comment-form-wrapper
     } else {
-      params['textarea'] = 'text-input'
+      // default to #text-input
+      // ideally there should only be one per page
+      params['textarea'] = 'text-input' 
     }
     $E.initialize(params);
   });

app/views/comments/_edit.html.erb

@@ -51,16 +51,16 @@
           $E.initialize(args);
         }
 
-        $('#c<%= comment.id%>div').bind('dragover',function(e) {
+        $('#c<%= comment.id%>div').on('dragover',function(e) {
           e.preventDefault();
           $('#c<%= comment.id%>div').addClass('hover');
         });
 
-        $('#c<%= comment.id%>div').bind('dragout',function(e) {
+        $('#c<%= comment.id%>div').on('dragout',function(e) {
           $('#c<%= comment.id%>div').removeClass('hover');
         });
 
-        $('#c<%= comment.id%>div').bind('drop',function(e) {
+        $('#c<%= comment.id%>div').on('drop',function(e) {
           e.preventDefault();
           $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
           setInit(<%= comment.id %>);