0
@@ -81,3 +81,8 @@ task :manifest do
0
     file.write list.sort.join("\n")
0
   end
0
 end
0
+
0
+task :examples do
0
+  %x(haml examples/index.haml examples/index.html)
0
+  %x(sass examples/pagination.sass examples/pagination.css)
0
+end

0
@@ -27,8 +27,8 @@
0
         :font-size 13px
0
         :font-family Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace
0
 
0
-- pagination = '<span class="disabled">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next &raquo;</a>'
0
-- pagination_no_page_links = '<span class="disabled">&laquo; Previous</span>  <a href="./?page=2" rel="next">Next &raquo;</a>'
0
+- pagination = '<span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>'
0
+- pagination_no_page_links = '<span class="disabled prev_page">&laquo; Previous</span>  <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>'
0
 
0
 %body
0
   %h1 Samples of pagination styling for will_paginate
0
@@ -46,24 +46,24 @@
0
   %div= pagination
0
   
0
   %h2 Digg.com
0
-  .digg-pagination= pagination
0
+  .digg_pagination= pagination
0
 
0
   %h2 Digg-style, no page links
0
-  .digg-pagination= pagination_no_page_links
0
+  .digg_pagination= pagination_no_page_links
0
   %p Code that renders this:
0
   %pre= '<code>%s</code>' % %[<%= will_paginate @posts, :page_links => false %>].gsub('<', '&lt;').gsub('>', '&gt;')
0
   
0
   %h2 Digg-style, extra content
0
-  .digg-pagination
0
-    .page-info Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
0
+  .digg_pagination
0
+    .page_info Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
0
     = pagination
0
   %p Code that renders this:
0
-  %pre= '<code>%s</code>' % %[<div class="digg-pagination">\n  <div clas="page-info">\n    <%= page_entries_info @posts %>\n  </div>\n  <%= will_paginate @posts, :container => false %>\n</div>].gsub('<', '&lt;').gsub('>', '&gt;')
0
+  %pre= '<code>%s</code>' % %[<div class="digg_pagination">\n  <div clas="page_info">\n    <%= page_entries_info @posts %>\n  </div>\n  <%= will_paginate @posts, :container => false %>\n</div>].gsub('<', '&lt;').gsub('>', '&gt;')
0
   
0
   %h2 Apple.com store
0
-  .apple-pagination= pagination
0
+  .apple_pagination= pagination
0
   
0
   %h2 Flickr.com
0
-  .flickr-pagination
0
+  .flickr_pagination
0
     = pagination
0
-    .page-info (118 photos)
0
+    .page_info (118 photos)

0
@@ -50,43 +50,43 @@
0
     Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
0
   </h2>
0
   <div>
0
-    <span class="disabled">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next &raquo;</a>
0
+    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
0
   </div>
0
   <h2>Digg.com</h2>
0
-  <div class='digg-pagination'>
0
-    <span class="disabled">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next &raquo;</a>
0
+  <div class='digg_pagination'>
0
+    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
0
   </div>
0
   <h2>Digg-style, no page links</h2>
0
-  <div class='digg-pagination'>
0
-    <span class="disabled">&laquo; Previous</span>  <a href="./?page=2" rel="next">Next &raquo;</a>
0
+  <div class='digg_pagination'>
0
+    <span class="disabled prev_page">&laquo; Previous</span>  <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
0
   </div>
0
   <p>Code that renders this:</p>
0
   <pre>
0
     <code>&lt;%= will_paginate @posts, :page_links =&gt; false %&gt;</code>
0
   </pre>
0
   <h2>Digg-style, extra content</h2>
0
-  <div class='digg-pagination'>
0
-    <div class='page-info'>
0
+  <div class='digg_pagination'>
0
+    <div class='page_info'>
0
       Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
0
     </div>
0
-    <span class="disabled">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next &raquo;</a>
0
+    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
0
   </div>
0
   <p>Code that renders this:</p>
0
   <pre>
0
-    <code>&lt;div class="digg-pagination"&gt;
0
-      &lt;div clas="page-info"&gt;
0
+    <code>&lt;div class="digg_pagination"&gt;
0
+      &lt;div clas="page_info"&gt;
0
         &lt;%= page_entries_info @posts %&gt;
0
       &lt;/div&gt;
0
       &lt;%= will_paginate @posts, :container =&gt; false %&gt;
0
     &lt;/div&gt;</code>
0
   </pre>
0
   <h2>Apple.com store</h2>
0
-  <div class='apple-pagination'>
0
-    <span class="disabled">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next &raquo;</a>
0
+  <div class='apple_pagination'>
0
+    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
0
   </div>
0
   <h2>Flickr.com</h2>
0
-  <div class='flickr-pagination'>
0
-    <span class="disabled">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next &raquo;</a>
0
-    <div class='page-info'>(118 photos)</div>
0
+  <div class='flickr_pagination'>
0
+    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
0
+    <div class='page_info'>(118 photos)</div>
0
   </div>
0
 </body>

0
@@ -1,86 +1,90 @@
0
-.digg-pagination {
0
+.digg_pagination {
0
   background: white;
0
   /* self-clearing method: */ }
0
-  .digg-pagination a, .digg-pagination span {
0
+  .digg_pagination a, .digg_pagination span {
0
     padding: .2em .5em;
0
     display: block;
0
     float: left;
0
     margin-right: 1px; }
0
-  .digg-pagination span.disabled {
0
+  .digg_pagination span.disabled {
0
     color: #999;
0
     border: 1px solid #DDD; }
0
-  .digg-pagination span.current {
0
+  .digg_pagination span.current {
0
     font-weight: bold;
0
     background: #2E6AB1;
0
     color: white;
0
     border: 1px solid #2E6AB1; }
0
-  .digg-pagination a {
0
+  .digg_pagination a {
0
     text-decoration: none;
0
     color: #105CB6;
0
     border: 1px solid #9AAFE5; }
0
-    .digg-pagination a:hover, .digg-pagination a:focus {
0
+    .digg_pagination a:hover, .digg_pagination a:focus {
0
       color: #003;
0
       border-color: #003; }
0
-  .digg-pagination .page-info {
0
+  .digg_pagination .page_info {
0
     background: #2E6AB1;
0
     color: white;
0
     padding: .4em .6em;
0
     width: 22em;
0
     margin-bottom: .3em;
0
     text-align: center; }
0
-    .digg-pagination .page-info b {
0
+    .digg_pagination .page_info b {
0
       color: #003;
0
       background: #6aa6ed;
0
       padding: .1em .25em; }
0
-  .digg-pagination:after {
0
+  .digg_pagination:after {
0
     content: ".";
0
     display: block;
0
     height: 0;
0
     clear: both;
0
     visibility: hidden; }
0
-  * html .digg-pagination {
0
+  * html .digg_pagination {
0
     height: 1%; }
0
-  *:first-child+html .digg-pagination {
0
+  *:first-child+html .digg_pagination {
0
     overflow: hidden; }
0
 
0
-.apple-pagination {
0
+.apple_pagination {
0
   background: #F1F1F1;
0
   border: 1px solid #E5E5E5;
0
   text-align: center;
0
   padding: 1em; }
0
-  .apple-pagination a, .apple-pagination span {
0
+  .apple_pagination a, .apple_pagination span {
0
     padding: .2em .3em; }
0
-  .apple-pagination span.disabled {
0
+  .apple_pagination span.disabled {
0
     color: #AAA; }
0
-  .apple-pagination span.current {
0
+  .apple_pagination span.current {
0
     font-weight: bold;
0
     background: transparent url(apple-circle.gif) no-repeat 50% 50%; }
0
-  .apple-pagination a {
0
+  .apple_pagination a {
0
     text-decoration: none;
0
     color: black; }
0
-    .apple-pagination a:hover, .apple-pagination a:focus {
0
+    .apple_pagination a:hover, .apple_pagination a:focus {
0
       text-decoration: underline; }
0
 
0
-.flickr-pagination {
0
+.flickr_pagination {
0
   text-align: center;
0
   padding: .3em; }
0
-  .flickr-pagination a, .flickr-pagination span {
0
+  .flickr_pagination a, .flickr_pagination span {
0
     padding: .2em .5em; }
0
-  .flickr-pagination span.disabled {
0
+  .flickr_pagination span.disabled {
0
     color: #AAA; }
0
-  .flickr-pagination span.current {
0
+  .flickr_pagination span.current {
0
     font-weight: bold;
0
     color: #FF0084; }
0
-  .flickr-pagination a {
0
+  .flickr_pagination a {
0
     border: 1px solid #DDDDDD;
0
     color: #0063DC;
0
     text-decoration: none; }
0
-    .flickr-pagination a:hover, .flickr-pagination a:focus {
0
+    .flickr_pagination a:hover, .flickr_pagination a:focus {
0
       border-color: #003366;
0
       background: #0063DC;
0
       color: white; }
0
-    .flickr-pagination a[rel="next"] {
0
-      border-width: 2px; }
0
-  .flickr-pagination .page-info {
0
+  .flickr_pagination .page_info {
0
     color: #aaa;
0
     padding-top: .8em; }
0
+  .flickr_pagination .prev_page, .flickr_pagination .next_page {
0
+    border-width: 2px; }
0
+  .flickr_pagination .prev_page {
0
+    margin-right: 1em; }
0
+  .flickr_pagination .next_page {
0
+    margin-left: 1em; }

0
@@ -1,4 +1,4 @@
0
-.digg-pagination
0
+.digg_pagination
0
   :background white
0
   a, span
0
     :padding .2em .5em
0
@@ -20,7 +20,7 @@
0
     &:hover, &:focus
0
       :color #003
0
       :border-color #003
0
-  .page-info
0
+  .page_info
0
     :background #2E6AB1
0
     :color white
0
     :padding .4em .6em
0
@@ -44,7 +44,7 @@
0
   *:first-child+html &
0
     :overflow hidden
0
 
0
-.apple-pagination
0
+.apple_pagination
0
   :background #F1F1F1
0
   :border 1px solid #E5E5E5
0
   :text-align center
0
@@ -62,7 +62,7 @@
0
     &:hover, &:focus
0
       :text-decoration underline
0
 
0
-.flickr-pagination
0
+.flickr_pagination
0
   :text-align center
0
   :padding .3em
0
   a, span
0
@@ -80,8 +80,12 @@
0
       :border-color #003366
0
       :background #0063DC
0
       :color white
0
-    &[rel="next"]
0
-      :border-width 2px
0
-  .page-info
0
+  .page_info
0
     :color #aaa
0
     :padding-top .8em
0
+  .prev_page, .next_page
0
+    :border-width 2px
0
+  .prev_page
0
+    :margin-right 1em
0
+  .next_page
0
+    :margin-left 1em

0
@@ -174,8 +174,8 @@ module WillPaginate
0
     def to_html
0
       links = @options[:page_links] ? windowed_links : []
0
       # previous/next buttons
0
-      links.unshift page_link_or_span(@collection.previous_page, 'disabled', @options[:prev_label])
0
-      links.push    page_link_or_span(@collection.next_page,     'disabled', @options[:next_label])
0
+      links.unshift page_link_or_span(@collection.previous_page, %w(disabled prev_page), @options[:prev_label])
0
+      links.push    page_link_or_span(@collection.next_page,     %w(disabled next_page), @options[:next_label])
0
       
0
       html = links.join(@options[:separator])
0
       @options[:container] ? @template.content_tag(:div, html, html_attributes) : html
0
@@ -209,7 +209,7 @@ module WillPaginate
0
       visible_page_numbers.inject [] do |links, n|
0
         # detect gaps:
0
         links << gap_marker if prev and n > prev + 1
0
-        links << page_link_or_span(n)
0
+        links << page_link_or_span(n, 'current')
0
         prev = n
0
         links
0
       end
0
@@ -240,12 +240,14 @@ module WillPaginate
0
       visible
0
     end
0
     
0
-    def page_link_or_span(page, span_class = 'current', text = nil)
0
+    def page_link_or_span(page, span_class, text = nil)
0
       text ||= page.to_s
0
+      classnames = Array[*span_class]
0
+      
0
       if page and page != current_page
0
-        @template.link_to text, url_params(page), :rel => rel_value(page)
0
+        @template.link_to text, url_params(page), :rel => rel_value(page), :class => classnames[1]
0
       else
0
-        @template.content_tag :span, text, :class => span_class
0
+        @template.content_tag :span, text, :class => classnames.join(' ')
0
       end
0
     end
0
 

0
@@ -57,6 +57,27 @@ class ViewTest < Test::Unit::TestCase
0
     end
0
   end
0
 
0
+  def test_prev_next_links_have_classnames
0
+    paginate do |pagination|
0
+      assert_select 'span.disabled.prev_page:first-child'
0
+      assert_select 'a.next_page[href]:last-child'
0
+    end
0
+  end
0
+
0
+  def test_full_output
0
+    paginate
0
+    expected = <<-HTML
0
+      <div class="pagination"><span class="disabled prev_page">&laquo; Previous</span>
0
+      <span class="current">1</span>
0
+      <a href="/foo/bar?page=2" rel="next">2</a>
0
+      <a href="/foo/bar?page=3">3</a>
0
+      <a href="/foo/bar?page=2" class="next_page" rel="next">Next &raquo;</a></div>
0
+    HTML
0
+    expected.strip!.gsub!(/\s{2,}/, ' ')
0
+    
0
+    assert_dom_equal expected, @html_result
0
+  end
0
+
0
   ## advanced options for pagination ##
0
 
0
   def test_will_paginate_without_container