Skip to content

Commit

Permalink
fix for "area" typos in bulma extra (#62) and consistency improvement…
Browse files Browse the repository at this point in the history 
… across responsive helpers
  • Loading branch information
@ddnexus
ddnexus committed Jul 8, 2018
1 parent 063d44c commit 8122e87
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 86 deletions.
18 changes: 4 additions & 14 deletions lib/pagy/extras/bulma.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,14 @@ def pagy_nav_bulma(pagy)
: %(<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 << pagy_nav_bulma_item(link, item)
html << if item.is_a?(Integer); %(<li>#{link.call item, item, %(class="pagination-link" aria-label="goto page #{item}") }</li>) # page link
elsif item.is_a?(String) ; %(<li>#{link.call item, item, %(class="pagination-link is-current" aria-label="page #{item}" aria-current="page")}</li>) # active page
elsif item == :gap ; %(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>) # page gap
end
end
html << '</ul>'
%(<nav class="pagy-nav-bulma pagination is-centered" role="navigation" aria-label="pagination">#{html}</nav>)
end

private

def pagy_nav_bulma_item(link, item)
if item.is_a?(Integer) # page link
aria = %( area-label="goto page #{item}")
%(<li>#{link.call item, item, 'class="pagination-link"' + aria}</li>)
elsif item.is_a?(String) # active page
aria = %( area-label="page #{item}" area-current="page")
%(<li>#{link.call item, item, 'class="pagination-link is-current"' + aria}</li>)
elsif item == :gap # page gap
%(<li><span class="pagination-ellipsis">#{pagy_t('pagy.nav.gap')}</span></li>)
end
end
end
end
9 changes: 4 additions & 5 deletions lib/pagy/extras/javascripts/pagy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,18 +46,17 @@ Pagy.items = function(id, marker, from){

Pagy.responsive = function(id, tags, widths, series){
var pagyNav = document.getElementById('pagy-nav-'+id),
pagyBox = pagyNav.firstChild || pagyNav,
pagyParent = pagyNav.parentElement,
lastWidth = undefined,
render = function(){
var parentWidth = parseInt(pagyParent.clientWidth),
width = widths.find(function(w){return parentWidth > w});
if (width !== lastWidth) {
while (pagyBox.firstChild) { pagyBox.removeChild(pagyBox.firstChild) }
var html = tags['prev'];
while (pagyNav.firstChild) { pagyNav.removeChild(pagyNav.firstChild) }
var html = tags['before'];
series[width].forEach(function(item){html += tags[item]});
html += tags['next'];
pagyBox.insertAdjacentHTML('beforeend', html);
html += tags['after'];
pagyNav.insertAdjacentHTML('beforeend', html);
lastWidth = width;
}
}.bind(this);
Expand Down
34 changes: 19 additions & 15 deletions lib/pagy/extras/responsive.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,16 @@ module Frontend
def pagy_nav_responsive(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['prev'] = (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> ))
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> ))
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); %(<span class="page">#{link.call item}</span> ) # page link
elsif item.is_a?(String) ; %(<span class="page active">#{item}</span> ) # current page
elsif item == :gap ; %(<span class="page gap">#{pagy_t('pagy.nav.gap')}</span> ) # page gap
end
end
tags['next'] = (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>))
tags['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>))
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 pagination" role="navigation" aria-label="pager"></nav>#{script})
end
Expand All @@ -55,35 +55,39 @@ def pagy_nav_responsive(pagy, id=caller(1,1)[0].hash)
def pagy_nav_responsive_bootstrap(pagy, id=caller(1,1)[0].hash)
tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy, 'class="page-link"'), pagy.prev, pagy.next, pagy.responsive

tags['prev'] = (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>))
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>))
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['next'] = (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'] = +(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 = %(<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-bootstrap pagination" role="navigation" aria-label="pager"><ul class="pagination"></ul></nav>#{script})
%(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive-bootstrap pagination" role="navigation" aria-label="pager"></nav>#{script})
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_nav_responsive_bulma(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['prev'] = (p_prev ? %(#{link.call(p_prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"')}<ul class="pagination-list">)
: %(<a class="pagination-previous" disabled>#{pagy_t('pagy.nav.prev')}</a><ul class="pagination-list">))
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>))
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" area-label="goto page '+item.to_s+'"'}</li>)
elsif item.is_a?(String) ; %(<li>#{link.call item, item, 'class="pagination-link is-current" area-current="page" area-label="page '+item.to_s+'"'}</li>)
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['next'] = (p_next ? %(</ul>#{link.call(p_next, pagy_t('pagy.nav.next'), 'class="pagination-next" aria-label="next page"')})
: %(</ul><a class="pagination-next" disabled>#{pagy_t('pagy.nav.next')}</a>))
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-bulma pagination is-centered" role="navigation" aria-label="pagination"></nav>#{script})
end
Expand Down
58 changes: 29 additions & 29 deletions test/pagy/extras/bulma_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@
'<a class="pagination-previous" disabled>&lsaquo;&nbsp;Prev</a>' \
'<a href="/foo?page=2" rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
'<ul class="pagination-list">' \
'<li><a href="/foo?page=1" class="pagination-link is-current" area-label="page 1" area-current="page">1</a></li>' \
'<li><a href="/foo?page=2" rel="next" class="pagination-link" area-label="goto page 2">2</a></li>' \
'<li><a href="/foo?page=3" class="pagination-link" area-label="goto page 3">3</a></li>' \
'<li><a href="/foo?page=4" class="pagination-link" area-label="goto page 4">4</a></li>' \
'<li><a href="/foo?page=5" class="pagination-link" area-label="goto page 5">5</a></li>' \
'<li><a href="/foo?page=6" class="pagination-link" area-label="goto page 6">6</a></li>' \
'<li><a href="/foo?page=1" class="pagination-link is-current" aria-label="page 1" aria-current="page">1</a></li>' \
'<li><a href="/foo?page=2" rel="next" class="pagination-link" aria-label="goto page 2">2</a></li>' \
'<li><a href="/foo?page=3" class="pagination-link" aria-label="goto page 3">3</a></li>' \
'<li><a href="/foo?page=4" class="pagination-link" aria-label="goto page 4">4</a></li>' \
'<li><a href="/foo?page=5" class="pagination-link" aria-label="goto page 5">5</a></li>' \
'<li><a href="/foo?page=6" class="pagination-link" aria-label="goto page 6">6</a></li>' \
'</ul>' \
'</nav>'
end
Expand All @@ -37,12 +37,12 @@
'<a href="/foo?page=2" rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
'<a href="/foo?page=4" rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
'<ul class="pagination-list">' \
'<li><a href="/foo?page=1" class="pagination-link" area-label="goto page 1">1</a></li>' \
'<li><a href="/foo?page=2" rel="prev" class="pagination-link" area-label="goto page 2">2</a></li>' \
'<li><a href="/foo?page=3" class="pagination-link is-current" area-label="page 3" area-current="page">3</a></li>' \
'<li><a href="/foo?page=4" rel="next" class="pagination-link" area-label="goto page 4">4</a></li>' \
'<li><a href="/foo?page=5" class="pagination-link" area-label="goto page 5">5</a></li>' \
'<li><a href="/foo?page=6" class="pagination-link" area-label="goto page 6">6</a></li>' \
'<li><a href="/foo?page=1" class="pagination-link" aria-label="goto page 1">1</a></li>' \
'<li><a href="/foo?page=2" rel="prev" class="pagination-link" aria-label="goto page 2">2</a></li>' \
'<li><a href="/foo?page=3" class="pagination-link is-current" aria-label="page 3" aria-current="page">3</a></li>' \
'<li><a href="/foo?page=4" rel="next" class="pagination-link" aria-label="goto page 4">4</a></li>' \
'<li><a href="/foo?page=5" class="pagination-link" aria-label="goto page 5">5</a></li>' \
'<li><a href="/foo?page=6" class="pagination-link" aria-label="goto page 6">6</a></li>' \
'</ul>' \
'</nav>'
end
Expand All @@ -55,12 +55,12 @@
'<a href="/foo?page=5" rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
'<a class="pagination-next" disabled>Next&nbsp;&rsaquo;</a>' \
'<ul class="pagination-list">' \
'<li><a href="/foo?page=1" class="pagination-link" area-label="goto page 1">1</a></li>' \
'<li><a href="/foo?page=2" class="pagination-link" area-label="goto page 2">2</a></li>' \
'<li><a href="/foo?page=3" class="pagination-link" area-label="goto page 3">3</a></li>' \
'<li><a href="/foo?page=4" class="pagination-link" area-label="goto page 4">4</a></li>' \
'<li><a href="/foo?page=5" rel="prev" class="pagination-link" area-label="goto page 5">5</a></li>' \
'<li><a href="/foo?page=6" class="pagination-link is-current" area-label="page 6" area-current="page">6</a></li>' \
'<li><a href="/foo?page=1" class="pagination-link" aria-label="goto page 1">1</a></li>' \
'<li><a href="/foo?page=2" class="pagination-link" aria-label="goto page 2">2</a></li>' \
'<li><a href="/foo?page=3" class="pagination-link" aria-label="goto page 3">3</a></li>' \
'<li><a href="/foo?page=4" class="pagination-link" aria-label="goto page 4">4</a></li>' \
'<li><a href="/foo?page=5" rel="prev" class="pagination-link" aria-label="goto page 5">5</a></li>' \
'<li><a href="/foo?page=6" class="pagination-link is-current" aria-label="page 6" aria-current="page">6</a></li>' \
'</ul>' \
'</nav>'
end
Expand All @@ -73,19 +73,19 @@
'<a href="/foo?page=9" rel="prev" class="pagination-previous" aria-label="previous page">&lsaquo;&nbsp;Prev</a>' \
'<a href="/foo?page=11" rel="next" class="pagination-next" aria-label="next page">Next&nbsp;&rsaquo;</a>' \
'<ul class="pagination-list">' \
'<li><a href="/foo?page=1" class="pagination-link" area-label="goto page 1">1</a></li>' \
'<li><a href="/foo?page=1" class="pagination-link" aria-label="goto page 1">1</a></li>' \
'<li><span class="pagination-ellipsis">&hellip;</span></li>' \
'<li><a href="/foo?page=6" class="pagination-link" area-label="goto page 6">6</a></li>' \
'<li><a href="/foo?page=7" class="pagination-link" area-label="goto page 7">7</a></li>' \
'<li><a href="/foo?page=8" class="pagination-link" area-label="goto page 8">8</a></li>' \
'<li><a href="/foo?page=9" rel="prev" class="pagination-link" area-label="goto page 9">9</a></li>' \
'<li><a href="/foo?page=10" class="pagination-link is-current" area-label="page 10" area-current="page">10</a></li>' \
'<li><a href="/foo?page=11" rel="next" class="pagination-link" area-label="goto page 11">11</a></li>' \
'<li><a href="/foo?page=12" class="pagination-link" area-label="goto page 12">12</a></li>' \
'<li><a href="/foo?page=13" class="pagination-link" area-label="goto page 13">13</a></li>' \
'<li><a href="/foo?page=14" class="pagination-link" area-label="goto page 14">14</a></li>' \
'<li><a href="/foo?page=6" class="pagination-link" aria-label="goto page 6">6</a></li>' \
'<li><a href="/foo?page=7" class="pagination-link" aria-label="goto page 7">7</a></li>' \
'<li><a href="/foo?page=8" class="pagination-link" aria-label="goto page 8">8</a></li>' \
'<li><a href="/foo?page=9" rel="prev" class="pagination-link" aria-label="goto page 9">9</a></li>' \
'<li><a href="/foo?page=10" class="pagination-link is-current" aria-label="page 10" aria-current="page">10</a></li>' \
'<li><a href="/foo?page=11" rel="next" class="pagination-link" aria-label="goto page 11">11</a></li>' \
'<li><a href="/foo?page=12" class="pagination-link" aria-label="goto page 12">12</a></li>' \
'<li><a href="/foo?page=13" class="pagination-link" aria-label="goto page 13">13</a></li>' \
'<li><a href="/foo?page=14" class="pagination-link" aria-label="goto page 14">14</a></li>' \
'<li><span class="pagination-ellipsis">&hellip;</span></li>' \
'<li><a href="/foo?page=50" class="pagination-link" area-label="goto page 50">50</a></li>' \
'<li><a href="/foo?page=50" class="pagination-link" aria-label="goto page 50">50</a></li>' \
'</ul>' \
'</nav>'
end
Expand Down
Loading

0 comments on commit 8122e87

Please sign in to comment.