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

Add Unique IDs to Comment Forms #9062

Merged
merged 7 commits into from
Jan 26, 2021
Merged

Add Unique IDs to Comment Forms #9062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4b0f4e4
delete get_textarea_id method #9004
noi5e Jan 21, 2021
5a0b2f5
change #c23edit selector to #comment-form-edit-23 #9004
noi5e Jan 21, 2021
f2f219b
assign unique IDs to comment forms #9004
noi5e Jan 21, 2021
47610e1
change selectors from #c1edit to #comment-form-edit-1 #9004
noi5e Jan 21, 2021
66ddada
change preview IDs from #preview1 to #comment-preview-1 #9004
noi5e Jan 22, 2021
fcfaa23
change main preview selector to #comment-preview-main from #preview-m…
noi5e Jan 22, 2021
698c8cf
change main preview selector to #comment-preview-main from #preview-m…
noi5e Jan 22, 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
2 changes: 1 addition & 1 deletion app/assets/javascripts/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ $E = {
}
});
},
setState: function(textarea = 'text-input', preview = 'preview-main', title = 'title') {
setState: function(textarea = 'text-input', preview = 'comment-preview-main', title = 'title') {
$E.title = $('#' + title + 'title'); // not sure why this exists? seems like $E.title is always #title
$E.textarea = $('#' + textarea);
$E.textarea.bind('input propertychange', $E.save);
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/editorToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const getEditorParams = (targetDiv) => {
// #text-input ID should be unique, and the only comment form on /wiki/new & /wiki/edit
params['textarea'] = 'text-input';
// #preview-main should be unique as well
params['preview'] = 'preview-main';
params['preview'] = 'comment-preview-main';
}
return params;
};
Expand Down
18 changes: 3 additions & 15 deletions app/helpers/application_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,11 @@ def feature_node(title)
def get_comment_form_id(location, reply_to)
case location
when :main
'-main'
'main'
when :reply
'-reply-' + reply_to.to_s
'reply-' + reply_to.to_s
when :responses
'-responses'
'responses'
end
end

Expand All @@ -91,18 +91,6 @@ def get_toolbar_element_id(location, reply_to, comment_id)
end
end

# used in views/comments/_form.html.erb
def get_textarea_id(location, reply_to)
case location
when :main
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleting this function, it was unnecessary.

'text-input'
when :reply
'text-input-reply-' + reply_to.to_s
when :responses
'text-input-responses'
end
end

def locale_name_pairs
I18n.available_locales.map do |locale|
[I18n.t('language', locale: locale), locale]
Expand Down
212 changes: 105 additions & 107 deletions app/views/comments/_edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
<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 %>>
<div class="card card-body bg-light comment-form-wrapper">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I collapsed <div class="card card-body bg-light"> and <div class="comment-form-wrapper"> into one <div>. I know there's a lot of <div> spam in the views built up over the years, trying to do my part in reducing it.

I checked the CSS by both viewing locally and hunting through the stylesheets, and this doesn't seem to create any new issues.

<form method="post" id="comment-form-edit-<%= comment.id %>" 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 %>">
<h4 style="margin-top:0;"><%= title %></h4>
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">

<style>
#imagebar {width:100%;}
</style>
<style>
#imagebar {width:100%;}
</style>

<!-- 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">
<!-- 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 class="imagebar">
<div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-bar-container active pull-right">
Expand All @@ -36,111 +35,110 @@
</label>
</span>
</p>
</div>
</div>
<script type="application/javascript">
function setInit(id) {
const textArea = 'c'+id+'text';
const preview = 'c'+id+'preview';
$E.setState(textArea, preview);
}
</div>
<script type="application/javascript">
function setInit(id) {
const textArea = 'c'+id+'text';
const preview = 'c'+id+'preview';
$E.setState(textArea, preview);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes in this file are mostly due to slightly fixing the indentation.

$('#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="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>
<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>

<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>
</form>
</div>
<p id="who-is-notified" style="display:none;color:#888;">
<%= translation('comments._edit.email_notifications') %>
</p>
</form>
</div>
Loading