pagy 2.1.5 → 3.0.0

data/lib/locales/zh-TW.yml

@@ -1,20 +1,20 @@
+# :other pluralization (see https://github.com/ddnexus/pagy/blob/master/lib/locales/utils/p11n.rb)
+
 zh-TW:
   pagy:
+
+    item_name: ""
+
     nav:
       prev: "‹ 上一頁"
       next: "下一頁 ›"
       gap: "…"
+
+    combo_nav_js: "第 %{page_input} / %{pages} 頁"
+
     info:
-      single_page:
-        zero: "沒找到 %{item_name}"
-        one: "顯示 <b>1</b> 項%{item_name}"
-        other: "顯示<b>所有 %{count}</b> 項%{item_name}"
+      no_items: "沒找到項"
+      single_page: "顯示 <b>%{count}</b> 項%{item_name}"
       multiple_pages: "共 <b>%{count}</b> 項%{item_name}，顯示 <b>%{from}-%{to}</b>"
-      item_name:
-        zero: "項"
-        one: ""
-        other: ""
-    compact: "第 %{page_input} / %{pages} 頁"
-    items:
-      one: "每頁顯示 %{items_input} 項"
-      other: "每頁顯示 %{items_input} 項"
+
+    items_selector_js: "每頁顯示 %{items_input} 項%{item_name}"

data/lib/pagy.rb

@@ -4,7 +4,7 @@
 
 require 'pathname'
 
-class Pagy ; VERSION = '2.1.5'
+class Pagy ; VERSION = '3.0.0'
 
   class OverflowError < StandardError; attr_reader :pagy; def initialize(pagy) @pagy = pagy end; end
 
@@ -12,7 +12,7 @@ class Pagy ; VERSION = '2.1.5'
   def self.root; @root ||= Pathname.new(__FILE__).dirname.freeze end
 
   # default vars
-  VARS = { page:1, items:20, outset:0, size:[1,4,4,1], page_param: :page, params:{}, anchor:'', link_extra:'', item_path:'pagy.info.item_name', cycle: false }
+  VARS = { page:1, items:20, outset:0, size:[1,4,4,1], page_param: :page, params:{}, anchor:'', link_extra:'', i18n_key:'pagy.item_name', cycle:false }
 
   attr_reader :count, :page, :items, :vars, :pages, :last, :offset, :from, :to, :prev, :next
 
@@ -41,7 +41,7 @@ class Pagy ; VERSION = '2.1.5'
       if    a<0 || a==b || a>@last                                        # skip out of range and duplicates
       elsif a+1 == b; series.push(a)                                      # no gap     -> no additions
       elsif a+2 == b; series.push(a, a+1)                                 # 1 page gap -> fill with missing page
-      else            series.push(a, :gap)                                # n page gap -> add :gap
+      else            series.push(a, :gap)                                # n page gap -> add gap
       end                                                                 # skip the end boundary (last+1)
     end                                                                   # shift the start boundary (0) and
     series.shift; series[series.index(@page)] = @page.to_s; series        # convert the current page to String

data/lib/pagy/extras/bootstrap.rb

@@ -24,43 +24,34 @@ class Pagy
       %(<nav class="pagy-bootstrap-nav pagination" role="navigation" aria-label="pager"><ul class="pagination">#{html}</ul></nav>)
     end
 
-    # Compact pagination for bootstrap: 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_bootstrap_compact_nav(pagy, id=pagy_id)
+    # Javascript pagination for bootstrap: it returns a nav and a JSON tag used by the Pagy.nav javascript
+    def pagy_bootstrap_nav_js(pagy, id=pagy_id)
+      link, p_prev, p_next = pagy_link_proc(pagy, 'class="page-link"'), pagy.prev, pagy.next
+      tags = { 'before' => p_prev ? %(<ul class="pagination"><li class="page-item prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>)
+                                  : %(<ul class="pagination"><li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev')}</a></li>),
+               'link'   => %(<li class="page-item">#{marker = link.call(MARKER)}</li>),
+               'active' => %(<li class="page-item active">#{marker}</li>),
+               'gap'    => %(<li class="page-item gap disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.gap')}</a></li>),
+               'after'  => p_next ? %(<li class="page-item next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li></ul>)
+                                  : %(<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next')}</a></li></ul>) }
+      %(<nav id="#{id}" class="pagy-bootstrap-nav-js pagination" role="navigation" aria-label="pager"></nav>#{pagy_json_tag(:nav, id, MARKER, tags, pagy.sequels)})
+    end
+
+    # Javascript combo pagination for bootstrap: it returns a nav and a JSON tag used by the Pagy.combo_nav javascript
+    def pagy_bootstrap_combo_nav_js(pagy, id=pagy_id)
       link, p_prev, p_next, p_page, p_pages = pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      html = EMPTY + %(<nav id="#{id}" class="pagy-bootstrap-compact-nav pagination" role="navigation" aria-label="pager">)
-        html << link.call(MARKER, '', %(style="display: none;" ))
+      html = %(<nav id="#{id}" class="pagy-bootstrap-combo-nav-js pagination" role="navigation" aria-label="pager">) \
+             + link.call(MARKER, '', %(style="display: none;" ))
         (html << link.call(1, '', %(style="display: none;" ))) if defined?(TRIM)
         html << %(<div class="btn-group" role="group">)
         html << (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous" class="prev btn btn-primary"')
                         : %(<a class="prev btn btn-primary disabled" href="#">#{pagy_t('pagy.nav.prev')}</a>))
         input = %(<input type="number" min="1" max="#{p_pages}" value="#{p_page}" class="text-primary" style="padding: 0; border: none; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
-        html << %(<div class="pagy-compact-input btn btn-primary disabled" style="white-space: nowrap;">#{pagy_t('pagy.compact', page_input: input, count: p_page, pages: p_pages)}</div>)
+        html << %(<div class="pagy-combo-input btn btn-primary disabled" style="white-space: nowrap;">#{pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages)}</div>)
         html << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'aria-label="next" class="next btn btn-primary"')
                         : %(<a class="next btn btn-primary disabled" href="#">#{pagy_t('pagy.nav.next')}</a>))
-      html << %(</div></nav>#{pagy_json_tag(:compact, id, MARKER, p_page, !!defined?(TRIM))})
-    end
-
-    # Responsive pagination for bootstrap: it returns the html with the series of links to the pages
-    # rendered by the Pagy.responsive javascript
-    def pagy_bootstrap_responsive_nav(pagy, id=pagy_id)
-      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy, 'class="page-link"'), pagy.prev, pagy.next, pagy.responsive
-
-      tags['before'] = EMPTY + '<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>))
-      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
-                          elsif item == :gap       ; %(<li class="page-item gap disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.gap')}</a></li>) # page gap
-                          end
-      end
-      tags['after'] = EMPTY + (p_next ? %(<li class="page-item next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>)
-                                      : %(<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next')}</a></li>))
-      tags['after'] << '</ul>'
-      script = pagy_json_tag(:responsive, id, tags,  responsive[:widths], responsive[:series])
-      %(<nav id="#{id}" class="pagy-bootstrap-responsive-nav pagination" role="navigation" aria-label="pager"></nav>#{script})
+      html << %(</div></nav>#{pagy_json_tag(:combo_nav, id, MARKER, p_page, !!defined?(TRIM))})
     end
 
   end

data/lib/pagy/extras/bulma.rb

@@ -11,10 +11,10 @@ class Pagy
     def pagy_bulma_nav(pagy)
       link, p_prev, p_next = pagy_link_proc(pagy), pagy.prev, pagy.next
 
-      html = EMPTY + (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
-                             : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a>))
-      html << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
-                      : %(<a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
+      html = (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
+                     : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a>)) \
+           + (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
+                     : %(<a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
       html << '<ul class="pagination-list">'
       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, item, %(class="pagination-link" aria-label="goto page #{item}") }</li>)                           # page link
@@ -26,43 +26,36 @@ class Pagy
       %(<nav class="pagy-bulma-nav pagination is-centered" role="navigation" aria-label="pagination">#{html}</nav>)
     end
 
-    # Compact pagination for Bulma: 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_bulma_compact_nav(pagy, id=pagy_id)
+    # Javascript pagination for bulma: it returns a nav and a JSON tag used by the Pagy.nav javascript
+    def pagy_bulma_nav_js(pagy, id=pagy_id)
+      link, p_prev, p_next = pagy_link_proc(pagy), pagy.prev, pagy.next
+      tags = { 'before' => ( (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
+                                     : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a>)) \
+                           + (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
+                                     : %(<a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>)) \
+                           + '<ul class="pagination-list">' ),
+               'link'   => %(<li>#{link.call(MARKER, MARKER, %(class="pagination-link" aria-label="goto page #{MARKER}"))}</li>),
+               'active' => %(<li>#{link.call(MARKER, MARKER, %(class="pagination-link is-current" aria-current="page" aria-label="page #{MARKER}"))}</li>),
+               'gap'    => %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>),
+               'after'  => '</ul>' }
+      %(<nav id="#{id}" class="pagy-bulma-nav-js pagination is-centered" role="navigation" aria-label="pagination"></nav>#{pagy_json_tag(:nav, id, MARKER, tags, pagy.sequels)})
+    end
+
+    # Javascript combo pagination for Bulma: it returns a nav and a JSON tag used by the Pagy.combo_nav javascript
+    def pagy_bulma_combo_nav_js(pagy, id=pagy_id)
       link, p_prev, p_next, p_page, p_pages = pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      html = EMPTY + %(<nav id="#{id}" class="pagy-bulma-compact-nav" role="navigation" aria-label="pagination">)
-        html << link.call(MARKER, '', 'style="display: none;"')
+      html = %(<nav id="#{id}" class="pagy-bulma-combo-nav-js" role="navigation" aria-label="pagination">) \
+           + link.call(MARKER, '', 'style="display: none;"')
         (html << link.call(1, '', %(style="display: none;"))) if defined?(TRIM)
         html << %(<div class="field is-grouped is-grouped-centered" role="group">)
         html << (p_prev ? %(<p class="control">#{link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="button" aria-label="previous page"')}</p>)
                         : %(<p class="control"><a class="button" disabled>#{pagy_t('pagy.nav.prev')}</a></p>))
         input = %(<input class="input" type="number" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 0; text-align: center; width: #{p_pages.to_s.length+1}rem; margin:0 0.3rem;">)
-        html << %(<div class="pagy-compact-input control level is-mobile">#{pagy_t('pagy.compact', page_input: input, count: p_page, pages: p_pages)}</div>)
+        html << %(<div class="pagy-combo-input control level is-mobile">#{pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages)}</div>)
         html << (p_next ? %(<p class="control">#{link.call(p_next, pagy_t('pagy.nav.next'), 'class="button" aria-label="next page"')}</p>)
                         : %(<p class="control"><a class="button" disabled>#{pagy_t('pagy.nav.next')}</a></p>))
-      html << %(</div></nav>#{pagy_json_tag(:compact, id, MARKER, p_page, !!defined?(TRIM))})
-    end
-
-    # Responsive pagination for Bulma: it returns the html with the series of links to the pages
-    # rendered by the Pagy.responsive javascript
-    def pagy_bulma_responsive_nav(pagy, id=pagy_id)
-      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
-
-      tags['before'] = EMPTY + (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')
-                                       : %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a>))
-      tags['before'] << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')
-                                : %(<a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
-      tags['before'] << '<ul class="pagination-list">'
-      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, item, %(class="pagination-link" aria-label="goto page #{item}")}</li>)
-                          elsif item.is_a?(String) ; %(<li>#{link.call item, item, %(class="pagination-link is-current" aria-current="page" aria-label="page #{item}")}</li>)
-                          elsif item == :gap       ; %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>)
-                          end
-      end
-      tags['after'] = '</ul>'
-      script = pagy_json_tag(:responsive, id, tags,  responsive[:widths], responsive[:series])
-      %(<nav id="#{id}" class="pagy-bulma-responsive-nav pagination is-centered" role="navigation" aria-label="pagination"></nav>#{script})
+      html << %(</div></nav>#{pagy_json_tag(:combo_nav, id, MARKER, p_page, !!defined?(TRIM))})
     end
 
   end

data/lib/pagy/extras/foundation.rb

@@ -24,43 +24,36 @@ class Pagy
       %(<nav class="pagy-foundation-nav" role="navigation" aria-label="Pagination"><ul class="pagination">#{html}</ul></nav>)
     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_foundation_compact_nav(pagy, id=pagy_id)
+    # Javascript pagination for foundation: it returns a nav and a JSON tag used by the Pagy.nav javascript
+    def pagy_foundation_nav_js(pagy, id=pagy_id)
+      link, p_prev, p_next = pagy_link_proc(pagy), pagy.prev, pagy.next
+      tags = { 'before' => ( '<ul class="pagination">' \
+                           + (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>)) ),
+               'link'   => %(<li>#{link.call(MARKER)}</li>),
+               'active' => %(<li class="current">#{pagy.page}</li>),
+               'gap'    => %(<li class="ellipsis gap" aria-hidden="true"></li>),
+               '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>)) \
+                           + '</ul>' ) }
+      %(<nav id="#{id}" class="pagy-foundation-nav-js" role="navigation" aria-label="Pagination"></nav>#{pagy_json_tag(:nav, id, MARKER, tags, pagy.sequels)})
+    end
+
+    # Javascript combo pagination for Foundation: it returns a nav and a JSON tag used by the Pagy.combo_nav javascript
+    def pagy_foundation_combo_nav_js(pagy, id=pagy_id)
       link, p_prev, p_next, p_page, p_pages = pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      html = EMPTY + %(<nav id="#{id}" class="pagy-foundation-compact-nav" role="navigation" aria-label="Pagination">)
-        html << link.call(MARKER, '', %(style="display: none;" ))
+      html = %(<nav id="#{id}" class="pagy-foundation-combo-nav-js" role="navigation" aria-label="Pagination">) \
+           + link.call(MARKER, '', %(style="display: none;" ))
         (html << link.call(1, '', %(style="display: none;" ))) if defined?(TRIM)
         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}rem; padding: 0 0.3rem; margin: 0 0.3rem;">)
-        html << %(<span class="input-group-label">#{pagy_t('pagy.compact', page_input: input, count: p_page, pages: p_pages)}</span>)
+        html << %(<span class="input-group-label">#{pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: 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>#{pagy_json_tag(:compact, id, MARKER, p_page, !!defined?(TRIM))})
-    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_foundation_responsive_nav(pagy, id=pagy_id)
-      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
-
-      tags['before'] = EMPTY + '<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="ellipsis gap" aria-hidden="true"></li>) # page gap
-                          end
-      end
-      tags['after'] = EMPTY + (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 = pagy_json_tag(:responsive, id, tags,  responsive[:widths], responsive[:series])
-      %(<nav id="#{id}" class="pagy-foundation-responsive-nav" aria-label="Pagination"></nav>#{script})
+      html << %(</div></nav>#{pagy_json_tag(:combo_nav, id, MARKER, p_page, !!defined?(TRIM))})
     end
 
   end

data/lib/pagy/extras/i18n.rb

@@ -10,7 +10,7 @@ class Pagy
 
     Pagy::I18n.clear.instance_eval { undef :load; undef :t } # unload the pagy default constant for efficiency
 
-    # no :pagy_without_i18n alias with the i18n gem
+    alias :pagy_without_i18n :pagy_t
     def pagy_t_with_i18n(*args) ::I18n.t(*args) end
     alias :pagy_t :pagy_t_with_i18n
 

data/lib/pagy/extras/items.rb

@@ -46,15 +46,14 @@ class Pagy
     alias_method :pagy_url_for, :pagy_url_for_with_items
 
     # Return the items selector HTML. For example "Show [20] items per page"
-    def pagy_items_selector(pagy, id=pagy_id)
+    def pagy_items_selector_js(pagy, id=pagy_id)
       p_vars = pagy.vars; p_items = p_vars[:items]; p_vars[:items] = "#{MARKER}-items-"
 
-      html = EMPTY + %(<span id="#{id}">)
-        html << %(<a href="#{pagy_url_for("#{MARKER}-page-", pagy)}"></a>)
-        p_vars[:items] = p_items # restore the items
-        input = %(<input type="number" min="1" max="#{p_vars[:max_items]}" value="#{p_items}" style="padding: 0; text-align: center; width: #{p_items.to_s.length+1}rem;">)
-        html << %(#{pagy_t('pagy.items', items_input: input, count: p_items)})
-      html << %(</span>#{pagy_json_tag(:items, id, MARKER, pagy.from)})
+      html = %(<span id="#{id}">) + %(<a href="#{pagy_url_for("#{MARKER}-page-", pagy)}"></a>)
+      p_vars[:items] = p_items # restore the items
+      input = %(<input type="number" min="1" max="#{p_vars[:max_items]}" value="#{p_items}" style="padding: 0; text-align: center; width: #{p_items.to_s.length+1}rem;">)
+      html << %(#{pagy_t('pagy.items_selector_js', item_name: pagy_t(pagy.vars[:i18n_key], count: p_items), items_input: input, count: p_items)})
+      html << %(</span>#{pagy_json_tag(:items_selector, id, MARKER, pagy.from)})
     end
 
   end

data/lib/pagy/extras/materialize.rb

@@ -23,13 +23,27 @@ class Pagy
       %(<div class="pagy-materialize-nav pagination" role="navigation" aria-label="pager"><ul class="pagination">#{html}</ul></div>)
     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_materialize_compact_nav(pagy, id=pagy_id)
+    # Javascript pagination for materialize: it returns a nav and a JSON tag used by the Pagy.nav javascript
+    def pagy_materialize_nav_js(pagy, id=pagy_id)
+      link, p_prev, p_next = pagy_link_proc(pagy), pagy.prev, pagy.next
+      tags = { 'before' => ( '<ul class="pagination">' \
+                           + (p_prev  ? %(<li class="waves-effect prev">#{link.call(p_prev, '<i class="material-icons">chevron_left</i>', 'aria-label="previous"')}</li>)
+                                      : %(<li class="prev disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>)) ),
+               'link'   => %(<li class="waves-effect">#{marker = link.call(MARKER)}</li>),
+               'active' => %(<li class="active">#{marker}</li>),
+               'gap'    => %(<li class="gap disabled"><a href="#">#{pagy_t('pagy.nav.gap')}</a></li>),
+               'after'  => ( (p_next ? %(<li class="waves-effect next">#{link.call(p_next, '<i class="material-icons">chevron_right</i>', 'aria-label="next"')}</li>)
+                                     : %(<li class="next disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>)) \
+                           + '</ul>' ) }
+      %(<div id="#{id}" class="pagy-materialize-nav-js" role="navigation" aria-label="pager"></div>#{pagy_json_tag(:nav, id, MARKER, tags, pagy.sequels)})
+    end
+
+    # Javascript combo pagination for materialize: it returns a nav and a JSON tag used by the Pagy.combo_nav javascript
+    def pagy_materialize_combo_nav_js(pagy, id=pagy_id)
       link, p_prev, p_next, p_page, p_pages = pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      html = EMPTY + %(<div id="#{id}" class="pagy-materialize-compact-nav pagination" role="navigation" aria-label="pager">)
-      html << link.call(MARKER, '', %(style="display: none;" ))
+      html = %(<div id="#{id}" class="pagy-materialize-combo-nav-js pagination" role="navigation" aria-label="pager">) \
+           + link.call(MARKER, '', %(style="display: none;" ))
       (html << link.call(1, '', %(style="display: none;" ))) if defined?(TRIM)
       html << %(<div class="pagy-compact-chip role="group" style="height: 35px; border-radius: 18px; background: #e4e4e4; display: inline-block;">)
       html << '<ul class="pagination" style="margin: 0px;">'
@@ -37,31 +51,10 @@ class Pagy
       html << (p_prev ? %(<li class="waves-effect prev" #{li_style}>#{link.call p_prev, '<i class="material-icons">chevron_left</i>', 'aria-label="previous"'}</li>)
                : %(<li class="prev disabled" #{li_style}><a href="#"><i class="material-icons">chevron_left</i></a></li>))
       input = %(<input type="number" class="browser-default" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 2px; border: none; border-radius: 2px; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
-      html << %(<div class="pagy-compact-input btn-flat" style="cursor: default; padding: 0px">#{pagy_t('pagy.compact', page_input: input, count: p_page, pages: p_pages)}</div>)
+      html << %(<div class="pagy-combo-input btn-flat" style="cursor: default; padding: 0px">#{pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages)}</div>)
       html << (p_next ? %(<li class="waves-effect next" #{li_style}>#{link.call p_next, '<i class="material-icons">chevron_right</i>', 'aria-label="next"'}</li>)
                : %(<li class="next disabled" #{li_style}><a href="#"><i class="material-icons">chevron_right</i></a></li>))
-      html << %(</ul></div>#{pagy_json_tag(:compact, id, MARKER, p_page, !!defined?(TRIM))})
-    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_materialize_responsive_nav(pagy, id=pagy_id)
-      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
-
-      tags['before'] = EMPTY + '<ul class="pagination">'
-      tags['before'] << (p_prev  ? %(<li class="waves-effect prev">#{link.call p_prev, '<i class="material-icons">chevron_left</i>', 'aria-label="previous"'}</li>)
-                                 : %(<li class="prev disabled"><a href="#"><i class="material-icons">chevron_left</i></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="waves-effect">#{link.call item}</li>)                           # page link
-                          elsif item.is_a?(String) ; %(<li class="active">#{link.call item}</li>)                                 # active page
-                          elsif item == :gap       ; %(<li class="gap disabled"><a href="#">#{pagy_t('pagy.nav.gap')}</a></li>)   # page gap
-                          end
-      end
-      tags['after'] = EMPTY + (p_next ? %(<li class="waves-effect next">#{link.call p_next, '<i class="material-icons">chevron_right</i>', 'aria-label="next"'}</li>)
-                                      : %(<li class="next disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>))
-      tags['after'] << '</ul>'
-      script = pagy_json_tag(:responsive, id, tags,  responsive[:widths], responsive[:series])
-      %(<div id="#{id}" class="pagy-materialize-responsive-nav pagination" role="navigation" aria-label="pager"></div>#{script})
+      html << %(</ul></div>#{pagy_json_tag(:combo_nav, id, MARKER, p_page, !!defined?(TRIM))})
     end
 
   end

data/lib/pagy/extras/navs.rb

@@ -0,0 +1,40 @@
+# See the Pagy documentation: https://ddnexus.github.io/pagy/extras/navs
+# encoding: utf-8
+# frozen_string_literal: true
+
+require 'pagy/extras/shared'
+
+class Pagy
+  module Frontend
+
+    # Javascript pagination: it returns a nav and a JSON tag used by the Pagy.nav javascript
+    def pagy_nav_js(pagy, id=pagy_id)
+      link, p_prev, p_next = pagy_link_proc(pagy), pagy.prev, pagy.next
+      tags = { 'before' => p_prev ? %(<span class="page prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</span> )
+                                  : %(<span class="page prev disabled">#{pagy_t('pagy.nav.prev')}</span> ),
+               'link'   => %(<span class="page">#{link.call(MARKER)}</span> ),
+               'active' => %(<span class="page active">#{pagy.page}</span> ),
+               'gap'    => %(<span class="page gap">#{pagy_t('pagy.nav.gap')}</span> ),
+               'after'  => p_next ? %(<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>)
+                                  : %(<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>) }
+      %(<nav id="#{id}" class="pagy-nav-js pagination" role="navigation" aria-label="pager"></nav>#{pagy_json_tag(:nav, id, MARKER, tags, pagy.sequels)})
+    end
+
+    # Javascript combo pagination: it returns a nav and a JSON tag used by the Pagy.combo_nav javascript
+    def pagy_combo_nav_js(pagy, id=pagy_id)
+      link, p_prev, p_next, p_page, p_pages = pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
+
+      html = %(<nav id="#{id}" class="pagy-combo-nav-js-js pagination" role="navigation" aria-label="pager">) \
+             + link.call(MARKER, '', %(style="display: none;" ))
+        (html << link.call(1, '', %(style="display: none;" ))) if defined?(TRIM)
+        html << (p_prev ? %(<span class="page prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</span> )
+                        : %(<span class="page prev disabled">#{pagy_t('pagy.nav.prev')}</span> ))
+        input = %(<input type="number" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 0; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
+        html << %(<span class="pagy-combo-input" style="margin: 0 0.6rem;">#{pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages)}</span> )
+        html << (p_next ? %(<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>)
+                        : %(<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>))
+      html << %(</nav>#{pagy_json_tag(:combo_nav, id, MARKER, p_page, !!defined?(TRIM))})
+    end
+
+  end
+end

data/lib/pagy/extras/semantic.rb

@@ -7,7 +7,7 @@ require 'pagy/extras/shared'
 class Pagy
   module Frontend
 
-    # Pagination for semantic-ui: it returns the html with the series of links to the pages
+    # Pagination for semantic: it returns the html with the series of links to the pages
     def pagy_semantic_nav(pagy)
       link, p_prev, p_next = pagy_link_proc(pagy, 'class="item"'), pagy.prev, pagy.next
 
@@ -24,40 +24,33 @@ class Pagy
       %(<div class="pagy-semantic-nav ui pagination menu" aria-label="pager">#{html}</div>)
     end
 
-    # Compact pagination for semantic: 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_semantic_compact_nav(pagy, id=pagy_id)
+    # Javascript pagination for semantic: it returns a nav and a JSON tag used by the Pagy.nav javascript
+    def pagy_semantic_nav_js(pagy, id=pagy_id)
+      link, p_prev, p_next = pagy_link_proc(pagy, 'class="item"'), pagy.prev, pagy.next
+      tags = { 'before' => (p_prev ? %(#{link.call(p_prev, '<i class="left small chevron icon"></i>', 'aria-label="previous"')})
+                                   : %(<div class="item disabled"><i class="left small chevron icon"></i></div>)),
+               'link'   => %(#{link.call(MARKER)}),
+               'active' => %(<a class="item active">#{pagy.page}</a>),
+               'gap'    => %(<div class="disabled item">#{pagy_t('pagy.nav.gap')}</div>),
+               'after'  => (p_next ? %(#{link.call(p_next, '<i class="right small chevron icon"></i>', 'aria-label="next"')})
+                                   : %(<div class="item disabled"><i class="right small chevron icon"></i></div>)) }
+      %(<div id="#{id}" class="pagy-semantic-nav-js ui pagination menu" role="navigation" aria-label="pager"></div>#{pagy_json_tag(:nav, id, MARKER, tags, pagy.sequels)})
+    end
+
+    # Combo pagination for semantic: it returns a nav and a JSON tag used by the Pagy.combo_nav javascript
+    def pagy_semantic_combo_nav_js(pagy, id=pagy_id)
       link, p_prev, p_next, p_page, p_pages = pagy_link_proc(pagy, 'class="item"'), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      html = EMPTY + %(<div id="#{id}" class="pagy-semantic-compact-nav ui compact menu" role="navigation" aria-label="pager">)
-        html << link.call(MARKER, '', %(style="display: none;" ))
+      html = %(<div id="#{id}" class="pagy-semantic-combo-nav-js ui compact menu" role="navigation" aria-label="pager">) \
+           + link.call(MARKER, '', %(style="display: none;" ))
         (html << link.call(1, '', %(style="display: none;" ))) if defined?(TRIM)
         html << (p_prev ? %(#{link.call p_prev, '<i class="left small chevron icon"></i>', 'aria-label="previous"'})
                         : %(<div class="item disabled"><i class="left small chevron icon"></i></div>))
         input = %(<input type="number" min="1" max="#{p_pages}" value="#{p_page}" style="padding: 0; text-align: center; width: #{p_pages.to_s.length+1}rem; margin: 0 0.3rem">)
-        html << %(<div class="pagy-compact-input item">#{pagy_t('pagy.compact', page_input: input, count: p_page, pages: p_pages)}</div> )
+        html << %(<div class="pagy-combo-input item">#{pagy_t('pagy.combo_nav_js', page_input: input, count: p_page, pages: p_pages)}</div> )
         html << (p_next ? %(#{link.call p_next, '<i class="right small chevron icon"></i>', 'aria-label="next"'})
                         : %(<div class="item disabled"><i class="right small chevron icon"></i></div>))
-      html << %(</div>#{pagy_json_tag(:compact, id, MARKER, p_page, !!defined?(TRIM))})
-    end
-
-    # Responsive pagination for semantic: it returns the html with the series of links to the pages
-    # rendered by the Pagy.responsive javascript
-    def pagy_semantic_responsive_nav(pagy, id=pagy_id)
-      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy, 'class="item"'), pagy.prev, pagy.next, pagy.responsive
-
-      tags['before'] = (p_prev ? %(#{link.call p_prev, '<i class="left small chevron icon"></i>', 'aria-label="previous"'})
-                               : %(<div class="item disabled"><i class="left small chevron icon"></i></div>))
-      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); %(#{link.call item})                      # page link
-                          elsif item.is_a?(String) ; %(<a class="item active">#{item}</a>)     # current page
-                          elsif item == :gap       ; %(<div class="disabled item">...</div>)   # page gap
-                          end
-      end
-      tags['after'] = (p_next ? %(#{link.call p_next, '<i class="right small chevron icon"></i>', 'aria-label="next"'})
-                              : %(<div class="item disabled"><i class="right small chevron icon"></i></div>))
-      script = pagy_json_tag(:responsive, id, tags,  responsive[:widths], responsive[:series])
-      %(<div id="#{id}" class="pagy-semantic-responsive-nav ui pagination menu" role="navigation" aria-label="pager"></div>#{script})
+      html << %(</div>#{pagy_json_tag(:combo_nav, id, MARKER, p_page, !!defined?(TRIM))})
     end
 
   end