Fix Image Drag & Drop Cross-Wiring in Edit Comment Form #8897
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,153 +1,153 @@ | ||
| <div class="comment-form-wrapper"> | ||
| <div class="card card-body bg-light"> | ||
| <form method="post" id="c<%= comment.id %>edit" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>> | ||
|
|
||
| <h4 style="margin-top:0;"><%= title %></h4> | ||
| <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>"> | ||
|
|
||
| <style> | ||
| #imagebar {width:100%;} | ||
| </style> | ||
|
|
||
|
|
||
| <%= render :partial => "editor/toolbar" %> | ||
| <div id="c<%= comment.id%>div" class="form-group"> | ||
| <textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="c<%= comment.id%>text" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea> | ||
|
|
||
| <div id="imagebar"> | ||
| <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-striped active pull-right"> | ||
| <div id="c<%= comment.id%>progress-bar" class="progress-bar" style="width: 0%;"></div> | ||
| </div> | ||
|
|
||
| <p> | ||
| <span id="c<%= comment.id%>uploading" class="uploading" style="display:none;"> | ||
| <%= translation('comments._edit.uploading') %> | ||
| </span> | ||
| <span id="c<%= comment.id%>prompt" class="prompt"> | ||
| <span style="padding-right:4px;float:left;" class="hidden-xs"> | ||
| <%= raw translation('comments._edit.drag_and_drop') %> | ||
| </span> | ||
| <label id="c<%= comment.id%>input_label" for="c<%= comment.id%>input"> | ||
| <input id="c<%= comment.id%>input" type="file" name="image[photo]" style="display:none;" /> | ||
| <a class="hidden-xs"><%= translation('comments._edit.choose_one') %></a> | ||
| <span class="visible-xs"> | ||
| <i class="fa fa-upload"></i> | ||
| <a><%= translation('comments._edit.upload_image') %></a> | ||
| </span> | ||
| </label> | ||
| </span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <script type="application/javascript"> | ||
| jQuery(document).ready(function() { | ||
| $E.initialize(); | ||
| }); | ||
|
|
||
| function setInit(id) { | ||
| var args = { | ||
| 'textarea': 'c'+id+'text', | ||
| 'preview': 'c'+id+'preview' | ||
| } | ||
| $E.initialize(args); | ||
| } | ||
|
|
||
| $('#c<%= comment.id%>div').bind('dragover',function(e) { | ||
| e.preventDefault(); | ||
| $('#c<%= comment.id%>div').addClass('hover'); | ||
| }); | ||
|
|
||
| $('#c<%= comment.id%>div').bind('dragout',function(e) { | ||
| $('#c<%= comment.id%>div').removeClass('hover'); | ||
| }); | ||
|
|
||
| $('#c<%= comment.id%>div').bind('drop',function(e) { | ||
| e.preventDefault(); | ||
| $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0); | ||
|
There was a problem hiding this comment. Notice this additional line! There was a problem hiding this comment. I wrapped everything in _edit.html.erb in a div.comment-form-wrapper. The other major change is that now $D.selected is assigned in this eventListener bound to #c1div. A major part of the drag-and-drop crosswiring is fixed. My tests (including the new one I wrote for this issue) are passing. I had to rewrite some of the system tests in this most recent push: 'edit comment' and 'delete comment' rely on .comment-form-wrapper for some reason. There was a problem hiding this comment. Oops, the tests aren't passing. I'll take a closer look tomorrow. |
||
| setInit(<%= comment.id %>); | ||
| }); | ||
|
|
||
| $('#c<%= comment.id%>div').fileupload({ | ||
| url: "/images", | ||
| paramName: "image[photo]", | ||
| dropZone: $('#c<%= comment.id%>div'), | ||
| dataType: 'json', | ||
| formData: { | ||
| 'uid':<%= current_user.uid %>, | ||
| 'nid':<%= comment.uid %> | ||
| }, | ||
| start: function(e) { | ||
| $('#c<%= comment.id%>progress').show() | ||
| $('#c<%= comment.id%>uploading').show() | ||
| $('#c<%= comment.id%>prompt').hide() | ||
| $('#c<%= comment.id%>div').removeClass('hover'); | ||
| }, | ||
| done: function (e, data) { | ||
| $('#c<%= comment.id%>progress').hide() | ||
| $('#c<%= comment.id%>uploading').hide() | ||
| $('#c<%= comment.id%>prompt').show() | ||
| var is_image = false | ||
| if (data.result['filename'].substr(-3,3) == "jpg") is_image = true | ||
| if (data.result['filename'].substr(-4,4) == "jpeg") is_image = true | ||
| if (data.result['filename'].substr(-3,3) == "png") is_image = true | ||
| if (data.result['filename'].substr(-3,3) == "gif") is_image = true | ||
| if (data.result['filename'].substr(-3,3) == "JPG") is_image = true | ||
| if (data.result['filename'].substr(-4,4) == "JPEG") is_image = true | ||
| if (data.result['filename'].substr(-3,3) == "PNG") is_image = true | ||
| if (data.result['filename'].substr(-3,3) == "GIF") is_image = true | ||
|
|
||
| if (is_image) { | ||
| image_url = data.result.url.split('?')[0]; | ||
| orig_image_url = image_url.replace('medium','original'); | ||
| $E.wrap('[]('+orig_image_url+')', {'newline': true, 'fallback': data.result['filename']}); | ||
| } else { | ||
| $E.wrap('<a href="'+data.result.url.split('?')[0]+'"><i class="fa fa-file"></i> ','</a>', {'newline': true, 'fallback': data.result['filename']}); | ||
| } | ||
|
|
||
| if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(',')); | ||
| else $('#node_images').val(data.result.id) | ||
| }, | ||
|
|
||
| fileuploadfail: function(e,data) {}, | ||
| progressall: function (e, data) { | ||
| var progress = parseInt(data.loaded / data.total * 100, 10); | ||
| $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css( | ||
| 'width', | ||
| progress + '%' | ||
| ); | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <div class="well col-md-11" id="c<%= comment.id %>preview" style="background:white;display: none"> | ||
| </div> | ||
|
|
||
| <div class="control-group"> | ||
| <button type="submit" class="btn btn-primary"><%= translation('comments._edit.publish') %></button> | ||
| <a class="btn btn-default preview-btn" data-previewing-text="Hide Preview" | ||
| onClick="$('#c<%= comment.id %>preview').toggle(); | ||
| $('#c<%= comment.id %>text').toggle(); | ||
| $('#c<%= comment.id %>text').next('#imagebar').toggle(); | ||
| this.previewing = !this.previewing; | ||
| $('#c<%= comment.id %>edit .preview-btn').button(this.previewing ? 'previewing' : 'reset'); | ||
| $E.generate_preview('c<%= comment.id %>preview',$('#c<%= comment.id %>text').val())"> | ||
| Preview | ||
| </a> | ||
| <a class="btn btn-default" onClick="$('#c<%= comment.id %>show').toggle();$('#c<%= comment.id %>edit').toggle()"> | ||
| Cancel | ||
| </a> | ||
|
|
||
| <span class="form-grey"> | ||
| <br class="visible-xs" /><%= raw translation('comments._edit.logged_in', :username => current_user.username) %> | | ||
| <a target="_blank" href="/wiki/authoring-help#Formatting"><%= translation('comments._edit.formatting') %></a> | | ||
| <a onClick="$('#who-is-notified').toggle()"><%= translation('comments._edit.notifications') %></a> | ||
| </span> | ||
| </div> | ||
|
|
||
| <p id="who-is-notified" style="display:none;color:#888;"> | ||
| <%= translation('comments._edit.email_notifications') %> | ||
| </p> | ||
| </form> | ||
| </div> | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here bind is working? Or should we use ‘on’
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you're right! I believe bind has been working here, but it is deprecated and should be changed.
I changed it in dragdrop.js, but I'll change these ones soon... Just want to get this PR ready to merge first.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sounds good we can consider this in a separate PR! good catch @Sagarpreet!!