@@ -81,3 +81,8 @@ task :manifest do
file.write list.sort.join("\n")
end
end
+
+task :examples do
+ %x(haml examples/index.haml examples/index.html)
+ %x(sass examples/pagination.sass examples/pagination.css)
+end
Rakefile
@@ -27,8 +27,8 @@
:font-size 13px
:font-family Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace
-- pagination = '<span class="disabled">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next »</a>'
-- pagination_no_page_links = '<span class="disabled">« Previous</span> <a href="./?page=2" rel="next">Next »</a>'
+- pagination = '<span class="disabled prev_page">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>'
+- pagination_no_page_links = '<span class="disabled prev_page">« Previous</span> <a href="./?page=2" rel="next" class="next_page">Next »</a>'
%body
%h1 Samples of pagination styling for will_paginate
@@ -46,24 +46,24 @@
%div= pagination
%h2 Digg.com
- .digg-pagination= pagination
+ .digg_pagination= pagination
%h2 Digg-style, no page links
- .digg-pagination= pagination_no_page_links
+ .digg_pagination= pagination_no_page_links
%p Code that renders this:
%pre= '<code>%s</code>' % %[<%= will_paginate @posts, :page_links => false %>].gsub('<', '<').gsub('>', '>')
%h2 Digg-style, extra content
- .digg-pagination
- .page-info Displaying entries <b>1 - 6</b> of <b>180</b> in total
+ .digg_pagination
+ .page_info Displaying entries <b>1 - 6</b> of <b>180</b> in total
= pagination
%p Code that renders this:
- %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('<', '<').gsub('>', '>')
+ %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('<', '<').gsub('>', '>')
%h2 Apple.com store
- .apple-pagination= pagination
+ .apple_pagination= pagination
%h2 Flickr.com
- .flickr-pagination
+ .flickr_pagination
= pagination
- .page-info (118 photos)
+ .page_info (118 photos)
examples/index.haml
@@ -50,43 +50,43 @@
Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
</h2>
<div>
- <span class="disabled">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next »</a>
+ <span class="disabled prev_page">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
</div>
<h2>Digg.com</h2>
- <div class='digg-pagination'>
- <span class="disabled">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next »</a>
+ <div class='digg_pagination'>
+ <span class="disabled prev_page">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
</div>
<h2>Digg-style, no page links</h2>
- <div class='digg-pagination'>
- <span class="disabled">« Previous</span> <a href="./?page=2" rel="next">Next »</a>
+ <div class='digg_pagination'>
+ <span class="disabled prev_page">« Previous</span> <a href="./?page=2" rel="next" class="next_page">Next »</a>
</div>
<p>Code that renders this:</p>
<pre>
<code><%= will_paginate @posts, :page_links => false %></code>
</pre>
<h2>Digg-style, extra content</h2>
- <div class='digg-pagination'>
- <div class='page-info'>
+ <div class='digg_pagination'>
+ <div class='page_info'>
Displaying entries <b>1 - 6</b> of <b>180</b> in total
</div>
- <span class="disabled">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next »</a>
+ <span class="disabled prev_page">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
</div>
<p>Code that renders this:</p>
<pre>
- <code><div class="digg-pagination">
- <div clas="page-info">
+ <code><div class="digg_pagination">
+ <div clas="page_info">
<%= page_entries_info @posts %>
</div>
<%= will_paginate @posts, :container => false %>
</div></code>
</pre>
<h2>Apple.com store</h2>
- <div class='apple-pagination'>
- <span class="disabled">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next »</a>
+ <div class='apple_pagination'>
+ <span class="disabled prev_page">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
</div>
<h2>Flickr.com</h2>
- <div class='flickr-pagination'>
- <span class="disabled">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next">Next »</a>
- <div class='page-info'>(118 photos)</div>
+ <div class='flickr_pagination'>
+ <span class="disabled prev_page">« 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">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a>
+ <div class='page_info'>(118 photos)</div>
</div>
</body>
examples/index.html
@@ -1,86 +1,90 @@
-.digg-pagination {
+.digg_pagination {
background: white;
/* self-clearing method: */ }
- .digg-pagination a, .digg-pagination span {
+ .digg_pagination a, .digg_pagination span {
padding: .2em .5em;
display: block;
float: left;
margin-right: 1px; }
- .digg-pagination span.disabled {
+ .digg_pagination span.disabled {
color: #999;
border: 1px solid #DDD; }
- .digg-pagination span.current {
+ .digg_pagination span.current {
font-weight: bold;
background: #2E6AB1;
color: white;
border: 1px solid #2E6AB1; }
- .digg-pagination a {
+ .digg_pagination a {
text-decoration: none;
color: #105CB6;
border: 1px solid #9AAFE5; }
- .digg-pagination a:hover, .digg-pagination a:focus {
+ .digg_pagination a:hover, .digg_pagination a:focus {
color: #003;
border-color: #003; }
- .digg-pagination .page-info {
+ .digg_pagination .page_info {
background: #2E6AB1;
color: white;
padding: .4em .6em;
width: 22em;
margin-bottom: .3em;
text-align: center; }
- .digg-pagination .page-info b {
+ .digg_pagination .page_info b {
color: #003;
background: #6aa6ed;
padding: .1em .25em; }
- .digg-pagination:after {
+ .digg_pagination:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
- * html .digg-pagination {
+ * html .digg_pagination {
height: 1%; }
- *:first-child+html .digg-pagination {
+ *:first-child+html .digg_pagination {
overflow: hidden; }
-.apple-pagination {
+.apple_pagination {
background: #F1F1F1;
border: 1px solid #E5E5E5;
text-align: center;
padding: 1em; }
- .apple-pagination a, .apple-pagination span {
+ .apple_pagination a, .apple_pagination span {
padding: .2em .3em; }
- .apple-pagination span.disabled {
+ .apple_pagination span.disabled {
color: #AAA; }
- .apple-pagination span.current {
+ .apple_pagination span.current {
font-weight: bold;
background: transparent url(apple-circle.gif) no-repeat 50% 50%; }
- .apple-pagination a {
+ .apple_pagination a {
text-decoration: none;
color: black; }
- .apple-pagination a:hover, .apple-pagination a:focus {
+ .apple_pagination a:hover, .apple_pagination a:focus {
text-decoration: underline; }
-.flickr-pagination {
+.flickr_pagination {
text-align: center;
padding: .3em; }
- .flickr-pagination a, .flickr-pagination span {
+ .flickr_pagination a, .flickr_pagination span {
padding: .2em .5em; }
- .flickr-pagination span.disabled {
+ .flickr_pagination span.disabled {
color: #AAA; }
- .flickr-pagination span.current {
+ .flickr_pagination span.current {
font-weight: bold;
color: #FF0084; }
- .flickr-pagination a {
+ .flickr_pagination a {
border: 1px solid #DDDDDD;
color: #0063DC;
text-decoration: none; }
- .flickr-pagination a:hover, .flickr-pagination a:focus {
+ .flickr_pagination a:hover, .flickr_pagination a:focus {
border-color: #003366;
background: #0063DC;
color: white; }
- .flickr-pagination a[rel="next"] {
- border-width: 2px; }
- .flickr-pagination .page-info {
+ .flickr_pagination .page_info {
color: #aaa;
padding-top: .8em; }
+ .flickr_pagination .prev_page, .flickr_pagination .next_page {
+ border-width: 2px; }
+ .flickr_pagination .prev_page {
+ margin-right: 1em; }
+ .flickr_pagination .next_page {
+ margin-left: 1em; }
examples/pagination.css
@@ -1,4 +1,4 @@
-.digg-pagination
+.digg_pagination
:background white
a, span
:padding .2em .5em
@@ -20,7 +20,7 @@
&:hover, &:focus
:color #003
:border-color #003
- .page-info
+ .page_info
:background #2E6AB1
:color white
:padding .4em .6em
@@ -44,7 +44,7 @@
*:first-child+html &
:overflow hidden
-.apple-pagination
+.apple_pagination
:background #F1F1F1
:border 1px solid #E5E5E5
:text-align center
@@ -62,7 +62,7 @@
&:hover, &:focus
:text-decoration underline
-.flickr-pagination
+.flickr_pagination
:text-align center
:padding .3em
a, span
@@ -80,8 +80,12 @@
:border-color #003366
:background #0063DC
:color white
- &[rel="next"]
- :border-width 2px
- .page-info
+ .page_info
:color #aaa
:padding-top .8em
+ .prev_page, .next_page
+ :border-width 2px
+ .prev_page
+ :margin-right 1em
+ .next_page
+ :margin-left 1em
examples/pagination.sass
@@ -174,8 +174,8 @@ module WillPaginate
def to_html
links = @options[:page_links] ? windowed_links : []
# previous/next buttons
- links.unshift page_link_or_span(@collection.previous_page, 'disabled', @options[:prev_label])
- links.push page_link_or_span(@collection.next_page, 'disabled', @options[:next_label])
+ links.unshift page_link_or_span(@collection.previous_page, %w(disabled prev_page), @options[:prev_label])
+ links.push page_link_or_span(@collection.next_page, %w(disabled next_page), @options[:next_label])
html = links.join(@options[:separator])
@options[:container] ? @template.content_tag(:div, html, html_attributes) : html
@@ -209,7 +209,7 @@ module WillPaginate
visible_page_numbers.inject [] do |links, n|
# detect gaps:
links << gap_marker if prev and n > prev + 1
- links << page_link_or_span(n)
+ links << page_link_or_span(n, 'current')
prev = n
links
end
@@ -240,12 +240,14 @@ module WillPaginate
visible
end
- def page_link_or_span(page, span_class = 'current', text = nil)
+ def page_link_or_span(page, span_class, text = nil)
text ||= page.to_s
+ classnames = Array[*span_class]
+
if page and page != current_page
- @template.link_to text, url_params(page), :rel => rel_value(page)
+ @template.link_to text, url_params(page), :rel => rel_value(page), :class => classnames[1]
else
- @template.content_tag :span, text, :class => span_class
+ @template.content_tag :span, text, :class => classnames.join(' ')
end
end
lib/will_paginate/view_helpers.rb
@@ -57,6 +57,27 @@ class ViewTest < Test::Unit::TestCase
end
end
+ def test_prev_next_links_have_classnames
+ paginate do |pagination|
+ assert_select 'span.disabled.prev_page:first-child'
+ assert_select 'a.next_page[href]:last-child'
+ end
+ end
+
+ def test_full_output
+ paginate
+ expected = <<-HTML
+ <div class="pagination"><span class="disabled prev_page">« Previous</span>
+ <span class="current">1</span>
+ <a href="/foo/bar?page=2" rel="next">2</a>
+ <a href="/foo/bar?page=3">3</a>
+ <a href="/foo/bar?page=2" class="next_page" rel="next">Next »</a></div>
+ HTML
+ expected.strip!.gsub!(/\s{2,}/, ' ')
+
+ assert_dom_equal expected, @html_result
+ end
+
## advanced options for pagination ##
def test_will_paginate_without_container
test/view_test.rb
9219a39073fe1fd73bc8652f738a82656a4a8486
Mislav Marohnić
mislav.marohnic@gmail.com
http://github.com/gcirne/will_paginate/commit/3bda0baf122f6a6891ae263248f08474fc141659
3bda0baf122f6a6891ae263248f08474fc141659
2008-04-06T18:40:37-07:00
2008-04-06T18:40:37-07:00
added prev_page/next_page CSS classes on prev/next "buttons" in views
9eadf2bc69d33b0f33b8c7d739413c272402fc20
Mislav Marohnić
mislav.marohnic@gmail.com