Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Integrate Edit Comment Form JavaScript with editor.js #9067

Merged
merged 6 commits into from
Jan 26, 2021
Merged

Integrate Edit Comment Form JavaScript with editor.js #9067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
86db66d
move E.initialize call to higher level views #9004
noi5e Jan 23, 2021
30dc90d
change selectors for preview & textarea elements #9004
noi5e Jan 23, 2021
69c544a
change #edit-comment-btn to .edit-comment-btn #9004
noi5e Jan 23, 2021
4abe44f
change selectors to match new edit form #9004
noi5e Jan 23, 2021
90282b2
Merge branch 'main' into edit-form-JS-integration
noi5e Jan 26, 2021
ed09de9
update selectors for edit form #9004
noi5e Jan 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 99 additions & 95 deletions app/views/comments/_edit.html.erb
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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