add support for defining top and bottom support independently

dist/echo.js

@@ -16,9 +16,9 @@ window.Echo = (function (global, document, undefined) {
   var toBeUnloaded = [];
 
   /**
-   * offset, offsetTop throttle, poll, unload vars
+   * offsetBot, offsetTop throttle, poll, unload vars
    */
-  var offset, offsetTop,  throttle, poll, unload;
+  var offsetBot, offsetTop,  throttle, poll, unload;
 
   /**
    *  _inView
@@ -28,8 +28,8 @@ window.Echo = (function (global, document, undefined) {
    */
   var _inView = function (element) {
     var coords = element.getBoundingClientRect();
-    var topInView = coords.top >= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offset && coords.top >= -1 * offsetTop;
+    var topInView = coords.top >= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot && coords.top >= -1 * offsetTop;
-    var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset;
+    var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot;
     return topInView || botInView;
   };
 
@@ -89,12 +89,16 @@ window.Echo = (function (global, document, undefined) {
    * @param {Object} [obj] Passed in Object with options
    * @param {Number|String} [obj.throttle]
    * @param {Number|String} [obj.offset]
+   * @param {Number|String} [obj.offsetBot]
+   * @param {Number|String} [obj.offsetTop]
+   * @param {Boolean} [obj.unload]
    */
   var init = function (obj) {
 
     var nodes = document.querySelectorAll('[data-echo]');
     var opts = obj || {};
-    offset = parseInt(opts.offset || 0);
+    var offset = parseInt(opts.offset || 0);
+    offsetBot = parseInt(opts.offsetBot || offset);
     offsetTop = parseInt(opts.offsetTop || offset);
     throttle = parseInt(opts.throttle || 250);
     unload = !!opts.unload;

dist/echo.min.js

@@ -1,2 +1,2 @@
 /*! Echo v1.5.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */
-window.Echo=function(a,b){"use strict";var c,d,e,f,g,h=[],i=[],j=function(a){var e=a.getBoundingClientRect(),f=e.top>=0&&e.left>=0&&e.top<=(window.innerHeight||b.documentElement.clientHeight)+c&&e.top>=-1*d,g=e.bottom>=-1*d&&e.left>=0&&e.bottom<=(window.innerHeight||b.documentElement.clientHeight)+c;return f||g},k=function(){var a,b,c,d=h.length;if(d>0)for(b=0;d>b;b++)c=h[b],c&&j(c)&&(c.src=c.getAttribute("data-echo"),h.splice(b,1),d=h.length,b--,g&&i.push(c));if(a=i.length,a>0)for(b=0;a>b;b++)c=i[b],c&&!j(c)&&(c.src=c.getAttribute("data-echo-holder"),i.splice(b,1),a=i.length,b--,h.push(c));0===a&&0===d&&n()},l=function(){clearTimeout(f),f=setTimeout(k,e)},m=function(f){var i=b.querySelectorAll("[data-echo]"),j=f||{};c=parseInt(j.offset||0),d=parseInt(j.offsetTop||c),e=parseInt(j.throttle||250),g=!!j.unload;for(var m=0;m<i.length;m++)h.push(i[m]);k(),b.addEventListener?(a.addEventListener("scroll",l,!1),a.addEventListener("load",l,!1)):(a.attachEvent("onscroll",l),a.attachEvent("onload",l))},n=function(){b.removeEventListener?a.removeEventListener("scroll",l):a.detachEvent("onscroll",l),clearTimeout(f)};return{init:m,detach:n,render:k}}(this,document);
+window.Echo=function(a,b){"use strict";var c,d,e,f,g,h=[],i=[],j=function(a){var e=a.getBoundingClientRect(),f=e.top>=0&&e.left>=0&&e.top<=(window.innerHeight||b.documentElement.clientHeight)+c&&e.top>=-1*d,g=e.bottom>=-1*d&&e.left>=0&&e.bottom<=(window.innerHeight||b.documentElement.clientHeight)+c;return f||g},k=function(){var a,b,c,d=h.length;if(d>0)for(b=0;d>b;b++)c=h[b],c&&j(c)&&(c.src=c.getAttribute("data-echo"),h.splice(b,1),d=h.length,b--,g&&i.push(c));if(a=i.length,a>0)for(b=0;a>b;b++)c=i[b],c&&!j(c)&&(c.src=c.getAttribute("data-echo-holder"),i.splice(b,1),a=i.length,b--,h.push(c));0===a&&0===d&&n()},l=function(){clearTimeout(f),f=setTimeout(k,e)},m=function(f){var i=b.querySelectorAll("[data-echo]"),j=f||{},m=parseInt(j.offset||0);c=parseInt(j.offsetBot||m),d=parseInt(j.offsetTop||m),e=parseInt(j.throttle||250),g=!!j.unload;for(var n=0;n<i.length;n++)h.push(i[n]);k(),b.addEventListener?(a.addEventListener("scroll",l,!1),a.addEventListener("load",l,!1)):(a.attachEvent("onscroll",l),a.attachEvent("onload",l))},n=function(){b.removeEventListener?a.removeEventListener("scroll",l):a.detachEvent("onscroll",l),clearTimeout(f)};return{init:m,detach:n,render:k}}(this,document);

src/echo.js

@@ -15,9 +15,9 @@ window.Echo = (function (global, document, undefined) {
   var toBeUnloaded = [];
 
   /**
-   * offset, offsetTop throttle, poll, unload vars
+   * offsetBot, offsetTop throttle, poll, unload vars
    */
-  var offset, offsetTop,  throttle, poll, unload;
+  var offsetBot, offsetTop,  throttle, poll, unload;
 
   /**
    *  _inView
@@ -27,8 +27,8 @@ window.Echo = (function (global, document, undefined) {
    */
   var _inView = function (element) {
     var coords = element.getBoundingClientRect();
-    var topInView = coords.top >= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offset && coords.top >= -1 * offsetTop;
+    var topInView = coords.top >= 0 && coords.left >= 0 && coords.top <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot && coords.top >= -1 * offsetTop;
-    var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset;
+    var botInView = coords.bottom >= -1 * offsetTop && coords.left >= 0 && coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetBot;
     return topInView || botInView;
   };
 
@@ -88,12 +88,16 @@ window.Echo = (function (global, document, undefined) {
    * @param {Object} [obj] Passed in Object with options
    * @param {Number|String} [obj.throttle]
    * @param {Number|String} [obj.offset]
+   * @param {Number|String} [obj.offsetBot]
+   * @param {Number|String} [obj.offsetTop]
+   * @param {Boolean} [obj.unload]
    */
   var init = function (obj) {
 
     var nodes = document.querySelectorAll('[data-echo]');
     var opts = obj || {};
-    offset = parseInt(opts.offset || 0);
+    var offset = parseInt(opts.offset || 0);
+    offsetBot = parseInt(opts.offsetBot || offset);
     offsetTop = parseInt(opts.offsetTop || offset);
     throttle = parseInt(opts.throttle || 250);
     unload = !!opts.unload;