infinate scroll

app/views/aspects/index.html.haml

@@ -17,7 +17,7 @@
 
   %ul{:class => 'stream', :id => 'main_stream'}
     = render 'shared/stream', :posts => @post_hashes
-
+  = will_paginate @posts
 
 .span-8.last
   = render 'aspects/all_aspects_contacts'

app/views/aspects/show.html.haml

@@ -25,3 +25,4 @@
 
   %ul{:class => 'stream', :id => 'main_stream'}
     = render 'shared/stream', :posts => @post_hashes
+  =will_paginate @posts

app/views/shared/_stream.haml

@@ -3,6 +3,3 @@
 -#   the COPYRIGHT file.
 - for post_hash in posts
   = render 'shared/stream_element', post_hash.merge(:aspects => @aspects, :commenting_disabled => defined?(@commenting_disabled))
-
-.pagination
-  = will_paginate @posts

config/assets.yml

@@ -11,6 +11,7 @@ javascripts:
     - public/javascripts/vendor/jquery.hotkeys.js
     - public/javascripts/vendor/jquery.autoresize.min.js
     - public/javascripts/vendor/fancybox/jquery.fancybox-1.3.1.pack.js
+    - public/javascripts/vendor/jquery.infinitescroll.min.js
     - public/javascripts/vendor/fileuploader.js
     - public/javascripts/view.js
     - public/javascripts/stream.js

public/javascripts/application.js

-$(function () {  
-  $('#main_stream .pagination a').live('click', function () {  
-      $.getScript(this.href);  
-      return false;  
-    }
-  );
+//$(function () {  
+  //$('#main_stream .pagination a').live('click', function () {  
+      //$.getScript(this.href);  
+      //return false;  
+    //}
+  //);
+//});
+
+// infinitescroll() is called on the element that surrounds 
+// the items you will be loading more of
+ $(document).ready(function() { 
+$('#main_stream').infinitescroll({
+   navSelector  : "div.pagination",            
+                   // selector for the paged navigation (it will be hidden)
+    nextSelector : ".pagination a.next_page",    
+                   // selector for the NEXT link (to page 2)
+    itemSelector : "#main_stream",
+                   // selector for all items you'll retrieve
+    bufferPx: 300,
+    donetext: "no more.",
+    loadingText: "", 
+    loadingImg: 'images/ajax-loader.gif'
+  });
 });
+

public/javascripts/vendor/jquery.infinitescroll.min.js

+/*!
+// Infinite Scroll jQuery plugin
+// copyright Paul Irish, licensed GPL & MIT
+// version 1.5.101207
+
+// home and docs: http://www.infinite-scroll.com
+*/
+(function($){$.fn.infinitescroll=function(options,callback){function debug(){if(opts.debug){window.console&&console.log.call(console,arguments)}}function areSelectorsValid(opts){for(var key in opts){if(key.indexOf&&key.indexOf("Selector")>-1&&$(opts[key]).length===0){debug("Your "+key+" found no elements.");return false}return true}}function determinePath(path){if(path.match(/^(.*?)\b2\b(.*?$)/)){path=path.match(/^(.*?)\b2\b(.*?$)/).slice(1)}else{if(path.match(/^(.*?)2(.*?$)/)){if(path.match(/^(.*?page=)2(\/.*|$)/)){path=path.match(/^(.*?page=)2(\/.*|$)/).slice(1);return path}debug("Trying backup next selector parse technique. Treacherous waters here, matey.");path=path.match(/^(.*?)2(.*?$)/).slice(1)}else{if(path.match(/^(.*?page=)1(\/.*|$)/)){path=path.match(/^(.*?page=)1(\/.*|$)/).slice(1);return path}if($.isFunction(opts.pathParse)){return[path]}else{debug("Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.");props.isInvalidPage=true}}}return path}function filterNav(){opts.isFiltered=true;return $(window).trigger("error.infscr."+opts.infid,[302])}function isNearBottom(){var pixelsFromWindowBottomToBottom=0+$(document).height()-($(props.container).scrollTop()||$(props.container.ownerDocument.body).scrollTop())-$(window).height();debug("math:",pixelsFromWindowBottomToBottom,props.pixelsFromNavToBottom);return(pixelsFromWindowBottomToBottom-opts.bufferPx<props.pixelsFromNavToBottom)}function showDoneMsg(){props.loadingMsg.find("img").hide().parent().find("div").html(opts.donetext).animate({opacity:1},2000,function(){$(this).parent().fadeOut("normal")});opts.errorCallback()}function infscrSetup(){if(opts.isDuringAjax||opts.isInvalidPage||opts.isDone||opts.isFiltered||opts.isPaused){return}if(!isNearBottom(opts,props)){return}$(document).trigger("retrieve.infscr."+opts.infid)}function kickOffAjax(){opts.isDuringAjax=true;props.loadingMsg.appendTo(opts.loadMsgSelector).show(opts.loadingMsgRevealSpeed,function(){$(opts.navSelector).hide();opts.currPage++;debug("heading into ajax",path);box=$(opts.contentSelector).is("table")?$("<tbody/>"):$("<div/>");frag=document.createDocumentFragment();if($.isFunction(opts.pathParse)){desturl=opts.pathParse(path.join("2"),opts.currPage)}else{desturl=path.join(opts.currPage)}box.load(desturl+" "+opts.itemSelector,null,loadCallback)})}function loadCallback(){if(opts.isDone){showDoneMsg();return false}else{var children=box.children();if(children.length==0||children.hasClass("error404")){return $(window).trigger("error.infscr."+opts.infid,[404])}while(box[0].firstChild){frag.appendChild(box[0].firstChild)}$(opts.contentSelector)[0].appendChild(frag);props.loadingMsg.fadeOut("normal");if(opts.animate){var scrollTo=$(window).scrollTop()+$("#infscr-loading").height()+opts.extraScrollPx+"px";$("html,body").animate({scrollTop:scrollTo},800,function(){opts.isDuringAjax=false})}callback.call($(opts.contentSelector)[0],children.get());if(!opts.animate){opts.isDuringAjax=false}}}function initPause(pauseValue){if(pauseValue=="pause"){opts.isPaused=true}else{if(pauseValue=="resume"){opts.isPaused=false}else{opts.isPaused=!opts.isPaused}}debug("Paused: "+opts.isPaused);return false}function infscrError(xhr){if(!opts.isDone&&xhr==404){debug("Page not found. Self-destructing...");showDoneMsg();opts.isDone=true;opts.currPage=1;$(window).unbind("scroll.infscr."+opts.infid);$(document).unbind("retrieve.infscr."+opts.infid)}if(opts.isFiltered&&xhr==302){debug("Filtered. Going to next instance...");opts.isDone=true;opts.currPage=1;opts.isPaused=false;$(window).unbind("scroll.infscr."+opts.infid,infscrSetup).unbind("pause.infscr."+opts.infid).unbind("filter.infscr."+opts.infid).unbind("error.infscr."+opts.infid);$(document).unbind("retrieve.infscr."+opts.infid,kickOffAjax)}}$.browser.ie6=$.browser.msie&&$.browser.version<7;var opts=$.extend({},$.infinitescroll.defaults,options),props=$.infinitescroll,box,frag,desturl,thisPause,errorStatus;callback=callback||function(){};if(!areSelectorsValid(opts)){return false}props.container=document.documentElement;opts.contentSelector=opts.contentSelector||this;opts.loadMsgSelector=opts.loadMsgSelector||opts.contentSelector;var relurl=/(.*?\/\/).*?(\/.*)/,path=$(opts.nextSelector).attr("href");if(!path){debug("Navigation selector not found");return}path=determinePath(path);props.pixelsFromNavToBottom=$(document).height()+(props.container==document.documentElement?0:$(props.container).offset().top)-$(opts.navSelector).offset().top;props.loadingMsg=$('<div id="infscr-loading" style="text-align: center;"><img alt="Loading..." src="'+opts.loadingImg+'" /><div>'+opts.loadingText+"</div></div>");(new Image()).src=opts.loadingImg;$(window).bind("scroll.infscr."+opts.infid,infscrSetup).bind("filter.infscr."+opts.infid,filterNav).bind("error.infscr."+opts.infid,function(event,errorStatus){infscrError(errorStatus)}).bind("pause.infscr."+opts.infid,function(event,thisPause){initPause(thisPause)}).trigger("scroll.infscr."+opts.infid);$(document).bind("retrieve.infscr."+opts.infid,kickOffAjax);return this};$.infinitescroll={defaults:{debug:false,preload:false,nextSelector:"div.navigation a:first",loadingImg:"http://www.infinite-scroll.com/loading.gif",loadingText:"<em>Loading the next set of posts...</em>",donetext:"<em>Congratulations, you've reached the end of the internet.</em>",navSelector:"div.navigation",contentSelector:null,loadMsgSelector:null,loadingMsgRevealSpeed:"fast",extraScrollPx:150,itemSelector:"div.post",animate:false,pathParse:undefined,bufferPx:40,errorCallback:function(){},infid:1,currPage:1,isDuringAjax:false,isInvalidPage:false,isFiltered:false,isDone:false,isPaused:false},loadingImg:undefined,loadingMsg:undefined,container:undefined,currDOMChunk:null}})(jQuery);
+