Fix #5483
Please see https://github.com/diaspora/diaspora/issues/5483#issuecomment-109277476 (+5 squashed commits) Squashed commits: [62f38a6] Wrap all handlers with document.ready() Also add the copyright at the top of the file. [e861587] Split up show_comments handling Currently there are two classes that have the class show_comments. I renamed one to "back_to_stream_element_top" as it is responsible for scrolling the user all the way up to the top when clicked. The other which toggles the reactions will remain as "show_comments". [a8dbc4e] Remove unused "cancel new comment" action [db575cc] Move comment related js to mobile_comments.js [de44f81] Move add comment container to new comment partial
This commit is contained in:
theworldbright
parent
93281d283f
commit
7dc70c7311
4 changed files with 157 additions and 155 deletions
|
|
@ -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(){
|
||||
|
||||
|
|
@ -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)"),
|
||||
|
|
|
|||
144
app/assets/javascripts/mobile/mobile_comments.js
Normal file
144
app/assets/javascripts/mobile/mobile_comments.js
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
/*
|
||||
* 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(evt) {
|
||||
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();
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
$(".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")) {
|
||||
$.ajax({
|
||||
url: link.attr("href"),
|
||||
beforeSend: function(){
|
||||
link.addClass("loading");
|
||||
},
|
||||
context: link,
|
||||
success: function(data){
|
||||
appendCommentBox.call(this, link, 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);
|
||||
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) {
|
||||
updateStream(form, data);
|
||||
}, 'html');
|
||||
});
|
||||
|
||||
function updateStream(form, data) {
|
||||
var bottomBar = form.closest(".bottom_bar").first();
|
||||
addNewComments(bottomBar, data);
|
||||
updateCommentCount(bottomBar);
|
||||
updateReactionCount(bottomBar);
|
||||
handleNewCommentBox(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 handleNewCommentBox(form, bottomBar) {
|
||||
form.parent().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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -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
|
||||
- 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'), autofocus: true
|
||||
= submit_tag t('.comment'), id: "comment_submit_#{post_id}", 'data-disable-with' => t('.commenting'), class: "btn btn-primary pull-right"
|
||||
.clearfix
|
||||
|
||||
= link_to "#", class: "back_to_stream_element_top" do
|
||||
= image_tag "mobile/arrow_up_small.png"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue