inview-call.js

/* 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();
}

load-partials.js

/* 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;