gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Unify comment view between comments and show, hide all comment input elements when user clicks on new reply button

Browse Source
This commit is contained in:
Nathan Leniz
2015-03-09 11:31:32 +09:00
parent 2f54153b16
commit 77496864d4
2 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
views/stories/comments.jade
View File

@ -57,29 +57,31 @@
$('.comment-a-comment').on('click', 'a', function () { $('.comment-a-comment').on('click', 'a', function () {
$(this).unbind('click'); $(this).unbind('click');
$('.comment-to-comment-formgroup').empty(); $('.comment-to-comment-formgroup').empty();
$('#initial-comment-submit').addClass('hidden-element');
var div = document.createElement('div'); var div = document.createElement('div');
var commentId = $(this).attr('id'); var commentId = $(this).attr('id');
$(div).html( $(div).html(
"<div class='formgroup comment-to-comment-formgroup'>" + "<div class='formgroup comment-to-comment-formgroup control-label-story-submission'>" +
"<div class=col-xs-12" + '<div class="col-xs-12">' +
"<div class='input-group'>" + "<div class='input-group'>" +
"<input class='form-control' id='comment-to-comment-textarea' type='text' maxlength='140' autofocus />" + "<input class='form-control big-text-field field-responsive' id='comment-to-comment-textinput' type='text' maxlength='140' autofocus />" +
"<span class='input-group-btn'>" +
"<button id='submit-comment-to-comment' class='btn btn-big btn-primary btn-responsive'>Send</button>" +
"</span>" +
"</div>" + "</div>" +
"</div>" + "</div>" +
"<span class='input-group-btn'>" + "<div id='textarea-comment-feedback'></div>" +
"<button id='submit-comment-to-comment' class='btn btn-big btn-primary btn-responsive' type='button'>Send</button>" +
"</span>" +
"<span class='pull-left' id='textarea_feedback'></span>" +
"</div>" "</div>"
) )
.addClass('row') .addClass('row')
.appendTo($(this).closest('.media-body-wrapper')); .appendTo($(this).closest('.media-body-wrapper'));
var text_max = 140; var text_max = 140;
$('#textarea_feedback').html(text_max + ' characters remaining'); $('#textarea-comment-feedback').html(text_max + ' characters remaining');
$('#comment-to-comment-textarea').keyup(function () { $('#comment-to-comment-textinput').keyup(function () {
var text_length = $('#comment-to-comment-textarea').val().length; console.log('I should be showing characters remaining');
var text_length = $('#comment-to-comment-textinput').val().length;
var text_remaining = text_max - text_length; var text_remaining = text_max - text_length;
$('#textarea_feedback').html(text_remaining + ' characters remaining'); $('#textarea-comment-feedback').html(text_remaining + ' characters remaining');
}); });
var submitCommentToCommentHandler = function submitCommentToCommentHandler() { var submitCommentToCommentHandler = function submitCommentToCommentHandler() {
$('#submit-comment-to-comment').unbind('click'); $('#submit-comment-to-comment').unbind('click');

3
views/stories/show.jade
View File

@ -41,7 +41,8 @@
input#comment-box.big-text-field.field-responsive.form-control(type='text', placeholder='Enter your reply', autofocus) input#comment-box.big-text-field.field-responsive.form-control(type='text', placeholder='Enter your reply', autofocus)
span.input-group-btn span.input-group-btn
button#comment-button.btn.btn-big.btn-primary.btn-responsive(type='button') Send button#comment-button.btn.btn-big.btn-primary.btn-responsive(type='button') Send
span.pull-left#textarea_feedback span.spacer.pull-left#textarea_feedback
script. script.
$('#reply-to-main-post').on('click', function() { $('#reply-to-main-post').on('click', function() {
$('#initial-comment-submit').removeClass('hidden-element'); $('#initial-comment-submit').removeClass('hidden-element');