🛠 enabled checkLastPage: 'string'

🛠 don't checkLastPage if not document
🛠 checkLastPage after append

Author: desandro

README.md

@@ -77,6 +77,8 @@ var infScroll = new InfiniteScroll( '.container', {
 
   checkLastPage: true,
   // Checks if page has path selector element
+  // Set to string if path is not set as selector string:
+  //   checkLastPage: '.pagination__next'
 
   prefill: false,
   // Loads and appends pages on intialization until scroll requirement is met.

js/page-load.js

@@ -94,6 +94,7 @@ proto.appendNextPage = function( response, path ) {
     this.appendItems( items, fragment );
     this.isLoading = false;
     this.dispatchEvent( 'append', null, [ response, path, items ] );
+    this.checkLastPage( response, path );
   }.bind( this );
 
   // TODO add hook for option to trigger appendReady
@@ -102,8 +103,6 @@ proto.appendNextPage = function( response, path ) {
   } else {
     appendReady();
   }
-
-  this.checkLastPage( response, path );
 };
 
 proto.appendItems = function( items, fragment ) {
@@ -166,26 +165,35 @@ proto.onAppendOutlayer = function( response, path, items ) {
   this.options.outlayer.appended( items );
 };
 
-// -----  ----- //
+// ----- checkLastPage ----- //
 
-// check response for next element, set with path selector
+// check response for next element
 proto.checkLastPage = function( response, path ) {
-  // only works if path is selector
-  var cannotCheck = !this.options.checkLastPage ||
-    !this.isPathSelector;
-  if ( cannotCheck ) {
+  var checkLastPage = this.options.checkLastPage;
+  // get selector from checkLastPage or path option
+  var selector;
+  if ( typeof checkLastPage == 'string' ) {
+    selector = checkLastPage;
+  } else if ( this.isPathSelector ) {
+    selector = this.options.path;
+  }
+  // bail if checkLastPage disabled or no selector or not document response
+  if ( !checkLastPage || !selector || !response.querySelector ) {
     return;
   }
-  var pathElem = response.querySelector( this.options.path );
-  if ( pathElem ) {
-    // page has next element, keep going
+  // check if response has selector
+  var nextElem = response.querySelector( selector );
+  if ( nextElem ) {
+    // page has selector element, keep going
     return;
   }
   // no next selector, last page hit
   this.canLoad = false;
   this.dispatchEvent( 'last', null, [ response, path ] );
 };
 
+// ----- error ----- //
+
 proto.onPageError = function( error, path ) {
   this.isLoading = false;
   this.canLoad = false;

test/index.html

@@ -31,6 +31,7 @@
   <script src="unit/path.js"></script>
   <script src="unit/page-load.js"></script>
   <script src="unit/page-load-error.js"></script>
+  <script src="unit/check-last-page.js"></script>
   <script src="unit/prefill-window.js"></script>
   <script src="unit/prefill-element.js"></script>
   <script src="unit/scroll-watch-window.js"></script>
@@ -65,6 +66,12 @@ <h2>page load error</h2>
       <div class="post">page 1, post 1</div>
     </div>
 
+    <h2>check last page</h2>
+    <div class="demo demo--check-last-page">
+      <div class="post">page 1, post 1</div>
+    </div>
+    <p><a class="check-last-page-next-link" href="page/2.html">Next</a></p>
+
     <h2>prefill, window</h2>
     <div class="demo demo--prefill-window demo--big-posts">
     </div>

test/page/2.html

@@ -15,7 +15,7 @@ <h1>test page 2</h1>
 
 <div class="post">page 2, post 2</div>
 
-<a class="page-load-next-link" href="3.html">Page 3</a>
+<a class="page-load-next-link check-last-page-next-link" href="3.html">Page 3</a>
 
 </body>
 </html>

test/unit/check-last-page.js

@@ -0,0 +1,75 @@
+QUnit.test( 'checkLastPage', function( assert ) {
+
+  var done = assert.async();
+
+  // ----- checkLastPage: true ----- //
+
+  var infScroll = new InfiniteScroll( '.demo--check-last-page', {
+    path: '.check-last-page-next-link',
+    append: '.post',
+    scrollThreshold: false,
+    history: false,
+  });
+
+  infScroll.on( 'last', onTrueLast1 );
+  infScroll.once( 'append', onTrueAppend1 );
+
+  function onTrueLast1() {
+    assert.ok( false, 'last should not trigger on 2nd page' );
+  }
+
+  function onTrueAppend1() {
+    infScroll.off( 'last', onTrueLast1 );
+    loadTruePage3();
+  }
+
+  infScroll.loadNextPage();
+
+  function loadTruePage3() {
+    infScroll.once( 'last', function() {
+      assert.ok( true, 'checkLastPage: true, last triggered on 3rd page' );
+      checkString();
+    });
+
+    infScroll.loadNextPage();
+  }
+
+  // ----- checkLastPage: 'string' ----- //
+
+  function checkString() {
+    // reset
+    infScroll.destroy();
+    infScroll = new InfiniteScroll( '.demo--check-last-page', {
+      path: 'page/{{#}}.html',
+      checkLastPage: '.next-page-link',
+      append: '.post',
+      scrollThreshold: false,
+      history: false,
+    });
+    
+    infScroll.on( 'last', onStringLast1 );
+    infScroll.once( 'append', onStringAppend1 );
+    infScroll.loadNextPage();
+  }
+
+  function onStringLast1() {
+    assert.ok( false, 'last should not trigger on 2nd page' );
+  }
+
+  function onStringAppend1() {
+    infScroll.off( 'last', onStringLast1 );
+    loadStringPage3();
+  }
+
+  infScroll.loadNextPage();
+
+  function loadStringPage3() {
+    infScroll.once( 'last', function() {
+      assert.ok( true, 'checkLastPage: \'string\', last triggered on 3rd page' );
+      done();
+    });
+
+    infScroll.loadNextPage();
+  }
+
+});