mirror of https://github.com/toddmotto/echo.git
Alberto Núñez
10 years ago
13 changed files with 210 additions and 439 deletions
@ -1,17 +1,2 @@
|
||||
# Node |
||||
node_modules |
||||
|
||||
## OS X |
||||
.DS_Store |
||||
.AppleDouble |
||||
.LSOverride |
||||
Icon |
||||
._* |
||||
.Spotlight-V100 |
||||
.Trashes |
||||
|
||||
## Windows |
||||
Thumbs.db |
||||
ehthumbs.db |
||||
Desktop.ini |
||||
$RECYCLE.BIN/ |
||||
dist/ |
||||
node_modules/ |
||||
|
||||
@ -1,7 +0,0 @@
|
||||
language: node_js |
||||
node_js: |
||||
- "0.10" |
||||
- "0.11" |
||||
before_script: |
||||
- npm install -g gulp |
||||
script: gulp |
||||
@ -0,0 +1,26 @@
|
||||
define colorecho |
||||
@tput setaf 6
|
||||
@echo "\n### $1 ###\n"
|
||||
@tput sgr0
|
||||
endef |
||||
|
||||
all: js |
||||
|
||||
clean: |
||||
$(call colorecho, "Cleaning ignored files")
|
||||
cat .gitignore | xargs rm -rf
|
||||
|
||||
npm: |
||||
$(call colorecho, "Installing npm dependencies")
|
||||
npm install
|
||||
|
||||
lint: npm |
||||
$(call colorecho, "Linting JavaScript")
|
||||
node_modules/.bin/jshint src/sloth.js -c .jshintrc --reporter node_modules/jshint-stylish/stylish.js
|
||||
|
||||
js: lint |
||||
$(call colorecho, "Minifying JavaScript")
|
||||
mkdir -p dist
|
||||
node_modules/.bin/uglifyjs src/sloth.js --compress --mangle > dist/sloth.min.js
|
||||
wc -c dist/sloth.min.js
|
||||
|
||||
@ -1,135 +0,0 @@
|
||||
/*! echo.js v1.7.0 | (c) 2015 @toddmotto | https://github.com/toddmotto/echo */ |
||||
(function (root, factory) { |
||||
if (typeof define === 'function' && define.amd) { |
||||
define(function() { |
||||
return factory(root); |
||||
}); |
||||
} else if (typeof exports === 'object') { |
||||
module.exports = factory; |
||||
} else { |
||||
root.echo = factory(root); |
||||
} |
||||
})(this, function (root) { |
||||
|
||||
'use strict'; |
||||
|
||||
var echo = {}; |
||||
|
||||
var callback = function () {}; |
||||
|
||||
var offset, poll, delay, useDebounce, unload; |
||||
|
||||
var isHidden = function (element) { |
||||
return (element.offsetParent === null); |
||||
}; |
||||
|
||||
var inView = function (element, view) { |
||||
if (isHidden(element)) { |
||||
return false; |
||||
} |
||||
|
||||
var box = element.getBoundingClientRect(); |
||||
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); |
||||
}; |
||||
|
||||
var debounceOrThrottle = function () { |
||||
if(!useDebounce && !!poll) { |
||||
return; |
||||
} |
||||
clearTimeout(poll); |
||||
poll = setTimeout(function(){ |
||||
echo.render(); |
||||
poll = null; |
||||
}, delay); |
||||
}; |
||||
|
||||
echo.init = function (opts) { |
||||
opts = opts || {}; |
||||
var offsetAll = opts.offset || 0; |
||||
var offsetVertical = opts.offsetVertical || offsetAll; |
||||
var offsetHorizontal = opts.offsetHorizontal || offsetAll; |
||||
var optionToInt = function (opt, fallback) { |
||||
return parseInt(opt || fallback, 10); |
||||
}; |
||||
offset = { |
||||
t: optionToInt(opts.offsetTop, offsetVertical), |
||||
b: optionToInt(opts.offsetBottom, offsetVertical), |
||||
l: optionToInt(opts.offsetLeft, offsetHorizontal), |
||||
r: optionToInt(opts.offsetRight, offsetHorizontal) |
||||
}; |
||||
delay = optionToInt(opts.throttle, 250); |
||||
useDebounce = opts.debounce !== false; |
||||
unload = !!opts.unload; |
||||
callback = opts.callback || callback; |
||||
echo.render(); |
||||
if (document.addEventListener) { |
||||
root.addEventListener('scroll', debounceOrThrottle, false); |
||||
root.addEventListener('load', debounceOrThrottle, false); |
||||
} else { |
||||
root.attachEvent('onscroll', debounceOrThrottle); |
||||
root.attachEvent('onload', debounceOrThrottle); |
||||
} |
||||
}; |
||||
|
||||
echo.render = function () { |
||||
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]'); |
||||
var length = nodes.length; |
||||
var src, elem; |
||||
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 |
||||
}; |
||||
for (var i = 0; i < length; i++) { |
||||
elem = nodes[i]; |
||||
if (inView(elem, view)) { |
||||
|
||||
if (unload) { |
||||
elem.setAttribute('data-echo-placeholder', elem.src); |
||||
} |
||||
|
||||
if (elem.getAttribute('data-echo-background') !== null) { |
||||
elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")"; |
||||
} |
||||
else { |
||||
elem.src = elem.getAttribute('data-echo'); |
||||
} |
||||
|
||||
if (!unload) { |
||||
elem.removeAttribute('data-echo'); |
||||
elem.removeAttribute('data-echo-background'); |
||||
} |
||||
|
||||
callback(elem, 'load'); |
||||
} |
||||
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { |
||||
|
||||
if (elem.getAttribute('data-echo-background') !== null) { |
||||
elem.style.backgroundImage = "url(" + src + ")"; |
||||
} |
||||
else { |
||||
elem.src = src; |
||||
} |
||||
|
||||
elem.removeAttribute('data-echo-placeholder'); |
||||
callback(elem, 'unload'); |
||||
} |
||||
} |
||||
if (!length) { |
||||
echo.detach(); |
||||
} |
||||
}; |
||||
|
||||
echo.detach = function () { |
||||
if (document.removeEventListener) { |
||||
root.removeEventListener('scroll', debounceOrThrottle); |
||||
} else { |
||||
root.detachEvent('onscroll', debounceOrThrottle); |
||||
} |
||||
clearTimeout(poll); |
||||
}; |
||||
|
||||
return echo; |
||||
|
||||
}); |
||||
@ -1,2 +0,0 @@
|
||||
/*! echo.js v1.7.0 | (c) 2015 @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,a={},u=function(){},d=function(t){return null===t.offsetParent},i=function(t,e){if(d(t))return!1;var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},l=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,i=n.offsetVertical||d,f=n.offsetHorizontal||d,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,i),b:s(n.offsetBottom,i),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,u=n.callback||u,a.render(),document.addEventListener?(t.addEventListener("scroll",l,!1),t.addEventListener("load",l,!1)):(t.attachEvent("onscroll",l),t.attachEvent("onload",l))},a.render=function(){for(var n,o,r=document.querySelectorAll("img[data-echo], [data-echo-background]"),d=r.length,l={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],i(o,l)?(c&&o.setAttribute("data-echo-placeholder",o.src),null!==o.getAttribute("data-echo-background")?o.style.backgroundImage="url("+o.getAttribute("data-echo-background")+")":o.src=o.getAttribute("data-echo"),c||(o.removeAttribute("data-echo"),o.removeAttribute("data-echo-background")),u(o,"load")):c&&(n=o.getAttribute("data-echo-placeholder"))&&(null!==o.getAttribute("data-echo-background")?o.style.backgroundImage="url("+n+")":o.src=n,o.removeAttribute("data-echo-placeholder"),u(o,"unload"));d||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",l):t.detachEvent("onscroll",l),clearTimeout(n)},a}); |
||||
@ -1,68 +0,0 @@
|
||||
var gulp = require('gulp'), |
||||
karma = require('gulp-karma'), |
||||
jshint = require('gulp-jshint'), |
||||
stylish = require('jshint-stylish'), |
||||
header = require('gulp-header'), |
||||
uglify = require('gulp-uglify'), |
||||
plumber = require('gulp-plumber'), |
||||
clean = require('gulp-clean'), |
||||
rename = require('gulp-rename'), |
||||
package = require('./package.json'); |
||||
|
||||
var paths = { |
||||
output : 'dist/', |
||||
scripts : [ |
||||
'src/echo.js' |
||||
], |
||||
test: [ |
||||
'test/spec/**/*.js' |
||||
] |
||||
}; |
||||
|
||||
var banner = [ |
||||
'/*! ', |
||||
'<%= package.name %> ', |
||||
'v<%= package.version %> | ', |
||||
'(c) ' + new Date().getFullYear() + ' <%= package.author %> |', |
||||
' <%= package.homepage %>', |
||||
' */', |
||||
'\n' |
||||
].join(''); |
||||
|
||||
gulp.task('scripts', ['clean'], function() { |
||||
return gulp.src(paths.scripts) |
||||
.pipe(plumber()) |
||||
.pipe(header(banner, { package : package })) |
||||
.pipe(gulp.dest('dist/')) |
||||
.pipe(rename({ suffix: '.min' })) |
||||
.pipe(uglify()) |
||||
.pipe(header(banner, { package : package })) |
||||
.pipe(gulp.dest('dist/')); |
||||
}); |
||||
|
||||
gulp.task('lint', function () { |
||||
return gulp.src(paths.scripts) |
||||
.pipe(plumber()) |
||||
.pipe(jshint()) |
||||
.pipe(jshint.reporter('jshint-stylish')); |
||||
}); |
||||
|
||||
gulp.task('clean', function () { |
||||
return gulp.src(paths.output, { read: false }) |
||||
.pipe(plumber()) |
||||
.pipe(clean()); |
||||
}); |
||||
|
||||
gulp.task('test', function() { |
||||
return gulp.src(paths.scripts.concat(paths.test)) |
||||
.pipe(plumber()) |
||||
.pipe(karma({ configFile: 'test/karma.conf.js' })) |
||||
.on('error', function(err) { throw err; }); |
||||
}); |
||||
|
||||
gulp.task('default', [ |
||||
'lint', |
||||
'clean', |
||||
'scripts', |
||||
'test' |
||||
]); |
||||
@ -1,26 +1,13 @@
|
||||
{ |
||||
"name": "echo.js", |
||||
"version": "1.7.0", |
||||
"name": "sloth", |
||||
"version": "0.0.0", |
||||
"description": "Lazy-loading with data-* attributes, offset and throttle options", |
||||
"author": "@toddmotto", |
||||
"author": "anunez", |
||||
"license": "MIT", |
||||
"homepage": "https://github.com/toddmotto/echo", |
||||
"homepage": "https://github.com/anunez/sloth", |
||||
"devDependencies": { |
||||
"gulp": "~3.7.0", |
||||
"gulp-uglify": "~0.3.0", |
||||
"gulp-rename": "~1.1.0", |
||||
"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", |
||||
"karma": "^0.12.16", |
||||
"karma-jasmine": "~0.2.0", |
||||
"karma-phantomjs-launcher": "^0.1.4", |
||||
"karma-spec-reporter": "0.0.13" |
||||
}, |
||||
"spm": { |
||||
"main": "src/echo.js" |
||||
"jshint": "^2.6.3", |
||||
"jshint-stylish": "^1.0.1", |
||||
"uglify-js": "^2.4.19" |
||||
} |
||||
} |
||||
|
||||
@ -1,134 +0,0 @@
|
||||
(function (root, factory) { |
||||
if (typeof define === 'function' && define.amd) { |
||||
define(function() { |
||||
return factory(root); |
||||
}); |
||||
} else if (typeof exports === 'object') { |
||||
module.exports = factory; |
||||
} else { |
||||
root.echo = factory(root); |
||||
} |
||||
})(this, function (root) { |
||||
|
||||
'use strict'; |
||||
|
||||
var echo = {}; |
||||
|
||||
var callback = function () {}; |
||||
|
||||
var offset, poll, delay, useDebounce, unload; |
||||
|
||||
var isHidden = function (element) { |
||||
return (element.offsetParent === null); |
||||
}; |
||||
|
||||
var inView = function (element, view) { |
||||
if (isHidden(element)) { |
||||
return false; |
||||
} |
||||
|
||||
var box = element.getBoundingClientRect(); |
||||
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); |
||||
}; |
||||
|
||||
var debounceOrThrottle = function () { |
||||
if(!useDebounce && !!poll) { |
||||
return; |
||||
} |
||||
clearTimeout(poll); |
||||
poll = setTimeout(function(){ |
||||
echo.render(); |
||||
poll = null; |
||||
}, delay); |
||||
}; |
||||
|
||||
echo.init = function (opts) { |
||||
opts = opts || {}; |
||||
var offsetAll = opts.offset || 0; |
||||
var offsetVertical = opts.offsetVertical || offsetAll; |
||||
var offsetHorizontal = opts.offsetHorizontal || offsetAll; |
||||
var optionToInt = function (opt, fallback) { |
||||
return parseInt(opt || fallback, 10); |
||||
}; |
||||
offset = { |
||||
t: optionToInt(opts.offsetTop, offsetVertical), |
||||
b: optionToInt(opts.offsetBottom, offsetVertical), |
||||
l: optionToInt(opts.offsetLeft, offsetHorizontal), |
||||
r: optionToInt(opts.offsetRight, offsetHorizontal) |
||||
}; |
||||
delay = optionToInt(opts.throttle, 250); |
||||
useDebounce = opts.debounce !== false; |
||||
unload = !!opts.unload; |
||||
callback = opts.callback || callback; |
||||
echo.render(); |
||||
if (document.addEventListener) { |
||||
root.addEventListener('scroll', debounceOrThrottle, false); |
||||
root.addEventListener('load', debounceOrThrottle, false); |
||||
} else { |
||||
root.attachEvent('onscroll', debounceOrThrottle); |
||||
root.attachEvent('onload', debounceOrThrottle); |
||||
} |
||||
}; |
||||
|
||||
echo.render = function () { |
||||
var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]'); |
||||
var length = nodes.length; |
||||
var src, elem; |
||||
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 |
||||
}; |
||||
for (var i = 0; i < length; i++) { |
||||
elem = nodes[i]; |
||||
if (inView(elem, view)) { |
||||
|
||||
if (unload) { |
||||
elem.setAttribute('data-echo-placeholder', elem.src); |
||||
} |
||||
|
||||
if (elem.getAttribute('data-echo-background') !== null) { |
||||
elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")"; |
||||
} |
||||
else { |
||||
elem.src = elem.getAttribute('data-echo'); |
||||
} |
||||
|
||||
if (!unload) { |
||||
elem.removeAttribute('data-echo'); |
||||
elem.removeAttribute('data-echo-background'); |
||||
} |
||||
|
||||
callback(elem, 'load'); |
||||
} |
||||
else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) { |
||||
|
||||
if (elem.getAttribute('data-echo-background') !== null) { |
||||
elem.style.backgroundImage = "url(" + src + ")"; |
||||
} |
||||
else { |
||||
elem.src = src; |
||||
} |
||||
|
||||
elem.removeAttribute('data-echo-placeholder'); |
||||
callback(elem, 'unload'); |
||||
} |
||||
} |
||||
if (!length) { |
||||
echo.detach(); |
||||
} |
||||
}; |
||||
|
||||
echo.detach = function () { |
||||
if (document.removeEventListener) { |
||||
root.removeEventListener('scroll', debounceOrThrottle); |
||||
} else { |
||||
root.detachEvent('onscroll', debounceOrThrottle); |
||||
} |
||||
clearTimeout(poll); |
||||
}; |
||||
|
||||
return echo; |
||||
|
||||
}); |
||||
@ -0,0 +1,154 @@
|
||||
(function (window) { |
||||
'use strict'; |
||||
|
||||
var DATA_SRC = 'data-src'; |
||||
var DATA_SRC_BG = 'data-src-bg'; |
||||
var DATA_PLACEHOLDER = 'data-sloth'; |
||||
|
||||
var callback; |
||||
var offset; |
||||
var poll; |
||||
var delay; |
||||
var useDebounce; |
||||
var unload; |
||||
|
||||
var inView = function (element, view) { |
||||
if (element.offsetParent === null) { |
||||
return false; |
||||
} |
||||
|
||||
var box = element.getBoundingClientRect(); |
||||
return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); |
||||
}; |
||||
|
||||
var debounceOrThrottle = function () { |
||||
if (!useDebounce && !!poll) { |
||||
return; |
||||
} |
||||
clearTimeout(poll); |
||||
poll = setTimeout(function () { |
||||
render(); |
||||
poll = null; |
||||
}, delay); |
||||
}; |
||||
|
||||
var addListener = function(type, listener) { |
||||
if (document.addEventListener) { |
||||
window.addEventListener(type, listener); |
||||
} else { |
||||
window.attachEvent('on' + type, listener); |
||||
} |
||||
}; |
||||
|
||||
var removeListener = function(type, listener) { |
||||
if (document.removeEventListener) { |
||||
window.removeEventListener(type, listener); |
||||
} else { |
||||
window.detachEvent(type, listener); |
||||
} |
||||
}; |
||||
|
||||
var render = function () { |
||||
var nodes = document.querySelectorAll('img[' + DATA_SRC + '], [' + DATA_SRC_BG + ']'); |
||||
var length = nodes.length; |
||||
|
||||
if (!length) { |
||||
detach(); |
||||
return; |
||||
} |
||||
|
||||
var src; |
||||
var elem; |
||||
var view = { |
||||
l: 0 - offset.l, |
||||
t: 0 - offset.t, |
||||
b: (window.innerHeight || document.documentElement.clientHeight) + offset.b, |
||||
r: (window.innerWidth || document.documentElement.clientWidth) + offset.r |
||||
}; |
||||
|
||||
for (var i = 0; i < length; i++) { |
||||
elem = nodes[i]; |
||||
|
||||
if (inView(elem, view)) { |
||||
|
||||
if (unload) { |
||||
elem.setAttribute(DATA_PLACEHOLDER, elem.src); |
||||
} |
||||
|
||||
if (elem.getAttribute(DATA_SRC_BG) !== null) { |
||||
elem.style.backgroundImage = 'url(' + elem.getAttribute(DATA_SRC_BG) + ')'; |
||||
} else { |
||||
elem.src = elem.getAttribute(DATA_SRC); |
||||
} |
||||
|
||||
if (!unload) { |
||||
elem.removeAttribute(DATA_SRC); |
||||
elem.removeAttribute(DATA_SRC_BG); |
||||
} |
||||
|
||||
callback(elem, 'load'); |
||||
} else if (unload && !!(src = elem.getAttribute(DATA_PLACEHOLDER))) { |
||||
|
||||
if (elem.getAttribute(DATA_SRC_BG) !== null) { |
||||
elem.style.backgroundImage = 'url(' + src + ')'; |
||||
} else { |
||||
elem.src = src; |
||||
} |
||||
|
||||
elem.removeAttribute(DATA_PLACEHOLDER); |
||||
callback(elem, 'unload'); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var detach = function () { |
||||
removeListener('scroll', debounceOrThrottle); |
||||
removeListener('resize', debounceOrThrottle); |
||||
|
||||
clearTimeout(poll); |
||||
}; |
||||
|
||||
var optionToInt = function (opt, fallback) { |
||||
return parseInt(opt || fallback, 10); |
||||
}; |
||||
|
||||
var sloth = { |
||||
init: function (opts) { |
||||
opts = opts || {}; |
||||
var offsetAll = opts.offset || 0; |
||||
var offsetVertical = opts.offsetVertical || offsetAll; |
||||
var offsetHorizontal = opts.offsetHorizontal || offsetAll; |
||||
|
||||
offset = { |
||||
t: optionToInt(opts.offsetTop, offsetVertical), |
||||
b: optionToInt(opts.offsetBottom, offsetVertical), |
||||
l: optionToInt(opts.offsetLeft, offsetHorizontal), |
||||
r: optionToInt(opts.offsetRight, offsetHorizontal) |
||||
}; |
||||
delay = optionToInt(opts.throttle, 250); |
||||
useDebounce = opts.debounce !== false; |
||||
unload = !!opts.unload; |
||||
callback = opts.callback || function() {}; |
||||
|
||||
render(); |
||||
|
||||
addListener('scroll', debounceOrThrottle); |
||||
addListener('load', debounceOrThrottle); |
||||
addListener('resize', debounceOrThrottle); |
||||
}, |
||||
|
||||
render: function() { |
||||
render(); |
||||
}, |
||||
|
||||
detach: function() { |
||||
detach(); |
||||
} |
||||
}; |
||||
|
||||
if (typeof exports === 'object') { |
||||
module.exports = sloth; |
||||
} else { |
||||
window.sloth = sloth; |
||||
} |
||||
})(window); |
||||
@ -1,14 +0,0 @@
|
||||
module.exports = function (config) { |
||||
config.set({ |
||||
basePath : '', |
||||
autoWatch : true, |
||||
frameworks: ['jasmine'], |
||||
browsers : ['PhantomJS'], |
||||
plugins : [ |
||||
'karma-spec-reporter', |
||||
'karma-phantomjs-launcher', |
||||
'karma-jasmine' |
||||
], |
||||
reporters : ['spec'] |
||||
}); |
||||
}; |
||||
Loading…
Reference in new issue