playground
/
echo
mirror of https://github.com/toddmotto/echo.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

add option to register scroll handler on any element

pull/30/head
Nikolaus Piccolotto 11 years ago
parent
b92665787c
commit
016704f777
4 changed files with 62 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 47
      demo/index.html
  2. 12
      dist/echo.js
  3. 4
      dist/echo.min.js
  4. 10
      src/echo.js

47
demo/index.html
Unescape View File

@ -0,0 +1,47 @@
<html>
<head>
<meta encoding="utf-8"/>
<title>Echo</title>
<style>
div.main {
max-width: 500px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: 500px;
border: 3px dotted black;
overflow: scroll;
}
</style>
<script src="../dist/echo.js"></script>
</head>
<body>
<div class="main">
<p>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.</p>
<img src="http://toddmotto.com/labs/echo/img/blank.gif" alt="" data-echo="http://www.residentadvisor.net/images/podcast/ra135-marcel-dettmann-cover.jpg">
<p>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.</p>
<p>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.</p>
<img src="http://toddmotto.com/labs/echo/img/blank.gif" alt="" data-echo="http://www.mixesdb.com/db/images/thumb/3/3d/2010-09-27_-_Monoloc_-_CLR_Podcast_083.jpg/350px-2010-09-27_-_Monoloc_-_CLR_Podcast_083.jpg">
<p>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.</p>
<p>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.</p>
<img src="http://toddmotto.com/labs/echo/img/blank.gif" alt="" data-echo="http://www.residentadvisor.net/images/podcast/ra032-schwarz-cover.jpg">
<p>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.</p>
<p>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.</p>
<img src="http://toddmotto.com/labs/echo/img/blank.gif" alt="" data-echo="http://www.residentadvisor.net/images/podcast/ra012-dominik-eulberg-cover.jpg">
<p>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.</p>
<p>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.</p>
<img src="http://toddmotto.com/labs/echo/img/blank.gif" alt="" data-echo="http://userserve-ak.last.fm/serve/500/33735553/Kollektiv%2BTurmstrasse%2Bl_7e1c0ea74ae49459f8b69f58c863.jpg">
<p>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.</p>
</div>
<script>
Echo.init({
domElement: ".main"
});
</script>
</body>
</html>

12
dist/echo.js vendored
Unescape View File

@ -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) { window.Echo = (function (window, document, undefined) {
'use strict'; 'use strict';
var store = [], offset, throttle, poll; var store = [], offset, throttle, poll, domElement;
var _inView = function (el) { var _inView = function (el) {
var coords = el.getBoundingClientRect(); var coords = el.getBoundingClientRect();
@ -26,10 +26,12 @@ window.Echo = (function (window, document, undefined) {
}; };
var init = function (obj) { var init = function (obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {}; var opts = obj || {};
offset = opts.offset || 0; offset = opts.offset || 0;
throttle = opts.throttle || 250; 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++) { for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]); store.push(nodes[i]);
@ -38,9 +40,9 @@ window.Echo = (function (window, document, undefined) {
_throttle(); _throttle();
if (document.addEventListener) { if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false); domElement.addEventListener('scroll', _throttle, false);
} else { } else {
window.attachEvent('onscroll', _throttle); domElement.attachEvent('onscroll', _throttle);
} }
}; };

4
dist/echo.min.js vendored
Unescape View File

@ -1,2 +1,2 @@
/*! 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(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<g.length;j++)f.push(g[j]);i(),b.addEventListener?a.addEventListener("scroll",i,!1):a.attachEvent("onscroll",i)};return{init:j,render:i}}(window,document); window.Echo=function(a,b){"use strict";var c,d,e,f,g=[],h=function(d){var e=d.getBoundingClientRect();return(e.top>=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<i.length;k++)g.push(i[k]);j(),b.addEventListener?f.addEventListener("scroll",j,!1):f.attachEvent("onscroll",j)};return{init:k,render:j}}(window,document);

10
src/echo.js
Unescape View File

@ -2,7 +2,7 @@ window.Echo = (function (window, document, undefined) {
'use strict'; 'use strict';
var store = [], offset, throttle, poll; var store = [], offset, throttle, poll, domElement;
var _inView = function (el) { var _inView = function (el) {
var coords = el.getBoundingClientRect(); var coords = el.getBoundingClientRect();
@ -25,10 +25,12 @@ window.Echo = (function (window, document, undefined) {
}; };
var init = function (obj) { var init = function (obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {}; var opts = obj || {};
offset = opts.offset || 0; offset = opts.offset || 0;
throttle = opts.throttle || 250; 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++) { for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]); store.push(nodes[i]);
@ -37,9 +39,9 @@ window.Echo = (function (window, document, undefined) {
_throttle(); _throttle();
if (document.addEventListener) { if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false); domElement.addEventListener('scroll', _throttle, false);
} else { } else {
window.attachEvent('onscroll', _throttle); domElement.attachEvent('onscroll', _throttle);
} }
}; };

Write Preview
Loading…
Cancel
Save