Commit 9c280b12

mo khan <mo@mokhan.ca>
2014-09-07 17:08:45
add infinite scroll to categories and fix back button with turbolinks.
1 parent 843fbaa
app/controllers/categories_controller.rb
@@ -1,10 +1,10 @@
 class CategoriesController < ApplicationController
   def show
-    @category = Category.find_by_slug(params[:slug].downcase)
+    @category = Category.find_by_slug(params[:id].downcase)
     if @category
-      @creations = @category.creations.includes(:user).page(params[:page]).per(12)
+      @creations = @category.creations.includes(:user, :photos).page(params[:page]).per(12)
     else
-      redirect_to creation_tag_path(params[:slug].downcase), status: :moved_permanently
+      redirect_to creation_tag_path(params[:id].downcase), status: :moved_permanently
     end
   end
 end
app/views/categories/_show.html.erb
@@ -0,0 +1,25 @@
+<div class="row-fluid">
+  <% @creations.each_slice(6).each do |batch| %>
+    <ul class='thumbnails'>
+      <% batch.each do |creation| %>
+        <% cache creation do %>
+          <li class="span2">
+            <div class="thumbnail">
+              <%= link_to creation do %>
+                <%= image_tag creation.primary_image.url_for(:thumb) %>
+              <% end %>
+              <div class="caption">
+                <h4><%= link_to shrink(creation.name, 12), creation %></h4>
+                <p><%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></p>
+                <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
+              </div>
+            </div>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  <% end %>
+</div>
+<div id='more-button-row' class="row-fluid">
+  <%= link_to_next_page @creations, 'More...', params: { cache: false }, remote: true, class: 'more-button hidden', data: { disable_with: 'loading...' } %>
+</div>
app/views/categories/show.html.erb
@@ -1,26 +1,18 @@
 <% provide(:title, "#{@category.name} Cakes") -%>
-<div class="row-fluid">
-  <% @creations.each_slice(6).each do |batch| %>
-    <ul class='thumbnails'>
-      <% batch.each do |creation| %>
-        <% cache creation do %>
-          <li class="span2">
-            <div class="thumbnail">
-              <%= link_to creation do %>
-                <%= image_tag creation.primary_image.url_for(:thumb) %>
-              <% end %>
-              <div class="caption">
-                <h4><%= link_to shrink(creation.name, 12), creation %></h4>
-                <p><%= link_to shrink(creation.user.name, 20), profile_path(creation.user) %></p>
-                <p><small><%= time_ago_in_words(creation.created_at) %> ago.</small></p>
-              </div>
-            </div>
-          </li>
-        <% end %>
-      <% end %>
-    </ul>
-  <% end %>
+<%= content_for(:javascript) do %>
+<script type="text/javascript" charset="utf-8">
+  $(window).scroll(function(){
+    if ( $(window).scrollTop() > ($(document).height() - $(window).height()) ) {
+      $('.more-button').trigger('click');
+    }
+  });
+</script>
+<% end %>
+
+<div id="bakery">
+  <%= render partial: "show" %>
 </div>
-<div class="row-fluid">
+
+<div id='pagination-row' class="row-fluid">
   <%= render "shared/paging", items: @creations %>
 </div>
app/views/categories/show.js.erb
@@ -0,0 +1,3 @@
+$('#more-button-row').remove();
+$('#pagination-row').remove();
+$('#bakery').append('<%= j render partial: 'show' %>');
app/views/creations/index.js.erb
@@ -1,4 +1,3 @@
 $('#more-button-row').remove();
 $('#pagination-row').remove();
 $('#bakery').append('<%= j render partial: 'index' %>');
-history.pushState({ }, "page <%= params[:page] %>", "<%= paginate_creations_path(page: params[:page]) %>");
app/views/layouts/application.html.erb
@@ -15,6 +15,12 @@
 <%= favicon_link_tag 'apple-touch-icon-72x72.png', :rel => 'apple-touch-icon', :type => 'image/png', :sizes => "72x72" %>
 <%= favicon_link_tag 'apple-touch-icon-114x114.png', :rel => 'apple-touch-icon', :type => 'image/png', :sizes => "114x114" %>
 <%= yield :head %>
+<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
+<!--[if lt IE 9]>
+  <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+<%= render "layouts/embedly"%>
+<%= yield :javascript %>
 <%= csrf_meta_tags %>
 </head>
 <body>
@@ -24,12 +30,6 @@
   <%= yield %>
 </div> <!-- /container -->
 <%= render "layouts/footer" %>
-<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
-<!--[if lt IE 9]>
-  <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
-<%= render "layouts/embedly"%>
-<%= yield :javascript %>
 <%= render "layouts/uservoice_feedback"%>
 <%= render "layouts/chrome_frame"%>
 <%= render "layouts/disqus_comments_count" %>
app/views/profiles/index.js.erb
@@ -1,4 +1,3 @@
 $('#more-button-row').remove();
 $('#pagination-row').remove();
 $('#bakery').append('<%= j render partial: 'index' %>');
-history.pushState({ }, "page <%= params[:page] %>", "<%= paginate_profiles_path(page: params[:page]) %>");
config/routes.rb
@@ -10,10 +10,12 @@ Cake::Application.routes.draw do
     get 'page/:page', :action => :index, :on => :collection
   end
   resources :tutorial_tags, :only => [:index, :show], :path => :tt do
-    get ':id/page/:page', :action => :show, :on => :collection
+    member do
+      get 'page/:page', action: :show
+    end
   end
 
-  resources :creations, only: [:index, :show], path: 'cakes' do
+  resources :creations, only: [:index, :show], path: :cakes do
     resources :photos, only: [:index, :show]
     resources :favorites, :only => [:index, :create]
     get 'page/:page', :action => :index, :on => :collection, as: :paginate
@@ -27,12 +29,17 @@ Cake::Application.routes.draw do
     get 'page/:page', :action => :index, :on => :collection, as: :paginate
   end
 
-  get 'categories/:slug' => "categories#show", :as => :category
-  get 'categories/:slug/page/:page' => "categories#show"
+  resources :categories, only: [:show] do
+    member do
+      get 'page/:page', action: :show, as: :paginate
+    end
+  end
 
   # /tags
   resources :creation_tags, :only => [:index, :show], :path => :t do
-    get ':id/page/:page', :action => :show, :on => :collection
+    member do
+      get 'page/:page', action: :show
+    end
   end
   get 'tags/:id' => 'creation_tags#show'
 
@@ -47,9 +54,9 @@ Cake::Application.routes.draw do
   devise_for :users, :controllers => {:registrations => 'registrations'}, :path => '', :path_names => { :sign_in => "signin", :sign_out => "signout", :sign_up => "register" }
 
   # sitemap
-  get "/sitemap.xml", :to => "sitemap#index", :defaults => {:format => :xml}
+  get "/sitemap.xml", to: "sitemap#index", defaults: { format: :xml }
 
-  root :to => "creations#index"
+  root to: "creations#index"
 
   namespace :api, :defaults => { :format => 'json' }  do
     namespace :v1 do
spec/controllers/categories_controller_spec.rb
@@ -7,7 +7,7 @@ describe CategoriesController do
   describe "GET show" do
     context "when there is a category that matches the slug" do
       context "when there are creations in the category" do
-        before { get :show, :slug => category.slug }
+        before { get :show, id: category.slug }
 
         it "should return the creations in the category" do
           assigns(:creations).should include(creation)
@@ -19,9 +19,9 @@ describe CategoriesController do
       end
 
       context "when there are no creations in the category" do
-        let(:other_category) { create(:category, :slug => 'booooo') }
+        let(:other_category) { create(:category, slug: 'booooo') }
 
-        before { get :show, :slug => other_category.to_param }
+        before { get :show, id: other_category.to_param }
 
         it "should return zero creations" do
           assigns(:creations).should be_empty
spec/routing/categories_routing_spec.rb
@@ -3,7 +3,7 @@ require "rails_helper"
 describe CategoriesController do
   describe "routing" do
     it "routes to #show" do
-      expect(get: "/categories/fondant").to route_to(slug: "fondant", controller: "categories", action: "show")
+      expect(get: "/categories/fondant").to route_to(id: "fondant", controller: "categories", action: "show")
     end
   end
 end