Skip to content

Commit 3bcb740

Browse files
desandrodesandro
committed
🔔 successfully swap in fetch(); refactor page-load.js
remove request function switch `response` argument name to `doc`
1 parent 5f51cf4 commit 3bcb740

File tree

2 files changed

+57
-91
lines changed

2 files changed

+57
-91
lines changed

‎js/page-load.js

Lines changed: 56 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@
1919

2020
let proto = InfiniteScroll.prototype;
2121

22-
// InfiniteScroll.defaults.append = false;
23-
InfiniteScroll.defaults.loadOnScroll = true;
24-
InfiniteScroll.defaults.checkLastPage = true;
25-
InfiniteScroll.defaults.responseType = 'document';
26-
// InfiniteScroll.defaults.prefill = false;
27-
// InfiniteScroll.defaults.outlayer = null;
22+
Object.assign( InfiniteScroll.defaults, {
23+
// append: false,
24+
loadOnScroll: true,
25+
checkLastPage: true,
26+
responseType: 'document',
27+
// prefill: false,
28+
// outlayer: null,
29+
} );
2830

2931
InfiniteScroll.create.pageLoad = function() {
3032
this.canLoad = true;
@@ -36,62 +38,66 @@ InfiniteScroll.create.pageLoad = function() {
3638
};
3739

3840
proto.onScrollThresholdLoad = function() {
39-
if ( this.options.loadOnScroll ) {
40-
this.loadNextPage();
41-
}
41+
if ( this.options.loadOnScroll ) this.loadNextPage();
4242
};
4343

44+
let domParser = new DOMParser();
45+
4446
proto.loadNextPage = function() {
45-
if ( this.isLoading || !this.canLoad ) {
46-
return;
47-
}
47+
if ( this.isLoading || !this.canLoad ) return;
4848

4949
let path = this.getAbsolutePath();
5050
this.isLoading = true;
5151

52-
let onLoad = function( response ) {
53-
this.onPageLoad( response, path );
54-
}.bind( this );
55-
56-
let onError = function( error ) {
57-
this.onPageError( error, path );
58-
}.bind( this );
52+
// TODO add fetch options
53+
let fetchPromise = fetch( path ).then( ( response ) => {
54+
if ( !response.ok ) {
55+
let error = new Error( response.statusText );
56+
this.onPageError( error, path );
57+
return response;
58+
}
5959

60-
let onLast = function( response ) {
61-
this.lastPageReached( response, path );
62-
}.bind( this );
60+
return response.text().then( ( text ) => {
61+
let doc = domParser.parseFromString( text, 'text/html' );
62+
if ( response.status == 204 ) {
63+
this.lastPageReached( doc, path );
64+
} else {
65+
this.onPageLoad( doc, path );
66+
}
67+
return response;
68+
} );
69+
} );
6370

64-
request( path, this.options.responseType, onLoad, onError, onLast );
6571
this.dispatchEvent( 'request', null, [ path ] );
72+
73+
return fetchPromise;
6674
};
6775

68-
proto.onPageLoad = function( response, path ) {
76+
proto.onPageLoad = function( doc, path ) {
6977
// done loading if not appending
7078
if ( !this.options.append ) {
7179
this.isLoading = false;
7280
}
7381
this.pageIndex++;
7482
this.loadCount++;
75-
this.dispatchEvent( 'load', null, [ response, path ] );
76-
this.appendNextPage( response, path );
77-
return response;
83+
this.dispatchEvent( 'load', null, [ doc, path ] );
84+
this.appendNextPage( doc, path );
85+
return doc;
7886
};
7987

80-
proto.appendNextPage = function( response, path ) {
88+
proto.appendNextPage = function( doc, path ) {
8189
let optAppend = this.options.append;
8290
// do not append json
8391
let isDocument = this.options.responseType == 'document';
84-
if ( !isDocument || !optAppend ) {
85-
return;
86-
}
92+
if ( !isDocument || !optAppend ) return;
8793

88-
let items = response.querySelectorAll( optAppend );
94+
let items = doc.querySelectorAll( optAppend );
8995
let fragment = getItemsFragment( items );
90-
let appendReady = function() {
96+
let appendReady = () => {
9197
this.appendItems( items, fragment );
9298
this.isLoading = false;
93-
this.dispatchEvent( 'append', null, [ response, path, items ] );
94-
}.bind( this );
99+
this.dispatchEvent( 'append', null, [ doc, path, items ] );
100+
};
95101

96102
// TODO add hook for option to trigger appendReady
97103
if ( this.options.outlayer ) {
@@ -102,9 +108,8 @@ proto.appendNextPage = function( response, path ) {
102108
};
103109

104110
proto.appendItems = function( items, fragment ) {
105-
if ( !items || !items.length ) {
106-
return;
107-
}
111+
if ( !items || !items.length ) return;
112+
108113
// get fragment if not provided
109114
fragment = fragment || getItemsFragment( items );
110115
refreshScripts( fragment );
@@ -165,18 +170,16 @@ proto.onAppendOutlayer = function( response, path, items ) {
165170
// ----- checkLastPage ----- //
166171

167172
// check response for next element
168-
proto.checkLastPage = function( response, path ) {
169-
let checkLastPage = this.options.checkLastPage;
170-
if ( !checkLastPage ) {
171-
return;
172-
}
173+
proto.checkLastPage = function( doc, path ) {
174+
let { checkLastPage } = this.options;
175+
if ( !checkLastPage ) return;
173176

174177
let pathOpt = this.options.path;
175178
// if path is function, check if next path is truthy
176179
if ( typeof pathOpt == 'function' ) {
177180
let nextPath = this.getPath();
178181
if ( !nextPath ) {
179-
this.lastPageReached( response, path );
182+
this.lastPageReached( doc, path );
180183
return;
181184
}
182185
}
@@ -190,19 +193,16 @@ proto.checkLastPage = function( response, path ) {
190193
}
191194
// check last page for selector
192195
// bail if no selector or not document response
193-
if ( !selector || !response.querySelector ) {
194-
return;
195-
}
196+
if ( !selector || !doc.querySelector ) return;
197+
196198
// check if response has selector
197-
let nextElem = response.querySelector( selector );
198-
if ( !nextElem ) {
199-
this.lastPageReached( response, path );
200-
}
199+
let nextElem = doc.querySelector( selector );
200+
if ( !nextElem ) this.lastPageReached( doc, path );
201201
};
202202

203-
proto.lastPageReached = function( response, path ) {
203+
proto.lastPageReached = function( doc, path ) {
204204
this.canLoad = false;
205-
this.dispatchEvent( 'last', null, [ response, path ] );
205+
this.dispatchEvent( 'last', null, [ doc, path ] );
206206
};
207207

208208
// ----- error ----- //
@@ -217,12 +217,11 @@ proto.onPageError = function( error, path ) {
217217
// -------------------------- prefill -------------------------- //
218218

219219
InfiniteScroll.create.prefill = function() {
220-
if ( !this.options.prefill ) {
221-
return;
222-
}
220+
if ( !this.options.prefill ) return;
221+
223222
let append = this.options.append;
224223
if ( !append ) {
225-
console.error( 'append option required for prefill. Set as :' + append );
224+
console.error( `append option required for prefill. Set as :${append}` );
226225
return;
227226
}
228227
this.updateMeasurements();
@@ -259,39 +258,6 @@ proto.stopPrefill = function() {
259258
this.off( 'append', this.prefill );
260259
};
261260

262-
// -------------------------- request -------------------------- //
263-
264-
/* eslint-disable-next-line max-params */
265-
function request( url, responseType, onLoad, onError, onLast ) {
266-
let req = new XMLHttpRequest();
267-
req.open( 'GET', url, true );
268-
// set responseType document to return DOM
269-
req.responseType = responseType || '';
270-
271-
// set X-Requested-With header to check that is ajax request
272-
req.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
273-
274-
req.onload = function() {
275-
if ( req.status == 200 ) {
276-
onLoad( req.response );
277-
} else if ( req.status == 204 ) {
278-
onLast( req.response );
279-
} else {
280-
// not 200 OK, error
281-
let error = new Error( req.statusText );
282-
onError( error );
283-
}
284-
};
285-
286-
// Handle network errors
287-
req.onerror = function() {
288-
let error = new Error( 'Network error requesting ' + url );
289-
onError( error );
290-
};
291-
292-
req.send();
293-
}
294-
295261
// -------------------------- -------------------------- //
296262

297263
return InfiniteScroll;

‎sandbox/js/unsplash.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ let container = document.querySelector('.container');
33
let unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';
44

55
let infScroll = new InfiniteScroll( '.container', {
6-
path: 'https://api.unsplash.com/photos?page={{#}}&client_id=' + unsplashID,
6+
path: `https://api.unsplash.com/photos?page={{#}}&client_id=${unsplashID}`,
77
responseType: '',
88
history: false,
99
} );

0 commit comments

Comments
 (0)