From 661ad20a025506d655a0ad86bd3f34bedbc7e5b4 Mon Sep 17 00:00:00 2001 From: danielvincent Date: Sun, 24 Oct 2010 13:47:42 -0700 Subject: [PATCH 1/2] added delegate, proper finders, and more chaining to stream.js. removed div.comment_set from the DOM. --- app/views/comments/_comments.html.haml | 11 ++-- app/views/js/_websocket_js.haml | 4 +- app/views/shared/_aspect_nav.haml | 2 +- public/javascripts/stream.js | 81 ++++++++++++++++-------- public/javascripts/view.js | 22 ++----- public/stylesheets/sass/application.sass | 13 ++-- 6 files changed, 74 insertions(+), 59 deletions(-) diff --git a/app/views/comments/_comments.html.haml b/app/views/comments/_comments.html.haml index 7378fc97e..01ac7c0d7 100644 --- a/app/views/comments/_comments.html.haml +++ b/app/views/comments/_comments.html.haml @@ -2,10 +2,9 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -%div.comments - %ul.comment_set{:id => post.id} - - for comment in post.comments - = render 'comments/comment', :post => comment - %li.comment.show - = render 'comments/new_comment', :post => post +%ul.comments{:id => post.id} + - for comment in post.comments + = render 'comments/comment', :post => comment + %li.comment.show + = render 'comments/new_comment', :post => post diff --git a/app/views/js/_websocket_js.haml b/app/views/js/_websocket_js.haml index ec7381bf4..498963e08 100644 --- a/app/views/js/_websocket_js.haml +++ b/app/views/js/_websocket_js.haml @@ -45,14 +45,14 @@ function processComment(post_id, html){ post = $("*[data-guid='"+post_id+"']'"); - $(' .comment_set li:last', post ).before( + $(' .comments li:last', post ).before( $(html).fadeIn("fast", function(){}) ); toggler = $('.show_post_comments', post) if(toggler.length > 0){ toggler.html( - toggler.html().replace(/\d+/,$('.comment_set', post)[0].childElementCount -1)); + toggler.html().replace(/\d+/,$('.comments', post)[0].childElementCount -1)); if( !$(".comments", post).is(':visible') ){ toggler.click(); diff --git a/app/views/shared/_aspect_nav.haml b/app/views/shared/_aspect_nav.haml index 72f932118..2c960a5db 100644 --- a/app/views/shared/_aspect_nav.haml +++ b/app/views/shared/_aspect_nav.haml @@ -12,7 +12,7 @@ %li = link_to '+', '#add_aspect_pane', :class => "add_aspect_button", :title => "add a new aspect" - %ul{ :style => "position:absolute;right:0;bottom:0.01em;"} + %ul.right{:style=>"bottom:0;"} %li{ :style => "margin-right:0;", :class => ("selected" if @aspect == :manage)} = link_to ( (@request_count == 0)? t('.manage') : "#{t('.manage')} (#{@request_count})"), {:controller => :aspects, :action => :manage}, :class => "edit_aspect_button", :class => new_request(@request_count), :title => t('.manage_your_aspects') diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index 5591bd1f8..724072179 100644 --- a/public/javascripts/stream.js +++ b/public/javascripts/stream.js @@ -5,39 +5,64 @@ $(document).ready(function(){ - $('.comment_set').each(function(index) { - var $this = $(this); - if($this.children().length > 1) { - var show_comments_toggle = $this.parent().prev().children(".show_post_comments"); - show_comments_toggle.click(); + + // expand all comments on page load + $("#stream").find('.comments').each(function(index) { + var comments = $(this); + if(comments.children("li").length > 1) { + var show_comments_toggle = comments.closest("li").find(".show_post_comments"); + expandComments(show_comments_toggle); } }); + + // comment toggle action + $("#stream").delegate("a.show_post_comments", "click", function(evt) { + evt.preventDefault(); + expandComments($(this)); + }); + + // comment submit action + $("#stream").delegate("a.comment_submit", "click", function(evt){ + $(this).closest("form").children(".comment_box").attr("rows", 1); + }); + + $("#stream").delegate("textarea.comment_box", "focus", function(evt){ + var commentBox = $(this); + commentBox.attr("rows", 2) + .closest("form").find(".comment_submit").fadeIn(200); + }); + + $("#stream").delegate("textarea.comment_box", "blur", function(evt){ + var commentBox = $(this); + if( !commentBox.val() ) { + commentBox.attr("rows", 1) + .closest("form").find(".comment_submit").hide(); + } + }); + + // reshare button action + $("#stream").delegate(".reshare_button", "click", function(evt){ + evt.preventDefault(); + var button = $(this); + button.closest(".reshare_pane").children(".reshare_box").show(); + button.addClass("active"); + }); + });//end document ready -$(".show_post_comments").live('click', function(event) { - event.preventDefault(); - var $this = $(this); +function expandComments(toggler){ + var text = toggler.html(); + commentBlock = toggler.closest("li").find("ul.comments", ".content"); + + if( toggler.hasClass("visible")) { + toggler.removeClass("visible") + .html(text.replace("hide", "show")); + commentBlock.slideUp(150); - if( $this.hasClass( "visible")) { - $this.html($(this).html().replace("hide", "show")); - $this.closest("li").children(".content").children(".comments").slideUp(150); } else { - $this.html($(this).html().replace("show", "hide")); - $this.closest("li").children(".content").children(".comments").slideDown(150); + toggler.addClass("visible") + .html(text.replace("show", "hide")); + commentBlock.slideDown(150); } - $(this).toggleClass( "visible" ); -}); - - -$(".comment_submit").live('click', function(evt){ - $(this).closest("form").children("p .comment_box").attr("rows", 1); -}); - -$(".reshare_button").live("click", function(e){ - e.preventDefault(); - var button = $(this); - button.parent(".reshare_pane").children(".reshare_box").show(); - button.addClass("active"); -}); - +} diff --git a/public/javascripts/view.js b/public/javascripts/view.js index f967498cd..0b3987d53 100644 --- a/public/javascripts/view.js +++ b/public/javascripts/view.js @@ -48,7 +48,13 @@ $(document).ready(function(){ } ); - $("#publisher textarea, .comment_box").keydown( function(e) { + $("#publisher").find("textarea").keydown( function(e) { + if (e.keyCode == 13) { + $(this).closest("form").submit(); + } + }); + + $("#stream").delegate("textarea.comment_box", "keydown", function(e){ if (e.keyCode == 13) { $(this).closest("form").submit(); } @@ -126,17 +132,3 @@ $(".make_profile_photo").live("click", function(){ }); }); -$(".comment_box").live("focus",function(evt){ - var $this = $(this); - $this.attr("rows", 2); - $this.parents("p").parents("form").children("p").children(".comment_submit").fadeIn(200); -}); - -$(".comment_box").live('blur', function(evt){ - var $this = $(this); - if( $this.val() == '' ) { - $this.parents("p").parents("form").children("p").children(".comment_submit").fadeOut(0); - $this.attr("rows", 1); - } -}); - diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index a0a49a55d..7e93a6f7b 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -433,11 +433,10 @@ form :right 1em #stream.show - div.comments + ul.comments :display block - ul.comment_set - :margin - :top 0 + :margin + :top 0 > li :border none :padding 0 @@ -447,7 +446,7 @@ form :border none -#stream div.comments +#stream ul.comments :display none .avatar @@ -462,7 +461,7 @@ input.comment_submit :right -10px -ul.comment_set +ul.comments :margin 0 :top 1em :padding 0 @@ -794,7 +793,7 @@ h1.big_text :top 1px solid #999 :bottom 2px solid #eee -.show_post_comments ul.comment_set +.show_post_comments ul.comments :width 100% .sub_header From 7b3f6f66c17edc01d1fc9a69eb86edf687e237ff Mon Sep 17 00:00:00 2001 From: danielvincent Date: Sun, 24 Oct 2010 14:44:24 -0700 Subject: [PATCH 2/2] removed second #stream declaration on status_message#show. fixed bug where show pages would get posts as well as comments. --- app/views/comments/_comment.html.haml | 2 +- app/views/js/_websocket_js.haml | 6 +++--- app/views/status_messages/show.html.haml | 9 +++------ public/javascripts/stream.js | 6 +++--- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml index 8bb5aba5b..54612d7e4 100644 --- a/app/views/comments/_comment.html.haml +++ b/app/views/comments/_comment.html.haml @@ -2,7 +2,7 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -%li.comment{:id => post.id} +%li.comment = person_image_link(post.person) .content .from diff --git a/app/views/js/_websocket_js.haml b/app/views/js/_websocket_js.haml index 498963e08..ec9854bb6 100644 --- a/app/views/js/_websocket_js.haml +++ b/app/views/js/_websocket_js.haml @@ -45,7 +45,7 @@ function processComment(post_id, html){ post = $("*[data-guid='"+post_id+"']'"); - $(' .comments li:last', post ).before( + $('.comments li:last', post ).before( $(html).fadeIn("fast", function(){}) ); toggler = $('.show_post_comments', post) @@ -63,9 +63,9 @@ function processPost(className, html, aspectIds){ if(onPageForAspects(aspectIds)){ var addPostToStream = function (html){ - $("#stream").prepend( + $("#stream:not('.show')").prepend( $(html).fadeIn("fast", function(){ - $("#stream label:first").inFieldLabels(); + $("#stream").find("label").first().inFieldLabels(); }) ) }; diff --git a/app/views/status_messages/show.html.haml b/app/views/status_messages/show.html.haml index 1e0f15438..9aa2749a5 100644 --- a/app/views/status_messages/show.html.haml +++ b/app/views/status_messages/show.html.haml @@ -6,13 +6,10 @@ = render 'shared/author_info', :post => @status_message .span-14.append-1.last - #stream - %h1.show_text - = make_links(@status_message.message) + %h1.show_text + = make_links(@status_message.message) - = "Posted #{how_long_ago(@status_message)} to" - - for aspect in current_user.aspects_with_post( @status_message.id ) - = link_to aspect.name, aspect + = how_long_ago(@status_message) - if current_user.owns? @status_message %p diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index 724072179..ae6ae7d91 100644 --- a/public/javascripts/stream.js +++ b/public/javascripts/stream.js @@ -5,9 +5,9 @@ $(document).ready(function(){ - + // expand all comments on page load - $("#stream").find('.comments').each(function(index) { + $("#stream:not('.show')").find('.comments').each(function(index) { var comments = $(this); if(comments.children("li").length > 1) { var show_comments_toggle = comments.closest("li").find(".show_post_comments"); @@ -16,7 +16,7 @@ $(document).ready(function(){ }); // comment toggle action - $("#stream").delegate("a.show_post_comments", "click", function(evt) { + $("#stream:not('.show')").delegate("a.show_post_comments", "click", function(evt) { evt.preventDefault(); expandComments($(this)); });