Fix image upload in comments as well as preview (#5321)

* Fix image upload in comments as well as preview * changes * change
publiclab · Apr 1, 2019 · dd20161 · dd20161
1 parent 8afd12c
commit dd20161
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/app/assets/javascripts/dragdrop.js b/app/assets/javascripts/dragdrop.js
@@ -42,15 +42,15 @@ jQuery(document).ready(function() {
       },
       start: function(e) {
 
-        $('#create_progress').show()
-        $('#create_uploading').show()
-        $('#create_prompt').hide()
-        $('.dropzone').removeClass('hover');
+        ($D.selected).find('#create_progress').eq(0).show();
+        ($D.selected).find('#create_uploading').eq(0).show();
+        ($D.selected).find('#create_prompt').eq(0).hide();
+        ($D.selected).find('.dropzone').eq(0).removeClass('hover');
       },
       done: function (e, data) {
-        $('#create_progress').hide()
-        $('#create_uploading').hide()
-        $('#create_prompt').show()
+          ($D.selected).find('#create_progress').hide();
+          ($D.selected).find('#create_uploading').hide();
+          ($D.selected).find('#create_prompt').show();
         var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1]
         var file_url = data.result.url.split('?')[0]
 
@@ -105,30 +105,29 @@ jQuery(document).ready(function() {
         'nid':$D.nid
       },
       start: function(e) {
-        $('.side-dropzone').css('border-color','#ccc')
-        $('.side-dropzone').css('background','none')
-        $('#side-progress').show()
-        $('#side-dropzone').removeClass('hover');
-        $('.side-uploading').show()
+        ($D.selected).find('.side-dropzone').eq(0).css('border-color','#ccc');
+        ($D.selected).find('.side-dropzone').eq(0).css('background','none');
+        ($D.selected).find('#side-progress').eq(0).show();
+        ($D.selected).find('#side-dropzone').eq(0).removeClass('hover');
+        ($D.selected).find('.side-uploading').eq(0).show();
       },
       done: function (e, data) {
-        $('#side-progress').hide()
-        $('#side-dropzone').show()
-        $('.side-uploading').hide()
-        $('#leadImage')[0].src = data.result.url
-        $('#leadImage').show()
+          ($D.selected).find('#side-progress').eq(0).hide();
+          ($D.selected).find('#side-dropzone').eq(0).show();
+          ($D.selected).find('.side-uploading').eq(0).hide();
+          ($D.selected).find('#leadImage')[0].src = data.result.url;
+          ($D.selected).find('#leadImage').eq(0).show();
         // here append the image id to the note as the lead image
-        $('#main_image').val(data.result.id)
-        $("#image_revision").append(
-          '<option selected="selected" id="'+data.result.id+'" value="'+data.result.url+'">Temp Image '+data.result.id+'</option>');
+          ($D.selected).find('#main_image').eq(0).val(data.result.id);
+          ($D.selected).find("#image_revision").append('<option selected="selected" id="'+data.result.id+'" value="'+data.result.url+'">Temp Image '+data.result.id+'</option>');
       },
 
       // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options
       fileuploadfail: function(e,data) {
       },
       progressall: function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
-        $('#side-progress .progress-bar').css(
+        ($D.selected).find('#side-progress .progress-bar').eq(0).css(
           'width',
           progress + '%'
         );

diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js
@@ -28,8 +28,18 @@ $E = {
   is_editing: function() {
     return ($E.textarea[0].selectionStart == 0 && $E.textarea[0].selectionEnd == 0)
   },
+
+  refresh: function() {
+      if($D.selected) {
+          $E.textarea = ($D.selected).find('textarea').eq(0);
+          $E.preview = ($D.selected).find('#preview').eq(0);
+          $E.textarea.bind('input propertychange',$E.save);
+      }
+  },
+
   // wraps currently selected text in textarea with strings a and b
   wrap: function(a,b,args) {
+    this.refresh();
     var len = $E.textarea.val().length;
     var start = $E.textarea[0].selectionStart;
     var end = $E.textarea[0].selectionEnd;

diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
@@ -1,4 +1,4 @@
-<div style="background-color:#f8f8f8; border: 1px solid #e7e7e7;padding: 18px;">
+<div class="comment-form-wrapper" style="background-color:#f8f8f8; border: 1px solid #e7e7e7;padding: 18px;">
 <form class="comment-form" id="comment-form" data-remote="true" class="well" <% if !local_assigns[:is_answer].blank? %> action= "/answers/create/<%= @node.nid %>" <% elsif !local_assigns[:aid].blank? %> action= "/comment/answer_create/<%= aid %>" <% else %> action="/comment/create/<%= @node.nid %><%= "?type=question" if local_assigns[:type]=="question" %>" <% end %> <% if local_assigns[:aid].blank? %>method="post"<% end %>>
 
   <h4 style="margin-top:0;"><%= title %><% if current_user && current_user.id == @node.uid %> <small><a target="_blank" href="https://publiclab.org/comment-templates">Add a response template</a></small><% end %></h4>
@@ -46,7 +46,7 @@
           <!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button -->
           <label id="input_label" class="" for="fileinput">
             <input id="fileinput" type="file" name="image[photo]" style="display:none;" />
-            <a class="hidden-xs">choose one</a>
+            <a onClick="handleClick()" class="hidden-xs">choose one</a>
             <span class="visible-xs">
               <i class="fa fa-upload"></i>
               <a><%= t('comments._form.upload_image') %></a>
@@ -73,6 +73,11 @@
       $('#input_label').click(function(e){
         $E.initialize({});
     });
+
+    function handleClick() {
+        $D.selected = $(event.target.closest('div.comment-form-wrapper'));
+        $E.refresh();
+    }
   </script>
 
   <%= javascript_include_tag "dragdrop" %>
@@ -91,7 +96,7 @@
       </a>
       <a class="btn btn-default" onClick="$('#c<%= comment.cid %>show').toggle();$('#c<%= comment.cid %>edit').toggle()"><%= t('comments._form.cancel') %></a>
     <% else %>
-      <a class="btn btn-default preview-btn>" id="post_comment" data-previewing-text="Hide Preview" onClick="$E.toggle_preview('post_comment')"><%= t('comments._form.preview') %></a>
+      <a class="btn btn-default preview-btn>" id="post_comment" data-previewing-text="Hide Preview" onClick="handleClick();$E.toggle_preview()"><%= t('comments._form.preview') %></a>
     <% end %>
 
     <span style="color:#888;"> &nbsp;