Skip to content

Commit

Permalink
Bug: Show Image Upload Progress Bars in Edit Comment CLICK-to-Upload (p…
Browse files Browse the repository at this point in the history 
…ubliclab#9019)

* add tests for image upload progress bars publiclab#9018

* fix image upload hover & progress bar issues publiclab#9018

* change ID references to class references publiclab#9018

* fix style for edit comment forms on questions publiclab#9018

* add classes to image upload progress bars publiclab#9018

* add classes; remove non-unique IDs publiclab#9018

* tweak image upload progress bar tests publiclab#9018

* forgot to remove screenshot publiclab#9018
  • Loading branch information
@noi5e @billymoroney1
noi5e authored and billymoroney1 committed Dec 28, 2021
1 parent 61101b5 commit e1c053a
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 77 deletions.
83 changes: 41 additions & 42 deletions app/assets/javascripts/dragdrop.js
View file
Expand Up @@ -17,34 +17,26 @@ jQuery(function() {
);
}

$('.dropzone').on('dragover',function(e) {
e.preventDefault();
$('.dropzone').addClass('hover');
});
$('#side-dropzone').on('dragover',function(e) {
e.preventDefault();
$('#side-dropzone').addClass('hover');
});
$('.dropzone').on('dragout',function(e) {
$('.dropzone').removeClass('hover');
});
$('#side-dropzone').on('dragout',function(e) {
$('#side-dropzone').removeClass('hover');
});
$('.dropzone').on('drop',function(e) {
const params = getEditorParams(e.target); // defined in editorHelper.js
e.preventDefault();
if (params.hasOwnProperty('dSelected')) {
$D.selected = params['dSelected'];
}
$E.initialize(params);
});
$('#side-dropzone').on('drop',function(e) {
e.preventDefault();
});

// these functions are also used on /wiki/edit and /wiki/new pages
$('.dropzone').each(function() {
$(this).on('dragenter',function(e) {
e.preventDefault();
$(e.currentTarget).addClass('hover');
});

$(this).on('dragleave',function(e) {
$(e.currentTarget).removeClass('hover');
});

$(this).on('drop',function(e) {
const params = getEditorParams(e.target); // defined in editorHelper.js
e.preventDefault();
if (params.hasOwnProperty('dSelected')) {
$D.selected = params['dSelected'];
}
$E.initialize(params);
});

$(this).fileupload({
url: "/images",
paramName: "image[photo]",
Expand All @@ -55,30 +47,25 @@ jQuery(function() {
'nid':$D.nid
},
start: function(e) {
$(e.target).removeClass('hover');
// 'start' function runs:
// 1. when user drag-and-drops image
// 2. when user clicks on upload button.
// for click-upload-button scenarios, it's important to set $D.selected here, because the 'drop' listener above doesn't run in those:
$D.selected = $(e.target).closest('div.comment-form-wrapper');
// the above line is redundant in drag & drop, because it's assigned in 'drop' listener too.
// on /wiki/new & /wiki/edit, $D.selected will = undefined from this assignment
$('#imagebar .inline_image_drop').show();
$('#create_progress').show();
$('#create_uploading').show();
elem = $($D.selected).closest('div.comment-form-wrapper').eq(0);
elem.find('#create_progress').eq(0).show();
elem.find('#create_uploading').eq(0).show();
elem.find('#create_prompt').eq(0).hide();
elem.find('.dropzone').eq(0).removeClass('hover');
elem.find('.progress-bar-container').eq(0).show();
elem.find('.uploading-text').eq(0).show();
elem.find('.choose-one-prompt-text').eq(0).hide();
},
done: function (e, data) {
$('#create_progress').hide();
$('#create_uploading').hide();
$('#imagebar .inline_image_drop').hide();
elem = $($D.selected).closest('div.comment-form-wrapper').eq(0);
elem.find('#create_progress').hide();
elem.find('#create_uploading').hide();
elem.find('#create_prompt').show();
elem.find('.progress-bar-container').hide();
elem.find('.progress-bar').css('width', 0);
elem.find('.uploading-text').hide();
elem.find('.choose-one-prompt-text').show();
var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1]; var file_url = data.result.url.split('?')[0]; var file_type;
if (['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'png', 'PNG'].includes(extension))
file_type = 'image'
Expand All @@ -105,15 +92,27 @@ jQuery(function() {
},

// see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options
fileuploadfail: function(e,data) {
// fileuploadfail: function(e,data) {

},
// },
progressall: function (e, data) {
return progressAll('#create_progress .progress-bar', data);
const closestProgressBar = $($D.selected).closest('div.comment-form-wrapper').find('.progress-bar').eq(0);
return progressAll(closestProgressBar, data);
}
});
});

$('#side-dropzone').on('dragover',function(e) {
e.preventDefault();
$('#side-dropzone').addClass('hover');
});
$('#side-dropzone').on('dragout',function(e) {
$('#side-dropzone').removeClass('hover');
});
$('#side-dropzone').on('drop',function(e) {
e.preventDefault();
});

$('#side-dropzone').fileupload({
url: "/images",
paramName: "image[photo]",
Expand Down
33 changes: 15 additions & 18 deletions app/assets/stylesheets/editor.css
View file
Expand Up @@ -32,17 +32,17 @@ pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}

// Account for some code outputs that place code tags in pre tags
/* Account for some code outputs that place code tags in pre tags */
code {
padding: 0;
padding: 0px;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}

/* Adding the bug-btn stylings below, but they can be removed once the next
version of the editor is released. */
Expand Down Expand Up @@ -142,7 +142,7 @@ version of the editor is released. */
}

@media (max-width: 480px) {
#dropzone textarea {
.dropzone textarea {
height:300px;
}
}
Expand All @@ -151,7 +151,7 @@ version of the editor is released. */
margin-bottom:10px;
}

#dropzone textarea {
.dropzone textarea {
border-bottom:none;
margin-bottom:0;
-webkit-border-radius: 4px 4px 0 0;
Expand All @@ -160,7 +160,7 @@ version of the editor is released. */
resize: vertical;
}

#imagebar {
.imagebar {
color: #aaa;
border:1px solid #bbb;
border-top:none;
Expand All @@ -171,31 +171,28 @@ version of the editor is released. */
}

@media (max-width: 768px) {
#imagebar {
.imagebar {
width:100%;
}
}

#imagebar p {
.imagebar p {
border-top:2px dotted #ddd;
padding:8px 12px 0px;
}

#dropzone.hover #imagebar {
.dropzone.hover .imagebar {
background:#eee;
}

#dropzone.hover textarea {
background:#f8f8f8;
.dropzone.hover textarea {
background:#f8f8f8
}

#imagebar .progress {
margin:10px;
width:30%;
}

#dropzone.hover textarea {
background:#f8f8f8;
.imagebar .progress-bar-container {
margin: 10px;
width: 30%;
background-color: #aaa;
}

#side-progress {
Expand Down
1 change: 0 additions & 1 deletion app/assets/stylesheets/question.css
View file
Expand Up @@ -118,7 +118,6 @@ table th a:hover {
visibility: hidden;
}

.question-show textarea,
.question-show pre {
margin: 0;
padding: 0;
Expand Down
17 changes: 7 additions & 10 deletions app/views/comments/_edit.html.erb
View file
Expand Up @@ -14,15 +14,15 @@

<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 class="imagebar">
<div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-bar-container active pull-right">
<div id="c<%= comment.id%>progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
</div>
<p>
<span id="c<%= comment.id%>uploading" class="uploading" style="display:none;">
<span id="c<%= comment.id%>uploading" class="uploading uploading-text" style="display:none;">
<%= translation('comments._edit.uploading') %>
</span>
<span id="c<%= comment.id%>prompt" class="prompt">
<span id="c<%= comment.id%>prompt" class="prompt choose-one-prompt-text">
<span style="padding-right:4px;float:left;" class="hidden-xs">
<%= raw translation('comments._edit.drag_and_drop') %>
</span>
Expand All @@ -39,10 +39,6 @@
</div>
</div>
<script type="application/javascript">
jQuery(document).ready(function() {
$E.initialize();
});

function setInit(id) {
var args = {
'textarea': 'c'+id+'text',
Expand Down Expand Up @@ -83,6 +79,7 @@
},
done: function (e, data) {
$('#c<%= comment.id%>progress').hide()
$('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css('width', 0);
$('#c<%= comment.id%>uploading').hide()
$('#c<%= comment.id%>prompt').show()
var is_image = false
Expand All @@ -107,7 +104,7 @@
else $('#node_images').val(data.result.id)
},

fileuploadfail: function(e,data) {},
// 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(
Expand Down
12 changes: 6 additions & 6 deletions app/views/comments/_form.html.erb
View file
Expand Up @@ -8,7 +8,7 @@
<% end %>
<h4 style="margin-top:0;"><%= title %></h4>
<style>
#imagebar {
.imagebar {
width:100%;
}
#new_contributor_msg {
Expand Down Expand Up @@ -61,15 +61,15 @@
cols="40"
placeholder="<%= placeholder %>"><%= body %>
</textarea>
<div id="imagebar">
<div id="create_progress" style="display:none;" class="progress float-right">
<div id="create_progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
<div class="imagebar">
<div style="display:none;" class="progress progress-bar-container float-right">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
</div>
<p>
<span id="create_uploading" class="uploading" style="display:none;">
<span class="uploading-text" style="display:none;">
<%= translation('comments._form.uploading') %>
</span>
<span id="create_prompt" class="prompt">
<span class="prompt choose-one-prompt-text">
<span style="padding-right:4px;float:left;" class="d-none d-md-inline">
<%= raw translation('comments._form.drag_and_drop') %>
</span>
Expand Down
38 changes: 38 additions & 0 deletions test/system/comment_test.rb
View file
Expand Up @@ -510,6 +510,44 @@ def get_path(page_type, path)
page.assert_no_selector("button[data-original-title='jeff reacted with thumbs up emoji'")
end

test "#{page_type_string}: progress bars display for image DRAG & DROP in MAIN comment form" do
node_name == :wiki_page ? (visit nodes(node_name).path + '/comments') : (visit nodes(node_name).path)
# make a fresh comment in the main comment form
main_comment_form = page.find('h4', text: /Post comment|Post Comment/).find(:xpath, '..') # title text on wikis is 'Post comment'
# before we drop an image, we need to make the main comment form the focus by clicking on "Preview," then hiding preview.
# otherwise, image upload in the next step won't be 'wired' to the "Post Comment" form.
main_comment_form.find('a', text: 'Preview').click.click
# .dropzone is hidden, so reveal it:
Capybara.ignore_hidden_elements = false
# drag & drop the image. drop_in_dropzone simulates 'drop' event, see application_system_test_case.rb
drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", '#comments-list + div .dropzone') # this CSS selects .dropzones that belong to sibling element immediately following #comments-list. technically, there are two .dropzones in the main comment form.
Capybara.ignore_hidden_elements = true
assert_selector('.progress')
assert_selector('.uploading-text')
end

test "#{page_type_string}: progress bars display for EDIT comment form's image SELECT upload" do
# before we visit the page, add a jeff comment so that we can edit it.
nodes(node_name).add_comment({
uid: 2,
body: comment_text
})
visit get_path(page_type, nodes(node_name).path)
# open the edit comment form:
page.find("#edit-comment-btn").click
# find the parent of edit comment's fileinput:
comment_fileinput_parent_id = page.find('[id^=dropzone-small-edit-]')[:id] # 'begins with' CSS selector
comment_id_num = /dropzone-small-edit-(\d+)/.match(comment_fileinput_parent_id)[1]
# upload images
# the <inputs> that take image uploads are hidden, so reveal them:
Capybara.ignore_hidden_elements = false
# find edit comment's fileinput:
page.find('#fileinput-button-edit-' + comment_id_num).set("#{Rails.root.to_s}/public/images/pl.png")
Capybara.ignore_hidden_elements = true
assert_selector('#c' + comment_id_num + 'progress')
assert_selector('#c' + comment_id_num + 'uploading')
end

test "#{page_type}: multiple comment boxes, post comments" do
if page_type == :note
visit nodes(:note_with_multiple_comments).path
Expand Down

0 comments on commit e1c053a

Please sign in to comment.