Skip to content

Commit

Permalink
Integrate Edit Comment Form JavaScript with editor.js (publiclab#9067)
Browse files Browse the repository at this point in the history 
* move E.initialize call to higher level views publiclab#9004

* change selectors for preview & textarea elements publiclab#9004

* change #edit-comment-btn to .edit-comment-btn publiclab#9004

* change selectors to match new edit form publiclab#9004

* update selectors for edit form publiclab#9004
  • Loading branch information
@noi5e @reginaalyssa
noi5e authored and reginaalyssa committed Oct 16, 2021
1 parent 5bebad1 commit 5ff03b1
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 113 deletions.
194 changes: 99 additions & 95 deletions app/views/comments/_edit.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
<!-- toolbar needs location & comment_id to make unique element IDs -->
<%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>

<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="c<%= comment.id%>div" class="form-group dropzone">
<textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="text-input-edit-<%= comment.id%>" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
<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>
Expand All @@ -23,7 +23,7 @@
</span>
<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') %>
<%= 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;" />
Expand All @@ -37,108 +37,112 @@
</p>
</div>
</div>
<script type="application/javascript">
function setInit(id) {
const textArea = 'c'+id+'text';
const preview = 'c'+id+'preview';
$E.setState(textArea, preview);
}
<script type="application/javascript">
// function setInit(id) {
// const textArea = 'c'+id+'text';
// const preview = 'c'+id+'preview';
// $E.setState(textArea, preview);
// }

$('#c<%= comment.id%>div').on('dragover',function(e) {
e.preventDefault();
$('#c<%= comment.id%>div').addClass('hover');
});
// $('#c<%= comment.id%>div').on('dragover',function(e) {
// e.preventDefault();
// $('#c<%= comment.id%>div').addClass('hover');
// });

$('#c<%= comment.id%>div').on('dragout',function(e) {
$('#c<%= comment.id%>div').removeClass('hover');
});
// $('#c<%= comment.id%>div').on('dragout',function(e) {
// $('#c<%= comment.id%>div').removeClass('hover');
// });

$('#c<%= comment.id%>div').on('drop',function(e) {
e.preventDefault();
$D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
setInit(<%= comment.id %>);
});
// $('#c<%= comment.id%>div').on('drop',function(e) {
// e.preventDefault();
// $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
// 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%>progress #c<%= comment.id%>progress-bar').css('width', 0);
$('#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
// $('#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%>progress #c<%= comment.id%>progress-bar').css('width', 0);
// $('#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('[![',']('+image_url+')]('+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 (is_image) {
// image_url = data.result.url.split('?')[0];
// orig_image_url = image_url.replace('medium','original');
// $E.wrap('[![',']('+image_url+')]('+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)
},
// 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>
// // 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="comment-preview well col-md-11" id="c<%= comment.id %>preview" style="background:white;display: none">
</div>
<div class="comment-preview well col-md-11" id="comment-preview-edit-<%= comment.id %>" 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;
$('#comment-form-edit-<%= comment.id %> .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();$('#comment-form-edit-<%= comment.id %>').toggle()">
Cancel
</a>
<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="
$E.setState(
'text-input-edit-<%= comment.id%>',
'comment-preview-edit-<%= comment.id %>'
);
$E.toggle_preview();
"
>
Preview
</a>
<a class="btn btn-default" onClick="$('#c<%= comment.id %>show').toggle();$('#comment-form-edit-<%= comment.id %>').toggle()">
Cancel
</a>

<span class="form-grey"> &nbsp;
<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>
<span class="form-grey"> &nbsp;
<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>
<p id="who-is-notified" style="display:none;color:#888;">
<%= translation('comments._edit.email_notifications') %>
</p>
</form>
</div>
4 changes: 0 additions & 4 deletions app/views/comments/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,9 @@
</p>
</div>
</div>

<div id="comment-preview-<%= comment_form_id %>" class="comment-preview" style="background: white; display: none;">
</div>
<script>
jQuery(document).ready(function() {
$E.initialize();
});
$D = {
uid: <%= current_user.uid if current_user %>,
type: 'comment'
Expand Down
2 changes: 1 addition & 1 deletion app/views/notes/_comment.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
<i data-toggle="tooltip" title="This comment was posted by email." class="fa fa-envelope"></i>
<% end %>
<% if current_user && comment.uid == current_user.uid %>
<a aria-label="Edit comment" class="btn btn-outline-secondary btn-sm" id="edit-comment-btn" href="javascript:void(0)" onClick="$('#comment-form-edit-<%= comment.cid %>').toggle();$('#c<%= comment.cid %>show').toggle();setInit(<%= comment.cid %>);">
<a aria-label="Edit comment" class="btn btn-outline-secondary btn-sm edit-comment-btn" href="javascript:void(0)" onClick="$('#comment-form-edit-<%= comment.cid %>').toggle();$('#c<%= comment.cid %>show').toggle();">
<i class="fa fa-pencil"></i>
</a>
<% end %>
Expand Down
3 changes: 2 additions & 1 deletion app/views/notes/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,8 @@
$("#collapse-button").click(function(){
$(this).remove();
});
$(function(){
$(function() {
$E.initialize();
$("img").lazyload();
});
</script>
1 change: 1 addition & 0 deletions app/views/questions/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<%= javascript_include_tag('notes') %>
<%= javascript_include_tag('textbox_expand') %>
<script> var comments_length = <%= @node.comments.length %>; $(function(){
$E.initialize();
$("img").lazyload();
});</script>
<%= javascript_include_tag('question') %>
Expand Down
24 changes: 12 additions & 12 deletions test/system/comment_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,10 +179,10 @@ def get_path(page_type, path)
page.execute_script <<-JS
var comment = $(".comment")[1];
var commentID = comment.id;
var editCommentBtn = $(comment).find('.navbar-text #edit-comment-btn')
var editCommentBtn = $(comment).find('.navbar-text .edit-comment-btn')
// Toggle edit mode
$(editCommentBtn).click()
var commentTextarea = $('#' + commentID + 'text');
var commentTextarea = $('#text-input-edit-' + commentID);
$(commentTextarea).val('Updated comment.')
var submitCommentBtn = $('#' + commentID + ' .control-group .btn-primary')[1];
$(submitCommentBtn).click()
Expand Down Expand Up @@ -263,7 +263,7 @@ def get_path(page_type, path)
})
visit get_path(page_type, nodes(node_name).path)
# open the edit comment form:
page.find("#edit-comment-btn").click
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]
Expand Down Expand Up @@ -336,13 +336,13 @@ def get_path(page_type, path)
})
visit get_path(page_type, nodes(node_name).path)
# open up the edit comment form
page.find("#edit-comment-btn").click
page.find(".edit-comment-btn").click
edit_comment_form = page.find('h4', text: 'Edit comment').find(:xpath, '..')
# we need the comment ID:
edit_comment_form_id = edit_comment_form[:id]
# regex to strip the ID number out of string. ID format is #c1234edit
comment_id_num = /comment-form-edit-(\d+)/.match(edit_comment_form_id)[1]
edit_preview_id = '#c' + comment_id_num + 'preview'
edit_preview_id = '#comment-preview-edit-' + comment_id_num
# the <inputs> that take image uploads are hidden, so reveal them:
Capybara.ignore_hidden_elements = false
file_input_element = edit_comment_form.all('input')[1]
Expand Down Expand Up @@ -443,7 +443,7 @@ def get_path(page_type, path)
comment_id_num = /comment-body-(\d+)/.match(comment_id)[1]
comment_dropzone_selector = '#c' + comment_id_num + 'div'
# open the edit comment form
page.find("#edit-comment-btn").click
page.find(".edit-comment-btn").click
# drop into the edit comment form
Capybara.ignore_hidden_elements = false
drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", comment_dropzone_selector)
Expand Down Expand Up @@ -475,7 +475,7 @@ def get_path(page_type, path)
})
visit get_path(page_type, nodes(node_name).path)
# open the edit comment form:
find("#edit-comment-btn").click
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]
Expand All @@ -496,7 +496,7 @@ def get_path(page_type, path)
page.find('#comment-form-edit-' + comment_id_num + ' a', text: 'Preview').click
# once preview is open, the images are embedded in the page.
# there should be 1 image in main, and 1 image in edit
assert_selector('#c' + comment_id_num + 'preview img', count: 1)
assert_selector('#comment-preview-edit-' + comment_id_num + ' img', count: 1)
assert_selector('#comment-preview-main img', count: 1)
end

Expand All @@ -512,12 +512,12 @@ def get_path(page_type, path)
visit get_path(page_type, nodes(node_name).path)
# find the EDIT id
# open up the edit comment form
page.find("#edit-comment-btn").click
page.find(".edit-comment-btn").click
edit_comment_form_id = page.find('h4', text: 'Edit comment').find(:xpath, '..')[:id]
# regex to strip the ID number out of string. ID format is #c1234edit
edit_id_num = /comment-form-edit-(\d+)/.match(edit_comment_form_id)[1]
# open the edit comment form
edit_preview_id = '#c' + edit_id_num + 'preview'
edit_preview_id = '#comment-preview-edit-' + edit_id_num
# find the REPLY id
page.all('p', text: 'Reply to this comment...')[0].click
reply_dropzone_id = page.find('[id^=dropzone-small-reply-]')[:id]
Expand All @@ -536,7 +536,7 @@ def get_path(page_type, path)
# click preview buttons in reply and edit form
page.find('#comment-form-edit-' + edit_id_num + ' a', text: 'Preview').click
page.first('a', text: 'Preview').click
assert_selector('#c' + edit_id_num + 'preview img', count: 1)
assert_selector('#comment-preview-edit-' + edit_id_num + ' img', count: 1)
assert_selector('#comment-preview-reply-' + reply_id_num, count: 1)
end

Expand All @@ -559,7 +559,7 @@ def get_path(page_type, path)
})
visit get_path(page_type, nodes(node_name).path)
# open up the edit comment form
page.find("#edit-comment-btn").click
page.find(".edit-comment-btn").click
# find the EDIT id
edit_comment_form_id = page.find('h4', text: 'Edit comment').find(:xpath, '..')[:id]
# open up the reply comment form
Expand Down

0 comments on commit 5ff03b1

Please sign in to comment.