From 9921a9f10d8e0ac9d9713a9d65cfd799b3fa1917 Mon Sep 17 00:00:00 2001 From: Todd Motto Date: Fri, 30 May 2014 21:52:05 +0100 Subject: [PATCH] Small cleanups, improved structure, reduce size --- .jshintrc | 13 ++-- README.md | 39 ++++------- dist/echo.js | 167 +++++++++++++++++------------------------------ dist/echo.min.js | 4 +- package.json | 4 +- src/echo.js | 165 +++++++++++++++++----------------------------- 6 files changed, 145 insertions(+), 247 deletions(-) diff --git a/.jshintrc b/.jshintrc index 1d35ce1..c023fbf 100644 --- a/.jshintrc +++ b/.jshintrc @@ -4,18 +4,19 @@ "esnext": true, "bitwise": true, "camelcase": true, - "curly": true, + "curly": false, "eqeqeq": true, - "immed": true, "indent": 2, + "immed": true, "latedef": true, "newcap": true, "noarg": true, "quotmark": "single", "regexp": true, "undef": true, - "unused": true, - "strict": true, - "trailing": true, - "smarttabs": true + "unused": false, + "trailing": false, + "globals" : { + "define": true + } } diff --git a/README.md b/README.md index 53df7ed..9194dd7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Echo [![Build Status](https://travis-ci.org/toddmotto/echo.png)](https://travis-ci.org/toddmotto/echo) -Echo is a standalone JavaScript lazy-loading image tool. Echo is fast, less than 1KB and uses HTML5 data-* attributes. Check out a [demo](http://toddmotto.com/labs/echo). Echo works in IE8+. +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+. ``` bower install echojs @@ -15,19 +15,21 @@ Using Echo.js is simple, just add the image you wish to load to a `data-echo` a ``` -## .init() API (options) +## .init() (options) The `init()` API takes a few options @@ -83,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({ +echo.init({ callback: function(element, op) { if(op === 'load') { elemend.classList.add('loaded'); @@ -94,16 +96,15 @@ Echo.init({ }); ``` - -## .render() API +## .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: ```js -Echo.render(); +echo.render(); ``` -Using `render()` is also throttled, which means you can bind it to a `window.onresize` event and it will be optimised for performance in the same way `window.onscroll` is. +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. ## 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. @@ -115,22 +116,8 @@ Add the image that needs to load when it's visible inside the viewport in a `dat Photo ``` -## Scaffolding -Project files and folder structure. - -``` -├── dist/ -│ ├── echo.js -│ └── echo.min.js -├── src/ -│ └── echo.js -├── .editorconfig -├── .gitignore -├── .jshintrc -├── .travis.yml -├── Gruntfile.js -└── package.json -``` +## 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 Grunt. ## License MIT license diff --git a/dist/echo.js b/dist/echo.js index f4497e5..bb72319 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -1,102 +1,40 @@ -/*! Echo v1.5.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */ -window.Echo = (function (global, document, undefined) { +/*! echo.js v1.6.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(factory); + } else if (typeof exports === 'object') { + module.exports = factory; + } else { + root.echo = factory(root); + } +})(this, function (root) { 'use strict'; - /** - * callback - initialized to a no-op so that no validations on it's presence need to be made - * @type {Function} - */ - var callback = function(){}; + var exports = {}; - /** - * offset, throttle, poll, unload vars - */ - var offset, throttle, poll, unload; + var callback = function () {}; - /** - * _inView - * @private - * @param {Element} element Image element - * @returns {Boolean} Is element in viewport - */ - var _inView = function (element, view) { + var offset, poll, throttle, unload; + + var inView = function (element, view) { var box = element.getBoundingClientRect(); return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); }; - /** - * _pollImages Loop through the images if present - * or remove all event listeners - * @private - */ - var _pollImages = function () { - var src, - i, - elem, - view, - nodes = document.querySelectorAll('img[data-echo]'), - length = nodes.length; - 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(i=0; i=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},i=function(){var a,d,e,i,j=b.querySelectorAll("img[data-echo]"),k=j.length;for(i={l:0-c.l,t:0-c.t,b:(window.innerHeight||b.documentElement.clientHeight)+c.b,r:(window.innerWidth||b.documentElement.clientWidth)+c.r},d=0;k>d;d++)e=j[d],h(e,i)?(f&&e.setAttribute("data-echo-placeholder",e.src),e.src=e.getAttribute("data-echo"),f||e.removeAttribute("data-echo"),g(e,"load")):f&&(a=e.getAttribute("data-echo-placeholder"))&&(e.src=a,e.removeAttribute("data-echo-placeholder"),g(e,"unload"));k||l()},j=function(){clearTimeout(e),e=setTimeout(i,d)},k=function(e){function h(a,b){return parseInt(a||b,10)}e=e||{};var k=e.offset||0,l=e.offsetVertical||k,m=e.offsetHorizontal||k;c={t:h(e.offsetTop,l),b:h(e.offsetBottom,l),l:h(e.offsetLeft,m),r:h(e.offsetRight,m)},d=h(e.throttle,250),f=!!e.unload,g=e.callback||g,i(),b.addEventListener?(a.addEventListener("scroll",j,!1),a.addEventListener("load",j,!1)):(a.attachEvent("onscroll",j),a.attachEvent("onload",j))},l=function(){b.removeEventListener?a.removeEventListener("scroll",j):a.detachEvent("onscroll",j),clearTimeout(e)};return{init:k,detach:l,render:i}}(this,document); \ No newline at end of file +/*! echo.js v1.6.0 | (c) 2014 @toddmotto | MIT license | github.com/toddmotto/echo */ +!function(a,b){"function"==typeof define&&define.amd?define(b):"object"==typeof exports?module.exports=b:a.echo=b(a)}(this,function(a){"use strict";var b,c,d,e,f={},g=function(){},h=function(a,b){var c=a.getBoundingClientRect();return c.right>=b.l&&c.bottom>=b.t&&c.left<=b.r&&c.top<=b.b},i=function(){clearTimeout(c),c=setTimeout(f.render,d)};return f.init=function(c){c=c||{};var h=c.offset||0,j=c.offsetVertical||h,k=c.offsetHorizontal||h,l=function(a,b){return parseInt(a||b,10)};b={t:l(c.offsetTop,j),b:l(c.offsetBottom,j),l:l(c.offsetLeft,k),r:l(c.offsetRight,k)},d=l(c.throttle,250),e=!!c.unload,g=c.callback||g,f.render(),document.addEventListener?(a.addEventListener("scroll",i,!1),a.addEventListener("load",i,!1)):(a.attachEvent("onscroll",i),a.attachEvent("onload",i))},f.render=function(){for(var c,d,i=document.querySelectorAll("img[data-echo]"),j=i.length,k={l:0-b.l,t:0-b.t,b:(a.innerHeight||document.documentElement.clientHeight)+b.b,r:(a.innerWidth||document.documentElement.clientWidth)+b.r},l=0;j>l;l++)d=i[l],h(d,k)?(e&&d.setAttribute("data-echo-placeholder",d.src),d.src=d.getAttribute("data-echo"),e||d.removeAttribute("data-echo"),g(d,"load")):e&&(c=d.getAttribute("data-echo-placeholder"))&&(d.src=c,d.removeAttribute("data-echo-placeholder"),g(d,"unload"));j||f.detach()},f.detach=function(){document.removeEventListener?a.removeEventListener("scroll",i):a.detachEvent("onscroll",i),clearTimeout(c)},f}); \ No newline at end of file diff --git a/package.json b/package.json index acd1c32..59a6704 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "Echo", - "version": "1.5.0", + "name": "echo.js", + "version": "1.6.0", "homepage": "https://github.com/toddmotto/echo", "author": "Todd Motto", "description": "Lazy-loading with data-* attributes, offset and throttle options", diff --git a/src/echo.js b/src/echo.js index c7f4268..309db2a 100644 --- a/src/echo.js +++ b/src/echo.js @@ -1,101 +1,39 @@ -window.Echo = (function (global, document, undefined) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define(factory); + } else if (typeof exports === 'object') { + module.exports = factory; + } else { + root.echo = factory(root); + } +})(this, function (root) { 'use strict'; - /** - * callback - initialized to a no-op so that no validations on it's presence need to be made - * @type {Function} - */ - var callback = function(){}; + var exports = {}; - /** - * offset, throttle, poll, unload vars - */ - var offset, throttle, poll, unload; + var callback = function () {}; - /** - * _inView - * @private - * @param {Element} element Image element - * @returns {Boolean} Is element in viewport - */ - var _inView = function (element, view) { + var offset, poll, throttle, unload; + + var inView = function (element, view) { var box = element.getBoundingClientRect(); return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b); }; - /** - * _pollImages Loop through the images if present - * or remove all event listeners - * @private - */ - var _pollImages = function () { - var src, - i, - elem, - view, - nodes = document.querySelectorAll('img[data-echo]'), - length = nodes.length; - 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(i=0; i