Skip to content

Commit

Permalink
Merge pull request #6066 from theworldbright/5483-fix-mobile-stream-c…
Browse files Browse the repository at this point in the history
…omments

Fix for #5483 and #5757 (mobile stream comments)
  • Loading branch information
denschub committed Jun 27, 2015
2 parents 9613eb8 + 3ac6612 commit 8b773c8
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 163 deletions.
142 changes: 1 addition & 141 deletions app/assets/javascripts/mobile/mobile.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
//= require mobile/mobile_file_uploader
//= require mobile/profile_aspects
//= require mobile/tag_following
//= require mobile/mobile_comments.js

$(document).ready(function(){

Expand Down Expand Up @@ -127,147 +128,6 @@ $(document).ready(function(){
}
});

/* Show comments */
$("a.show_comments", ".stream").bind("tap click", function(evt){
evt.preventDefault();
var link = $(this),
parent = link.closest(".bottom_bar").first(),
commentsContainer = function(){ return parent.find(".comment_container").first(); },
existingCommentsContainer = commentsContainer();

if( link.hasClass('active') ) {
existingCommentsContainer.hide();
if(!link.hasClass('bottom_collapse')){
link.removeClass('active');
} else {
parent.find(".show_comments").first().removeClass('active');
}

$('html,body').scrollTop(parent.offset().top - parent.closest(".stream_element").height() - 8);

} else if( existingCommentsContainer.length > 0) {

if(!existingCommentsContainer.hasClass('noComments')) {
$.ajax({
url: link.attr('href'),
success: function(data){
parent.append($(data).find('.comments_container').html());
link.addClass('active');
existingCommentsContainer.show();
scrollToOffset(parent, commentsContainer());
commentsContainer().find('time.timeago').timeago();
}
});
} else {
existingCommentsContainer.show();
existingCommentsContainer.find('time.timeago').timeago();
}

link.addClass('active');

} else {
$.ajax({
url: link.attr('href'),
success: function(data){
parent.append(data);
link.addClass('active');
scrollToOffset(parent, commentsContainer());
commentsContainer().find('time.timeago').timeago();
}
});
}
});

var scrollToOffset = function(parent, commentsContainer){
var commentCount = commentsContainer.find("li.comment").length;
if( commentCount > 3 ) {
var lastComment = commentsContainer.find("li:nth-child("+(commentCount-4)+")");
$('html,body').animate({
scrollTop: lastComment.offset().top
}, 1000);
}
};

$(".stream").delegate("a.comment_action", "tap click", function(evt){
evt.preventDefault();
var link = $(this);

if(link.hasClass('inactive')) {
var parent = link.closest(".bottom_bar").first(),
container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container').first();

$.ajax({
url: link.attr('href'),
beforeSend: function(){
link.addClass('loading');
},
context: link,
success: function(data){
var textarea = function(target) { return target.closest(".stream_element").find('textarea.comment_box').first()[0] };
link.removeClass('loading');

if(!link.hasClass("add_comment_bottom_link")){
link.removeClass('inactive');
}

container.hide();
parent.append(data);

MBP.autogrow(textarea($(this)));
}
});
}
});

$(".stream").delegate("a.cancel_new_comment", "tap click", function(evt){
evt.preventDefault();
var link = $(this),
form = link.closest("form"),
commentActionLink = link.closest(".bottom_bar").find("a.comment_action").first(),
container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container');

if(container.length > 0 ){
container.first().show();
}

commentActionLink.addClass("inactive");
form.remove();
});

$(document).on("submit", ".new_comment", function(evt){
evt.preventDefault();
var form = $(this);

$.post(form.attr('action')+"?format=mobile", form.serialize(), function(data){
var bottomBar = form.closest('.bottom_bar').first(),
container = bottomBar.find('.add_comment_bottom_link_container'),
commentActionLink = bottomBar.find("a.comment_action").first(),
reactionLink = bottomBar.find(".show_comments").first(),
commentCount = bottomBar.find(".comment_count");

if(container.length > 0) {
container.before(data);
form.remove();
container.show();

} else {
var comments = $("<ul class='comments'></ul>");
container = $("<div class='comments_container not_all_present'></div>");

comments.html(data);
container.append(comments);
form.remove();
container.appendTo(bottomBar);
}

reactionLink.text(reactionLink.text().replace(/(\d+)/, function(match){ return parseInt(match) + 1; }));
commentCount.text(commentCount.text().replace(/(\d+)/, function(match){ return parseInt(match) + 1; }));
commentActionLink.addClass("inactive");
bottomBar.find('time.timeago').timeago();
}, 'html');
});


$(".service_icon").bind("tap click", function() {
var service = $(this).toggleClass("dim"),
selectedServices = $("#new_status_message .service_icon:not(.dim)"),
Expand Down
159 changes: 159 additions & 0 deletions app/assets/javascripts/mobile/mobile_comments.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
/*
* Copyright (c) 2010-2011, Diaspora Inc. This file is
* licensed under the Affero General Public License version 3 or later. See
* the COPYRIGHT file.
*/

$(document).ready(function() {

$(".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({
scrollTop: streamElement.offset().top - 54
}, 1000);
});

$(".stream").on("tap click", "a.show_comments", function(evt){
evt.preventDefault();
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({
scrollTop: lastComment.offset().top
}, 1000);
}
};

function showCommentBox(link){
var commentActionLink = $(link);
if(commentActionLink.hasClass("inactive")) {
$.ajax({
url: commentActionLink.attr("href"),
beforeSend: function(){
commentActionLink.addClass("loading");
},
context: commentActionLink,
success: function(data){
appendCommentBox.call(this, commentActionLink, data);
}
});
}
}

function appendCommentBox(link, data) {
link.removeClass("loading");
link.removeClass("inactive");
var bottomBar = link.closest(".bottom_bar").first();
bottomBar.append(data);
var textArea = bottomBar.find("textarea.comment_box").first()[0];
MBP.autogrow(textArea);
}

$(".stream").on("submit", ".new_comment", function(evt) {
evt.preventDefault();
var form = $(this);
$.post(form.attr("action")+"?format=mobile", form.serialize(), function(data) {
updateStream(form, data);
}, "html");
});

function updateStream(form, data) {
var bottomBar = form.closest(".bottom_bar").first();
addNewComments(bottomBar, data);
updateCommentCount(bottomBar);
updateReactionCount(bottomBar);
handleCommentShowing(form, bottomBar);
bottomBar.find("time.timeago").timeago();
}

function addNewComments(bottomBar, data) {
var commentsContainer = bottomBar.find(".comment_container").first();
var comments = commentsContainer.find(".comments").first();
comments.append(data);
}

// Fix for no comments
function updateCommentCount(bottomBar) {
var commentCount = bottomBar.find(".comment_count");
commentCount.text(commentCount.text().replace(/(\d+)/, function (match) {
return parseInt(match) + 1;
}));
}
// Fix for no reactions
function updateReactionCount(bottomBar) {
var toggleReactionsLink = bottomBar.find(".show_comments").first();
toggleReactionsLink.text(toggleReactionsLink.text().replace(/(\d+)/, function (match) {
return parseInt(match) + 1;
}));
}

function handleCommentShowing(form, bottomBar) {
var formContainer = form.parent();
formContainer.remove();
var commentActionLink = bottomBar.find("a.comment_action").first();
commentActionLink.addClass("inactive");
var toggleReactionsLink = bottomBar.find(".show_comments").first();
showComments(toggleReactionsLink);
}
});
7 changes: 0 additions & 7 deletions app/assets/stylesheets/mobile/mobile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -416,13 +416,6 @@ h3 { margin-top: 0; }
}
}

.show_comments.bottom_collapse {
position: absolute;
right: 10px;
top: 14px;
padding: 5px 10px;
}

#bottom_bar_tabs {
display: table;
width: 100%;
Expand Down
19 changes: 12 additions & 7 deletions app/views/comments/_new_comment.mobile.haml
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,15 @@
-# licensed under the Affero General Public License version 3 or later. See
-# the COPYRIGHT file.
= form_tag( post_comments_path(post_id), id: "new_comment_on_#{post_id}", class: 'new_comment', autocomplete: "off") do
%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
= submit_tag t('.comment'), id: "comment_submit_#{post_id}", 'data-disable-with' => t('.commenting'), class: "btn btn-primary pull-right"
.clearfix
.add_comment_bottom_link_container
= link_to "#", class: "back_to_stream_element_top pull-right" do
= image_tag "mobile/arrow_up_small.png"

- if user_signed_in?
= form_tag( post_comments_path(post_id), id: "new_comment_on_#{post_id}", class: "new_comment", autocomplete: "off") do
%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")
= submit_tag t(".comment"), id: "comment_submit_#{post_id}", 'data-disable-with' => t(".commenting"), class: "btn btn-primary btn-block"
.clearfix
7 changes: 0 additions & 7 deletions app/views/shared/_post_stats.mobile.haml
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,3 @@

%ul.comments
= render partial: "comments/comment", collection: @post.comments.for_a_stream, locals: {post: @post}

%li.comment.add_comment_bottom_link_container
= link_to "#", class: "show_comments bottom_collapse active" do
= image_tag "mobile/arrow_up_small.png"

- if user_signed_in?
= link_to t("comments.new_comment.comment"), new_post_comment_path(@post), class: "add_comment_bottom_link btn btn-default comment_action inactive"
2 changes: 1 addition & 1 deletion features/mobile/reactions.feature
Original file line number Diff line number Diff line change
Expand Up @@ -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"

0 comments on commit 8b773c8

Please sign in to comment.