pagy.js in pagy-1.3

- old
+ new

@@ -1,10 +1,11 @@
 // See the Pagy documentation: https://ddnexus.github.io/pagy/extras#javascript
 
+// Pagy namespace
 function Pagy(){}
 
-Pagy.windowListeners = [];
+Pagy.windowListeners = {};
 
 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
@@ -47,37 +48,41 @@
                              };
                Pagy.addInputEventListeners(input, go);
              };
 
 Pagy.responsive = function(id, tags, widths, series){
-                    var pagyEl     = document.getElementById(id),
-                        pagyParent = pagyEl.parentElement,
-                        lastWidth  = undefined,
-                        render     = function(){
-                                       var parentWidth = parseInt(pagyParent.clientWidth),
-                                           width       = widths.find(function(w){return parentWidth > w});
-                                       if (width !== lastWidth) {
-                                         while (pagyEl.firstChild) { pagyEl.removeChild(pagyEl.firstChild) }
-                                         var html = tags['before'];
-                                         series[width].forEach(function(item){html += tags[item]});
-                                         html += tags['after'];
-                                         pagyEl.insertAdjacentHTML('beforeend', html);
-                                         lastWidth = width;
-                                       }
-                                     }.bind(this);
-                    window.addEventListener('resize', render, true);
-                    Pagy.windowListeners.push(render);
+                    var pagyEl    = document.getElementById(id),
+                        container = pagyEl.parentElement,
+                        lastWidth = undefined,
+                        resizeId  = 0,
+                        render    = function(){
+                                      var width = widths.find(function(w) {return container.clientWidth > w});
+                                      if (width !== lastWidth) {
+                                        while (pagyEl.firstChild) { pagyEl.removeChild(pagyEl.firstChild) }
+                                        var html = tags['before'];
+                                        series[width].forEach(function(item) {html += tags[item]});
+                                        html += tags['after'];
+                                        pagyEl.insertAdjacentHTML('beforeend', html);
+                                        lastWidth = width;
+                                      }
+                                    },
+                        resize    = function(){  // call render once, after window.resize is done
+                                      clearTimeout(resizeId);
+                                      resizeId = setTimeout(render, 300);
+                                    };
+                    // remove the previous window resize listener which may result in firing the render multiple times
+                    window.removeEventListener('resize', Pagy.windowListeners[id], true);
+                    window.addEventListener('resize', resize, true);
+                    Pagy.windowListeners[id] = resize;
                     render();
                   };
 
-Pagy.init = function(){
-              // we need to explicitly remove the window listeners  because turbolinks persists the window object
-              Pagy.windowListeners.forEach(function(l){window.removeEventListener('resize', l, true)});
-              Pagy.windowListeners = [];
-              var json = document.getElementsByClassName('pagy-json');
-              for (var i = 0, len = json.length; i < len; i++) {
-                var args = JSON.parse(json[i].innerHTML);
+Pagy.init = function(arg){
+              var target   = arg instanceof Event || arg === undefined ? document : arg,
+                  jsonTags = target.getElementsByClassName('pagy-json');
+              for (var i = 0, len = jsonTags.length; i < len; i++) {
+                var args = JSON.parse(jsonTags[i].innerHTML);
                 Pagy[args.shift()].apply(null, args);
               }
               // Support for legacy overridden helpers. It will be removed in 2.0
               ['compact', 'items', 'responsive'].forEach(function(name){
                 var json = document.getElementsByClassName("pagy-"+name+"-json");
@@ -85,8 +90,9 @@
                   Pagy[name].apply(null, JSON.parse(json[i].innerHTML))
                 }
               })
             };
 
+// namespace for custom init functions
 function PagyInit(){}
 
 Pagy.applyInit = function(name, payload){ PagyInit[name].apply(null, [payload]) };