Bug: Fix Image Drag & Drop Cross-Wiring in Edit Comment Form (publicl…

…ab#8897)

* add test for comment image crosswiring

* wrap everything in comment-form-wrapper, assign .selected in drop listener (publiclab#8670)

* delete defunct function, fix indentation & spacing publiclab#8670

* rewrite tests that rely on comment-form-wrapper

* remove deprecated code, comments; fix indent

* initialize  on pageload (publiclab#8670)

* rewrite for multiple file inputs

* change test to focus on image drag & drop publiclab#8670

* restore E.initialize call in drop publiclab#8670

* undo E.initialize call publiclab#8670

* assign unique IDs to comment form textareas publiclab#8670

* change ID selectors to class ones to match new IDs publiclab#8670

* fix indentation publiclab#8670

* change ID reference to class reference publiclab#8670

* initialize E with parameters in drop listener publiclab#8670

* update tests for new text-input selectors publiclab#8670

* change ID text-input reference to class ref publiclab#8670

* change text-input ID to class publiclab#8670

* drop: initialize E with params publiclab#8670

* remove semicolon

app/assets/javascripts/atwho_autocomplete.js

@@ -38,7 +38,7 @@
       limit: 100
    }
 
-  $('textarea#text-input')
+  $('textarea.text-input')
     .atwho(at_config)
     .atwho(hashtags_config)
     .atwho(emojis_config);

app/assets/javascripts/comment.js

@@ -3,39 +3,39 @@
   $('.comment-form').each(function() {
     if(!$(this).hasClass('bound-success')) {
       $(this).addClass('bound-success').bind('ajax:success', function(e, data, status, xhr){
-        $(this).find('#text-input').prop('disabled',false);
-        $(this).find('#text-input').val('');
+        $(this).find('.text-input').prop('disabled',false);
+        $(this).find('.text-input').val('');
         $('#comments-container').append(xhr.responseText);
         $(this).find(".btn-primary").button('reset');
         $(this).find('#preview').hide();
-        $(this).find('#text-input').show();
+        $(this).find('.text-input').show();
         $(this).find('#preview-btn').button('toggle');
       });
     }
 
     if(!$(this).hasClass('bound-beforeSend')) {
       $(this).addClass('bound-beforeSend').bind('ajax:beforeSend', function(event){
-        $(this).find("#text-input").prop('disabled',true)
-        $(this).find('#text-input').val('');
+        $(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){
         notyNotification('mint', 3000, 'error', 'topRight', 'Some error occured while adding comment');
-        $(this).find('#text-input').prop('disabled',false);
+        $(this).find('.text-input').prop('disabled',false);
         $(this).find('.control-group').addClass('has-error')
         $(this).find('.control-group .help-block ').remove()
-        $(this).find('#text-input').val('');
+        $(this).find('.text-input').val('');
         $(this).find('.control-group').append('<span class="help-block ">Error: there was a problem.</span>')
       });
     }
 
     if(!$(this).hasClass('bound-keypress')) {
       $(this).addClass('bound-keypress');
 
-      $(this).find('#text-input').val('');
+      $(this).find('.text-input').val('');
       $(this).on('keypress', function (e) {
         var isPostCommentShortcut = (e.ctrlKey && e.keyCode === 10) || (e.metaKey && e.keyCode === 13);