Code cleanup, demo update, added DLL.js to npm.

Author: thednp

README.md

@@ -1,37 +1,50 @@
 # Double Lazy Load | dll.js
-Double Lazy Load for images and background images. The name of the script lies in what it does, so check below or see the demo.
+Double Lazy Load for images and background images.
 
+# CDN
+Thanks to jsdelivr, we have CDN link <a href="http://www.jsdelivr.com/#!dll.js">here</a>.
+
+# npm
+```
+npm install dll.js
+```
+
+# Demo
+Right <a href="http://thednp.github.io/dll.js/">here</a>
+
+# Base syntax
+```js
+new dll('selector',callback);
+```
+	
 # What it does
 * Do lazy loading for an element that is subject to lazy load via data-src, or
 * Do to all child items of a given element
 * Do <code>backgroundImage</code> to elements other than <code>&lt;img&gt;</code> if they have <code>data-src</code> attribute.
 * Do callback when load event is triggered for one element, or for the last child element of a given parent.
 * Do lazy load for all items having <code>data-src</code> attribute.
 
-# CDN
-Thanks to jsdelivr, we have CDN link <a href="http://www.jsdelivr.com/#!dll.js">here</a>.
+# Works with
+Any valid selector or no selector.
+```js
+new dll('.uniqueClassName'); // lazy loads an element with a given class and it's children if any have data-src
 
-# Demo
-Right <a href="http://thednp.github.io/dll.js/">here</a>
+new dll('#uniqueID'); // lazy loads an element with a given ID and it's children if any have data-src
 
-# Base usage
-<pre>new dll('selector',callback);</pre>
-	
-<b>Works with</b> any valid selector or no selector.
-<pre>new dll('validSelector'); // run dll for an element with any valid selector #myElement / .myElementClass</pre>
-<pre>new dll(); // lazy loads any items with data-src from the entire page</pre>
+new dll(); // lazy loads any items with data-src from the entire page
+```
 
 # Other examples
-If you link the script in the site <code>&lt;head&gt;</code>, you should do this
-<pre>
+If your script is in your site head, you should do this
+```js
 window.addEventListener('load', loadFunctionExample, false);
 function loadFunctionExample(){
 	new dll('[data-src]', myFunction);
 }
-</pre>
+```
 
 If you want to lazy load on scroll
-<pre>
+```js
 window.addEventListener('scroll', scrollExample, false);
 	function scrollExample(){
 		var el = document.getElementById('myItem');
@@ -42,18 +55,17 @@ window.addEventListener('scroll', scrollExample, false);
 			//do some stuff when loading finished
 		}
 	}
-</pre>	
+```	
 
 # A nasty example
-Lazy load a parent <code>&lt;div id="myElement" data-src="..image.png"&gt;</code> with many elements inside subject to dll.js object:
-<pre>
+Lazy load a parent `<div id="myElement" data-src="..image.png">` with many elements inside subject to dll.js object:
+```js
 var el = document.getElementById('myElement'); //this is a parent
 new dll(el, callback)
 function callback(){
 	console.log('I just finished lazy loading the last element for #myElement')
 }
-
-</pre>
+```
 
 #License
 <a href="https://github.com/thednp/dll.js/blob/master/LICENSE">MIT License</a>

demo/assets/css/dll.css assets/css/dll.cssdemo/assets/css/dll.css renamed to assets/css/dll.css

@@ -1,3 +1,13 @@
+// utility
+var elementInViewport = function(el) { //check element is in viewport
+	var rect = el.getBoundingClientRect();
+	return ( 
+		rect.top >= 0
+		&& rect.left >= 0
+		&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
+	)
+};
+
 //generate a random image from http://dummy-image-generator.com/
 
 var fl = document.querySelector('.fill'),
@@ -66,22 +76,23 @@ for ( var i=0, itl=itms2.length; i<itl; i++ ){
 //some DLL demo
 new dll('.cover',pageLoadFinished);
 function pageLoadFinished() {
-	var loader = document.querySelector('.page-loader'), loaderImg = loader.getElementsByTagName('IMG')[0], isIE = document.documentElement.classList.contains('ie');
+	var loader = document.querySelector('.page-loader'), loaderImg = loader.getElementsByTagName('IMG')[0], 
+			isIE = document.documentElement.classList.contains('ie');
 	setTimeout(function() {
-		new KUTE.Animate(loaderImg, {from: { opacity:1 }, to: { opacity:0}, duration: 1500, easing: 'linear' });
+		KUTE.fromTo(loaderImg, { opacity:1 }, { opacity:0}, { duration: 1500, easing: 'linear'}).start();
 		loader.getElementsByTagName('P')[0].innerHTML = 'Done, now other examples..'
 	}, 500);
 	setTimeout(function() {
 		//play some KUTE tweens
 		if ( !isIE ) {
-			new KUTE.Animate(loader, {from: { translate: {y: 0}, opacity:1 }, to: { translate: {y: -1000}, opacity:0}, duration: 700, easing: 'exponentialIn' });
-			new KUTE.Animate('.site-wrapper', {from: { translate: { y: 550 }, opacity: 0 }, to: { translate: { y: 0}, opacity: 1 }, delay: 700, duration: 1200, easing: 'exponentialInOut' })
+			KUTE.fromTo(loader,{ translate: [0,0], opacity:1 }, { translate: [0,-1000], opacity:0}, { duration: 700, easing: 'easingExponentialIn' }).start();
+			KUTE.fromTo('.site-wrapper', { translate: [0,550], opacity: 0 }, { translate: [0,0], opacity: 1 }, { delay: 700, duration: 1200, easing: 'easingExponentialInOut' }).start()
 		} else {
-			new KUTE.Animate(loader, {from: { position: {top: '50%'}, opacity:1 }, to: { position: {top: '-5%'}, opacity:0}, duration: 700, easing: 'exponentialIn' });			
-			new KUTE.Animate('.site-wrapper', {from: { position: {top: 550}, opacity: 0 }, to: { position: { top: 0}, opacity: 1 }, delay: 700, duration: 1200, easing: 'exponentialInOut' })
+			KUTE.fromTo(loader, { position: {top: '50%'}, opacity:1 }, { position: {top: '-5%'}, opacity:0}, { duration: 700, easing: 'easingExponentialIn' }).start();			
+			KUTE.fromTo('.site-wrapper', { position: {top: 550}, opacity: 0 }, { position: { top: 0}, opacity: 1 }, { delay: 700, duration: 1200, easing: 'easingExponentialInOut' }).start()
 		}
-			new KUTE.Animate('.cover', {from: { opacity: 0 }, to: { opacity: 1 }, delay: 2000, duration: 2000, easing: 'exponentialIn' })
-			new KUTE.Animate('.navbar-wrapper', {from: { opacity: 0 }, to: { opacity: 1 }, delay: 4000, duration: 2000, easing: 'linear' })
+			KUTE.fromTo('.cover', { opacity: 0 }, { opacity: 1 }, { delay: 2000, duration: 2000, easing: 'easingExponentialIn' }).start()
+			KUTE.fromTo('.navbar-wrapper', { opacity: 0 }, { opacity: 1 }, { delay: 4000, duration: 2000, easing: 'linear' }).start()
 	}, 3000)
 }
 
@@ -105,7 +116,7 @@ function clickExample(e){
 		for ( var i = 0; i<il; i++ ) {
 			var dl = 350*i;
 			fn = i===(il-1) ? finished : '';
-			new KUTE.Animate(itms[i], {from: { scale: 1.5, opacity: 0 }, to: { scale: 1, opacity: 1 }, delay: dl, duration: 700, easing: 'exponentialOut', finish: fn });	
+			KUTE.fromTo(itms[i], { scale: 1.5, opacity: 0 }, { scale: 1, opacity: 1 }, { delay: dl, duration: 700, easing: 'easingExponentialOut', finish: fn }).start();	
 		}
 		btn.innerHTML = 'Animating...';
 		function finished(){
@@ -128,22 +139,23 @@ function scrollExample(){
 		if ( !el.classList.contains('loaded') ){
 			el.classList.add('loaded');
 			var itms = el.getElementsByTagName('IMG'), il = itms.length;
-			new KUTE.Animate(el, {from: { opacity: 0 }, to: { opacity: 1 }, delay: 500, duration: 2000, easing: 'exponentialOut' });
+			KUTE.fromTo(el, { opacity: 0 }, { opacity: 1 }, { delay: 500, duration: 2000, easing: 'easingExponentialOut' }).start();
 			for ( var i = 0; i<il; i++ ) {
 				var dl = parseInt(250*i + 2500);
-				new KUTE.Animate(itms[i], {from: { scale: 0.2, opacity: 0 }, to: { scale: 1, opacity: 1 }, delay: dl, duration: 500, easing: 'backOut' });	
+				KUTE.fromTo(itms[i], { scale: 0.2, opacity: 0 }, { scale: 1, opacity: 1 }, { delay: dl, duration: 500, easing: 'easingBackOut' }).start();	
 			}
 		}
 	}
 }
 
 //scroll top?
-var toTop = document.getElementById('toTop');
+var toTop = document.getElementById('toTop'),
+	toTopTween = KUTE.to( 'window', { scroll: 0 }, { easing: 'easingQuarticOut', duration : 1500  } );
 toTop.addEventListener('click',topHandler,false);
 
 function topHandler(e){
 	e.preventDefault(); 
-	new KUTE.Animate( 'div', { to : { scroll: 0 }, easing: 'quarticOut', duration : 1500  } );
+	toTopTween.start();
 }
 
 //syntax highlighter

demo/assets/css/reset.css assets/css/reset.cssdemo/assets/css/reset.css renamed to assets/css/reset.css

@@ -0,0 +1,29 @@
+// DLL.js | Minify
+// Minify script for the js files in root folder
+// Usage: npm run min
+
+var fs = require('fs');
+var path = require('path');
+var uglify = require('uglify-js');
+var pack = require('./package.json');
+var version = 'v'+pack.version;
+var license = pack.license+'-License';
+
+console.log('Minifying DLL.js ' + version + '..');
+
+// Helper Functions:
+function minify(srcPath, writePath) {
+  fs.writeFile(writePath,
+    ('// DLL.js ' + version + ' | © dnp_theme | ' + license + '\n'
+    + uglify.minify(srcPath).code), function (err) {
+    if (err) return handleError(err);
+    console.log(srcPath+' is done.');
+  });
+}
+function handleError(err) {
+  console.error(err);
+  process.exit(1);
+}
+
+// Minify file
+minify('dll.js', 'dist/dll.min.js');