Infinite scroll

scroll.js

var NS = NS || {};
/* 
  requires 
  - underscore js
  - external event subscriber
  - external AJAX Hanlder
*/

NS.infiniteScroll = function (target,callback) {

  var self = this,

		documentHeight = 9999999,

		loadingClass = "is-loading",
		loadingid = "loading-box",
		loadingstatus,

		requestURL,
		urlSuffix =  '',
		url,
		nextID = "list_next",
		ne = SDM.gel(nextID),

		threshold = 150,	//  offset from bottom

		postCount = 9999999,

		wait,

		hopper,

		hopperID = 'hopper--postloader',

		/* tracking */
		_cat = '/',
		_action = 'infinite scroll',
		_label,

		initialise = function() {
      requestURL = ne.href;
			document.querySelector('.list__pagination').style.display = "none";
			createHopper();
			setTriggers();
		},
		createHopper = function (){
			hopper = document.createElement('div');
			hopper.id = hopperID;
			hopper.style.display = 'none';
			document.body.appendChild(hopper);

			target.insertAdjacentHTML('afterend', '<div id ="' +loadingid +'"></div>');
			loadingstatus = SDM.gel(loadingid);
			loadingstatus.style.visibility = 'hidden';
			loadingstatus.style.height = threshold+'px';
		},

		setTriggers = function(){
			documentHeight = SDM.documentHeight();
			NS.scroll.addSubscriber('scroll', scrollListner);
			clearTimeout(this.wait);
		},

		scrollListner  =  _.throttle(function() {
			var windowBottomPos = documentHeight - window.innerHeight;
				if ( (windowBottomPos - window.pageYOffset) <= threshold) {
					_.once(scrollThresholdTriggered());
				}

		}, 25),

		scrollThresholdTriggered = function(){

			NS.scroll.removeSubscriber('scroll',scrollListner);

			loadingstatus.classList.add(loadingClass);
			loadingstatus.style.visibility = '';

			NS.fireAJAXRequest('GET', requestURL, true, function(response) {

				var json = JSON.parse(response.responseText); // polyfill ie
				handleResponse(json,response.responseTime);

			});

		},

		handleResponse = function(json,responseTime){

			var newContent = json.content, // new content
				stateContent = target.innerHTML + newContent, // saved state
				title = json.title;
				oldUrl = requestURL.substr(0, requestURL.lastIndexOf("/"));
				document.title = title; // title
				hopper.innerHTML = newContent; // drop the markup in

				loadingstatus.classList.remove(loadingClass);

				if(NS.history && json.count > 0) {
					NS.history.replace(stateContent, title, oldUrl);
				}

				requestURL = json.pagination.next;
				callback(hopper,target);

				_.delay(function(){

					loadingstatus.style.visibility = 'hidden';

				},1000); // counteract ipad delay

				if( json.count >= json.limit) {
					this.wait = setTimeout(function(){
						setTriggers(); // re-ready new content
					},1000);
				} else {
					loadingstatus.style.display = "none";
				}

				NS.track({
            category: _cat,
            action: _action,
            label: oldUrl,
            value : responseTime
        });


		};

	if(target && ne && window.innerHeight) { // if it can calculate the win height ( polyfills possible )
		initialise();
	}

	return this;


};