pagy 0.9.2 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d25549587b5ffb4311920d5a1f52f1e181e2c0b062c27936fe85cf453c4d3361
-  data.tar.gz: 912cc77296b4e6ba9db0feef70c92580ceaaa8bc2b4794d7a5d3e2bd7700c0d4
+  metadata.gz: f42ebff94cf9faa8dadd414d3fd056bcf57da0a2e4930f1a9850d64eca08adf4
+  data.tar.gz: 60133804f52c4c687647d2c8b48f2b7344a558fa163063857f24bc0387d41834
 SHA512:
-  metadata.gz: c76ee653cc0693cb646b9ed4bbc552e2c91541c3860120322b1105e7197b311b2d3c052f760bda7af2483c5f7f964aeca0b0b84512969b3fb6dab94b54ecdd24
-  data.tar.gz: 0126c853a4edd59214f791c1ada7c26661b90bc098fd6c252f89b70354b8db59a09162494ccb9df6243dceb88e721d5c4ab02a3110607ee613e1a27dfe619fe4
+  metadata.gz: b6dbcbc1041dceb8ff23832f687083e701d3eb187fabddd1051bf3672c1e93efbe4b680c534dd531d506c173f7766cba96473ac8bc5464da8db25206a9c9ee9b
+  data.tar.gz: 256e4e8eb88d53c71fe035804e6ad99af606f93fc673d7173150e4ac13e396c084eda16686d52c144ea3d5af7cca29797ddca5d0be21aac87406cc7654757171

data/lib/pagy.rb

@@ -3,7 +3,7 @@
 
 require 'pathname'
 
-class Pagy ; VERSION = '0.9.2'
+class Pagy ; VERSION = '0.10.0'
 
   class OutOfRangeError < StandardError; attr_reader :pagy; def initialize(pagy) @pagy = pagy end; end
 

data/lib/pagy/extras/compact.rb

@@ -11,18 +11,14 @@ class Pagy
       tags, 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> )
                         : %(<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>)
                         : %(<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>))
-
-      tags << %(</nav><script>PagyCompact('#{id}', '#{MARKER}', '#{p_page}');</script>)
+      tags << %(</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
@@ -31,20 +27,15 @@ class Pagy
       tags, 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"')
                         : %(<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"')
                         : %(<a class="next btn btn-primary disabled" href="#">#{pagy_t('pagy.nav.next')}</a>))
-
-      tags << %(</div></nav><script>PagyCompact('#{id}', '#{MARKER}', '#{p_page}');</script>)
+      tags << %(</div></nav><script type="application/json" class="pagy-compact">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
     end
 
   end

data/lib/pagy/extras/items.rb

@@ -33,12 +33,10 @@ class Pagy
       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>)
         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>PagyItems('#{id}', '#{MARKER}', #{pagy.from});</script>)
+      tags << %(</span><script type="application/json" class="pagy-items">["#{id}", "#{MARKER}", #{pagy.from}]</script>)
     end
 
   end

data/lib/pagy/extras/javascripts/pagy.js

@@ -0,0 +1,85 @@
+// See the Pagy documentation: https://ddnexus.github.io/pagy/extras
+
+function Pagy(){}
+
+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));
+
+              };
+
+
+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));
+
+             };
+
+Pagy.responsive = function(id, items, 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;
+                      }
+                    };
+
+                    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) {
+                  Pagy[name].apply(null, JSON.parse(json.innerHTML))
+                })
+              })
+            };

data/lib/pagy/extras/responsive.rb

@@ -34,38 +34,38 @@ class Pagy
     # 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
     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, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy), pagy.prev, pagy.next, pagy.responsive
 
-      tags << (p_prev ? %('prev':'<span class="page prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</span> ',)
-                      : %('prev':'<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 << 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')}</span> ',) # page gap
-                end
+        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 << (p_next ? %('next':'<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>'})
-                      : %('next':'<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>'}))
-      script = %(<script>PagyResponsive('#{id}', #{tags}, #{responsive[:widths].to_json}, #{responsive[:series].to_json});</script>)
+      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
     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
+      tags, link, p_prev, p_next, responsive = {}, pagy_link_proc(pagy, 'class="page-link"'), pagy.prev, pagy.next, pagy.responsive
 
-      tags << (p_prev ? %('prev':'<li class="page-item prev">#{link.call p_prev, pagy_t('pagy.nav.prev'), 'aria-label="previous"'}</li>',)
-                      : %('prev':'<li class="page-item prev disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.prev')}</a></li>',))
+      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>))
       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')}</a></li>',) # page gap
-                end
+        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 << (p_next ? %('next':'<li class="page-item next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>'})
-                      : %('next':'<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next')}</a></li>'}))
-      script = %(<script>PagyResponsive('#{id}', #{tags}, #{responsive[:widths].to_json}, #{responsive[:series].to_json});</script>)
+      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>))
+      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-bootstrap-responsive pagination" role="navigation" aria-label="pager"><ul class="pagination"></ul></nav>#{script})
     end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pagy
 version: !ruby/object:Gem::Version
-  version: 0.9.2
+  version: 0.10.0
 platform: ruby
 authors:
 - Domizio Demichelis
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-06-20 00:00:00.000000000 Z
+date: 2018-06-21 00:00:00.000000000 Z
 dependencies: []
 description: 'Agnostic pagination in plain ruby: it works with any framework, ORM
   and DB type, with all kinds of collections, even pre-paginated, scopes, Arrays,
@@ -30,9 +30,7 @@ files:
 - lib/pagy/extras/i18n.rb
 - lib/pagy/extras/initializer_example.rb
 - lib/pagy/extras/items.rb
-- lib/pagy/extras/javascripts/pagy-compact.js
-- lib/pagy/extras/javascripts/pagy-items.js
-- lib/pagy/extras/javascripts/pagy-responsive.js
+- lib/pagy/extras/javascripts/pagy.js
 - lib/pagy/extras/responsive.rb
 - lib/pagy/extras/templates/nav.html.erb
 - lib/pagy/extras/templates/nav.html.haml

data/lib/pagy/extras/javascripts/pagy-compact.js

@@ -1,23 +0,0 @@
-// See the Pagy documentation: https://ddnexus.github.io/pagy/extras/compact
-
-function PagyCompact(id, marker, page){
-  var pagyNav = document.getElementById('pagy-nav-'+id),
-      input   = pagyNav.getElementsByTagName('input')[0],
-      link    = pagyNav.getElementsByTagName('a')[0];
-
-  this.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() });
-  // jump to page number from input when the input looses focus
-  input.addEventListener('focusout', this.go);
-  // … and when pressing enter inside the input
-  input.addEventListener('keyup', function(e){ if (e.which === 13) this.go() }.bind(this));
-
-}

data/lib/pagy/extras/javascripts/pagy-items.js

@@ -1,26 +0,0 @@
-// See the Pagy documentation: https://ddnexus.github.io/pagy/extras/items
-
-function PagyItems(id, marker, from){
-  var pagyNav = document.getElementById('pagy-items-'+id),
-      input   = pagyNav.getElementsByTagName('input')[0],
-      current = input.value,
-      link    = pagyNav.getElementsByTagName('a')[0];
-
-  this.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() });
-  // jump to page number from input when the input looses focus
-  input.addEventListener('focusout', this.go);
-  // … and when pressing enter inside the input
-  input.addEventListener('keyup', function(e){ if (e.which === 13) this.go() }.bind(this));
-
-}

data/lib/pagy/extras/javascripts/pagy-responsive.js

@@ -1,26 +0,0 @@
-// See the Pagy documentation: https://ddnexus.github.io/pagy/extras/resposive
-
-function PagyResponsive(id, items, widths, series){
-  var pagyNav    = document.getElementById('pagy-nav-'+id),
-      pagyBox    = pagyNav.firstChild || pagyNav,
-      pagyParent = pagyNav.parentElement,
-      lastWidth  = undefined;
-
-  this.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;
-                  }
-                };
-
-  if (window.attachEvent) { window.attachEvent('onresize', this.render) }
-  else if (window.addEventListener) { window.addEventListener('resize', this.render, true) }
-
-  this.render();
-};