internal consistency renaming of local/test variables; minor fixes an…

…d improvements

docs/extras/responsive.md

@@ -38,7 +38,7 @@ This extra is composed of the [responsive.rb](https://github.com/ddnexus/pagy/bl
 
 ### :breakpoints
 
-The `:breakpoint` variable is a non-core variable added by the `responsive` extra: it allows you to control how the page links will get shown at different widths. It is a hash where the keys are integers representing the breakpoint widths in pixels and the values are the Pagy `:size` variables to be applied for that width.
+The `:breakpoints` variable is a non-core variable added by the `responsive` extra: it allows you to control how the page links will get shown at different widths. It is a hash where the keys are integers representing the breakpoint widths in pixels and the values are the Pagy `:size` variables to be applied for that width.
  For example:
 
 ```ruby

lib/pagy/extras/bootstrap.rb

@@ -7,21 +7,20 @@ module Frontend
 
     # Pagination for bootstrap: it returns the html with the series of links to the pages
     def pagy_nav_bootstrap(pagy)
-      tags, link, p_prev, p_next = +'', pagy_link_proc(pagy, 'class="page-link"'), pagy.prev, pagy.next
+      html, link, p_prev, p_next = +'', pagy_link_proc(pagy, 'class="page-link"'), pagy.prev, pagy.next
 
-      tags << (p_prev ? %(<li class="page-item prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>)
+      html << (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>))
       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
+        html << 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 << (p_next ? %(<li class="page-item next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>)
+      html << (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>))
-      %(<nav class="pagy-nav-boostrap pagination" role="navigation" aria-label="pager"><ul class="pagination">#{tags}</ul></nav>)
+      %(<nav class="pagy-nav-boostrap pagination" role="navigation" aria-label="pager"><ul class="pagination">#{html}</ul></nav>)
     end
 
   end
 end
-

lib/pagy/extras/compact.rb

@@ -6,38 +6,37 @@ class Pagy
   module Frontend
 
     # 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
+    # we use a numeric input tag to set the page and the Pagy.compact javascript to navigate
     def pagy_nav_compact(pagy, id=caller(1,1)[0].hash)
-      tags, link, p_prev, p_next, p_page, p_pages = +'', pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
+      html, link, p_prev, p_next, p_page, p_pages = +'', pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      tags << %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact pagination" role="navigation" aria-label="pager">)
-        tags << link.call(MARKER, '', %(style="display: none;" ))
-        tags << (p_prev ? %(<span class="page prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</span> )
+      html << %(<nav id="pagy-nav-#{id}" class="pagy-nav-compact pagination" role="navigation" aria-label="pager">)
+        html << link.call(MARKER, '', %(style="display: none;" ))
+        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;">)
-        tags << %(<span class="pagy-compact-input" style="margin: 0 0.6rem;">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{p_pages}</span> )
-        tags << (p_next ? %(<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>)
+        html << %(<span class="pagy-compact-input" style="margin: 0 0.6rem;">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{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>))
-      tags << %(</nav><script type="application/json" class="pagy-compact">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
+      html << %(</nav><script type="application/json" class="pagy-compact">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
     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 PagyCompact javascript to navigate
+    # we use a numeric input tag to set the page and the Pagy.compact javascript to navigate
     def pagy_nav_bootstrap_compact(pagy, id=caller(1,1)[0].hash)
-      tags, link, p_prev, p_next, p_page, p_pages = +'', pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
+      html, link, p_prev, p_next, p_page, p_pages = +'', pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.page, pagy.pages
 
-      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 << (p_prev ? link.call(p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous" class="prev btn btn-primary"')
+      html << %(<nav id="pagy-nav-#{id}" class="pagy-nav-bootstrap-compact pagination" role="navigation" aria-label="pager">)
+        html << link.call(MARKER, '', %(style="display: none;" ))
+        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}" style="padding: 0; border: none; text-align: center; width: #{p_pages.to_s.length+1}rem;">)
-        tags << %(<div class="pagy-compact-input btn btn-primary disabled">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{p_pages}</div>)
-        tags << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'aria-label="next" class="next btn btn-primary"')
+        html << %(<div class="pagy-compact-input btn btn-primary disabled">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{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>))
-      tags << %(</div></nav><script type="application/json" class="pagy-compact">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
+      html << %(</div></nav><script type="application/json" class="pagy-compact">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
     end
 
   end
 end
-

lib/pagy/extras/i18n.rb

@@ -13,4 +13,3 @@ def pagy_t(*args)
 
   end
 end
-

lib/pagy/extras/items.rb

@@ -22,21 +22,21 @@ def pagy_get_vars(collection, vars)
 
   module Frontend
 
-    # this works with all Rack-based frameworks (Sinatra, Padrino, Rails, ...)
+    # This works with all Rack-based frameworks (Sinatra, Padrino, Rails, ...)
     def pagy_url_for(page, pagy)
       p_vars = pagy.vars; params = request.GET.merge(p_vars[:page_param] => page, p_vars[:items_param] => p_vars[:items], **p_vars[:params])
       "#{request.path}?#{Rack::Utils.build_nested_query(pagy_get_params(params))}#{p_vars[:anchor]}"
     end
 
-    # return the items selector HTML. For example "Show [20] items per page"
+    # Return the items selector HTML. For example "Show [20] items per page"
     def pagy_items_selector(pagy, id=caller(1,1)[0].hash)
       pagy = pagy.clone; p_vars = pagy.vars; p_items = p_vars[:items]; p_vars[:items] = "#{MARKER}-items-"
 
-      tags = +%(<span id="pagy-items-#{id}">)
-        tags << %(<a href="#{pagy_url_for("#{MARKER}-page-", pagy)}"></a>)
+      html = +%(<span id="pagy-items-#{id}">)
+        html << %(<a href="#{pagy_url_for("#{MARKER}-page-", pagy)}"></a>)
         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;">)
-        tags << %(#{pagy_t('pagy.items.show')} #{input} #{pagy_t('pagy.items.items')})
-      tags << %(</span><script type="application/json" class="pagy-items">["#{id}", "#{MARKER}", #{pagy.from}]</script>)
+        html << %(#{pagy_t('pagy.items.show')} #{input} #{pagy_t('pagy.items.items')})
+      html << %(</span><script type="application/json" class="pagy-items">["#{id}", "#{MARKER}", #{pagy.from}]</script>)
     end
 
   end

lib/pagy/extras/javascripts/pagy.js

@@ -1,81 +1,69 @@
-// See the Pagy documentation: https://ddnexus.github.io/pagy/extras
+// See the Pagy documentation: https://ddnexus.github.io/pagy/extras#javascript
 
 function Pagy(){}
 
+Pagy.addInputEventListeners = function(input, handler){
+                                // select the content on click: easier for typing a number
+                                input.addEventListener('click', function(){ this.select() });
+                                // go when the input looses focus
+                                input.addEventListener('focusout', handler);
+                                // … and when pressing enter inside the input
+                                input.addEventListener('keyup', function(e){ if (e.which === 13) handler() }.bind(this));
+                              };
+
 Pagy.compact = function(id, marker, page){
                  var pagyNav = document.getElementById('pagy-nav-'+id),
                      input   = pagyNav.getElementsByTagName('input')[0],
-                     link    = pagyNav.getElementsByTagName('a')[0];
-
-                 var go = function(){
-                   if (page !== input.value) {
-                     var href = link.getAttribute('href').replace(marker, input.value);
-                     link.setAttribute('href', href);
-                     link.click();
-                   }
-                 };
-
-                // select the content on click: easier for typing a number
-                input.addEventListener('click', function(){ this.select() });
-                // go when the input looses focus
-                input.addEventListener('focusout', go);
-                // … and when pressing enter inside the input
-                input.addEventListener('keyup', function(e){ if (e.which === 13) go() }.bind(this));
-
-              };
-
+                     link    = pagyNav.getElementsByTagName('a')[0],
+                     go      = function(){
+                                 if (page !== input.value) {
+                                   var href = link.getAttribute('href').replace(marker, input.value);
+                                   link.setAttribute('href', href);
+                                   link.click();
+                                 }
+                               };
+                 Pagy.addInputEventListeners(input, go);
+               };
 
 Pagy.items = function(id, marker, from){
                var pagyNav = document.getElementById('pagy-items-'+id),
                    input   = pagyNav.getElementsByTagName('input')[0],
                    current = input.value,
-                   link    = pagyNav.getElementsByTagName('a')[0];
-
-               var go = function(){
-                 var items = input.value;
-                 if (current !== items) {
-                   var page = Math.max(Math.ceil(from / items),1);
-                   var href = link.getAttribute('href').replace(marker+'-page-', page).replace(marker+'-items-', items);
-                   link.setAttribute('href', href);
-                   link.click();
-                 }
-               };
-
-               // select the content on click: easier for typing a number
-               input.addEventListener('click', function(){ this.select() });
-               // go when the input looses focus
-               input.addEventListener('focusout', go);
-               // … and when pressing enter inside the input
-               input.addEventListener('keyup', function(e){ if (e.which === 13) go() }.bind(this));
-
+                   link    = pagyNav.getElementsByTagName('a')[0],
+                   go      = function(){
+                               var items = input.value;
+                               if (current !== items) {
+                                 var page = Math.max(Math.ceil(from / items),1);
+                                 var href = link.getAttribute('href').replace(marker+'-page-', page).replace(marker+'-items-', items);
+                                 link.setAttribute('href', href);
+                                 link.click();
+                               }
+                             };
+               Pagy.addInputEventListeners(input, go);
              };
 
-Pagy.responsive = function(id, items, widths, series){
+Pagy.responsive = function(id, tags, widths, series){
                     var pagyNav    = document.getElementById('pagy-nav-'+id),
                         pagyBox    = pagyNav.firstChild || pagyNav,
                         pagyParent = pagyNav.parentElement,
-                        lastWidth  = undefined;
-
-                    var 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 tags = items['prev'];
-                        series[width].forEach(function(item){tags += items[item]});
-                        tags += items['next'];
-                        pagyBox.insertAdjacentHTML('beforeend', tags);
-                        lastWidth = width;
-                      }
-                    };
-
+                        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'];
+                                         series[width].forEach(function(item){html += tags[item]});
+                                         html += tags['next'];
+                                         pagyBox.insertAdjacentHTML('beforeend', html);
+                                         lastWidth = width;
+                                       }
+                                     };
                     if (window.attachEvent) { window.attachEvent('onresize', render) }
                     else if (window.addEventListener) { window.addEventListener('resize', render, true) }
-
                     render();
                   };
 
-
 Pagy.init = function(){
               ['compact', 'items', 'responsive'].forEach(function(name){
                 Array.from(document.getElementsByClassName("pagy-"+name)).forEach(function(json) {

lib/pagy/extras/responsive.rb

@@ -22,7 +22,7 @@ class Pagy
   #       :widths is the desc-ordered array of widths (passed to the PagyResponsive javascript function)
   def responsive
     @responsive ||= {items: [], series: {}, widths:[]}.tap do |r|
-      @vars[:breakpoints].key?(0) || raise(ArgumentError, "expected :breakpoints to contain the 0 size; got #{@vars[:breakpoint].inspect}")
+      @vars[:breakpoints].key?(0) || raise(ArgumentError, "expected :breakpoints to contain the 0 size; got #{@vars[:breakpoints].inspect}")
       @vars[:breakpoints].each {|width, size| r[:items] |= r[:series][width] = series(size)}
       r[:widths] = r[:series].keys.sort!{|a,b| b <=> a}
     end
@@ -32,26 +32,26 @@ def responsive
   module Frontend
 
     # 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
+    # rendered by the Pagy.responsive javascript
     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['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> ))
       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['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>))
       script = %(<script type="application/json" class="pagy-responsive">["#{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
 
     # 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
+    # rendered by the Pagy.responsive javascript
     def pagy_nav_bootstrap_responsive(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