Merge pull request #685 from fieg/improve-paging

Made paging independent from the appended event

Author: fieg

.github/dependabot.yml

@@ -5,16 +5,7 @@ updates:
   schedule:
     interval: daily
     time: "04:00"
-  open-pull-requests-limit: 2
-  ignore:
-  - dependency-name: cypress
-    versions:
-    - 7.0.0
-    - 7.0.1
-  - dependency-name: rollup
-    versions:
-    - 2.38.2
-    - 2.38.4
+  open-pull-requests-limit: 4
 - package-ecosystem: npm
   directory: "/examples/articles"
   schedule:
@@ -27,9 +18,33 @@ updates:
     interval: daily
     time: "04:00"
   open-pull-requests-limit: 2
+- package-ecosystem: npm
+  directory: "/examples/button"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 2
+- package-ecosystem: npm
+  directory: "/examples/json"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 2
 - package-ecosystem: npm
   directory: "/examples/masonry"
   schedule:
     interval: daily
     time: "04:00"
   open-pull-requests-limit: 2
+- package-ecosystem: npm
+  directory: "/examples/overflow"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 2
+- package-ecosystem: npm
+  directory: "/examples/vuejs"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 2

docs/events.md

@@ -70,9 +70,22 @@ Triggered right after the `hit` event. Indicating that the next page will be loa
 | property | type | description |
 | :--- | :--- | :--- |
 | pageIndex | int | The page index of the next page (the page that is about to be loaded) |
+| promise | Promise | A Promise that is resolved when the next operation finishes |
 
 > pageIndex is zero indexed. This means the index starts at 0 on the first page.
 
+For example to notify the user about loading the next page, you can do:
+
+```js
+ias.on('next', function(event) {
+  alert(`Page ${event.pageIndex+1} is loading...`);
+
+  event.promise.then(function() {
+    alert(`Page ${event.pageIndex+1} is loaded and added to the page.`);
+  });
+});
+```
+
 ### load
 
 This event is triggered before the next page is requested from the server.

src/infinite-ajax-scroll.js

@@ -142,15 +142,11 @@ export default class InfiniteAjaxScroll {
 
     this.pause();
 
-    let event = {
-      pageIndex: this.pageIndex + 1,
-    };
+    const pageIndex = this.pageIndex + 1;
 
-    this.emitter.emit(Events.NEXT, event);
-
-    return Promise.resolve(this.nextHandler(event.pageIndex))
+    const promise = Promise.resolve(this.nextHandler(pageIndex))
         .then((hasNextUrl) => {
-          this.pageIndex = event.pageIndex;
+          this.pageIndex = pageIndex;
 
           if (!hasNextUrl) {
             this.emitter.emit(Events.LAST);
@@ -161,6 +157,15 @@ export default class InfiniteAjaxScroll {
           this.resume();
         })
     ;
+
+    const event = {
+      pageIndex: this.pageIndex + 1,
+      promise
+    };
+
+    this.emitter.emit(Events.NEXT, event);
+
+    return promise;
   }
 
   /**

src/paging.js

@@ -49,7 +49,6 @@ export default class Paging {
     let url = document.location.toString();
     let title = document.title;
 
-    // @todo can be moved inside appended when eventStack is implemented
     let loaded = (event) => {
       url = event.url;
 
@@ -60,7 +59,7 @@ export default class Paging {
 
     this.ias.once(Events.LOADED, loaded);
 
-    this.ias.once(Events.APPENDED, () => {
+    nextEvent.promise.then(() => {
       this.pageBreaks.push({
         pageIndex: nextEvent.pageIndex,
         url,
@@ -70,7 +69,6 @@ export default class Paging {
 
       this.update();
 
-      // @todo can be removed when eventStack is implemented
       this.ias.off(Events.LOADED, loaded);
     });
   }