added loadOnScroll option

Author: fieg

docs/methods.md

@@ -31,3 +31,10 @@ It will return a promise.
 | items | array | Array of element to append to the container |
 | parent | Element\|null | Container to append to. When none given it falls back to the configured container |
 
+## enableLoadOnScroll
+
+Enables the [`loadOnScroll`](options.md#loadOnScroll) setting on runtime.
+
+## disableLoadOnScroll
+
+Disables the [`loadOnScroll`](options.md#loadOnScroll) setting on runtime.

docs/options.md

@@ -162,3 +162,15 @@ logger: {
 }
 ```
 
+## loadOnScroll
+
+**Type:** `boolean`    
+**Default:** `true`    
+**Required:** no 
+
+Configures if the next/previous page should automatically be loaded when the users scrolls to the bottom or the top of the page.
+
+When `loadOnScroll` is disabled the [`hit`](events.md#hit) event is still emitted, allowing you to manually trigger the next/prev page (for example by calling [`next`](methods.md#next)).
+
+Use can use [`enableLoadOnScroll`](methods.md#enableLoadOnScroll) and [`disableLoadOnScroll`](methods.md#disableLoadOnScroll) to configure this setting on runtime. 
+

src/defaults.js

@@ -6,5 +6,6 @@ export default {
   bind: true,
   scrollContainer: window,
   spinner: false,
-  logger: true
+  logger: true,
+  loadOnScroll: true
 };

src/infinite-ajax-scroll.js

@@ -38,10 +38,19 @@ export default class InfiniteAjaxScroll {
 
     this.binded = false;
     this.paused = false;
+    this.loadOnScroll = this.options.loadOnScroll;
     this.pageIndex = this.sentinel() ? 0 : -1;
+    this.lastDistance = null;
 
-    this.on('hit', this.next);
+    this.on('hit', () => {
+      if (!this.loadOnScroll) {
+        return;
+      }
 
+      this.next();
+    });
+
+    // initialize extensions
     this.pagination = new Pagination(this, this.options.pagination);
     this.spinner = new Spinner(this, this.options.spinner);
     this.logger = new Logger(this, this.options.logger);
@@ -51,7 +60,7 @@ export default class InfiniteAjaxScroll {
     this.on('binded', this.measure);
 
     if (this.options.bind) {
-      // @todo on document.ready?
+      // @todo on document.ready? (window.addEventListener('DOMContentLoaded'))
       this.bind();
     }
   }
@@ -96,13 +105,14 @@ export default class InfiniteAjaxScroll {
 
     Promise.resolve(this.nextHandler(event.pageIndex))
         .then((result) => {
+          this.pageIndex = event.pageIndex;
+
           if (!result) {
             this.emitter.emit('last');
 
             return;
           }
 
-          this.pageIndex = event.pageIndex;
           this.resume();
         })
     ;
@@ -203,6 +213,14 @@ export default class InfiniteAjaxScroll {
     this.measure();
   }
 
+  enableLoadOnScroll() {
+    this.loadOnScroll = true;
+  }
+
+  disableLoadOnScroll() {
+    this.loadOnScroll = false;
+  }
+
   measure() {
     if (this.paused) {
       return;
@@ -216,9 +234,11 @@ export default class InfiniteAjaxScroll {
       distance = getDistanceToFold(sentinel, this.scrollContainer);
     }
 
-    if (distance <= 0) {
+    if (distance <= 0 && (this.lastDistance === null || this.lastDistance > 0)) {
       this.emitter.emit('hit', {distance});
     }
+
+    this.lastDistance = distance;
   }
 
   on(event, callback) {

src/paging.js

@@ -50,9 +50,11 @@ export default class Paging {
 
     // @todo can be moved inside appended when eventStack is implemented
     let loaded = (event) => {
-      // @todo event.xhr.response.title only works in case of responseType = "document"
       url = event.url;
-      title = event.xhr.response.title
+
+      if (event.xhr.response) {
+        title = event.xhr.response.title
+      }
     };
 
     this.ias.once('loaded', loaded);

src/spinner.js

@@ -33,7 +33,9 @@ export default class Spinner {
     this.ias = ias;
     this.options = extend({}, defaults, expand(options));
 
-    Assert.singleElement(this.options.element, 'spinner.element');
+    if (this.options.element !== undefined) {
+      Assert.singleElement(this.options.element, 'spinner.element');
+    }
 
     this.element = $(this.options.element)[0]; // @todo should we really cache this?
     this.hideFn = this.options.hide;

test/loadonscroll_spec.js

@@ -0,0 +1,116 @@
+let ias;
+
+describe('Load on scroll', () => {
+  beforeEach(() => {
+    // runs before each test in the block
+    cy.visit('http://localhost:8080/test/fixtures/default/page1.html')
+  });
+
+  it('should emit a next event when loadOnScroll enabled by default', () => {
+    const spy = {
+      next() {}
+    };
+
+    cy.spy(spy, 'next');
+
+    cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
+      ias = new InfiniteAjaxScroll('.blocks', {
+        item: '.blocks__block',
+      });
+
+      ias.on('next', spy.next);
+
+      cy.scrollTo('bottom', {duration: 300}).then(function() {
+        expect(spy.next).to.have.been.called;
+      });
+    });
+  });
+
+  it('should emit a next event when loadOnScroll explicitly enabled', () => {
+    const spy = {
+      next() {}
+    };
+
+    cy.spy(spy, 'next');
+
+    cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
+      ias = new InfiniteAjaxScroll('.blocks', {
+        item: '.blocks__block',
+        loadOnScroll: true
+      });
+
+      ias.on('next', spy.next);
+
+      cy.scrollTo('bottom', {duration: 300}).then(function() {
+        expect(spy.next).to.have.been.called;
+      });
+    });
+  });
+
+  it('should not emit a next event when loadOnScroll is disabled', () => {
+    const spy = {
+      next() {}
+    };
+
+    cy.spy(spy, 'next');
+
+    cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
+      ias = new InfiniteAjaxScroll('.blocks', {
+        item: '.blocks__block',
+        loadOnScroll: false
+      });
+
+      ias.on('next', spy.next);
+
+      cy.scrollTo('bottom', {duration: 300}).then(function() {
+        expect(spy.next).to.not.have.been.called;
+      });
+    });
+  });
+
+  it('can be enabled (enableLoadOnScroll)', () => {
+    const spy = {
+      next() {}
+    };
+
+    cy.spy(spy, 'next');
+
+    cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
+      ias = new InfiniteAjaxScroll('.blocks', {
+        item: '.blocks__block',
+        loadOnScroll: false
+      });
+
+      ias.enableLoadOnScroll();
+
+      ias.on('next', spy.next);
+
+      cy.scrollTo('bottom', {duration: 300}).then(function() {
+        expect(spy.next).to.have.been.called;
+      });
+    });
+  });
+
+  it('can be disabled (disableLoadOnScroll)', () => {
+    const spy = {
+      next() {}
+    };
+
+    cy.spy(spy, 'next');
+
+    cy.InfiniteAjaxScroll().then((InfiniteAjaxScroll) => {
+      ias = new InfiniteAjaxScroll('.blocks', {
+        item: '.blocks__block',
+        loadOnScroll: true
+      });
+
+      ias.disableLoadOnScroll();
+
+      ias.on('next', spy.next);
+
+      cy.scrollTo('bottom', {duration: 300}).then(function() {
+        expect(spy.next).to.not.have.been.called;
+      });
+    });
+  });
+});