Foundation extra (#79)

Add pagy_nav_foundation helpers and templates

README.md

@@ -93,6 +93,7 @@ Use the official extras, or write your own in just a few lines. Extras add speci
 
 - [bootstrap](http://ddnexus.github.io/pagy/extras/bootstrap): Nav helpers and templates for Bootstrap pagination
 - [bulma](http://ddnexus.github.io/pagy/extras/bulma): Nav helpers and templates for Bulma CSS pagination
+- [foundation](http://ddnexus.github.io/pagy/extras/foundation): Nav helpers and templates for Foundation pagination
 - [materialize](http://ddnexus.github.io/pagy/extras/materialize): Nav helpers for Materialize CSS pagination
 
 ### Feature Extras

docs/extras.md

@@ -11,6 +11,7 @@ Pagy comes with a few optional extensions/extras:
 | `bootstrap`    | Nav helper and templates for Bootstrap pagination                                                      | [bootstrap.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/bootstrap.rb), [documentation](extras/bootstrap.md)          |
 | `bulma`        | Nav helper and templates for [Bulma](https://bulma.io) pagination component                            | [bulma.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/bulma.rb), [documentation](extras/bulma.md)                      |
 | `compact`      | An alternative UI that combines the pagination  with the nav info in a single compact element          | [compact.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/compact.rb), [documentation](extras/compact.md)                |
+| `foundation`   | Nav helper and templates for Foundation pagination                                                     | [foundation.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/foundation.rb), [documentation](extras/foundation.md)       |
 | `i18n`         | Use the `I18n` gem instead of the pagy implementation                                                  | [i18n.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/i81n.rb), [documentation](extras/i18n.md)                         |
 | `items`        | Allow the client to request a custom number of items per page with a ready to use selector UI          | [items.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/items.rb), [documentation](extras/items.md)                      |
 | `materialize`  | Nav helper for Materialize CSS [pagination component](https://materializecss.com/pagination.html)      | [materialize.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/materialize.rb), [documentation](extras/materialize.md)    |

docs/extras/foundation.md

@@ -0,0 +1,46 @@
+---
+title: Foundation
+---
+# Foundation Extra
+
+This extra adds nav helper and templates for Foundation pagination.
+
+## Synopsys
+
+See [extras](../extras.md) for general usage info.
+
+Render the navigation links in some view...
+with a fast helper:
+
+```erb
+<%== pagy_nav_foundation(@pagy) %>
+```
+
+or with a template:
+
+```erb
+<%== render 'pagy/nav_foundation', locals: {pagy: @pagy} %>
+```
+
+## Files
+
+This extra is composed of 4 files:
+
+- [foundation.rb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/foundation.rb)
+- [nav_foundation.html.erb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_foundation.html.erb) (optional template)
+- [nav_foundation.html.haml](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_foundation.html.haml) (optional template)
+- [nav_foundation.html.slim](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_foundation.html.slim)  (optional template)
+
+## Methods
+
+This extra adds one nav helpers to the `Pagy::Frontend` module. You can customize it by overriding it directly in your own view helper.
+
+### pagy_nav_foundation(pagy)
+
+This method is the same as the `pagy_nav`, but customized for Foundation.
+
+The `nav_foundation.*` templates produce the same output, and can be used as an easier (but slower) starting point to override it.
+
+### Optional Template Files
+
+See [Using Templates](../how-to.md#using-templates).

docs/how-to.md

@@ -322,6 +322,10 @@ They produce exactly the same output of the helpers, but they are slower, so use
   - [nav_bulma.html.erb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_bulma.html.erb)
   - [nav_bulma.html.haml](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_bulma.html.haml)
   - [nav_bulma.html.slim](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_bulma.html.slim)
+- `foundation`
+  - [nav_foundation.html.erb](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_foundation.html.erb)
+  - [nav_foundation.html.haml](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_foundation.html.haml)
+  - [nav_foundation.html.slim](https://github.com/ddnexus/pagy/blob/master/lib/pagy/extras/templates/nav_foundation.html.slim)
 
 If you need to try/compare an unmodified built-in template, you can render it right from the Pagy gem with:
 

lib/pagy/extras/compact.rb

@@ -58,6 +58,24 @@ def pagy_nav_compact_bulma(pagy, id=caller(1,1)[0].hash)
       html << %(</div></nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}", #{!!defined?(TRIM)}]</script>)
     end
 
+    # Compact pagination for foundation: it returns the html with the series of links to the pages
+    # we use a numeric input tag to set the page and the Pagy.compact javascript to navigate
+    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 << 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></nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}", #{!!defined?(TRIM)}]</script>)
+    end
+
     # Compact pagination for materialize: it returns the html with the series of links to the pages
     # we use a numeric input tag to set the page and the Pagy.compact javascript to navigate
     def pagy_nav_compact_materialize(pagy, id=caller(1,1)[0].hash)

lib/pagy/extras/foundation.rb

@@ -0,0 +1,26 @@
+# See the Pagy documentation: https://ddnexus.github.io/pagy/extras/foundation
+# frozen_string_literal: true
+
+class Pagy
+  # Add nav helper for foundation pagination
+  module Frontend
+
+    # Pagination for foundation: it returns the html with the series of links to the pages
+    def pagy_nav_foundation(pagy)
+      html, link, p_prev, p_next = +'', pagy_link_proc(pagy), pagy.prev, pagy.next
+
+      html << (p_prev ? %(<li class="prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>)
+                      : %(<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 == :gap       ; %(<li class="ellipsis" aria-hidden="true"></li>)                                    # page gap
+                end
+      end
+      html << (p_next ? %(<li class="next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>)
+                      : %(<li class="next disabled">#{pagy_t('pagy.nav.next')}</li>))
+      %(<nav class="pagy-nav-foundation" role="navigation" aria-label="Pagination"><ul class="pagination">#{html}</ul></nav>)
+    end
+
+  end
+end

lib/pagy/extras/initializer_example.rb

@@ -40,6 +40,10 @@
 # See https://ddnexus.github.io/pagy/extras/bulma
 # require 'pagy/extras/bulma'
 
+# Foundation: Nav helper and templates for Foundation pagination
+# See https://ddnexus.github.io/pagy/extras/foundation
+# require 'pagy/extras/foundation'
+
 # Materialize: Nav helper for Materialize pagination
 # See https://ddnexus.github.io/pagy/extras/materialize
 # require 'pagy/extras/materialize'

lib/pagy/extras/responsive.rb

@@ -57,7 +57,7 @@ def pagy_nav_responsive_bootstrap(pagy, id=caller(1,1)[0].hash)
 
       tags['before'] = +'<ul class="pagination">'
       tags['before'] << (p_prev ? %(<li class="page-item prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>)
-                               : %(<li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev')}</a></li>))
+                                : %(<li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev')}</a></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 class="page-item">#{link.call item}</li>)                                                        # page link
                           elsif item.is_a?(String) ; %(<li class="page-item active">#{link.call item}</li>)                                                 # active page
@@ -92,6 +92,27 @@ def pagy_nav_responsive_bulma(pagy, id=caller(1,1)[0].hash)
       %(<nav id="pagy-nav-#{id}" class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination"></nav>#{script})
     end
 
+    # Responsive pagination for Foundation: it returns the html with the series of links to the pages
+    # rendered by the Pagy.responsive javascript
+    def pagy_nav_responsive_foundation(pagy, id=caller(1,1)[0].hash)
+      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
+
+      tags['before'] = +'<ul class="pagination">'
+      tags['before'] << (p_prev ? %(<li class="prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>)
+                                : %(<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 == :gap       ; %(<li class="gap disabled">#{pagy_t('pagy.nav.gap')}</li>) # page gap
+                          end
+      end
+      tags['after'] = +(p_next ? %(<li class="next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>)
+                               : %(<li class="next disabled">#{pagy_t('pagy.nav.next')}</li>))
+      tags['after'] << '</ul>'
+      script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
+      %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive-foundation" aria-label="Pagination"></nav>#{script})
+    end
+
     # Responsive pagination for Materialize: it returns the html with the series of links to the pages
     # rendered by the Pagy.responsive javascript
     def pagy_nav_responsive_materialize(pagy, id=caller(1,1)[0].hash)

lib/pagy/extras/templates/nav_foundation.html.erb

@@ -0,0 +1,24 @@
+<%#
+  This template is i18n-ready: if you don't use i18n, then you can replace the pagy_t
+  calls with the actual strings ("&lsaquo; Prev", "Next &rsaquo;", "&hellip;").
+
+  The link variable is set to a proc that returns the link tag.
+  Usage: link.call( page_number [, text [, extra_attributes_string ]])
+-%>
+<% link = pagy_link_proc(pagy) -%>
+<%#                            -%><nav class="pagy-nav-foundation" role="navigation" aria-label="Pagination">
+<%#                            -%>  <ul class="pagination">
+<% if pagy.prev                -%>    <li class="prev"><%== link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"') %></li>
+<% else                        -%>    <li class="prev disabled"><%== pagy_t('pagy.nav.prev') %></li>
+<% 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 == :gap        -%>    <li class="disabled gap"><%== pagy_t('pagy.nav.gap') %></li>
+<%   end                       -%>
+<% end                         -%>
+<% if pagy.next                -%>    <li class="next"><%== link.call(pagy.next, pagy_t('pagy.nav.next'), 'aria-label="next"') %></li>
+<% else                        -%>    <li class="next disabled"><%== pagy_t('pagy.nav.next') %></li>
+<% end                         -%>
+<%#                            -%>  </ul>
+<%#                            -%></nav>

lib/pagy/extras/templates/nav_foundation.html.haml

@@ -0,0 +1,36 @@
+-# This template is i18n-ready: if you don't use i18n, then you can replace the pagy_t
+-# calls with the actual strings ("‹ Prev", "Next ›", "…").
+
+-# The link variable is set to a proc that returns the link tag.
+-# Usage: link.call( page_number [, text [, extra_attributes_string ]])
+
+- link = pagy_link_proc(pagy)
+
+%nav.pagy-nav-foundation{"role" => "navigation", "aria-label" => "Pagination"}
+
+  %ul.pagination
+
+    - if pagy.prev
+      %li.prev!= link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"')
+    - else
+      %li.prev.disabled
+        != pagy_t('pagy.nav.prev')
+
+    - pagy.series.each do |item|                      # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+      - if item.is_a?(Integer)                        # page link
+        %li!= link.call(item)
+
+      - elsif item.is_a?(String)                      # current page
+        %li.current
+          %span.show-for-sr You're on page
+          != item
+
+      - elsif item == :gap                            # page gap
+        %li.disabled.gap
+          != pagy_t('pagy.nav.gap')
+
+    - if pagy.next
+      %li.next!= link.call(pagy.next, pagy_t('pagy.nav.next'), 'aria-label="next"')
+    - else
+      %li.next.disabled
+        != pagy_t('pagy.nav.next')

lib/pagy/extras/templates/nav_foundation.html.slim

@@ -0,0 +1,36 @@
+/ This template is i18n-ready: if you don't use i18n, then you can replace the pagy_t
+/ calls with the actual strings ("‹ Prev", "Next ›", "…").
+
+/ The link variable is set to a proc that returns the link tag.
+/ Usage: link.call( page_number [, text [, extra_attributes_string ]])
+
+- link = pagy_link_proc(pagy)
+
+nav.pagy-nav-foundation role="navigation" aria-label="Pagination"
+
+  ul.pagination
+
+    - if pagy.prev
+      li.prev == link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"')
+    - else
+      li.prev.disabled
+        == pagy_t('pagy.nav.prev')
+
+    - pagy.series.each do |item|                 # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+      - if item.is_a?(Integer)                   # page link
+        li == link.call(item)
+
+      - elsif item.is_a?(String)                 # current page
+        li.current
+          span.show-for-sr You're on page
+          = item
+
+      - elsif item == :gap                       # page gap
+        li.disabled.gap
+          == pagy_t('pagy.nav.gap')
+
+    - if pagy.next
+      li.next == link.call(pagy.next, pagy_t('pagy.nav.next'), 'aria-label="next"')
+    - else
+      li.next.disabled
+        == pagy_t('pagy.nav.next')

test/pagy/extras/compact_test.rb

@@ -184,6 +184,71 @@
 
   end
 
+  describe "#pagy_nav_compact_foundation" do
+
+    before do
+      @array = (1..103).to_a.extend(Pagy::Array::PageMethod)
+    end
+
+    it 'renders page 1 for foundation' do
+      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>)
+    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>)
+    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>)
+    end
+
+  end
+
   describe "#pagy_nav_compact_materialize" do
 
     before do