added fixes and improvements for foundation extra:

- added docs menu entry - added locale string for current page in helpers and templates - refactored compact helper - updated tests
ddnexus · Aug 18, 2018 · ba7d046 · ba7d046
1 parent d78f85d
commit ba7d046
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 110 deletions.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -37,6 +37,7 @@ <h1 id="site-title">{{ site.title | default: site.github.repository_name }} <a c
       <a href="{{ site.baseurl }}/extras/bootstrap"><p class="indent1" {% if page.title == 'Bootstrap' %}id="active"{% endif %} >Bootstrap</p></a>
       <a href="{{ site.baseurl }}/extras/bulma"><p class="indent1" {% if page.title == 'Bulma' %}id="active"{% endif %} >Bulma</p></a>
       <a href="{{ site.baseurl }}/extras/compact"><p class="indent1" {% if page.title == 'Compact' %}id="active"{% endif %} >Compact</p></a>
+      <a href="{{ site.baseurl }}/extras/foundation"><p class="indent1" {% if page.title == 'Foundation' %}id="active"{% endif %} >Foundation</p></a>
       <a href="{{ site.baseurl }}/extras/i18n"><p class="indent1" {% if page.title == 'I18n' %}id="active"{% endif %} >I18n</p></a>
       <a href="{{ site.baseurl }}/extras/items"><p class="indent1" {% if page.title == 'Items' %}id="active"{% endif %} >Items</p></a>
       <a href="{{ site.baseurl }}/extras/out_of_range"><p class="indent1" {% if page.title == 'Out Of Range' %}id="active"{% endif %} >Out Of Range</p></a>

diff --git a/lib/locales/pagy.yml b/lib/locales/pagy.yml
@@ -6,6 +6,7 @@ en:
       prev: "&lsaquo;&nbsp;Prev"
       next: "Next&nbsp;&rsaquo;"
       gap: "&hellip;"
+      current: "You're on page"
     info:
       single_page:
         zero: "No %{item_name} found"

diff --git a/lib/pagy/extras/compact.rb b/lib/pagy/extras/compact.rb
@@ -63,16 +63,16 @@ def pagy_nav_compact_bulma(pagy, id=caller(1,1)[0].hash)
     def pagy_nav_compact_foundation(pagy, id=caller(1,1)[0].hash)
       html, link, p_prev, p_next, p_page, p_pages = +'', pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      html << %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-foundation" aria-label="Pagination">)
+      html << %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-foundation" role="navigation" aria-label="Pagination">)
         html << link.call(MARKER, '', %(style="display: none;" ))
         (html << link.call(1, '', %(style="display: none;" ))) if defined?(TRIM)
-      html << %(<div class="button-group">)
-        html << (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous" class="prev button primary"')
-                        : %(<a class="prev button primary disabled" href="#">#{pagy_t('pagy.nav.prev')}</a>))
-        input = %(<input type="number" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 0; border: none; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
-        html << %(<span class="pagy-compact-input hollow button">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{p_pages}</span>)
-        html << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'aria-label="next" class="next button primary"')
-                        : %(<a class="next button primary disabled" href="#">#{pagy_t('pagy.nav.next')}</a>))
+      html << %(<div class="input-group">)
+        html << (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'style="margin-bottom: 0px;" aria-label="previous" class="prev button primary"')
+                        : %(<a style="margin-bottom: 0px;" class="prev button primary disabled" href="#">#{pagy_t('pagy.nav.prev')}</a>))
+        input = %(<input class="input-group-field cell shrink" type="number" min="1" max="#{p_pages}" value="#{p_page}" style="width: #{p_pages.to_s.length+1.5}rem;">)
+        html << %(<span class="input-group-label">#{pagy_t('pagy.compact.page')}</span> #{input} <span class="input-group-label">#{pagy_t('pagy.compact.of')} #{p_pages}</span>)
+        html << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'style="margin-bottom: 0px;" aria-label="next" class="next button primary"')
+                        : %(<a style="margin-bottom: 0px;" class="next button primary disabled" href="#">#{pagy_t('pagy.nav.next')}</a>))
       html << %(</div></nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}", #{!!defined?(TRIM)}]</script>)
     end
 

diff --git a/lib/pagy/extras/foundation.rb b/lib/pagy/extras/foundation.rb
@@ -13,7 +13,7 @@ def pagy_nav_foundation(pagy)
                       : %(<li class="prev disabled">#{pagy_t('pagy.nav.prev')}</li>))
       pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
         html << if    item.is_a?(Integer); %(<li>#{link.call item}</li>)                                                       # page link
-                elsif item.is_a?(String) ; %(<li class="current"><span class="show-for-sr">You're on page</span>#{item}</li>)  # active page
+                elsif item.is_a?(String) ; %(<li class="current"><span class="show-for-sr">#{pagy_t('pagy.nav.current')}</span> #{item}</li>)  # active page
                 elsif item == :gap       ; %(<li class="ellipsis" aria-hidden="true"></li>)                                    # page gap
                 end
       end

diff --git a/lib/pagy/extras/responsive.rb b/lib/pagy/extras/responsive.rb
@@ -102,7 +102,7 @@ def pagy_nav_responsive_foundation(pagy, id=caller(1,1)[0].hash)
                                 : %(<li class="prev disabled">#{pagy_t('pagy.nav.prev')}</li>))
       responsive[:items].each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
         tags[item.to_s] = if    item.is_a?(Integer); %(<li>#{link.call item}</li>)                              # page link
-                          elsif item.is_a?(String) ; %(<li class="current">#{item}</li>)                        # active page
+                          elsif item.is_a?(String) ; %(<li class="current"><span class="show-for-sr">#{pagy_t('pagy.nav.current')}</span> #{item}</li>)                        # active page
                           elsif item == :gap       ; %(<li class="gap disabled">#{pagy_t('pagy.nav.gap')}</li>) # page gap
                           end
       end

diff --git a/lib/pagy/extras/templates/nav_foundation.html.erb b/lib/pagy/extras/templates/nav_foundation.html.erb
@@ -13,7 +13,7 @@
 <% end                         -%>
 <% pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36] -%>
 <%   if    item.is_a?(Integer) -%>    <li><%== link.call(item) %></li>
-<%   elsif item.is_a?(String)  -%>    <li class="current"><span class="show-for-sr">You're on page</span><%= item %></li>
+<%   elsif item.is_a?(String)  -%>    <li class="current"><span class="show-for-sr"><%== pagy_t('pagy.nav.current')%></span> <%= item %></li>
 <%   elsif item == :gap        -%>    <li class="disabled gap"><%== pagy_t('pagy.nav.gap') %></li>
 <%   end                       -%>
 <% end                         -%>

diff --git a/lib/pagy/extras/templates/nav_foundation.html.haml b/lib/pagy/extras/templates/nav_foundation.html.haml
@@ -22,7 +22,8 @@
 
       - elsif item.is_a?(String)                      # current page
         %li.current
-          %span.show-for-sr You're on page
+          %span.show-for-sr
+            != pagy_t('pagy.nav.current')
           != item
 
       - elsif item == :gap                            # page gap

diff --git a/lib/pagy/extras/templates/nav_foundation.html.slim b/lib/pagy/extras/templates/nav_foundation.html.slim
@@ -22,7 +22,8 @@ nav.pagy-nav-foundation role="navigation" aria-label="Pagination"
 
       - elsif item.is_a?(String)                 # current page
         li.current
-          span.show-for-sr You're on page
+          span.show-for-sr
+            == pagy_t('pagy.nav.current')
           = item
 
       - elsif item == :gap                       # page gap

diff --git a/test/pagy/extras/compact_test.rb b/test/pagy/extras/compact_test.rb
@@ -194,57 +194,21 @@
       pagy, _  = @array.pagy(1)
       html, id = frontend.pagy_nav_compact_foundation(pagy), caller(0,1)[0].hash
       html.must_equal \
-        %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-foundation" aria-label="Pagination">) +
-          %(<a href="/foo?page=#{Pagy::Frontend::MARKER}"   style="display: none;" ></a>) +
-          %(<div class="button-group">) +
-            %(<a class="prev button primary disabled" href="#">&lsaquo;&nbsp;Prev</a>) +
-            %(<span class="pagy-compact-input hollow button">) +
-              %(Page ) +
-              %(<input type="number" min="1" max="6" value="1" style="padding: 0; border: none; text-align: center; width: 2rem;">) +
-              %( of 6) +
-            %(</span>) +
-            %(<a href="/foo?page=2"   rel="next" aria-label="next" class="next button primary">Next&nbsp;&rsaquo;</a>) +
-          %(</div>) +
-        %(</nav>) +
-        %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "1", false]</script>)
+      "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-compact-foundation\" role=\"navigation\" aria-label=\"Pagination\"><a href=\"/foo?page=#{Pagy::Frontend::MARKER}\"   style=\"display: none;\" ></a><div class=\"input-group\"><a style=\"margin-bottom: 0px;\" class=\"prev button primary disabled\" href=\"#\">&lsaquo;&nbsp;Prev</a><span class=\"input-group-label\">Page</span> <input class=\"input-group-field cell shrink\" type=\"number\" min=\"1\" max=\"6\" value=\"1\" style=\"width: 2.5rem;\"> <span class=\"input-group-label\">of 6</span><a href=\"/foo?page=2\"   rel=\"next\" style=\"margin-bottom: 0px;\" aria-label=\"next\" class=\"next button primary\">Next&nbsp;&rsaquo;</a></div></nav><script type=\"application/json\" class=\"pagy-compact-json\">[\"#{id}\", \"#{Pagy::Frontend::MARKER}\", \"1\", false]</script>"
     end
 
     it 'renders page 3 for foundation' do
       pagy, _  = @array.pagy(3)
       html, id = frontend.pagy_nav_compact_foundation(pagy), caller(0,1)[0].hash
       html.must_equal \
-        %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-foundation" aria-label="Pagination">) +
-          %(<a href="/foo?page=#{Pagy::Frontend::MARKER}"   style="display: none;" ></a>) +
-          %(<div class="button-group">) +
-            %(<a href="/foo?page=2"   rel="prev" aria-label="previous" class="prev button primary">&lsaquo;&nbsp;Prev</a>) +
-            %(<span class="pagy-compact-input hollow button">) +
-              %(Page ) +
-              %(<input type="number" min="1" max="6" value="3" style="padding: 0; border: none; text-align: center; width: 2rem;">) +
-              %( of 6) +
-            %(</span>) +
-            %(<a href="/foo?page=4"   rel="next" aria-label="next" class="next button primary">Next&nbsp;&rsaquo;</a>) +
-          %(</div>) +
-        %(</nav>) +
-        %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "3", false]</script>)
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-compact-foundation\" role=\"navigation\" aria-label=\"Pagination\"><a href=\"/foo?page=#{Pagy::Frontend::MARKER}\"   style=\"display: none;\" ></a><div class=\"input-group\"><a href=\"/foo?page=2\"   rel=\"prev\" style=\"margin-bottom: 0px;\" aria-label=\"previous\" class=\"prev button primary\">&lsaquo;&nbsp;Prev</a><span class=\"input-group-label\">Page</span> <input class=\"input-group-field cell shrink\" type=\"number\" min=\"1\" max=\"6\" value=\"3\" style=\"width: 2.5rem;\"> <span class=\"input-group-label\">of 6</span><a href=\"/foo?page=4\"   rel=\"next\" style=\"margin-bottom: 0px;\" aria-label=\"next\" class=\"next button primary\">Next&nbsp;&rsaquo;</a></div></nav><script type=\"application/json\" class=\"pagy-compact-json\">[\"#{id}\", \"#{Pagy::Frontend::MARKER}\", \"3\", false]</script>"
     end
 
     it 'renders page 6 for foundation' do
       pagy, _  = @array.pagy(6)
       html, id = frontend.pagy_nav_compact_foundation(pagy), caller(0,1)[0].hash
       html.must_equal \
-        %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact-foundation" aria-label="Pagination">) +
-          %(<a href="/foo?page=#{Pagy::Frontend::MARKER}"   style="display: none;" ></a>) +
-          %(<div class="button-group">) +
-            %(<a href="/foo?page=5"   rel="prev" aria-label="previous" class="prev button primary">&lsaquo;&nbsp;Prev</a>) +
-            %(<span class="pagy-compact-input hollow button">) +
-              %(Page ) +
-              %(<input type="number" min="1" max="6" value="6" style="padding: 0; border: none; text-align: center; width: 2rem;">) +
-              %( of 6) +
-            %(</span>) +
-            %(<a class="next button primary disabled" href="#">Next&nbsp;&rsaquo;</a>) +
-          %(</div>) +
-        %(</nav>) +
-        %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "6", false]</script>)
+        "<nav id=\"pagy-nav-#{id}\" class=\"pagy-nav-compact-foundation\" role=\"navigation\" aria-label=\"Pagination\"><a href=\"/foo?page=#{Pagy::Frontend::MARKER}\"   style=\"display: none;\" ></a><div class=\"input-group\"><a href=\"/foo?page=5\"   rel=\"prev\" style=\"margin-bottom: 0px;\" aria-label=\"previous\" class=\"prev button primary\">&lsaquo;&nbsp;Prev</a><span class=\"input-group-label\">Page</span> <input class=\"input-group-field cell shrink\" type=\"number\" min=\"1\" max=\"6\" value=\"6\" style=\"width: 2.5rem;\"> <span class=\"input-group-label\">of 6</span><a style=\"margin-bottom: 0px;\" class=\"next button primary disabled\" href=\"#\">Next&nbsp;&rsaquo;</a></div></nav><script type=\"application/json\" class=\"pagy-compact-json\">[\"#{id}\", \"#{Pagy::Frontend::MARKER}\", \"6\", false]</script>"
     end
 
   end

diff --git a/test/pagy/extras/foundation_test.rb b/test/pagy/extras/foundation_test.rb
@@ -16,76 +16,26 @@
     it 'renders page 1' do
       pagy, _ = @array.pagy(1)
       frontend.pagy_nav_foundation(pagy).must_equal \
-        '<nav class="pagy-nav-foundation" role="navigation" aria-label="Pagination">' \
-          '<ul class="pagination">' \
-            '<li class="prev disabled">&lsaquo;&nbsp;Prev</li>' \
-            '<li class="current"><span class="show-for-sr">You\'re on page</span>1</li>'\
-            '<li><a href="/foo?page=2"   rel="next" >2</a></li>' \
-            '<li><a href="/foo?page=3"   >3</a></li>' \
-            '<li><a href="/foo?page=4"   >4</a></li>' \
-            '<li><a href="/foo?page=5"   >5</a></li>' \
-            '<li><a href="/foo?page=6"   >6</a></li>' \
-            '<li class="next"><a href="/foo?page=2"   rel="next" aria-label="next">Next&nbsp;&rsaquo;</a></li>' \
-          '</ul>' \
-        '</nav>'
+        "<nav class=\"pagy-nav-foundation\" role=\"navigation\" aria-label=\"Pagination\"><ul class=\"pagination\"><li class=\"prev disabled\">&lsaquo;&nbsp;Prev</li><li class=\"current\"><span class=\"show-for-sr\">You're on page</span> 1</li><li><a href=\"/foo?page=2\"   rel=\"next\" >2</a></li><li><a href=\"/foo?page=3\"   >3</a></li><li><a href=\"/foo?page=4\"   >4</a></li><li><a href=\"/foo?page=5\"   >5</a></li><li><a href=\"/foo?page=6\"   >6</a></li><li class=\"next\"><a href=\"/foo?page=2\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></li></ul></nav>"
     end
 
     it 'renders page 3' do
       pagy, _ = @array.pagy(3)
       frontend.pagy_nav_foundation(pagy).must_equal \
-      '<nav class="pagy-nav-foundation" role="navigation" aria-label="Pagination">' \
-        '<ul class="pagination">' \
-          '<li class="prev"><a href="/foo?page=2"   rel="prev" aria-label="previous">&lsaquo;&nbsp;Prev</a></li>' \
-          '<li><a href="/foo?page=1"   >1</a></li>' \
-          '<li><a href="/foo?page=2"   rel="prev" >2</a></li>' \
-          '<li class="current"><span class="show-for-sr">You\'re on page</span>3</li>' \
-          '<li><a href="/foo?page=4"   rel="next" >4</a></li>' \
-          '<li><a href="/foo?page=5"   >5</a></li>' \
-          '<li><a href="/foo?page=6"   >6</a></li>' \
-          '<li class="next"><a href="/foo?page=4"   rel="next" aria-label="next">Next&nbsp;&rsaquo;</a></li>' \
-        '</ul>' \
-      '</nav>'
+      "<nav class=\"pagy-nav-foundation\" role=\"navigation\" aria-label=\"Pagination\"><ul class=\"pagination\"><li class=\"prev\"><a href=\"/foo?page=2\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></li><li><a href=\"/foo?page=1\"   >1</a></li><li><a href=\"/foo?page=2\"   rel=\"prev\" >2</a></li><li class=\"current\"><span class=\"show-for-sr\">You're on page</span> 3</li><li><a href=\"/foo?page=4\"   rel=\"next\" >4</a></li><li><a href=\"/foo?page=5\"   >5</a></li><li><a href=\"/foo?page=6\"   >6</a></li><li class=\"next\"><a href=\"/foo?page=4\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></li></ul></nav>"
     end
 
     it 'renders page 6' do
       pagy, _ = @array.pagy(6)
       frontend.pagy_nav_foundation(pagy).must_equal \
-       '<nav class="pagy-nav-foundation" role="navigation" aria-label="Pagination">' \
-        '<ul class="pagination">' \
-          '<li class="prev"><a href="/foo?page=5"   rel="prev" aria-label="previous">&lsaquo;&nbsp;Prev</a></li>' \
-          '<li><a href="/foo?page=1"   >1</a></li>' \
-          '<li><a href="/foo?page=2"   >2</a></li>' \
-          '<li><a href="/foo?page=3"   >3</a></li>' \
-          '<li><a href="/foo?page=4"   >4</a></li>' \
-          '<li><a href="/foo?page=5"   rel="prev" >5</a></li>' \
-          '<li class="current"><span class="show-for-sr">You\'re on page</span>6</li>' \
-          '<li class="next disabled">Next&nbsp;&rsaquo;</li>' \
-        '</ul>' \
-      '</nav>'
+       "<nav class=\"pagy-nav-foundation\" role=\"navigation\" aria-label=\"Pagination\"><ul class=\"pagination\"><li class=\"prev\"><a href=\"/foo?page=5\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></li><li><a href=\"/foo?page=1\"   >1</a></li><li><a href=\"/foo?page=2\"   >2</a></li><li><a href=\"/foo?page=3\"   >3</a></li><li><a href=\"/foo?page=4\"   >4</a></li><li><a href=\"/foo?page=5\"   rel=\"prev\" >5</a></li><li class=\"current\"><span class=\"show-for-sr\">You're on page</span> 6</li><li class=\"next disabled\">Next&nbsp;&rsaquo;</li></ul></nav>"
     end
 
     it 'renders page 10' do
       @array = (1..1000).to_a.extend(Pagy::Array::PageMethod)
       pagy, _ = @array.pagy(10)
       frontend.pagy_nav_foundation(pagy).must_equal \
-        '<nav class="pagy-nav-foundation" role="navigation" aria-label="Pagination">' \
-          '<ul class="pagination">' \
-            '<li class="prev"><a href="/foo?page=9"   rel="prev" aria-label="previous">&lsaquo;&nbsp;Prev</a></li>' \
-            '<li><a href="/foo?page=1"   >1</a></li>' \
-            '<li class="ellipsis" aria-hidden="true"></li><li><a href="/foo?page=6"   >6</a></li>' \
-            '<li><a href="/foo?page=7"   >7</a></li>' \
-            '<li><a href="/foo?page=8"   >8</a></li>' \
-            '<li><a href="/foo?page=9"   rel="prev" >9</a></li>' \
-            '<li class="current"><span class="show-for-sr">You\'re on page</span>10</li>' \
-            '<li><a href="/foo?page=11"   rel="next" >11</a></li>' \
-            '<li><a href="/foo?page=12"   >12</a></li>' \
-            '<li><a href="/foo?page=13"   >13</a></li>' \
-            '<li><a href="/foo?page=14"   >14</a></li>' \
-            '<li class="ellipsis" aria-hidden="true"></li>' \
-            '<li><a href="/foo?page=50"   >50</a></li>' \
-            '<li class="next"><a href="/foo?page=11"   rel="next" aria-label="next">Next&nbsp;&rsaquo;</a></li>' \
-          '</ul>' \
-        '</nav>'
+        "<nav class=\"pagy-nav-foundation\" role=\"navigation\" aria-label=\"Pagination\"><ul class=\"pagination\"><li class=\"prev\"><a href=\"/foo?page=9\"   rel=\"prev\" aria-label=\"previous\">&lsaquo;&nbsp;Prev</a></li><li><a href=\"/foo?page=1\"   >1</a></li><li class=\"ellipsis\" aria-hidden=\"true\"></li><li><a href=\"/foo?page=6\"   >6</a></li><li><a href=\"/foo?page=7\"   >7</a></li><li><a href=\"/foo?page=8\"   >8</a></li><li><a href=\"/foo?page=9\"   rel=\"prev\" >9</a></li><li class=\"current\"><span class=\"show-for-sr\">You're on page</span> 10</li><li><a href=\"/foo?page=11\"   rel=\"next\" >11</a></li><li><a href=\"/foo?page=12\"   >12</a></li><li><a href=\"/foo?page=13\"   >13</a></li><li><a href=\"/foo?page=14\"   >14</a></li><li class=\"ellipsis\" aria-hidden=\"true\"></li><li><a href=\"/foo?page=50\"   >50</a></li><li class=\"next\"><a href=\"/foo?page=11\"   rel=\"next\" aria-label=\"next\">Next&nbsp;&rsaquo;</a></li></ul></nav>"
     end
 
   end