diff options
author | Raphael Sofaer <raphael@joindiaspora.com> | 2011-07-12 01:05:45 +0400 |
---|---|---|
committer | Raphael Sofaer <raphael@joindiaspora.com> | 2011-07-12 01:05:45 +0400 |
commit | eafe6a7c8541c8fceaaa789d3907c7862f0161e9 (patch) | |
tree | 34d3aee8b1e1ac9e1ba0fa82f9f5a153cd4711c0 /public | |
parent | 594c9b02b19910d562a8a11d22cd9af3678bd255 (diff) | |
parent | 39ff51a9d79480ffae21e25f161a1efb79b585ac (diff) |
Merge branch 'ajaxy-comments'
Diffstat (limited to 'public')
-rw-r--r-- | public/javascripts/stream.js | 66 | ||||
-rw-r--r-- | public/javascripts/web-socket-receiver.js | 6 | ||||
-rw-r--r-- | public/stylesheets/sass/application.sass | 131 |
3 files changed, 106 insertions, 97 deletions
diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index 55d03ce99..690f47612 100644 --- a/public/javascripts/stream.js +++ b/public/javascripts/stream.js @@ -52,7 +52,7 @@ var Stream = { }, setUpComments: function(){ - $("a.show_post_comments:not(.show)", this.selector).live('click', Stream.toggleComments); + $("a.toggle_post_comments:not(.show)", this.selector).live('click', Stream.toggleComments); // comment link form focus $(".focus_comment_textarea", this.selector).live('click', function(evt) { Stream.focusNewComment($(this), evt); @@ -66,7 +66,7 @@ var Stream = { var element = $(this), target = element.parents(".comment"), post = element.closest(".stream_element"), - toggler = post.find(".show_post_comments"); + toggler = post.find(".toggle_post_comments"); target.hide("blind", { direction: "vertical" }, 300, function() { $(this).remove(); @@ -126,42 +126,58 @@ var Stream = { toggleComments: function(evt) { evt.preventDefault(); - var $this = $(this), - showUl = $(this).closest("li"), - commentBlock = $this.closest(".stream_element").find("ul.comments", ".content"), - commentBlockMore = $this.closest(".stream_element").find(".older_comments", ".content") - - if( commentBlockMore.hasClass("inactive") ) { - commentBlockMore.fadeIn(150, function() { - commentBlockMore.removeClass("inactive"); - commentBlockMore.removeClass("hidden"); + + var $toggler = $(this), + comments = $toggler.closest('.stream_element').find('ul.comments'); + + if (comments.hasClass('loaded') && !comments.hasClass('hidden')){ + Stream.hideComments.apply($toggler); + }else { + Stream.showComments.apply($toggler); + } + }, + showComments: function(){ + var commentList = this.closest('.stream_element').find('ul.comments'), + toggle = this; + + if( commentList.hasClass('loaded') ){ + toggle.html(Diaspora.widgets.i18n.t("comments.hide")); + commentList.removeClass('hidden'); + } + else { + toggle.append("<img alt='loading' src='/images/ajax-loader.gif' />"); + $.ajax({ + url: this.attr('href'), + success: function(data){ + toggle.html(Diaspora.widgets.i18n.t("comments.hide")); + commentList.html(data) + .addClass('loaded'); + Diaspora.widgets.publish("stream/scrolled") + } }); - $this.html(Diaspora.widgets.i18n.t("comments.hide")); - } else { - if(commentBlock.hasClass("hidden")) { - commentBlock.removeClass("hidden"); - showUl.css("margin-bottom","-1em"); - $this.html(Diaspora.widgets.i18n.t("comments.hide")); - }else{ - commentBlock.addClass("hidden"); - showUl.css("margin-bottom","1em"); - $this.html(Diaspora.widgets.i18n.t("comments.show")); - } } }, + hideComments: function(){ + var commentList = this.closest('.stream_element').find('ul.comments'); + commentList.addClass('hidden'); + this.html(Diaspora.widgets.i18n.t("comments.show")); + }, + focusNewComment: function(toggle, evt) { evt.preventDefault(); - var commentBlock = toggle.closest(".stream_element").find("ul.comments", ".content"); + var post = toggle.closest(".stream_element"); + var commentBlock = post.find(".new_comment_form_wrapper"); + var textarea = post.find(".new_comment textarea"); if(commentBlock.hasClass("hidden")) { commentBlock.removeClass("hidden"); - commentBlock.find("textarea").focus(); + textarea.focus(); } else { if(commentBlock.children().length <= 1) { commentBlock.addClass("hidden"); } else { - commentBlock.find("textarea").focus(); + textarea.focus(); } } } diff --git a/public/javascripts/web-socket-receiver.js b/public/javascripts/web-socket-receiver.js index 76761a29a..ddd36e354 100644 --- a/public/javascripts/web-socket-receiver.js +++ b/public/javascripts/web-socket-receiver.js @@ -97,16 +97,16 @@ var WebSocketReceiver = { $(html).fadeIn("fast", function(){}) ); } else { - $('.comments li:last', post).before( + $('.comments', post).append( $(html).fadeIn("fast", function(){}) ); } - var toggler = $('.show_post_comments', post).parent(); + var toggler = $('.toggle_post_comments', post).parent(); if(toggler.length > 0){ toggler.html( - toggler.html().replace(/\d+/,$('.comments', post).find('li').length -1) + toggler.html().replace(/\d+/,$('.comments', post).find('li').length) ); if( !$(".comments", post).is(':visible') ) { diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index c13d41ee4..f4b960511 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -481,11 +481,6 @@ ul.as-selections :font :size 1em - .comments - :padding - :bottom 6px - > li:last-child - :border-bottom none .comment_box :width 475px :margin @@ -552,23 +547,6 @@ ul.as-selections :background none :border none - -.stream ul.comments - :padding - :bottom 6px - - > li:last-child - :border-bottom none - - .avatar - :width 30px - :height 30px - - .comment_box - :margin - :bottom 5px - - .submit_button :text :align right @@ -576,8 +554,12 @@ ul.as-selections ul.comments, ul.show_comments, .likes_container + + .avatar + :width 30px + :height 30px + :margin 0 - :top 0.5em :padding 0 :font @@ -587,14 +569,6 @@ ul.show_comments, :position relative - form - textarea - :width 365px - :height 21px - - input - :display none - li :list :style none @@ -603,12 +577,6 @@ ul.show_comments, :border :bottom 1px dotted #aaa - .new_comment - :min-height 35px - p - :margin - :bottom 0 - .from :font :size 1em @@ -627,7 +595,7 @@ ul.show_comments, :padding :left 36px :right 10px - + p :margin :bottom 0 @@ -636,41 +604,68 @@ ul.show_comments, .right :right 4px - form + .avatar + :position absolute + :display inline + +ul.show_comments + :padding + :bottom 6px + :margin + :top 6px + +form.new_comment + :padding 8px 5px + .avatar + :position absolute + :display inline + :width 30px + :height 30px + + :min-height 35px + + input + :display none + + :margin + :bottom -4px + + :font + :size 1em + + .submit_button + input :margin - :top -5px - :bottom -4px - :font - :size 1em + :right 0 - .submit_button - input - :margin - :right 0 + textarea + :width 365px + :height 21px - textarea - :font - :size 1em - :margin - :bottom -3px + :font + :size 1em + :margin + :top 0 + :bottom -3px - p - :position relative - :left 35px + p + :margin + :bottom 0 + :top -10px + :position relative + :left 35px - .avatar - :position absolute - :display inline + &.open + .submit_button + :display block + :margin + :top 5px + :bottom 2px + :right 2px + + input + :display inline-block - form.open - .submit_button - :display block - :margin - :top 5px - :bottom 2px - :right 2px - input - :display inline-block .comments .timeago @@ -2209,8 +2204,6 @@ h3,h4 ul.show_comments - :margin - :bottom -0.5em :border :top 1px dotted #aaa |