From f992ff3589cd69a1346599398fc2e969304aec35 Mon Sep 17 00:00:00 2001 From: Arnaud JAEGERS Date: Wed, 3 Sep 2014 10:08:35 +0200 Subject: [PATCH] Add option 'container' to support other containers than default window --- README.md | 10 ++++++++++ dist/echo.js | 7 ++++--- dist/echo.min.js | 2 +- package.json | 10 +++++----- src/echo.js | 7 ++++--- 5 files changed, 24 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 0db794a..e456c56 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,16 @@ echo.init({ } }); ``` +#### container +Type: `Object` Default: `null` + +This allows you to specify a different container of the defaut 'document'. + +```js +echo.init({ + container: document.querySelector(".main") +}); +``` ## .render() diff --git a/dist/echo.js b/dist/echo.js index 7a5efed..7696c30 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -17,7 +17,7 @@ var callback = function () {}; - var offset, poll, delay, useDebounce, unload; + var offset, poll, delay, useDebounce, unload, container; var inView = function (element, view) { var box = element.getBoundingClientRect(); @@ -53,6 +53,7 @@ useDebounce = opts.debounce !== false; unload = !!opts.unload; callback = opts.callback || callback; + container = opts.container || root; echo.render(); if (document.addEventListener) { root.addEventListener('scroll', debounceOrThrottle, false); @@ -70,8 +71,8 @@ var view = { l: 0 - offset.l, t: 0 - offset.t, - b: (root.innerHeight || document.documentElement.clientHeight) + offset.b, - r: (root.innerWidth || document.documentElement.clientWidth) + offset.r + b: (container.innerHeight || container.clientHeight) + offset.b, + r: (container.innerWidth || container.clientWidth) + offset.r }; for (var i = 0; i < length; i++) { elem = nodes[i]; diff --git a/dist/echo.min.js b/dist/echo.min.js index d654ac5..959511c 100644 --- a/dist/echo.min.js +++ b/dist/echo.min.js @@ -1,2 +1,2 @@ /*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/echo */ -!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,n,o,r,c,i={},l=function(){},a=function(t,e){var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},d=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){i.render(),n=null},o))};return i.init=function(n){n=n||{};var a=n.offset||0,u=n.offsetVertical||a,f=n.offsetHorizontal||a,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,u),b:s(n.offsetBottom,u),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,l=n.callback||l,i.render(),document.addEventListener?(t.addEventListener("scroll",d,!1),t.addEventListener("load",d,!1)):(t.attachEvent("onscroll",d),t.attachEvent("onload",d))},i.render=function(){for(var n,o,r=document.querySelectorAll("img[data-echo]"),d=r.length,u={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},f=0;d>f;f++)o=r[f],a(o,u)?(c&&o.setAttribute("data-echo-placeholder",o.src),o.src=o.getAttribute("data-echo"),c||o.removeAttribute("data-echo"),l(o,"load")):c&&(n=o.getAttribute("data-echo-placeholder"))&&(o.src=n,o.removeAttribute("data-echo-placeholder"),l(o,"unload"));d||i.detach()},i.detach=function(){document.removeEventListener?t.removeEventListener("scroll",d):t.detachEvent("onscroll",d),clearTimeout(n)},i}); \ No newline at end of file +!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,n,o,r,c,i,a={},l=function(){},d=function(t,e){var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},u=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){a.render(),n=null},o))};return a.init=function(n){n=n||{};var d=n.offset||0,f=n.offsetVertical||d,s=n.offsetHorizontal||d,h=function(t,e){return parseInt(t||e,10)};e={t:h(n.offsetTop,f),b:h(n.offsetBottom,f),l:h(n.offsetLeft,s),r:h(n.offsetRight,s)},o=h(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,l=n.callback||l,i=n.container||t,a.render(),document.addEventListener?(t.addEventListener("scroll",u,!1),t.addEventListener("load",u,!1)):(t.attachEvent("onscroll",u),t.attachEvent("onload",u))},a.render=function(){for(var t,n,o=document.querySelectorAll("img[data-echo]"),r=o.length,u={l:0-e.l,t:0-e.t,b:(i.innerHeight||i.clientHeight)+e.b,r:(i.innerWidth||i.clientWidth)+e.r},f=0;r>f;f++)n=o[f],d(n,u)?(c&&n.setAttribute("data-echo-placeholder",n.src),n.src=n.getAttribute("data-echo"),c||n.removeAttribute("data-echo"),l(n,"load")):c&&(t=n.getAttribute("data-echo-placeholder"))&&(n.src=t,n.removeAttribute("data-echo-placeholder"),l(n,"unload"));r||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",u):t.detachEvent("onscroll",u),clearTimeout(n)},a}); \ No newline at end of file diff --git a/package.json b/package.json index 7d59938..8e99312 100755 --- a/package.json +++ b/package.json @@ -6,15 +6,15 @@ "license": "MIT", "homepage": "https://github.com/toddmotto/echo", "devDependencies": { - "gulp": "~3.7.0", - "gulp-uglify": "~0.3.0", - "gulp-rename": "~1.1.0", + "gulp": "^3.8.7", "gulp-clean": "^0.2.4", - "gulp-plumber": "~0.6.2", "gulp-header": "^1.0.2", "gulp-jshint": "^1.6.1", - "jshint-stylish": "^0.2.0", "gulp-karma": "0.0.4", + "gulp-plumber": "~0.6.2", + "gulp-rename": "~1.1.0", + "gulp-uglify": "~0.3.0", + "jshint-stylish": "^0.2.0", "karma": "^0.12.16", "karma-jasmine": "~0.2.0", "karma-phantomjs-launcher": "^0.1.4", diff --git a/src/echo.js b/src/echo.js index 5b14b29..95a46bf 100644 --- a/src/echo.js +++ b/src/echo.js @@ -16,7 +16,7 @@ var callback = function () {}; - var offset, poll, delay, useDebounce, unload; + var offset, poll, delay, useDebounce, unload, container; var inView = function (element, view) { var box = element.getBoundingClientRect(); @@ -52,6 +52,7 @@ useDebounce = opts.debounce !== false; unload = !!opts.unload; callback = opts.callback || callback; + container = opts.container || root; echo.render(); if (document.addEventListener) { root.addEventListener('scroll', debounceOrThrottle, false); @@ -69,8 +70,8 @@ var view = { l: 0 - offset.l, t: 0 - offset.t, - b: (root.innerHeight || document.documentElement.clientHeight) + offset.b, - r: (root.innerWidth || document.documentElement.clientWidth) + offset.r + b: (container.innerHeight || container.clientHeight) + offset.b, + r: (container.innerWidth || container.clientWidth) + offset.r }; for (var i = 0; i < length; i++) { elem = nodes[i];