better handling of resize listeners; added render funcition to the pa…

…gy element
ddnexus · Jul 5, 2019 · aff8cbb · aff8cbb
1 parent c699fe5
commit aff8cbb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/docs/extras/navs.md b/docs/extras/navs.md
@@ -101,6 +101,14 @@ Here is what you should consider/ensure:
 
 5. If the container width snaps to specific widths in discrete steps, you should sync the quantity and widths of the pagy `:steps` to the quantity and internal widths for each discrete step of the container.
 
+#### Javascript Caveats
+
+In case of a window resize, the `pagy_*nav_js` elements on the page are re-rendered (when the container width changes), however if the container width changes in any other way that does not involve a window resize, then you should re-render the pagy element explicitly. For example:
+
+```js
+document.getElementById('my-pagy-nav-js').render();
+```
+
 ## Methods
 
 ### pagy_nav_js(pagy, ...)

diff --git a/lib/javascripts/pagy.js b/lib/javascripts/pagy.js
@@ -5,6 +5,10 @@ function Pagy(){}
 Pagy.init = function(arg){
               var target   = arg instanceof Event || arg === undefined ? document : arg,
                   jsonTags = target.getElementsByClassName('pagy-json');
+              if (target === document) { // reset resize-listeners on page load (#163)
+                for (var id in Pagy.navResizeListeners) { window.removeEventListener('resize', Pagy.navResizeListeners[id], true) }
+                Pagy.navResizeListeners = {};
+              }
               for (var i = 0, len = jsonTags.length; i < len; i++) {
                 var args = JSON.parse(jsonTags[i].innerHTML);
                 Pagy[args.shift()].apply(null, args);
@@ -13,20 +17,20 @@ Pagy.init = function(arg){
 
 Pagy.nav = function(id, tags, sequels, param){
              var pagyEl    = document.getElementById(id),
-                 container = pagyEl.parentElement,
                  lastWidth = undefined,
                  timeoutId = 0,
                  pageREg   = new RegExp(/__pagy_page__/g),
-                 widths    = [];
+                 widths    = [],
+                 rendering = function(){ clearTimeout(timeoutId); timeoutId = setTimeout(pagyEl.render, 150) };  // suppress rapid firing rendering
+
              for (var width in sequels) { widths.push(parseInt(width)) } // fine with sequels structure
              widths.sort(function(a, b){return b-a});
 
-             var render    = function(){
-                               if (document.getElementById(id) === null){ return }
-                               if (container.clientWidth === 0) { rendering() }
+             pagyEl.render = function(){
+                               if (this.parentElement.clientWidth === 0) { rendering() }
                                var width, i, len;
                                for (i = 0, len = widths.length; i < len; i++) {
-                                 if (container.clientWidth > widths[i]) { width = widths[i]; break }
+                                 if (this.parentElement.clientWidth > widths[i]) { width = widths[i]; break }
                                }
                                if (width !== lastWidth) {
                                  var html   = tags.before,
@@ -39,21 +43,19 @@ Pagy.nav = function(id, tags, sequels, param){
                                    else if (typeof(item) === 'string') { html += tags.active.replace(pageREg, item) }
                                  }
                                  html += tags.after;
-                                 pagyEl.innerHTML = '';
-                                 pagyEl.insertAdjacentHTML('afterbegin', html);
+                                 this.innerHTML = '';
+                                 this.insertAdjacentHTML('afterbegin', html);
                                  lastWidth = width;
                                }
-                             },
-                 // suppress rapid firing rendering
-                 rendering = function(){ clearTimeout(timeoutId); timeoutId = setTimeout(render, 150) };
+                             }.bind(pagyEl);
 
              if (widths.length > 1) {
                // refresh the window resize listener (avoiding rendering multiple times)
-               window.removeEventListener('resize', Pagy.windowListeners[id], true);
+               window.removeEventListener('resize', Pagy.navResizeListeners[id], true);   // needed for AJAX init
                window.addEventListener('resize', rendering, true);
-               Pagy.windowListeners[id] = rendering;
+               Pagy.navResizeListeners[id] = rendering;
              }
-             render();
+             pagyEl.render();
            };
 
 Pagy.combo_nav = function(id, page, link, param){
@@ -87,8 +89,6 @@ Pagy.items_selector = function(id, from, link, param){
                         Pagy.addInputEventListeners(input, go);
                       };
 
-Pagy.windowListeners = {};
-
 Pagy.addInputEventListeners = function(input, handler){
                                 // select the content on click: easier for typing a number
                                 input.addEventListener('click', function(){ this.select() });