merge

.npmignore

@@ -0,0 +1,5 @@
+.github
+.travis.yml
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+yarn.lock

README.md

@@ -3,6 +3,8 @@
 ![NPM Version](https://img.shields.io/npm/v/blurry.svg)
 <img src="https://travis-ci.org/jonhue/blurry.js.svg?branch=master" />
 
+Blurry.js makes blurred image loading a breathe. With very little markup, Blurry.js allows you to level up the game of your image loading functionality, by making it look & perform great.
+
 ---
 
 ## Table of Contents
@@ -32,7 +34,7 @@ Blurry.js is simple to use:
 
 ```javascript
 import * as blurry from 'blurry.js';
-window.onload = () => blurry.init();
+window.onload = () => blurry.init({ blur: 120, delay: 1250 });
 ```
 
 ```sass
@@ -54,7 +56,7 @@ window.onload = () => blurry.init();
 
 You have some configuration options:
 
-* `blur`: Blur radius as defined by [StackBlur](https://github.com/flozz/StackBlur). Accepts an a float value. Defaults to `100`. To find a value you like check out the [StackBlur demo](http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html).
+* `blur`: Blur radius as defined by [StackBlur](https://github.com/flozz/StackBlur). Accepts a float value. Defaults to `100`. To find a value you like check out the [StackBlur demo](http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html).
 * `delay`: Milliseconds to wait before removing the blur effect. Accepts an integer. Defaults to `1000`.
 
 ---

src/blurry.js

@@ -44,48 +44,46 @@ export function init(options) {
         return arguments[0];
     };
 
-    let _typeof = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === 'function' && obj.constructor === Symbol ? 'symbol' : typeof obj; };
-
-    // Main funtionality
-    function main() {
-
-        // Variable definitions
-        let blurRadius = options['blur'],
-            initialDelay = options['delay'],
-            component = document.querySelector('blurry-media--wrapper'),
-            image = document.querySelector('blurry-media--image'),
-            canvas = document.querySelector('blurry-media--canvas'),
-            thumbnail = document.querySelector('blurry-media--thumbnail'),
-            context = canvas.getContext('2d');
+    if ( typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ) {
+        let _typeof = (obj) => return typeof obj;
+    } else {
+        if ( obj && typeof Symbol === 'function' && obj.constructor === Symbol ) {
+            let _typeof = (obj) => return 'symbol';
+        } else {
+            let _typeof = (obj) => return typeof obj;
+        };
+    };
 
-        // Setting aspect-ratio-fill padding
-        let aspectRatioFill = document.querySelector('.aspect-ratio-fill');
-        let percentage = thumbnail.naturalHeight / thumbnail.naturalWidth * 100;
-        aspectRatioFill.style.paddingBottom = percentage + '%';
+    // Variable definitions
+    let blurRadius = options['blur'],
+        initialDelay = options['delay'],
+        component = document.querySelector('.blurry-media--wrapper'),
+        image = document.querySelector('.blurry-media--image'),
+        canvas = document.querySelector('.blurry-media--canvas'),
+        thumbnail = document.querySelector('.blurry-media--thumbnail'),
+        context = canvas.getContext('2d');
 
-        // Draw the thumbnail onto the canvas, then blur it
-        drawThumbnail(blurRadius);
+    // Setting aspect-ratio-fill padding
+    let aspectRatioFill = document.querySelector('.aspect-ratio-fill');
+    let percentage = thumbnail.naturalHeight / thumbnail.naturalWidth * 100;
+    aspectRatioFill.style.paddingBottom = percentage + '%';
 
-        // Load the image in. Once it's loaded, add a class to the component wrapper that fades in the image and fades out the canvas element.
-        image.src = image.dataset.src;
-        image.addEventListener( 'load', function onImageLoaded() {
-            image.removeEventListener( 'load', onImageLoaded );
+    // Draw the thumbnail onto the canvas, then blur it
+    drawThumbnail(blurRadius);
 
-            // This delay is only set so the we can see the blur effect more clearly on page load
-            setTimeout(function () {
-                component.classList.add('blurry-media--loaded');
-            }, initialDelay);
-        });
+    // Load the image in. Once it's loaded, add a class to the component wrapper that fades in the image and fades out the canvas element.
+    image.src = image.dataset.src;
+    image.addEventListener( 'load', function onImageLoaded() {
+        image.removeEventListener( 'load', onImageLoaded );
 
-        // Draws the thumbnail into the canvas and blurs it
-        function drawThumbnail(blur) {
-            context.drawImage(thumbnail, 0, 0, thumbnail.naturalWidth, thumbnail.naturalHeight, 0, 0, canvas.width, canvas.height);
-            StackBlur.canvasRGBA(canvas, 0, 0, canvas.width, canvas.height, blur);
-        }
+        // This delay is only set so the we can see the blur effect more clearly on page load
+        setTimeout( () => component.classList.add('blurry-media--loaded'), initialDelay );
+    });
 
+    // Draws the thumbnail into the canvas and blurs it
+    function drawThumbnail(blur) {
+        context.drawImage( thumbnail, 0, 0, thumbnail.naturalWidth, thumbnail.naturalHeight, 0, 0, canvas.width, canvas.height );
+        StackBlur.canvasRGBA( canvas, 0, 0, canvas.width, canvas.height, blur );
     };
 
-    // Set a timeout so we make sure StackBlur is defined
-    setTimeout( main, 0 );
-
 };