From 9d07ee076c111fd6b87d7bbab629ef794c0c8fef Mon Sep 17 00:00:00 2001 From: Todd Motto Date: Sat, 16 Nov 2013 16:29:37 +0000 Subject: [PATCH] Echo.js v1.2.0 --- .editorconfig | 2 - .gitignore | 17 ++++- .jshintrc | 3 +- Gruntfile.js | 167 ++++++++++++++++++++++++++--------------------- README.md | 10 ++- dist/echo.js | 97 +++++++-------------------- dist/echo.min.js | 12 ++-- package.json | 37 +++++++---- src/echo.js | 87 ++++++------------------ 9 files changed, 187 insertions(+), 245 deletions(-) mode change 100755 => 100644 src/echo.js diff --git a/.editorconfig b/.editorconfig index 04ba039..52e2bfd 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,5 +1,3 @@ -# EditorConfig helps developers define and maintain consistent -# coding styles between different editors and IDEs # editorconfig.org root = true diff --git a/.gitignore b/.gitignore index 4c8e43e..67f9a40 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,17 @@ +# Node node_modules + +## OS X .DS_Store -.tmp -.sass-cache +.AppleDouble +.LSOverride +Icon +._* +.Spotlight-V100 +.Trashes + +## Windows +Thumbs.db +ehthumbs.db +Desktop.ini +$RECYCLE.BIN/ diff --git a/.jshintrc b/.jshintrc index 493798b..1d35ce1 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,7 +1,6 @@ { "node": true, "browser": true, - "es5": true, "esnext": true, "bitwise": true, "camelcase": true, @@ -17,6 +16,6 @@ "undef": true, "unused": true, "strict": true, - "trailing": false, + "trailing": true, "smarttabs": true } diff --git a/Gruntfile.js b/Gruntfile.js index 1219450..0f661fa 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,87 +1,104 @@ -/*! - * Gruntfile.js configuration +/* + * Gruntfile.js + * @author Todd Motto + * @version 1.0.0 */ 'use strict'; -module.exports = function ( grunt ) { +var LIVERELOAD_PORT = 35729; - /* - * Dynamically load the npm tasks - */ - require( 'matchdep' ).filterDev('grunt-*').forEach( grunt.loadNpmTasks ); +var lrSnippet = require('connect-livereload')({ + port: LIVERELOAD_PORT +}); - /* - * Grunt init - */ - grunt.initConfig({ +var mountFolder = function (connect, dir) { + return connect.static(require('path').resolve(dir)); +}; - /* - * Grunt JSON for project - */ - pkg: grunt.file.readJSON( 'package.json' ), +module.exports = function (grunt) { - /* - * Credit banner - */ - tag: { - banner: "/*!\n" + - " * <%= pkg.title %>\n" + - " * @version <%= pkg.version %>\n" + - " * @author <%= pkg.author[0].name %> <%= pkg.author[1].url %>\n" + - " * Project: <%= pkg.homepage %>\n" + - " *\n" + - " * <%= pkg.description %>\n" + - " * Copyright <%= pkg.year %>." + - " <%= pkg.licenses[0].type %> licensed.\n" + - " */\n" - }, - - /* - * jsHint - */ - jshint: { - files: ["src/echo.js"], - options: { - jshintrc: ".jshintrc" - } - }, + require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); - /* - * Concat - */ - concat: { - dist: { - src: ["src/echo.js"], - dest: "dist/echo.js" - }, - options: { - banner: "<%= tag.banner %>" - } - }, - - /* - * UglifyJS - */ - uglify: { - files: { - src: ["dist/echo.js"], - dest: "dist/echo.min.js" - }, - options: { - banner: "<%= tag.banner %>" - } + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + project: { name: 'echo' }, + connect: { + options: { + port: 9000, + hostname: 'localhost' + }, + livereload: { + options: { + middleware: function (connect) { + return [lrSnippet, mountFolder(connect, 'dist')]; + } } + } + }, + tag: { + banner: '/*!\n' + + ' * <%= pkg.name %> v<%= pkg.version %>\n' + + ' * <%= pkg.description %>\n' + + ' * Project: <%= pkg.homepage %>\n' + + ' * by <%= pkg.author.name %>: <%= pkg.author.url %>\n' + + ' * Copyright.' + + ' <%= pkg.licenses[0].type %> licensed.\n' + + ' */\n' + }, + jshint: { + options: { + jshintrc: '.jshintrc' + }, + files: 'src/<%= project.name %>.js', + }, + concat: { + dist: { + src: ['src/<%= project.name %>.js'], + dest: 'dist/<%= project.name %>.js' + }, + options: { + banner: '<%= tag.banner %>' + } + }, + uglify: { + files: { + src: ['dist/<%= project.name %>.js'], + dest: 'dist/<%= project.name %>.min.js' + }, + options: { + banner: '<%= tag.banner %>' + } + }, + open: { + server: { + path: 'http://localhost:<%= connect.options.port %>' + } + }, + watch: { + concat: { + files: 'src/{,*/}*.js', + tasks: ['concat:dist', 'uglify'] + }, + livereload: { + options: { + livereload: LIVERELOAD_PORT + }, + files: [ + '{,*/}*.html', + 'dist/{,*/}*.js' + ] + } + } + }); - }); - - /* - * Register tasks - */ - grunt.registerTask("default", [ - "jshint", - "concat", - "uglify" - ]); + grunt.registerTask('default' , [ + 'jshint', + 'concat:dist', + 'uglify', + 'connect:livereload', + 'open', + 'watch' + ]); -}; \ No newline at end of file +}; diff --git a/README.md b/README.md index fc0c3c3..6f1a295 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, simple JavaScript image lazy-loading, no jQuery! Super fast and easy. +Echo is a standalone JavaScript lazy-loading image tool. Echo is fast, less than 1KB and uses HTML5 data-* attributes. ```html Photo @@ -23,11 +23,15 @@ Drop your files into your required folders, make sure you're using the file(s) f + ``` ## Configuring Echo -Echo config is super-simple, just add the image that needs to load when visible in a `data-echo` attribute: +Add the image that needs to load when visible in a `data-echo` attribute: ```html Photo @@ -51,4 +55,4 @@ Project files and folder structure. ``` ## License -MIT license \ No newline at end of file +MIT license diff --git a/dist/echo.js b/dist/echo.js index b141999..aa275c8 100644 --- a/dist/echo.js +++ b/dist/echo.js @@ -1,92 +1,41 @@ /*! - * Echo - * @version 1.1.0 - * @author Todd Motto http://toddmotto.com + * Echo v1.2.0 + * Lazy-loading images with data-* attributes * Project: https://github.com/toddmotto/echo - * - * Raw JavaScript lazy-loading images with HTML5 data-* attributes. - * Copyright 2013. MIT licensed. + * by Todd Motto: http://toddmotto.com + * Copyright. MIT licensed. */ -window.echo = (function (window, document, undefined) { +window.Echo = (function (window, document, undefined) { 'use strict'; - /* - * Constructor function - */ - var Echo = function (elem) { - this.elem = elem; - }; - - /* - * Images for echoing - */ - var echoStore = []; + var store; - /* - * Element in viewport logic - */ - var scrolledIntoView = function (element) { - var coords = element.getBoundingClientRect(); + var _inView = function (img) { + var coords = img.getBoundingClientRect(); return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight)); }; - /* - * Changing src attr logic - */ - var echoSrc = function (img, callback) { - img.src = img.getAttribute('data-echo'); - if (callback) { - callback(); - } - }; - - /* - * Remove loaded item from array - */ - var removeEcho = function (element, index) { - if (echoStore.indexOf(element) !== -1) { - echoStore.splice(index, 1); - } - }; - - /* - * Echo the images and callbacks - */ - var echoImages = function () { - for (var i = 0; i < echoStore.length; i++) { - var self = echoStore[i]; - if (scrolledIntoView(self)) { - echoSrc(self, removeEcho(self, i)); + var _pollImages = function () { + for (var i = 0; i < store.length; i++) { + var self = store[i]; + if (_inView(self)) { + self.src = self.getAttribute('data-echo'); + if (store.indexOf(self) !== -1) { + store.splice(i, 1); + } } } }; - /* - * Prototypal setup - */ - Echo.prototype = { - init : function () { - echoStore.push(this.elem); - } + var init = function () { + store = [].slice.call(document.querySelectorAll('[data-echo]')); + _pollImages(); + window.onscroll = _pollImages; }; - /* - * Initiate the plugin - */ - var lazyImgs = document.querySelectorAll('img[data-echo]'); - for (var i = 0; i < lazyImgs.length; i++) { - new Echo(lazyImgs[i]).init(); - } - - /* - * Bind the events - */ - if (document.addEventListener) { - document.addEventListener('DOMContentLoaded', echoImages, false); - } else { - window.onload = echoImages; - } - window.onscroll = echoImages; + return { + init: init + }; })(window, document); diff --git a/dist/echo.min.js b/dist/echo.min.js index 09ee094..df6704e 100644 --- a/dist/echo.min.js +++ b/dist/echo.min.js @@ -1,10 +1,8 @@ /*! - * Echo - * @version 1.1.0 - * @author Todd Motto http://toddmotto.com + * Echo v1.2.0 + * Lazy-loading images with data-* attributes * Project: https://github.com/toddmotto/echo - * - * Raw JavaScript lazy-loading images with HTML5 data-* attributes. - * Copyright 2013. MIT licensed. + * by Todd Motto: http://toddmotto.com + * Copyright. MIT licensed. */ -window.echo=function(a,b){"use strict";var c=function(a){this.elem=a},d=[],e=function(c){var d=c.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(a.innerHeight||b.documentElement.clientHeight)},f=function(a,b){a.src=a.getAttribute("data-echo"),b&&b()},g=function(a,b){-1!==d.indexOf(a)&&d.splice(b,1)},h=function(){for(var a=0;a=0&&d.left>=0&&d.top)<=(a.innerHeight||b.documentElement.clientHeight)},e=function(){for(var a=0;a= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight)); }; - /* - * Changing src attr logic - */ - var echoSrc = function (img, callback) { - img.src = img.getAttribute('data-echo'); - if (callback) { - callback(); - } - }; - - /* - * Remove loaded item from array - */ - var removeEcho = function (element, index) { - if (echoStore.indexOf(element) !== -1) { - echoStore.splice(index, 1); - } - }; - - /* - * Echo the images and callbacks - */ - var echoImages = function () { - for (var i = 0; i < echoStore.length; i++) { - var self = echoStore[i]; - if (scrolledIntoView(self)) { - echoSrc(self, removeEcho(self, i)); + var _pollImages = function () { + for (var i = 0; i < store.length; i++) { + var self = store[i]; + if (_inView(self)) { + self.src = self.getAttribute('data-echo'); + if (store.indexOf(self) !== -1) { + store.splice(i, 1); + } } } }; - /* - * Prototypal setup - */ - Echo.prototype = { - init : function () { - echoStore.push(this.elem); - } + var init = function () { + store = [].slice.call(document.querySelectorAll('[data-echo]')); + _pollImages(); + window.onscroll = _pollImages; }; - /* - * Initiate the plugin - */ - var lazyImgs = document.querySelectorAll('img[data-echo]'); - for (var i = 0; i < lazyImgs.length; i++) { - new Echo(lazyImgs[i]).init(); - } - - /* - * Bind the events - */ - if (document.addEventListener) { - document.addEventListener('DOMContentLoaded', echoImages, false); - } else { - window.onload = echoImages; - } - window.onscroll = echoImages; + return { + init: init + }; })(window, document);