Fix #5757 (+2 squashed commits)
Squashed commits: [e10acde] Open reactions after commenting [aceea75] Fix hound remarks and reactions tests The ".comment_action" should be active when the user clicks on "a.show comments" [d1deae5] Fix hound remarks [f5db5dd] Keep current instead of scrolling to first comment [be63092] Remove unused evt parameter
This commit is contained in:
theworldbright
parent
7dc70c7311
commit
5fa4519e93
3 changed files with 74 additions and 59 deletions
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".stream").on("tap click", "a.back_to_stream_element_top", function(evt) {
|
||||
$(".stream").on("tap click", "a.back_to_stream_element_top", function() {
|
||||
var bottomBar = $(this).closest(".bottom_bar").first();
|
||||
var streamElement = bottomBar.parent();
|
||||
$("html, body").animate({
|
||||
|
|
@ -16,60 +16,86 @@ $(document).ready(function() {
|
|||
|
||||
$(".stream").on("tap click", "a.show_comments", function(evt){
|
||||
evt.preventDefault();
|
||||
var toggleReactionsLink = $(this),
|
||||
bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
|
||||
commentActionLink = bottomBar.find("a.comment_action"),
|
||||
commentsContainer = function() { return bottomBar.find(".comment_container").first(); },
|
||||
existingCommentsContainer = commentsContainer();
|
||||
if (toggleReactionsLink.hasClass("active")) {
|
||||
existingCommentsContainer.hide();
|
||||
toggleReactionsLink.removeClass("active");
|
||||
} else if (existingCommentsContainer.length > 0) {
|
||||
existingCommentsContainer.show();
|
||||
showCommentBox(commentActionLink);
|
||||
toggleReactionsLink.addClass('active');
|
||||
commentsContainer().find("time.timeago").timeago();
|
||||
} else {
|
||||
$.ajax({
|
||||
url: toggleReactionsLink.attr('href'),
|
||||
success: function(data) {
|
||||
$(data).insertAfter(bottomBar.children(".show_comments").first());
|
||||
showCommentBox(commentActionLink);
|
||||
toggleReactionsLink.addClass("active");
|
||||
commentsContainer().find("time.timeago").timeago();
|
||||
}
|
||||
});
|
||||
}
|
||||
toggleComments($(this));
|
||||
});
|
||||
|
||||
function toggleComments(toggleReactionsLink) {
|
||||
if (toggleReactionsLink.hasClass("active")) {
|
||||
hideComments(toggleReactionsLink);
|
||||
} else {
|
||||
showComments(toggleReactionsLink);
|
||||
}
|
||||
}
|
||||
function hideComments(toggleReactionsLink) {
|
||||
var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
|
||||
commentsContainer = commentsContainerLazy(bottomBar),
|
||||
existingCommentsContainer = commentsContainer();
|
||||
existingCommentsContainer.hide();
|
||||
toggleReactionsLink.removeClass("active");
|
||||
}
|
||||
function showComments(toggleReactionsLink) {
|
||||
var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
|
||||
commentsContainer = commentsContainerLazy(bottomBar),
|
||||
existingCommentsContainer = commentsContainer(),
|
||||
commentActionLink = bottomBar.find("a.comment_action");
|
||||
if (existingCommentsContainer.length > 0) {
|
||||
showLoadedComments(toggleReactionsLink, existingCommentsContainer, commentActionLink);
|
||||
} else {
|
||||
showUnloadedComments(toggleReactionsLink, bottomBar, commentActionLink);
|
||||
}
|
||||
}
|
||||
function showLoadedComments(toggleReactionsLink, existingCommentsContainer, commentActionLink) {
|
||||
existingCommentsContainer.show();
|
||||
showCommentBox(commentActionLink);
|
||||
toggleReactionsLink.addClass("active");
|
||||
existingCommentsContainer.find("time.timeago").timeago();
|
||||
}
|
||||
function showUnloadedComments(toggleReactionsLink, bottomBar, commentActionLink) {
|
||||
var commentsContainer = commentsContainerLazy(bottomBar);
|
||||
$.ajax({
|
||||
url: toggleReactionsLink.attr("href"),
|
||||
success: function (data) {
|
||||
$(data).insertAfter(bottomBar.children(".show_comments").first());
|
||||
showCommentBox(commentActionLink);
|
||||
toggleReactionsLink.addClass("active");
|
||||
commentsContainer().find("time.timeago").timeago();
|
||||
}
|
||||
});
|
||||
}
|
||||
function commentsContainerLazy(bottomBar) {
|
||||
return function() {
|
||||
return bottomBar.find(".comment_container").first();
|
||||
};
|
||||
}
|
||||
|
||||
$(".stream").on("tap click", "a.comment_action", function(evt) {
|
||||
evt.preventDefault();
|
||||
showCommentBox(this);
|
||||
var bottomBar = $(this).closest(".bottom_bar").first();
|
||||
var commentContainer = bottomBar.find(".comment_container").first();
|
||||
scrollToOffset(commentContainer);
|
||||
});
|
||||
var scrollToOffset = function(commentsContainer){
|
||||
var commentCount = commentsContainer.find("li.comment").length;
|
||||
if ( commentCount > 3 ) {
|
||||
var lastComment = commentsContainer.find("li:nth-child("+(commentCount-3)+")");
|
||||
$('html,body').animate({
|
||||
$("html,body").animate({
|
||||
scrollTop: lastComment.offset().top
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
$(".stream").on("tap click", "a.comment_action", function(evt){
|
||||
evt.preventDefault();
|
||||
showCommentBox(this);
|
||||
var bottomBar = $(this).closest(".bottom_bar").first();
|
||||
scrollToOffset(bottomBar.find(".comment_container").first());
|
||||
});
|
||||
|
||||
function showCommentBox(link){
|
||||
var link = $(link);
|
||||
if(link.hasClass("inactive")) {
|
||||
var commentActionLink = $(link);
|
||||
if(commentActionLink.hasClass("inactive")) {
|
||||
$.ajax({
|
||||
url: link.attr("href"),
|
||||
url: commentActionLink.attr("href"),
|
||||
beforeSend: function(){
|
||||
link.addClass("loading");
|
||||
commentActionLink.addClass("loading");
|
||||
},
|
||||
context: link,
|
||||
context: commentActionLink,
|
||||
success: function(data){
|
||||
appendCommentBox.call(this, link, data);
|
||||
appendCommentBox.call(this, commentActionLink, data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -82,21 +108,14 @@ $(document).ready(function() {
|
|||
bottomBar.append(data);
|
||||
var textArea = bottomBar.find("textarea.comment_box").first()[0];
|
||||
MBP.autogrow(textArea);
|
||||
scrollToFirstComment(bottomBar);
|
||||
}
|
||||
|
||||
function scrollToFirstComment(bottomBar) {
|
||||
$("html, body").animate({
|
||||
scrollTop: bottomBar.offset().top - 54
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$(".stream").on("submit", ".new_comment", function(evt) {
|
||||
evt.preventDefault();
|
||||
var form = $(this);
|
||||
$.post(form.attr('action')+"?format=mobile", form.serialize(), function(data) {
|
||||
$.post(form.attr("action")+"?format=mobile", form.serialize(), function(data) {
|
||||
updateStream(form, data);
|
||||
}, 'html');
|
||||
}, "html");
|
||||
});
|
||||
|
||||
function updateStream(form, data) {
|
||||
|
|
@ -104,7 +123,7 @@ $(document).ready(function() {
|
|||
addNewComments(bottomBar, data);
|
||||
updateCommentCount(bottomBar);
|
||||
updateReactionCount(bottomBar);
|
||||
handleNewCommentBox(form, bottomBar);
|
||||
handleCommentShowing(form, bottomBar);
|
||||
bottomBar.find("time.timeago").timeago();
|
||||
}
|
||||
|
||||
|
|
@ -129,16 +148,12 @@ $(document).ready(function() {
|
|||
}));
|
||||
}
|
||||
|
||||
function handleNewCommentBox(form, bottomBar) {
|
||||
form.parent().remove();
|
||||
function handleCommentShowing(form, bottomBar) {
|
||||
var formContainer = form.parent();
|
||||
formContainer.remove();
|
||||
var commentActionLink = bottomBar.find("a.comment_action").first();
|
||||
commentActionLink.addClass("inactive");
|
||||
showCommentBoxIfApplicable(bottomBar, commentActionLink);
|
||||
}
|
||||
function showCommentBoxIfApplicable(bottomBar, commentActionLink) {
|
||||
var toggleReactionsLink = bottomBar.find(".show_comments").first();
|
||||
if (toggleReactionsLink.hasClass("active")) {
|
||||
showCommentBox(commentActionLink);
|
||||
}
|
||||
showComments(toggleReactionsLink);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
%fieldset
|
||||
.control-group
|
||||
= hidden_field_tag :post_id, post_id, id: "post_id_on_#{post_id}"
|
||||
= text_area_tag :text, nil, class: "col-md-12 comment_box form-control form-group", id: "comment_text_on_#{post_id}", placeholder: t('.comment'), autofocus: true
|
||||
= text_area_tag :text, nil, class: "col-md-12 comment_box form-control form-group", id: "comment_text_on_#{post_id}", placeholder: t('.comment')
|
||||
= submit_tag t('.comment'), id: "comment_submit_#{post_id}", 'data-disable-with' => t('.commenting'), class: "btn btn-primary pull-right"
|
||||
.clearfix
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ Feature: reactions mobile post
|
|||
And I should see "1 reaction" within ".show_comments"
|
||||
And I click on selector "a.show_comments"
|
||||
And I should see "1" within ".comment_count"
|
||||
When I click on selector "a.image_link.comment_action.inactive"
|
||||
When I click on selector "a.image_link.comment_action"
|
||||
And I click on selector "a.remove"
|
||||
And I confirm the alert
|
||||
Then I should not see "1 reaction" within ".show_comments"
|
||||
|
|
|
|||
Loading…
Reference in a new issue