pagy.js responsive refactoring (#115):

- moved handling of window event listeners into the responsive function - added resize delay to Pagy.responsive
ddnexus · Jan 13, 2019 · cef823c · cef823c
1 parent a64a8bd
commit cef823c
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/lib/javascripts/pagy.js b/lib/javascripts/pagy.js
@@ -1,8 +1,9 @@
 // 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
@@ -49,30 +50,33 @@ Pagy.items = function(id, marker, from){
              };
 
 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);
@@ -87,6 +91,7 @@ Pagy.init = function(){
               })
             };
 
+// namespace for custom init functions
 function PagyInit(){}
 
 Pagy.applyInit = function(name, payload){ PagyInit[name].apply(null, [payload]) };