diff --git a/app/assets/javascripts/mobile/mobile.js b/app/assets/javascripts/mobile/mobile.js index 124cb86fd..596bfa673 100644 --- a/app/assets/javascripts/mobile/mobile.js +++ b/app/assets/javascripts/mobile/mobile.js @@ -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 = $(""); - container = $("
"); - - 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)"), diff --git a/app/assets/javascripts/mobile/mobile_comments.js b/app/assets/javascripts/mobile/mobile_comments.js new file mode 100644 index 000000000..31cf703f1 --- /dev/null +++ b/app/assets/javascripts/mobile/mobile_comments.js @@ -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); + } + } +}); diff --git a/app/views/comments/_new_comment.mobile.haml b/app/views/comments/_new_comment.mobile.haml index bba1aa86a..d03012883 100644 --- a/app/views/comments/_new_comment.mobile.haml +++ b/app/views/comments/_new_comment.mobile.haml @@ -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" diff --git a/app/views/shared/_post_stats.mobile.haml b/app/views/shared/_post_stats.mobile.haml index 3f96807b3..a0a0d0c50 100644 --- a/app/views/shared/_post_stats.mobile.haml +++ b/app/views/shared/_post_stats.mobile.haml @@ -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"