Made the AJAX pagination that we had on settings generic and we're no…

…w using it on images, too.

core/lib/refinery/application_helper.rb

@@ -9,6 +9,7 @@ def self.included(base)
       base.send :include, Refinery::Helpers::ImageHelper
       base.send :include, Refinery::Helpers::MenuHelper
       base.send :include, Refinery::Helpers::MetaHelper
+      base.send :include, Refinery::Helpers::PaginationHelper
       base.send :include, Refinery::Helpers::ScriptHelper
       base.send :include, Refinery::Helpers::SiteBarHelper
       base.send :include, Refinery::Helpers::TagHelper

core/lib/refinery/helpers/pagination_helper.rb

@@ -0,0 +1,16 @@
+module Refinery
+  module Helpers
+    module PaginationHelper
+
+      # Figures out the CSS classname to apply to your pagination list for animations.
+      def pagination_css_class
+        if request.xhr? and params[:from_page].present? and params[:page].present?
+          "frame_#{params[:from_page].to_s > params[:page].to_s ? 'left' : 'right'}"
+        else
+          "frame_center"
+        end
+      end
+
+    end
+  end
+end

core/public/javascripts/refinery/admin.js

@@ -6,7 +6,7 @@ $(document).ready(function(){
   init_submit_continue();
   init_modal_dialogs();
   init_tooltips();
-  init_refinery_settings_ajaxy_pagination();
+  init_ajaxy_pagination();
 });
 
 if(typeof(window.onpopstate) == "object"){
@@ -16,28 +16,42 @@ if(typeof(window.onpopstate) == "object"){
       $.get(location.href, function(data) {
         $('.pagination_container').slideTo(data);
       });
+    } else {
+      $('.pagination_container').applyMinimumHeightFromChildren();
+      initialLoad = false;
     }
-    initialLoad = false;
   });
 }
 
 $.fn.slideTo = function(response) {
   $(this).html(response);
-  $('#frame').removeClass('frame_right').addClass('frame_center');
+  $(this).applyMinimumHeightFromChildren();
+  $('.pagination_frame').removeClass('frame_right').addClass('frame_center');
   init_modal_dialogs();
 }
 
-init_refinery_settings_ajaxy_pagination = function(){
+$.fn.applyMinimumHeightFromChildren = function() {
+  child_heights = 0;
+  $(this).children().each(function(i, child){
+    child_heights += $(child).height();
+    $.each(['marginTop', 'marginBottom', 'paddingTop', 'paddingBottom'], function(i, attr) {
+      child_heights += (parseInt($(child).css(attr)) || 0);
+    });
+  });
+  $(this).css('min-height', child_heights);
+}
+
+init_ajaxy_pagination = function(){
   if(typeof(window.history.pushState) == 'function' && $('.pagination_container').length > 0){
-    var settings_pages = $('.pagination_container .pagination a');
-    settings_pages.live('click',function(e) {
+    var pagination_pages = $('.pagination_container .pagination a');
+    pagination_pages.live('click',function(e) {
       this.href = (this.href.replace(/(\&(amp\;)?)?from_page\=\d+/, '')
                    + '&from_page=' + $(this).parent().find('em').text()).replace('?&', '?');
       history.pushState({ path: this.path }, '', this.href);
       $.get(this.href, function(data) {
-        $('.pagination_container').slideTo(data);
+        $('.pagination_container').slideTo(data)
       })
-      return false;
+      e.preventDefault();
     });
   }
 }

core/public/stylesheets/refinery/refinery.css

@@ -1157,12 +1157,15 @@ textarea.wymeditor {
 #dialog_container, .dialog_container {
   padding: 12px;
 }
-ul#image_grid {
+ul#image_grid, .pagination_container > ul#image_grid {
   width: 100%;
   padding: 0px;
   margin: 10px 0px 15px 0px;
 }
-ul#image_grid li {
+.pagination_container > ul#image_grid.pagination_frame {
+  top: 38px;
+}
+ul#image_grid li, .pagination_container > ul#image_grid li {
   position: relative;
   float: left;
   margin: 0px 7px 12px 0px;
@@ -1439,7 +1442,7 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
   min-height: 500px;
 }
 
-#frame {
+.pagination_frame {
   padding: 0;
   width: 100%;
   height: auto;
@@ -1451,20 +1454,20 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
 	-webkit-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
 }
-#frame.frame_left {
+.pagination_frame.frame_left {
   left: -1000px;
 }
-#frame.frame_right {
+.pagination_frame.frame_right {
   left: 1000px;
   -moz-transition: all 0.3s ease-in-out;
 	-o-transition: all 0.3s ease-in-out;
 	-webkit-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
 }
-#frame.frame_center {
+.pagination_frame.frame_center {
   left: 0;
 }
-#frame li {
+.pagination_frame li {
   position: relative;
   padding-left: 5px;
 }

images/app/controllers/admin/images_controller.rb

@@ -12,6 +12,8 @@ class ImagesController < Admin::BaseController
     def index
       search_all_images if searching?
       paginate_all_images
+
+      render :partial => 'images' if request.xhr?
     end
 
     def new

images/app/views/admin/images/_grid_view.html.erb

@@ -1,4 +1,4 @@
-<ul id="image_grid" class="clearfix">
+<ul id="image_grid" class="<%= ['clearfix', 'pagination_frame', pagination_css_class].compact.join(' ') %>">
   <% @images.each_with_index do |image, index| -%>
     <li id="image_<%= image.id %>" class='image_<%= index % 5 %>'>
       <%= image_fu image, '135x135#c', :title => image.title %>

images/app/views/admin/images/_images.html.erb

@@ -0,0 +1,2 @@
+<%= will_paginate @images %>
+<%= render :partial => "#{current_image_view}_view" %>

images/app/views/admin/images/_list_view.html.erb

@@ -2,7 +2,7 @@
   <% date_time = (image_group = container.last).first.created_at %>
   <% date = Date.parse(date_time.to_s) %>
   <h3><%= l(date, :format => :long ) %></h3>
-  <ul>
+  <ul class="<%= ['pagination_frame', pagination_css_class].compact.join(' ') %>">
     <%= render :partial => 'list_view_image', :collection => image_group %>
   </ul>
 <% end %>

images/app/views/admin/images/index.html.erb

@@ -3,9 +3,9 @@
     <h2><%= t('shared.admin.search.results_for', :query => params[:search]) %></h2>
   <% end %>
   <% if @images.any? %>
-    <%= will_paginate @images %>
-    <%= render :partial => "#{current_image_view}_view" %>
-    <%= will_paginate @images %>
+    <div class='pagination_container'>
+      <%= render :partial => 'images' %>
+    </div>
   <% else %>
     <p>
       <% unless searching? %>

settings/app/controllers/admin/refinery_settings_controller.rb

@@ -19,9 +19,7 @@ def index
         :per_page => RefinerySetting.per_page
       })
 
-      render :partial => 'refinery_settings', :locals => {
-        :css_class => "frame_#{params[:from_page].to_s > params[:page].to_s ? 'left' : 'right'}"
-      } if request.xhr?
+      render :partial => 'refinery_settings' if request.xhr?
     end
 
     def new

settings/app/views/admin/refinery_settings/_refinery_settings.html.erb

@@ -1,5 +1,5 @@
 <%= will_paginate @refinery_settings %>
-<ul id="frame" class="<%= css_class ||= nil %>">
+<ul class="<%= ['pagination_frame', pagination_css_class].compact.join(' ') %>">
   <%= render :partial => 'refinery_setting',
              :collection => @refinery_settings %>
 </ul>