Commit 4238ca533bd9b82180fe0ed1255738300a23aa3b
1 parent
77158095
Exists in
community_hub_submodule
#community dashboard - add infinite scroll
Showing
7 changed files
with
60 additions
and
38 deletions
Show diff stats
controllers/public/community_hub_plugin_public_controller.rb
| ... | ... | @@ -81,20 +81,35 @@ class CommunityHubPluginPublicController < PublicController |
| 81 | 81 | def newer_comments |
| 82 | 82 | latest_post = params[:latest_post] |
| 83 | 83 | hub = Article.find(params[:hub]) |
| 84 | - posts = Comment.find(:all, :order => "id desc", :conditions => ["id > :id and source_id = :hub", { :id => latest_post, :hub => hub }]) | |
| 84 | + posts = Comment.find(:all, :order => "id desc", :conditions => ["id > :id and source_id = :hub", { :id => latest_post, :hub => hub }], :limit => 20) | |
| 85 | 85 | |
| 86 | 86 | if !posts.empty? |
| 87 | 87 | oldest_post = posts.last.id |
| 88 | 88 | latest_post = posts.first.id |
| 89 | + size = posts.size | |
| 89 | 90 | else |
| 90 | 91 | oldest_post = 0 |
| 91 | 92 | latest_post = 0 |
| 92 | 93 | end |
| 93 | 94 | |
| 94 | - render :partial => "post", :collection => posts, :locals => { :latest_post => latest_post, :oldest_post => oldest_post, :hub => hub } | |
| 95 | + render :partial => "post", :collection => posts, :locals => { :latest_id => latest_post, :oldest_id => oldest_post, :hub => hub } | |
| 95 | 96 | end |
| 96 | 97 | |
| 97 | 98 | |
| 99 | + def older_comments | |
| 100 | + oldest_id = params[:oldest_id] | |
| 101 | + hub = Article.find(params[:hub]) | |
| 102 | + posts = Comment.find(:all, :order => "id desc", :conditions => ["id < :id and source_id = :hub", { :id => oldest_id, :hub => hub }], :limit => 20) | |
| 103 | + | |
| 104 | + if !posts.empty? | |
| 105 | + oldest_id = posts.last.id | |
| 106 | + latest_id = posts.first.id | |
| 107 | + end | |
| 108 | + | |
| 109 | + render :partial => "post", :collection => posts, :locals => { :latest_id => latest_id, :oldest_id => oldest_id, :hub => hub } | |
| 110 | + end | |
| 111 | + | |
| 112 | + | |
| 98 | 113 | def newer_articles |
| 99 | 114 | latest_post = params[:latest_post] |
| 100 | 115 | hub = Article.find(params[:hub]) | ... | ... |
public/javascripts/community_hub.js
| ... | ... | @@ -3,24 +3,30 @@ var oldest_post_id = 0; |
| 3 | 3 | live_scroll_position = 0; |
| 4 | 4 | var mediations = []; |
| 5 | 5 | |
| 6 | -function validate_textarea(txt) { | |
| 7 | - return (txt.search(/[^\n\s]/)!=-1); | |
| 6 | +function load_more_messages() { | |
| 7 | + | |
| 8 | + var hub_id = jQuery(".hub").attr('id'); | |
| 9 | + var oldest_id = jQuery("#live-posts li.post").last().attr("id"); | |
| 10 | + | |
| 11 | + jQuery.ajax({ | |
| 12 | + url: '/plugin/community_hub/public/older_comments', | |
| 13 | + type: 'get', | |
| 14 | + data: { oldest_id: oldest_id, hub: hub_id }, | |
| 15 | + success: function(data) { | |
| 16 | + if (data.trim().length > 0) { | |
| 17 | + jQuery("#live-posts").append(data); | |
| 18 | + } | |
| 19 | + }, | |
| 20 | + error: function(ajax, stat, errorThrown) { | |
| 21 | + } | |
| 22 | + }); | |
| 8 | 23 | } |
| 9 | 24 | |
| 10 | -function clearLoadingMediationCommentSignal(mediation) { | |
| 11 | - jQuery(".loading-mediation-comment").filter("#" + mediation).removeClass("loading-signal-error"); | |
| 12 | - jQuery(".loading-mediation-comment").filter("#" + mediation).removeClass("loading-signal-done"); | |
| 13 | -} | |
| 14 | 25 | |
| 15 | -function clearLoadingMessageSignal() { | |
| 16 | - jQuery("#loading-message").removeClass("loading-signal-error"); | |
| 17 | - jQuery("#loading-message").removeClass("loading-signal-done"); | |
| 26 | +function validate_textarea(txt) { | |
| 27 | + return (txt.search(/[^\n\s]/)!=-1); | |
| 18 | 28 | } |
| 19 | 29 | |
| 20 | -function clearLoadingMediationSignal() { | |
| 21 | - jQuery("#loading-mediation").removeClass("loading-signal-error"); | |
| 22 | - jQuery("#loading-mediation").removeClass("loading-signal-done"); | |
| 23 | -} | |
| 24 | 30 | |
| 25 | 31 | function toogle_mediation_comments(mediation) { |
| 26 | 32 | jQuery("#mediation-comment-list-" + mediation ).toggle(); |
| ... | ... | @@ -58,16 +64,10 @@ function new_mediation_comment(button, mediation) { |
| 58 | 64 | jQuery("#mediation-comment-form-" + mediation + " textarea").val(''); |
| 59 | 65 | jQuery("#mediation-comment-form-" + mediation + " .submit").attr("disabled", false); |
| 60 | 66 | update_mediation_comments(mediation, false); |
| 61 | - setTimeout(function(){ | |
| 62 | - clearLoadingMediationCommentSignal(mediation); | |
| 63 | - }, 3000); | |
| 64 | 67 | mediations.push( [ mediation, setInterval(function() { update_mediation_comments(mediation, false)}, 5000) ] ); |
| 65 | 68 | } |
| 66 | 69 | else { |
| 67 | 70 | jQuery("#mediation-comment-form-" + mediation + " .submit").attr("disabled", false); |
| 68 | - setTimeout(function(){ | |
| 69 | - clearLoadingMediationCommentSignal(mediation); | |
| 70 | - }, 3000); | |
| 71 | 71 | mediations.push( [ mediation, setInterval(function() { update_mediation_comments(mediation, false)}, 5000) ] ); |
| 72 | 72 | } |
| 73 | 73 | }, 'json'); |
| ... | ... | @@ -93,12 +93,9 @@ function new_message(button) { |
| 93 | 93 | jQuery(".hub .form-message #message_body").val(''); |
| 94 | 94 | jQuery(".hub .form-message .submit").attr("disabled", false); |
| 95 | 95 | update_live_stream(false); |
| 96 | - setTimeout(clearLoadingMessageSignal, 3000); | |
| 97 | - | |
| 98 | 96 | } |
| 99 | 97 | else { |
| 100 | 98 | jQuery(".hub .form-message .submit").attr("disabled", false); |
| 101 | - setTimeout(clearLoadingMessageSignal, 3000); | |
| 102 | 99 | } |
| 103 | 100 | }, 'json'); |
| 104 | 101 | |
| ... | ... | @@ -124,11 +121,9 @@ function new_mediation(button) { |
| 124 | 121 | jQuery(".hub .form-mediation .submit").attr("disabled", false); |
| 125 | 122 | tinymce.get('article_body').setContent(''); |
| 126 | 123 | update_mediations(); |
| 127 | - setTimeout(clearLoadingMediationSignal, 3000); | |
| 128 | 124 | } |
| 129 | 125 | else { |
| 130 | 126 | jQuery(".hub .form-mediation .submit").attr("disabled", false); |
| 131 | - setTimeout(clearLoadingMediationSignal, 3000); | |
| 132 | 127 | } |
| 133 | 128 | }, 'json'); |
| 134 | 129 | |
| ... | ... | @@ -317,6 +312,14 @@ function hub_right_tab_click() { |
| 317 | 312 | |
| 318 | 313 | first_hub_load = true; |
| 319 | 314 | |
| 315 | +jQuery(".hub .live .envelope").scroll(function() { | |
| 316 | + jQuery("#auto_scrolling").attr('checked', false); | |
| 317 | + if (jQuery(".hub .live .envelope").scrollTop() == (jQuery(".hub ul#live-posts").height() - jQuery(".hub .live .envelope").height() + 23)) { | |
| 318 | + load_more_messages(); | |
| 319 | + } | |
| 320 | +}); | |
| 321 | + | |
| 322 | + | |
| 320 | 323 | jQuery(document).ready(function() { |
| 321 | 324 | |
| 322 | 325 | jQuery("#live-posts").scroll(function() { |
| ... | ... | @@ -329,4 +332,5 @@ jQuery(document).ready(function() { |
| 329 | 332 | |
| 330 | 333 | update_live_stream(true); |
| 331 | 334 | update_mediations(); |
| 335 | + | |
| 332 | 336 | }); | ... | ... |
public/style.css
| ... | ... | @@ -7,7 +7,7 @@ |
| 7 | 7 | height: 350px; |
| 8 | 8 | padding-top: 10px; |
| 9 | 9 | height: 350px; |
| 10 | - display: inline-block; | |
| 10 | + display: inline-block; | |
| 11 | 11 | } |
| 12 | 12 | |
| 13 | 13 | #hub-loading { |
| ... | ... | @@ -174,11 +174,14 @@ |
| 174 | 174 | margin-bottom: 2em; |
| 175 | 175 | } |
| 176 | 176 | |
| 177 | +.hub .envelope { | |
| 178 | + height: 500px; | |
| 179 | + overflow-x: hidden; | |
| 180 | + overflow-y: scroll; | |
| 181 | +} | |
| 182 | + | |
| 177 | 183 | .hub ul#live-posts, .hub ul#mediation-posts{ |
| 178 | - height: 500px; | |
| 179 | - overflow-x: hidden; | |
| 180 | - overflow-y: scroll; | |
| 181 | - border-width: 1px; | |
| 184 | + border-width: 0 1px 1px; | |
| 182 | 185 | border-style: solid; |
| 183 | 186 | border-color: lightGray; |
| 184 | 187 | padding-top: 10px; |
| ... | ... | @@ -257,7 +260,6 @@ |
| 257 | 260 | text-align: center; |
| 258 | 261 | margin-top: 9px; |
| 259 | 262 | line-height: 27px; |
| 260 | - | |
| 261 | 263 | } |
| 262 | 264 | |
| 263 | 265 | #content .main-block .hub .live h1.mediation {} | ... | ... |
views/community_hub_plugin_public/_mediation.rhtml
| 1 | 1 | <% extend CommunityHubPlugin::HubHelper %> |
| 2 | 2 | |
| 3 | -<li id="<%= mediation.id %>" class="<%=post_css_classes(mediation.id, latest_post, oldest_post)%>"> | |
| 3 | +<li id="<%= mediation.id %>" class="<%=post_css_classes(mediation.id, latest_post, oldest_post)%>"> | |
| 4 | 4 | |
| 5 | 5 | <ul> |
| 6 | 6 | <li class="time"><%= post_time(mediation.created_at) %></li> | ... | ... |
views/community_hub_plugin_public/_mediation_comment_form.rhtml
views/community_hub_plugin_public/_post.rhtml
views/content_viewer/hub.rhtml
| ... | ... | @@ -18,8 +18,9 @@ |
| 18 | 18 | <span class="title"><%= _("Mediation") %></span> |
| 19 | 19 | </h1> |
| 20 | 20 | |
| 21 | - <ul id="live-posts"> | |
| 22 | - </ul> | |
| 21 | + <div class="envelope"> | |
| 22 | + <ul id="live-posts"></ul> | |
| 23 | + </div> | |
| 23 | 24 | |
| 24 | 25 | <span><%= check_box_tag 'auto_scrolling', 'yes', true %><%= _("Auto scrolling") %></span> |
| 25 | 26 | ... | ... |