From eb7619958b41de83fe6848ec1435532e410afc0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20N=C3=BA=C3=B1ez?= Date: Thu, 26 Mar 2015 15:38:09 +0100 Subject: [PATCH] Refactor into sloth-js --- .gitignore | 19 +---- .spmignore | 2 - .travis.yml | 7 -- Makefile | 26 +++++++ README.md | 52 ++++++-------- dist/echo.js | 135 ------------------------------------ dist/echo.min.js | 2 - gulpfile.js | 68 ------------------ package.json | 27 ++------ src/echo.js | 134 ----------------------------------- src/sloth.js | 154 +++++++++++++++++++++++++++++++++++++++++ test/karma.conf.js | 14 ---- test/spec/spec-echo.js | 9 --- 13 files changed, 210 insertions(+), 439 deletions(-) delete mode 100644 .spmignore delete mode 100755 .travis.yml create mode 100644 Makefile delete mode 100644 dist/echo.js delete mode 100644 dist/echo.min.js delete mode 100755 gulpfile.js delete mode 100644 src/echo.js create mode 100644 src/sloth.js delete mode 100755 test/karma.conf.js delete mode 100755 test/spec/spec-echo.js diff --git a/.gitignore b/.gitignore index 67f9a40..1eae0cf 100644 --- a/.gitignore +++ b/.gitignore @@ -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/ diff --git a/.spmignore b/.spmignore deleted file mode 100644 index ecfc81b..0000000 --- a/.spmignore +++ /dev/null @@ -1,2 +0,0 @@ -dist -test diff --git a/.travis.yml b/.travis.yml deleted file mode 100755 index b8a09e1..0000000 --- a/.travis.yml +++ /dev/null @@ -1,7 +0,0 @@ -language: node_js -node_js: - - "0.10" - - "0.11" -before_script: - - npm install -g gulp -script: gulp diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..c70598c --- /dev/null +++ b/Makefile @@ -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 + diff --git a/README.md b/README.md index 3c82e54..54c284d 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,17 @@ -# Echo.js [![Build Status](https://travis-ci.org/toddmotto/echo.svg)](https://travis-ci.org/toddmotto/echo) +# Sloth -Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple. Check out a [demo](http://toddmotto.com/labs/echo). Echo works in IE8+. +Sloth is a standalone JavaScript lazy-loading image micro-library. Sloth is fast, 1.6KB (900B gzipped), and uses HTML5 data-* attributes for simple. Sloth works in IE8+. -``` -bower install echojs -``` - -Using Echo.js is simple, to add an image directly into the page simply add a `data-echo` attribute to the img tag. Alternatively if you want to use Echo to lazy load background images simply add a `data-echo-background' attribute to the element with the image URL. +Using Sloth is simple, to add an image directly into the page simply add a `data-src` attribute to the img tag. Alternatively if you want to use Sloth to lazy load background images simply add a `data-src-bg` attribute to the element with the image URL. ```html - Photo + Photo - + ``` @@ -36,37 +32,37 @@ The `init()` API takes a few options #### offset Type: `Number|String` Default: `0` -The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want Echo to _begin_ loading your images. If you specify `0`, Echo will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. +The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want Sloth to _begin_ loading your images. If you specify `0`, Sloth will load your image as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`. #### offsetVertical Type: `Number|String` Default: `offset`'s value -The `offsetVertical` option allows you to specify how far above and below the viewport you want Echo to _begin_ loading your images. +The `offsetVertical` option allows you to specify how far above and below the viewport you want Sloth to _begin_ loading your images. #### offsetHorizontal Type: `Number|String` Default: `offset`'s value -The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want Echo to _begin_ loading your images. +The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want Sloth to _begin_ loading your images. #### offsetTop Type: `Number|String` Default: `offsetVertical`'s value -The `offsetTop` option allows you to specify how far above the viewport you want Echo to _begin_ loading your images. +The `offsetTop` option allows you to specify how far above the viewport you want Sloth to _begin_ loading your images. #### offsetBottom Type: `Number|String` Default: `offsetVertical`'s value -The `offsetBottom` option allows you to specify how far below the viewport you want Echo to _begin_ loading your images. +The `offsetBottom` option allows you to specify how far below the viewport you want Sloth to _begin_ loading your images. #### offsetLeft Type: `Number|String` Default: `offsetVertical`'s value -The `offsetLeft` option allows you to specify how far to left of the viewport you want Echo to _begin_ loading your images. +The `offsetLeft` option allows you to specify how far to left of the viewport you want Sloth to _begin_ loading your images. #### offsetRight Type: `Number|String` Default: `offsetVertical`'s value -The `offsetRight` option allows you to specify how far to the right of the viewport you want Echo to _begin_ loading your images. +The `offsetRight` option allows you to specify how far to the right of the viewport you want Sloth to _begin_ loading your images. #### throttle Type: `Number|String` Default: `250` @@ -81,7 +77,7 @@ By default the throttling function is actually a [debounce](http://underscorejs. #### unload Type: `Boolean` Default: `false` -This option will tell echo to unload loaded images once they have scrolled beyond the viewport (including the offset area). +This option will tell Sloth to unload loaded images once they have scrolled beyond the viewport (including the offset area). #### callback Type: `Function` @@ -89,7 +85,7 @@ Type: `Function` The callback will be passed the element that has been updated and what the update operation was (ie `load` or `unload`). This can be useful if you want to add a class like `loaded` to the element. Or do some logging. ```js -echo.init({ +sloth.init({ callback: function(element, op) { if(op === 'load') { element.classList.add('loaded'); @@ -102,10 +98,10 @@ echo.init({ ## .render() -Echo's callback `render()` can be used to make Echo poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use `render()` for this: +Sloth's callback `render()` can be used to make Sloth poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use `render()` for this: ```js -echo.render(); +sloth.render(); ``` Using `render()` is also throttled, which means you can bind it to an `onresize` event and it will be optimised for performance in the same way `onscroll` is. @@ -113,15 +109,9 @@ Using `render()` is also throttled, which means you can bind it to an `onresize` ## Manual installation Drop your files into your required folders, make sure you're using the file(s) from the `dist` folder, which is the compiled production-ready code. Ensure you place the script before the closing `` tag so the DOM tree is populated when the script runs. -## Configuring Echo -Add the image that needs to load when it's visible inside the viewport in a `data-echo` attribute: +## Configuring Sloth +Add the image that needs to load when it's visible inside the viewport in a `data-src` attribute: ```html -Photo +Photo ``` - -## Contributing -In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp. - -## License -MIT license diff --git a/dist/echo.js b/dist/echo.js deleted file mode 100644 index 1093dd4..0000000 --- a/dist/echo.js +++ /dev/null @@ -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; - -}); diff --git a/dist/echo.min.js b/dist/echo.min.js deleted file mode 100644 index 5189bd3..0000000 --- a/dist/echo.min.js +++ /dev/null @@ -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}); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100755 index b46559d..0000000 --- a/gulpfile.js +++ /dev/null @@ -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' -]); diff --git a/package.json b/package.json index da5db9d..3f187bf 100755 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/echo.js b/src/echo.js deleted file mode 100644 index f307e8f..0000000 --- a/src/echo.js +++ /dev/null @@ -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; - -}); diff --git a/src/sloth.js b/src/sloth.js new file mode 100644 index 0000000..a150a8e --- /dev/null +++ b/src/sloth.js @@ -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); diff --git a/test/karma.conf.js b/test/karma.conf.js deleted file mode 100755 index a602348..0000000 --- a/test/karma.conf.js +++ /dev/null @@ -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'] - }); -}; diff --git a/test/spec/spec-echo.js b/test/spec/spec-echo.js deleted file mode 100755 index 143080f..0000000 --- a/test/spec/spec-echo.js +++ /dev/null @@ -1,9 +0,0 @@ -describe('echo.js', function () { - - describe('init', function () { - it('should be defined', function () { - expect(!!echo).toBe(true); - }); - }); - -});