Skip to content

Instantly share code, notes, and snippets.

@tjFogarty

tjFogarty/inview-call.js

Last active Aug 29, 2015
Embed
What would you like to do?
/* globals $, LoadPartial, Foundation */
/* jshint node:true */
'use strict';
/**
* The Likebox is just above the footer on the homepage
* Load it once it comes into view
*/
var fb = new LoadPartial({
url: window.location.origin + '/layouts/facebook',
container: $('.js-facebook-likebox'),
debug: false
});
if (Foundation.utils.is_medium_up()) {
fb.watch();
}
/* globals $, console */
/* jshint node:true */
'use strict';
/**
* Load a piece of content when it's container is in view
* @param {object} config - should contain at least a url and container
*/
function LoadPartial(config) {
this.url = config.url;
this.container = $(config.container);
this.debug = config.debug;
if (this.debug) {
console.log('LoadPartial: init');
console.log('URL:' + this.url);
console.log(this.container);
}
return this;
}
/**
* Fetch content via AJAX
*/
LoadPartial.prototype.fetch = function() {
var _self = this;
if (_self.debug) {
console.log('LoadPartial: begin fetch');
}
$.ajax({
url: _self.url, // needed to define this as a route in config.master.php
type: 'GET',
contentType: 'html',
success: function(data) {
_self.container.html(data);
if (_self.debug) {
console.log('LoadPartial: fetch successful');
console.log(data);
}
}
});
};
/**
* Using jQuery.inview, we monitor the pagescroll and fire 'fetch'
*/
LoadPartial.prototype.watch = function() {
// If the container exists, we bind the event
if (this.container.length) {
var _self = this;
this.container.one('inview', function() {
_self.fetch();
}).bind(this);
} else {
return;
}
if (this.debug) {
console.log('LoadPartial: watching');
}
};
// Add as global, which I probably shouldn't do
window.LoadPartial = LoadPartial;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment