#community dashboard - add infinite scroll

Francisco Marcelo de Araújo Lima Júnior
1 parent 77158095
Showing 7 changed files with 60 additions and 38 deletions Show diff stats
controllers/public/community_hub_plugin_public_controller.rb
public/javascripts/community_hub.js
public/style.css
views/community_hub_plugin_public/_mediation.rhtml
views/community_hub_plugin_public/_mediation_comment_form.rhtml
views/community_hub_plugin_public/_post.rhtml
views/content_viewer/hub.rhtml
@@ -81,20 +81,35 @@ class CommunityHubPluginPublicController &lt; PublicController
 	def newer_comments
 		latest_post = params[:latest_post]
     hub = Article.find(params[:hub])
-		posts = Comment.find(:all, :order => "id desc", :conditions => ["id > :id and source_id = :hub", { :id => latest_post, :hub => hub }])
+		posts = Comment.find(:all, :order => "id desc", :conditions => ["id > :id and source_id = :hub", { :id => latest_post, :hub => hub }], :limit => 20)
 		if !posts.empty?
 			oldest_post = posts.last.id
 			latest_post = posts.first.id
+      size = posts.size
 		else
 			oldest_post = 0
 			latest_post = 0
 		end
-		render :partial => "post", :collection => posts, :locals => { :latest_post => latest_post, :oldest_post => oldest_post, :hub => hub }
+		render :partial => "post", :collection => posts, :locals => { :latest_id => latest_post, :oldest_id => oldest_post, :hub => hub }
 	end
+  def older_comments
+    oldest_id = params[:oldest_id]
+    hub = Article.find(params[:hub])
+    posts = Comment.find(:all, :order => "id desc", :conditions => ["id < :id and source_id = :hub", { :id => oldest_id, :hub => hub }], :limit => 20)
+
+    if !posts.empty?
+      oldest_id = posts.last.id
+      latest_id = posts.first.id
+    end
+
+    render :partial => "post", :collection => posts, :locals => { :latest_id => latest_id, :oldest_id => oldest_id, :hub => hub }
+  end
+
+
   def newer_articles
     latest_post = params[:latest_post]
     hub = Article.find(params[:hub])
@@ -3,24 +3,30 @@ var oldest_post_id = 0;
 live_scroll_position = 0;
 var mediations = [];
-function validate_textarea(txt) {
-  return (txt.search(/[^\n\s]/)!=-1);
+function load_more_messages() {
+
+  var hub_id = jQuery(".hub").attr('id');
+  var oldest_id = jQuery("#live-posts li.post").last().attr("id");
+
+  jQuery.ajax({
+    url: '/plugin/community_hub/public/older_comments',
+    type: 'get',
+    data: { oldest_id: oldest_id, hub: hub_id },
+    success: function(data) {
+      if (data.trim().length > 0) {
+        jQuery("#live-posts").append(data);
+      }
+    },
+    error: function(ajax, stat, errorThrown) {
+    }
+  });
 }
-function clearLoadingMediationCommentSignal(mediation) {
- jQuery(".loading-mediation-comment").filter("#" + mediation).removeClass("loading-signal-error");
- jQuery(".loading-mediation-comment").filter("#" + mediation).removeClass("loading-signal-done");
-}
-function clearLoadingMessageSignal() {
- jQuery("#loading-message").removeClass("loading-signal-error");
- jQuery("#loading-message").removeClass("loading-signal-done");
+function validate_textarea(txt) {
+  return (txt.search(/[^\n\s]/)!=-1);
 }
-function clearLoadingMediationSignal() {
- jQuery("#loading-mediation").removeClass("loading-signal-error");
- jQuery("#loading-mediation").removeClass("loading-signal-done");
-}
 function toogle_mediation_comments(mediation) {
   jQuery("#mediation-comment-list-" + mediation ).toggle();
@@ -58,16 +64,10 @@ function new_mediation_comment(button, mediation) {
       jQuery("#mediation-comment-form-" + mediation + " textarea").val('');
       jQuery("#mediation-comment-form-" + mediation + " .submit").attr("disabled", false);
       update_mediation_comments(mediation, false);
-      setTimeout(function(){
-        clearLoadingMediationCommentSignal(mediation);
-      }, 3000);
       mediations.push( [ mediation, setInterval(function() { update_mediation_comments(mediation, false)}, 5000) ] );
     }
     else {
       jQuery("#mediation-comment-form-" + mediation + " .submit").attr("disabled", false);
-      setTimeout(function(){
-        clearLoadingMediationCommentSignal(mediation);
-      }, 3000);
       mediations.push( [ mediation, setInterval(function() { update_mediation_comments(mediation, false)}, 5000) ] );
     }
   }, 'json');
@@ -93,12 +93,9 @@ function new_message(button) {
       jQuery(".hub .form-message #message_body").val('');
       jQuery(".hub .form-message .submit").attr("disabled", false);
       update_live_stream(false);
-      setTimeout(clearLoadingMessageSignal, 3000);
-
     }
     else {
       jQuery(".hub .form-message .submit").attr("disabled", false);
-      setTimeout(clearLoadingMessageSignal, 3000);
     }
   }, 'json');
@@ -124,11 +121,9 @@ function new_mediation(button) {
       jQuery(".hub .form-mediation .submit").attr("disabled", false);
       tinymce.get('article_body').setContent('');
       update_mediations();
-      setTimeout(clearLoadingMediationSignal, 3000);
     }
     else {
       jQuery(".hub .form-mediation .submit").attr("disabled", false);
-      setTimeout(clearLoadingMediationSignal, 3000);
     }
   }, 'json');
@@ -317,6 +312,14 @@ function hub_right_tab_click() {
 first_hub_load = true;
+jQuery(".hub .live .envelope").scroll(function() {
+  jQuery("#auto_scrolling").attr('checked', false);
+  if (jQuery(".hub .live .envelope").scrollTop() == (jQuery(".hub ul#live-posts").height() - jQuery(".hub .live .envelope").height() + 23)) {
+    load_more_messages();
+  }
+});
+
+
 jQuery(document).ready(function() {
   jQuery("#live-posts").scroll(function() {
@@ -329,4 +332,5 @@ jQuery(document).ready(function() {
   update_live_stream(true);
   update_mediations();
+
 });
@@ -7,7 +7,7 @@
   height: 350px;
   padding-top: 10px;
   height: 350px;
-  display: inline-block; 
+  display: inline-block;
 }
 #hub-loading {
@@ -174,11 +174,14 @@
 	margin-bottom: 2em;
 }
+.hub .envelope {
+  height: 500px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
 .hub ul#live-posts, .hub ul#mediation-posts{
-    height: 500px;
-    overflow-x: hidden;
-    overflow-y: scroll;
-	border-width: 1px;
+	border-width: 0 1px 1px;
 	border-style: solid;
 	border-color: lightGray;
 	padding-top: 10px;
@@ -257,7 +260,6 @@
 	 text-align: center;
     margin-top: 9px;
     line-height: 27px;
-    
 }
 #content .main-block .hub .live h1.mediation {}
 <% extend CommunityHubPlugin::HubHelper %>
-<li id="<%= mediation.id %>" class="<%=post_css_classes(mediation.id, latest_post, oldest_post)%>"> 
+<li id="<%= mediation.id %>" class="<%=post_css_classes(mediation.id, latest_post, oldest_post)%>">
   <ul>
     <li class="time"><%= post_time(mediation.created_at) %></li>
-<% form_for :message, 
+<% form_for :message,
             :method => 'post',
             :url => {
-              :controller => 'community_hub_plugin_public', 
+              :controller => 'community_hub_plugin_public',
               :action => 'new_message',
               :article_id => mediation.id
             } do |f| %>
 <% extend CommunityHubPlugin::HubHelper %>
-<li id="<%= post.id %>" class="post"> 
+<li id="<%= post.id %>" class="post">
   <ul>
     <li class="time"><%= post_time(post.created_at) %></li>
     <li class="avatar">
@@ -18,8 +18,9 @@
       <span class="title"><%= _("Mediation") %></span>
     </h1>
-    <ul id="live-posts">
-    </ul>
+    <div class="envelope">
+      <ul id="live-posts"></ul>
+  	</div>
     <span><%= check_box_tag 'auto_scrolling', 'yes', true %><%= _("Auto scrolling") %></span>
1	<% extend CommunityHubPlugin::HubHelper %>	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	<ul>	5	<ul>
6	<li class="time"><%= post_time(mediation.created_at) %></li>	6	<li class="time"><%= post_time(mediation.created_at) %></li>
1	-<% form_for :message,	1	+<% form_for :message,
2	:method => 'post',	2	:method => 'post',
3	:url => {	3	:url => {
4	- :controller => 'community_hub_plugin_public',	4	+ :controller => 'community_hub_plugin_public',
5	:action => 'new_message',	5	:action => 'new_message',
6	:article_id => mediation.id	6	:article_id => mediation.id
7	} do \|f\| %>	7	} do \|f\| %>
1	<% extend CommunityHubPlugin::HubHelper %>	1	<% extend CommunityHubPlugin::HubHelper %>
2		2
3	-<li id="<%= post.id %>" class="post">	3	+<li id="<%= post.id %>" class="post">
4	<ul>	4	<ul>
5	<li class="time"><%= post_time(post.created_at) %></li>	5	<li class="time"><%= post_time(post.created_at) %></li>
6	<li class="avatar">	6	<li class="avatar">