From 016704f7779c41d19649c3e1d26d0af2b52f67fb Mon Sep 17 00:00:00 2001 From: Nikolaus Piccolotto Date: Mon, 13 Jan 2014 19:25:16 +0100 Subject: [PATCH] add option to register scroll handler on any element --- demo/index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ dist/echo.js | 12 +++++++----- dist/echo.min.js | 4 ++-- src/echo.js | 10 ++++++---- 4 files changed, 62 insertions(+), 11 deletions(-) create mode 100644 demo/index.html diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..2478b52 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,47 @@ + + + + + Echo + + + + + +
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate sed mauris sit amet varius. Maecenas sit amet blandit lacus. Fusce sapien erat, auctor cursus ornare pulvinar, interdum aliquet sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ut erat sagittis, faucibus erat a, porttitor lorem. Suspendisse vestibulum dolor at hendrerit venenatis. Quisque ut sem nec nisl dictum dictum. Maecenas purus erat, accumsan eu tincidunt eu, sodales eget urna.

+ +

Donec porttitor ligula vitae ipsum varius euismod. Morbi blandit velit nisl, vel pellentesque elit iaculis quis. Aenean laoreet lacinia lorem, at sagittis tellus. Nullam non mauris eros. Aliquam feugiat libero eget vehicula eleifend. Aliquam ullamcorper tortor in condimentum congue. Ut nec aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas arcu purus, blandit vitae rutrum id, tempus eget augue.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate sed mauris sit amet varius. Maecenas sit amet blandit lacus. Fusce sapien erat, auctor cursus ornare pulvinar, interdum aliquet sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ut erat sagittis, faucibus erat a, porttitor lorem. Suspendisse vestibulum dolor at hendrerit venenatis. Quisque ut sem nec nisl dictum dictum. Maecenas purus erat, accumsan eu tincidunt eu, sodales eget urna.

+ +

Donec porttitor ligula vitae ipsum varius euismod. Morbi blandit velit nisl, vel pellentesque elit iaculis quis. Aenean laoreet lacinia lorem, at sagittis tellus. Nullam non mauris eros. Aliquam feugiat libero eget vehicula eleifend. Aliquam ullamcorper tortor in condimentum congue. Ut nec aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas arcu purus, blandit vitae rutrum id, tempus eget augue.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate sed mauris sit amet varius. Maecenas sit amet blandit lacus. Fusce sapien erat, auctor cursus ornare pulvinar, interdum aliquet sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ut erat sagittis, faucibus erat a, porttitor lorem. Suspendisse vestibulum dolor at hendrerit venenatis. Quisque ut sem nec nisl dictum dictum. Maecenas purus erat, accumsan eu tincidunt eu, sodales eget urna.

+ +

Donec porttitor ligula vitae ipsum varius euismod. Morbi blandit velit nisl, vel pellentesque elit iaculis quis. Aenean laoreet lacinia lorem, at sagittis tellus. Nullam non mauris eros. Aliquam feugiat libero eget vehicula eleifend. Aliquam ullamcorper tortor in condimentum congue. Ut nec aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas arcu purus, blandit vitae rutrum id, tempus eget augue.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate sed mauris sit amet varius. Maecenas sit amet blandit lacus. Fusce sapien erat, auctor cursus ornare pulvinar, interdum aliquet sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ut erat sagittis, faucibus erat a, porttitor lorem. Suspendisse vestibulum dolor at hendrerit venenatis. Quisque ut sem nec nisl dictum dictum. Maecenas purus erat, accumsan eu tincidunt eu, sodales eget urna.

+ +

Donec porttitor ligula vitae ipsum varius euismod. Morbi blandit velit nisl, vel pellentesque elit iaculis quis. Aenean laoreet lacinia lorem, at sagittis tellus. Nullam non mauris eros. Aliquam feugiat libero eget vehicula eleifend. Aliquam ullamcorper tortor in condimentum congue. Ut nec aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas arcu purus, blandit vitae rutrum id, tempus eget augue.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate sed mauris sit amet varius. Maecenas sit amet blandit lacus. Fusce sapien erat, auctor cursus ornare pulvinar, interdum aliquet sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ut erat sagittis, faucibus erat a, porttitor lorem. Suspendisse vestibulum dolor at hendrerit venenatis. Quisque ut sem nec nisl dictum dictum. Maecenas purus erat, accumsan eu tincidunt eu, sodales eget urna.

+ +

Donec porttitor ligula vitae ipsum varius euismod. Morbi blandit velit nisl, vel pellentesque elit iaculis quis. Aenean laoreet lacinia lorem, at sagittis tellus. Nullam non mauris eros. Aliquam feugiat libero eget vehicula eleifend. Aliquam ullamcorper tortor in condimentum congue. Ut nec aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas arcu purus, blandit vitae rutrum id, tempus eget augue.

+
+ + + \ No newline at end of file diff --git a/dist/echo.js b/dist/echo.js index d33b5ed..37f7cfa 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -1,9 +1,9 @@ -/*! Echo v1.4.0 | (c) 2013 @toddmotto | MIT license | github.com/toddmotto/echo */ +/*! Echo v1.4.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */ window.Echo = (function (window, document, undefined) { 'use strict'; - var store = [], offset, throttle, poll; + var store = [], offset, throttle, poll, domElement; var _inView = function (el) { var coords = el.getBoundingClientRect(); @@ -26,10 +26,12 @@ window.Echo = (function (window, document, undefined) { }; var init = function (obj) { - var nodes = document.querySelectorAll('[data-echo]'); + var opts = obj || {}; offset = opts.offset || 0; throttle = opts.throttle || 250; + domElement = document.querySelector( opts.domElement ) || window; + var nodes = document.querySelectorAll( opts.domElement + ' [data-echo]'); for (var i = 0; i < nodes.length; i++) { store.push(nodes[i]); @@ -38,9 +40,9 @@ window.Echo = (function (window, document, undefined) { _throttle(); if (document.addEventListener) { - window.addEventListener('scroll', _throttle, false); + domElement.addEventListener('scroll', _throttle, false); } else { - window.attachEvent('onscroll', _throttle); + domElement.attachEvent('onscroll', _throttle); } }; diff --git a/dist/echo.min.js b/dist/echo.min.js index 4dfeda4..66e2941 100644 --- a/dist/echo.min.js +++ b/dist/echo.min.js @@ -1,2 +1,2 @@ -/*! Echo v1.4.0 | (c) 2013 @toddmotto | MIT license | github.com/toddmotto/echo */ -window.Echo=function(a,b){"use strict";var c,d,e,f=[],g=function(d){var e=d.getBoundingClientRect();return(e.top>=0&&e.left>=0&&e.top)<=(a.innerHeight||b.documentElement.clientHeight)+parseInt(c)},h=function(){for(var a=f.length;a--;){var b=f[a];g(b)&&(b.src=b.getAttribute("data-echo"),f.splice(a,1))}},i=function(){clearTimeout(e),e=setTimeout(h,d)},j=function(e){var g=b.querySelectorAll("[data-echo]"),h=e||{};c=h.offset||0,d=h.throttle||250;for(var j=0;j=0&&e.left>=0&&e.top)<=(a.innerHeight||b.documentElement.clientHeight)+parseInt(c)},i=function(){for(var a=g.length;a--;){var b=g[a];h(b)&&(b.src=b.getAttribute("data-echo"),g.splice(a,1))}},j=function(){clearTimeout(e),e=setTimeout(i,d)},k=function(e){var h=e||{};c=h.offset||0,d=h.throttle||250,f=b.querySelector(h.domElement)||a;for(var i=b.querySelectorAll(h.domElement+" [data-echo]"),k=0;k