Echo.js v1.2.0

.editorconfig

@@ -1,5 +1,3 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
 # editorconfig.org
 
 root = true

.gitignore

@@ -1,4 +1,17 @@
+# Node
 node_modules
+
+## OS X
 .DS_Store
-.tmp
+.AppleDouble
-.sass-cache
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+## Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/

.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
 }

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;
 
-    /*
+var lrSnippet = require('connect-livereload')({
-     * Dynamically load the npm tasks
+  port: LIVERELOAD_PORT
-     */
+});
-    require( 'matchdep' ).filterDev('grunt-*').forEach( grunt.loadNpmTasks );
 
-    /*
+var mountFolder = function (connect, dir) {
-     * Grunt init
+  return connect.static(require('path').resolve(dir));
-     */
+};
-    grunt.initConfig({
-
-        /*
-         * Grunt JSON for project
-         */
-        pkg: grunt.file.readJSON( 'package.json' ),
-
-        /*
-         * 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"
-        },
 
-        /*
+module.exports = function (grunt) {
-         * 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 %>"
-            }
-        },
 
-        /*
+  grunt.initConfig({
-         * UglifyJS
+    pkg: grunt.file.readJSON('package.json'),
-         */
+    project: { name: 'echo' },
-        uglify: {
+    connect: {
-            files: {
+      options: {
-                src: ["dist/echo.js"],
+        port: 9000,
-                dest: "dist/echo.min.js"
+        hostname: 'localhost'
-            },
+      },
-            options: {
+      livereload: {
-                banner: "<%= tag.banner %>"
+        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'
+        ]
+      }
+    }
+  });
 
-    });
+  grunt.registerTask('default' , [
-
+    'jshint',
-    /*
+    'concat:dist',
-     * Register tasks
+    'uglify',
-     */
+    'connect:livereload',
-    grunt.registerTask("default", [
+    'open',
-        "jshint",
+    'watch'
-        "concat",
+  ]);
-        "uglify"
-    ]);
 
 };

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
 <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
@@ -23,11 +23,15 @@ Drop your files into your required folders, make sure you're using the file(s) f
 <body>
 	<!-- html content above -->
 	<script src="dist/echo.js"></script>
+  <script>
+  // call Echo.js
+  Echo.init();
+  </script>
 </body>
 ```
 
 ## 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
 <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

dist/echo.js

@@ -1,92 +1,41 @@
 /*!
- *  Echo
+ *  Echo v1.2.0
- *  @version 1.1.0
+ *  Lazy-loading images with data-* attributes
- *  @author Todd Motto http://toddmotto.com
  *  Project: https://github.com/toddmotto/echo
- *
+ *  by Todd Motto: http://toddmotto.com
- *  Raw JavaScript lazy-loading images with HTML5 data-* attributes.
+ *  Copyright. MIT licensed.
- *  Copyright 2013. MIT licensed.
  */
-window.echo = (function (window, document, undefined) {
+window.Echo = (function (window, document, undefined) {
 
   'use strict';
 
-  /*
+  var store;
-   * Constructor function
-   */
-  var Echo = function (elem) {
-    this.elem = elem;
-  };
-
-  /*
-   * Images for echoing
-   */
-  var echoStore = [];
 
-  /*
+  var _inView = function (img) {
-   * Element in viewport logic
+    var coords = img.getBoundingClientRect();
-   */
-  var scrolledIntoView = function (element) {
-    var coords = element.getBoundingClientRect();
     return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
   };
 
-  /*
+  var _pollImages = function () {
-   * Changing src attr logic
+    for (var i = 0; i < store.length; i++) {
-   */
+      var self = store[i];
-  var echoSrc = function (img, callback) {
+      if (_inView(self)) {
-    img.src = img.getAttribute('data-echo');
+        self.src = self.getAttribute('data-echo');
-    if (callback) {
+        if (store.indexOf(self) !== -1) {
-      callback();
+          store.splice(i, 1);
-    }
+        }
-  };
-
-  /*
-   * 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 init = function () {
-   * Prototypal setup
+    store = [].slice.call(document.querySelectorAll('[data-echo]'));
-   */
+    _pollImages();
-  Echo.prototype = {
+    window.onscroll = _pollImages;
-    init : function () {
-      echoStore.push(this.elem);
-    }
   };
 
-  /*
+  return {
-   * Initiate the plugin
+    init: init
-   */
+  };
-  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;
 
 })(window, document);

dist/echo.min.js

@@ -1,10 +1,8 @@
 /*!
- *  Echo
+ *  Echo v1.2.0
- *  @version 1.1.0
+ *  Lazy-loading images with data-* attributes
- *  @author Todd Motto http://toddmotto.com
  *  Project: https://github.com/toddmotto/echo
- *
+ *  by Todd Motto: http://toddmotto.com
- *  Raw JavaScript lazy-loading images with HTML5 data-* attributes.
+ *  Copyright. MIT licensed.
- *  Copyright 2013. 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<d.length;a++){var b=d[a];e(b)&&f(b,g(b,a))}};c.prototype={init:function(){d.push(this.elem)}};for(var i=b.querySelectorAll("img[data-echo]"),j=0;j<i.length;j++)new c(i[j]).init();b.addEventListener?b.addEventListener("DOMContentLoaded",h,!1):a.onload=h,a.onscroll=h}(window,document);
+window.Echo=function(a,b){"use strict";var c,d=function(c){var d=c.getBoundingClientRect();return(d.top>=0&&d.left>=0&&d.top)<=(a.innerHeight||b.documentElement.clientHeight)},e=function(){for(var a=0;a<c.length;a++){var b=c[a];d(b)&&(b.src=b.getAttribute("data-echo"),-1!==c.indexOf(b)&&c.splice(a,1))}},f=function(){c=[].slice.call(b.querySelectorAll("[data-echo]")),e(),a.onscroll=e};return{init:f}}(window,document);

package.json

@@ -1,22 +1,35 @@
 {
   "name": "Echo",
-  "title": "Echo",
+  "version": "1.2.0",
-  "description": "Raw JavaScript lazy-loading images with HTML5 data-* attributes.",
-  "author": [
-    { "name" : "Todd Motto" },
-    { "url" : "http://toddmotto.com" }
-  ],
   "homepage": "https://github.com/toddmotto/echo",
-  "licenses": [
+  "author": "Todd Motto",
-    { "type": "MIT" }
-  ],
   "year" : "2013",
-  "version": "1.1.0",
+  "description": "Lazy-loading images with data-* attributes",
+  "author": {
+    "name": "Todd Motto",
+    "email": "todd@toddmotto.com",
+    "url": "http://toddmotto.com",
+    "github" : "https://github.com/toddmotto"
+  },
+  "licenses": [{
+    "type": "MIT"
+  }],
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/toddmotto/echo.git"
+  },
   "devDependencies": {
     "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.7.1",
     "grunt-contrib-concat": "~0.3.0",
-    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-uglify": "~0.2.7",
-    "grunt-contrib-jshint": "~0.4.3",
+    "grunt-contrib-connect": "~0.3.0",
+    "grunt-contrib-watch": "~0.4.4",
+    "connect-livereload": "~0.2.0",
+    "grunt-open": "~0.2.0",
     "matchdep": "~0.1.2"
+  },
+  "peerDependencies": {
+    "grunt-cli": "*"
   }
 }

src/echo.js

@@ -1,83 +1,34 @@
-window.echo = (function (window, document, undefined) {
+window.Echo = (function (window, document, undefined) {
 
   'use strict';
 
-  /*
+  var store;
-   * Constructor function
-   */
-  var Echo = function (elem) {
-    this.elem = elem;
-  };
-
-  /*
-   * Images for echoing
-   */
-  var echoStore = [];
 
-  /*
+  var _inView = function (img) {
-   * Element in viewport logic
+    var coords = img.getBoundingClientRect();
-   */
-  var scrolledIntoView = function (element) {
-    var coords = element.getBoundingClientRect();
     return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
   };
 
-  /*
+  var _pollImages = function () {
-   * Changing src attr logic
+    for (var i = 0; i < store.length; i++) {
-   */
+      var self = store[i];
-  var echoSrc = function (img, callback) {
+      if (_inView(self)) {
-    img.src = img.getAttribute('data-echo');
+        self.src = self.getAttribute('data-echo');
-    if (callback) {
+        if (store.indexOf(self) !== -1) {
-      callback();
+          store.splice(i, 1);
-    }
+        }
-  };
-
-  /*
-   * 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 init = function () {
-   * Prototypal setup
+    store = [].slice.call(document.querySelectorAll('[data-echo]'));
-   */
+    _pollImages();
-  Echo.prototype = {
+    window.onscroll = _pollImages;
-    init : function () {
-      echoStore.push(this.elem);
-    }
   };
 
-  /*
+  return {
-   * Initiate the plugin
+    init: init
-   */
+  };
-  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;
 
 })(window, document);