method request

.jshintrc

@@ -2,6 +2,7 @@
   "browser": true,
   "unused": true,
   "undef": true,
+  "esversion": 9,
   "globals": {
     "console": false
   }

dist/infinite-scroll.pkgd.js

@@ -999,6 +999,7 @@ var proto = InfiniteScroll.prototype;
 InfiniteScroll.defaults.loadOnScroll = true;
 InfiniteScroll.defaults.checkLastPage = true;
 InfiniteScroll.defaults.responseType = 'document';
+InfiniteScroll.defaults.method = 'GET';
 // InfiniteScroll.defaults.prefill = false;
 // InfiniteScroll.defaults.outlayer = null;
 
@@ -1037,7 +1038,7 @@ proto.loadNextPage = function() {
     this.lastPageReached( response, path );
   }.bind( this );
 
-  request( path, this.options.responseType, onLoad, onError, onLast );
+  request( path, this.options.responseType, onLoad, onError, onLast , this.options.method, this.options.params );
   this.dispatchEvent( 'request', null, [ path ] );
 };
 
@@ -1233,36 +1234,69 @@ proto.stopPrefill = function() {
   this.off( 'append', this.prefill );
 };
 
-// -------------------------- request -------------------------- //
-
-function request( url, responseType, onLoad, onError, onLast ) {
-  var req = new XMLHttpRequest();
-  req.open( 'GET', url, true );
-  // set responseType document to return DOM
-  req.responseType = responseType || '';
+proto.method = function () {
+  this.log('method');
+};
 
-  // set X-Requested-With header to check that is ajax request
-  req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+// -------------------------- request -------------------------- //
+function request( url, responseType, onLoad, onError, onLast, method, params ) {
+  if (typeof params === 'function') {
+    params = params();
+  }
 
-  req.onload = function() {
-    if ( req.status == 200 ) {
-      onLoad( req.response );
-    } else if ( req.status == 204 ) {
-      onLast( req.response );
-    } else {
-      // not 200 OK, error
-      var error = new Error( req.statusText );
-      onError( error );
+  if (typeof params === 'object') {
+      if (params instanceof HTMLFormElement) {
+        params = new FormData(params);
+      } else {
+        params = Object.keys(params).map(function(key) {
+          return key + '=' + params[key];
+        }).join('&');
+      }
+  }
+  // console.log(method);
+  fetch(url, {
+    method: method,
+    headers: { 'Content-type': 'application/x-www-form-urlencoded' },
+    credentials: 'include',
+    body: params
+  }).then(function(response) {
+    var responseData;
+    // console.log(responseType);
+    switch (responseType) {
+      case 'arraybuffer':
+        responseData = response.arrayBuffer();
+        break;
+      case 'blob':
+        responseData = response.blob();
+        break;
+      case 'json':
+        responseData = response.json();
+        break;
+      case 'document':
+        responseData = response.text().then(
+          function(res) {
+            var doc = document.implementation.createHTMLDocument('');
+            doc.open();doc.write(res);doc.close();
+            return Promise.resolve(doc);
+          });
+        break;
+      case 'text':
+      default:
+        responseData = response.text();
+        break;
     }
-  };
-
-  // Handle network errors
-  req.onerror = function() {
-    var error = new Error( 'Network error requesting ' + url );
-    onError( error );
-  };
+    if (200 === response.status) {
+      return responseData.then(function(res){ onLoad(res);});
+    }
+    if (204 === response.status) {
+      return responseData.then(function(res){ onLast(res);});
+    }
+    var error =  new Error(response.statusText);
+    return onError(error);
 
-  req.send();
+  }).catch(function() {
+    return onError(new Error("Network error requesting " + url));
+  });
 }
 
 // --------------------------  -------------------------- //
@@ -1803,7 +1837,7 @@ return InfiniteScroll;
 }));
 
 /*!
- * Infinite Scroll v3.0.6
+ * Infinite Scroll v1.2.3
  * Automatically add next page
  *
  * Licensed GPLv3 for open source use
@@ -1818,13 +1852,13 @@ return InfiniteScroll;
   /* globals define, module, require */
   if ( typeof define == 'function' && define.amd ) {
     // AMD
-    define( [
-      'infinite-scroll/js/core',
-      'infinite-scroll/js/page-load',
-      'infinite-scroll/js/scroll-watch',
-      'infinite-scroll/js/history',
-      'infinite-scroll/js/button',
-      'infinite-scroll/js/status',
+    define( 'infinite-scroll/js/index',[
+      './core',
+      './page-load',
+      './scroll-watch',
+      './history',
+      './button',
+      './status',
     ], factory );
   } else if ( typeof module == 'object' && module.exports ) {
     // CommonJS

gulpfile.js

@@ -35,11 +35,11 @@ gulp.task( 'jsonlint', function() {
     .pipe( jsonlint.report('verbose') );
 });
 
-gulp.task( 'hint', [ 'hint-js', 'hint-test', 'hint-task', 'jsonlint' ]);
+gulp.task( 'hint', gulp.series( 'hint-js', 'hint-test', 'hint-task', 'jsonlint' ));
 
 // -------------------------- RequireJS makes pkgd -------------------------- //
 
-var gutil = require('gulp-util');
+var log = require('fancy-log');
 var chalk = require('chalk');
 var rjsOptimize = require('gulp-requirejs-optimize');
 
@@ -94,16 +94,18 @@ gulp.task( 'requirejs', function() {
 
 var uglify = require('gulp-uglify');
 
-gulp.task( 'uglify', [ 'requirejs' ], function() {
+gulp.task( 'uglify-min', function() {
   var banner = getBanner();
-  gulp.src('dist/infinite-scroll.pkgd.js')
+  return gulp.src('dist/infinite-scroll.pkgd.js')
     .pipe( uglify() )
     // add banner
     .pipe( addBanner( banner ) )
     .pipe( rename('infinite-scroll.pkgd.min.js') )
     .pipe( gulp.dest('dist') );
 });
 
+gulp.task( 'uglify', gulp.series( 'requirejs' , 'uglify-min'));
+
 // ----- version ----- //
 
 // set version in source files
@@ -115,10 +117,10 @@ gulp.task( 'version', function() {
   var args = minimist( process.argv.slice(3) );
   var version = args.t;
   if ( !version || !/\d\.\d\.\d/.test( version ) ) {
-    gutil.log( 'invalid version: ' + chalk.red( version ) );
+    log( 'invalid version: ' + chalk.red( version ) );
     return;
   }
-  gutil.log( 'ticking version to ' + chalk.green( version ) );
+  log( 'ticking version to ' + chalk.green( version ) );
 
   gulp.src('js/index.js')
     .pipe( replace( /Infinite Scroll v\d\.\d+\.\d+/, 'Infinite Scroll v' + version ) )
@@ -131,7 +133,7 @@ gulp.task( 'version', function() {
 
 // ----- default ----- //
 
-gulp.task( 'default', [
+gulp.task( 'default', gulp.series(
   'hint',
-  'uglify',
-]);
+  'uglify'
+));

js/page-load.js

@@ -31,6 +31,7 @@ var proto = InfiniteScroll.prototype;
 InfiniteScroll.defaults.loadOnScroll = true;
 InfiniteScroll.defaults.checkLastPage = true;
 InfiniteScroll.defaults.responseType = 'document';
+InfiniteScroll.defaults.method = 'GET';
 // InfiniteScroll.defaults.prefill = false;
 // InfiniteScroll.defaults.outlayer = null;
 
@@ -69,7 +70,7 @@ proto.loadNextPage = function() {
     this.lastPageReached( response, path );
   }.bind( this );
 
-  request( path, this.options.responseType, onLoad, onError, onLast );
+  request( path, this.options.responseType, onLoad, onError, onLast , this.options.method, this.options.params );
   this.dispatchEvent( 'request', null, [ path ] );
 };
 
@@ -265,36 +266,69 @@ proto.stopPrefill = function() {
   this.off( 'append', this.prefill );
 };
 
+proto.method = function () {
+  this.log('method');
+};
+
 // -------------------------- request -------------------------- //
+function request( url, responseType, onLoad, onError, onLast, method, params ) {
+  if (typeof params === 'function') {
+    params = params();
+  }
 
-function request( url, responseType, onLoad, onError, onLast ) {
-  var req = new XMLHttpRequest();
-  req.open( 'GET', url, true );
-  // set responseType document to return DOM
-  req.responseType = responseType || '';
-
-  // set X-Requested-With header to check that is ajax request
-  req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-
-  req.onload = function() {
-    if ( req.status == 200 ) {
-      onLoad( req.response );
-    } else if ( req.status == 204 ) {
-      onLast( req.response );
-    } else {
-      // not 200 OK, error
-      var error = new Error( req.statusText );
-      onError( error );
+  if (typeof params === 'object') {
+      if (params instanceof HTMLFormElement) {
+        params = new FormData(params);
+      } else {
+        params = Object.keys(params).map(function(key) {
+          return key + '=' + params[key];
+        }).join('&');
+      }
+  }
+  // console.log(method);
+  fetch(url, {
+    method: method,
+    headers: { 'Content-type': 'application/x-www-form-urlencoded' },
+    credentials: 'include',
+    body: params
+  }).then(function(response) {
+    var responseData;
+    // console.log(responseType);
+    switch (responseType) {
+      case 'arraybuffer':
+        responseData = response.arrayBuffer();
+        break;
+      case 'blob':
+        responseData = response.blob();
+        break;
+      case 'json':
+        responseData = response.json();
+        break;
+      case 'document':
+        responseData = response.text().then(
+          function(res) {
+            var doc = document.implementation.createHTMLDocument('');
+            doc.open();doc.write(res);doc.close();
+            return Promise.resolve(doc);
+          });
+        break;
+      case 'text':
+      default:
+        responseData = response.text();
+        break;
     }
-  };
-
-  // Handle network errors
-  req.onerror = function() {
-    var error = new Error( 'Network error requesting ' + url );
-    onError( error );
-  };
+    if (200 === response.status) {
+      return responseData.then(function(res){ onLoad(res);});
+    }
+    if (204 === response.status) {
+      return responseData.then(function(res){ onLast(res);});
+    }
+    var error =  new Error(response.statusText);
+    return onError(error);
 
-  req.send();
+  }).catch(function() {
+    return onError(new Error("Network error requesting " + url));
+  });
 }
 
 // --------------------------  -------------------------- //

package.json

@@ -12,21 +12,25 @@
     "fizzy-ui-utils": "^2.0.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "bower": "^1.8.8",
     "chalk": "^0.5.1",
-    "gulp": "^3.9.1",
-    "gulp-jshint": "^1.12.0",
-    "gulp-json-lint": "0.0.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
+    "fancy-log": "^1.3.3",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-jshint": "^2.1.0",
+    "gulp-json-lint": "^0.1.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-replace": "^1.0.0",
     "gulp-requirejs-optimize": "github:metafizzy/gulp-requirejs-optimize",
-    "gulp-uglify": "^1.5.4",
-    "gulp-util": "^3.0.8",
+    "gulp-uglify": "^3.0.2",
     "imagesloaded": "^4.1.3",
     "jquery": "^3.2.1",
     "jquery-bridget": "^2.0.1",
+    "jshint": "^2.11.0-rc1",
     "masonry-layout": "^4.2.0",
     "minimist": "^1.2.0",
-    "qunitjs": "^2.3.2"
+    "qunit": "^2.9.3"
   },
   "scripts": {
     "test": "echo \"View test/ in browser\" && exit 1"

test/.jshintrc

@@ -3,6 +3,7 @@
   "devel": true,
   "unused": true,
   "undef": true,
+  "esversion": 9,
   "globals": {
     "InfiniteScroll": false,
     "QUnit": false

test/index.html

@@ -30,6 +30,7 @@
   <!-- unit tests -->
   <script src="unit/path.js"></script>
   <script src="unit/page-load.js"></script>
+  <script src="unit/page-load-method.js"></script>
   <script src="unit/page-load-error.js"></script>
   <script src="unit/page-index.js"></script>
   <script src="unit/check-last-page.js"></script>
@@ -57,6 +58,12 @@ <h2>path</h2>
     <div class="demo demo--path"></div>
     <p><a class="path-next-link" href="/area51/selector/page10.html">Next</a></p>
 
+    <h2>page load - method</h2>
+    <div class="demo demo--page-load-method">
+      <div class="post">page 1, post 1</div>
+    </div>
+    <p><a class="page-load-method-next-link" href="page/2-method.html">Next</a></p>
+
     <h2>page load</h2>
     <div class="demo demo--page-load">
       <div class="post">page 1, post 1</div>
@@ -126,4 +133,4 @@ <h2>outlayer</h2>
 <footer class="footer"></footer>
 
 </body>
-</html>
+</html>