Module: Pagy::Frontend

Defined in:
lib/pagy-extras/compact.rb,
lib/pagy-extras/bootstrap.rb,
lib/pagy-extras/responsive.rb

Overview

Add nav helpers for responsive pagination

Instance Method Summary collapse

Instance Method Details

#pagy_nav_bootstrap(pagy) ⇒ Object

Pagination for bootstrap: it returns the html with the series of links to the pages



8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
# File 'lib/pagy-extras/bootstrap.rb', line 8

def pagy_nav_bootstrap(pagy)
  tags = ''; link = pagy_link_proc(pagy, 'class="page-link"'.freeze)

  tags << (pagy.prev ? %(<li class="page-item prev">#{link.call pagy.prev, pagy_t('pagy.nav.prev'.freeze), 'aria-label="previous"'.freeze}</li>)
                     : %(<li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev'.freeze)}</a></li>))
  pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
    tags << 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'.freeze)}</a></li>) # page gap
            end
  end
  tags << (pagy.next ? %(<li class="page-item next">#{link.call pagy.next, pagy_t('pagy.nav.next'.freeze), 'aria-label="next"'.freeze}</li>)
                     : %(<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next'.freeze)}</a></li>))
  %(<nav class="pagy-nav-boostrap pagination" role="navigation" aria-label="pager"><ul class="pagination">#{tags}</ul></nav>)
end

#pagy_nav_bootstrap_compact(pagy, id = caller(1,1)[0].hash) ⇒ Object

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 PagyCompact javascript to navigate



29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
# File 'lib/pagy-extras/compact.rb', line 29

def pagy_nav_bootstrap_compact(pagy, id=caller(1,1)[0].hash)
  tags = ''; link = pagy_link_proc(pagy, 'class="btn btn-primary"')

  tags << %(<nav id="pagy-nav-#{id}" class="pagy-nav-bootstrap-compact pagination" role="navigation" aria-label="pager">)

    tags << link.call(MARKER, '', %(style="display: none;" ))

    tags << %(<div class="btn-group" role="group">)
    tags << (pagy.prev ? link.call(pagy.prev, pagy_t('pagy.nav.prev'.freeze), 'aria-label="previous"'.freeze)
                       : %(<a class="btn btn-primary disabled" href="#">#{pagy_t('pagy.nav.prev'.freeze)}</a>))

    input = %(<input type="number" min="1" max="#{pagy.last}" value="#{pagy.page}" style="padding: 0; border: none; text-align: center; width: #{pagy.pages.to_s.length+1}rem;">)
    tags << %(<button type="button" class="pagy-compact-input btn btn-primary disabled">#{pagy_t('pagy.compact.page'.freeze)} #{input} #{pagy_t('pagy.compact.of'.freeze)} #{pagy.pages}</button>)

    tags << (pagy.next ? link.call(pagy.next, pagy_t('pagy.nav.next'.freeze), 'aria-label="next"'.freeze)
                       : %(<a class="btn btn-primary disabled" href="#">#{pagy_t('pagy.nav.next'.freeze)}</a>))

  tags << %(</div></nav><script>PagyCompact('#{id}', '#{MARKER}', '#{pagy.page}');</script>)
end

#pagy_nav_bootstrap_responsive(pagy, id = caller(1,1)[0].hash) ⇒ Object

Responsive pagination for bootstrap: it returns the html with the series of links to the pages we build the tags as a json object string and render them with the PagyResponsive javascript



55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
# File 'lib/pagy-extras/responsive.rb', line 55

def pagy_nav_bootstrap_responsive(pagy, id=caller(1,1)[0].hash)
  tags = '{'; link = pagy_link_proc(pagy, 'class="page-link"'.freeze); responsive = pagy.responsive

  tags << (pagy.prev ? %('prev':'<li class="page-item prev">#{link.call pagy.prev, pagy_t('pagy.nav.prev'.freeze), 'aria-label="previous"'.freeze}</li>',)
                     : %('prev':'<li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev'.freeze)}</a></li>',))
  responsive[:items].each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
    tags << if    item.is_a?(Integer); %('#{item}':'<li class="page-item">#{link.call item}</li>',)                                                               # page link
            elsif item.is_a?(String) ; %('#{item}':'<li class="page-item active">#{link.call item}</li>',)                                                        # active page
            elsif item == :gap       ; %('#{item}':'<li class="page-item gap disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.gap'.freeze)}</a></li>',) # page gap
            end
  end
  tags << (pagy.next ? %('next':'<li class="page-item next">#{link.call pagy.next, pagy_t('pagy.nav.next'.freeze), 'aria-label="next"'.freeze}</li>'})
                     : %('next':'<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next'.freeze)}</a></li>'}))
  script = %(<script>PagyResponsive('#{id}', #{tags}, #{responsive[:widths].to_json}, #{responsive[:series].to_json});</script>)
  %(<nav id="pagy-nav-#{id}" class="pagy-nav-bootstrap-responsive pagination" role="navigation" aria-label="pager"><ul class="pagination"></ul></nav>#{script})
end

#pagy_nav_compact(pagy, id = caller(1,1)[0].hash) ⇒ Object

Generic compact pagination: it returns the html with the series of links to the pages we use a numeric input tag to set the page and the PagyCompact javascript to navigate



9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
# File 'lib/pagy-extras/compact.rb', line 9

def pagy_nav_compact(pagy, id=caller(1,1)[0].hash)
  tags = ''; link = pagy_link_proc(pagy)

  tags << %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact pagination" role="navigation" aria-label="pager">)

    tags << link.call(MARKER, '', %(style="display: none;" ))
    tags << (pagy.prev ? %(<span class="page prev">#{link.call pagy.prev, pagy_t('pagy.nav.prev'.freeze), 'aria-label="previous"'.freeze}</span> )
                       : %(<span class="page prev disabled">#{pagy_t('pagy.nav.prev'.freeze)}</span> ))

    input = %(<input type="number" min="1" max="#{pagy.last}" value="#{pagy.page}" style="padding: 0; text-align: center; width: #{pagy.pages.to_s.length+1}rem;">)
    tags << %(<span class="pagy-compact-input" style="margin: 0 0.6rem;">#{pagy_t('pagy.compact.page'.freeze)} #{input} #{pagy_t('pagy.compact.of'.freeze)} #{pagy.pages}</span> )

    tags << (pagy.next ? %(<span class="page next">#{link.call pagy.next, pagy_t('pagy.nav.next'.freeze), 'aria-label="next"'.freeze}</span>)
                       : %(<span class="page next disabled">#{pagy_t('pagy.nav.next'.freeze)}</span>))

  tags << %(</nav><script>PagyCompact('#{id}', '#{MARKER}', '#{pagy.page}');</script>)
end

#pagy_nav_responsive(pagy, id = caller(1,1)[0].hash) ⇒ Object

Generic responsive pagination: it returns the html with the series of links to the pages we build the tags as a json object string and render them with the PagyResponsive javascript



35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
# File 'lib/pagy-extras/responsive.rb', line 35

def pagy_nav_responsive(pagy, id=caller(1,1)[0].hash)
  tags = '{'; link = pagy_link_proc(pagy); responsive = pagy.responsive

  tags << (pagy.prev ? %('prev':'<span class="page prev">#{link.call pagy.prev, pagy_t('pagy.nav.prev'.freeze), 'aria-label="previous"'.freeze}</span> ',)
                     : %('prev':'<span class="page prev disabled">#{pagy_t('pagy.nav.prev'.freeze)}</span> ',))
  responsive[:items].each do |item|  # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
    tags << if    item.is_a?(Integer); %('#{item}':'<span class="page">#{link.call item}</span> ',)                    # page link
            elsif item.is_a?(String) ; %('#{item}':'<span class="page active">#{item}</span> ',)                       # current page
            elsif item == :gap       ; %('#{item}':'<span class="page gap">#{pagy_t('pagy.nav.gap'.freeze)}</span> ',) # page gap
            end
  end
  tags << (pagy.next ? %('next':'<span class="page next">#{link.call pagy.next, pagy_t('pagy.nav.next'.freeze), 'aria-label="next"'.freeze}</span>'})
                     : %('next':'<span class="page next disabled">#{pagy_t('pagy.nav.next'.freeze)}</span>'}))
  script = %(<script>PagyResponsive('#{id}', #{tags}, #{responsive[:widths].to_json}, #{responsive[:series].to_json});</script>)
  %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive pagination" role="navigation" aria-label="pager"></nav>#{script})
end