simplify demos

sabanna · Sep 13, 2015 · 53dd0f1 · 53dd0f1
1 parent 0e80b51
commit 53dd0f1
Show file tree

Hide file tree

Showing 5 changed files with 388 additions and 260 deletions.
diff --git a/examples/api.html b/examples/api.html
@@ -34,9 +34,7 @@
 
 				$(document).ready(function(){
 
-					var $bottom = $('#bottom');
-					var $middle = $('#middle');
-					var $top = $('#top');
+					var $logo = $('#logo');
 					var $paint = $('.js-paint');
 					var $erase = $('.js-erase');
 					var $pause = $('.js-pause');
@@ -52,34 +50,15 @@
 
 					function init(){
 
-			            $bottom.lazylinepainter({
+			            $logo.lazylinepainter({
 			                'svgData': svgData,
 			                'strokeWidth': 7,
 			                'strokeColor': '#b5287b',
 		            		'ease': 'easeInOutQuad',
+                        	'drawSequential': false,
 			                'onStart': onStart
 			            });
-			            $bottom.lazylinepainter('paint');
-
-						$middle.lazylinepainter({
-			                'svgData': svgData,
-			                'overrideKey':'bottom',
-			                'strokeWidth': 7,
-			                'strokeColor': '#f7f2ec',
-		            		'ease': 'easeInOutQuad',
-			                'delay':1000,
-			                'onComplete': onComplete
-			            });
-			            $middle.lazylinepainter('paint');
-
-						$top.lazylinepainter({
-			                'svgData': svgData,
-			                'strokeWidth': 2,
-			                'strokeColor': '#b5287b',
-			                'delay':2500,
-		            		'ease': 'easeInOutQuad'
-			            });
-			            $top.lazylinepainter('paint');
+			            $logo.lazylinepainter('paint');
 					};
 
 		            function onComplete(){
@@ -102,7 +81,7 @@
 
 					function onPauseClick(){
 
-		            	var data = $bottom.lazylinepainter('get');
+		            	var data = $logo.lazylinepainter('get');
 		            	var state = data.paused ? 'resume' : 'pause';
 		            	var html = data.paused ? 'pause' : 'resume';
 
@@ -137,10 +116,7 @@
 							return;
 						}
 
-		            	$bottom.lazylinepainter(target);
-		            	$middle.lazylinepainter(target);
-		            	$top.lazylinepainter(target);
-
+		            	$logo.lazylinepainter(target);
 						console.log('>> ' + target);
 					}
 
@@ -160,9 +136,7 @@
     <body>
     	<div class="content">
 	    	<div class="logo-wrap">
-		        <div id='bottom'></div>
-		    	<div id='middle'></div>
-		    	<div id='top'></div>
+		    	<div id='logo'></div>
 		    </div>
 		    <div class="api-functions">
 		    	<h2 class="js-paint button">Paint</h2>

diff --git a/examples/basic.html b/examples/basic.html
@@ -16,7 +16,7 @@
         <script src="../vendor/jquery-2.1.1.min.js"></script>
 
         <!-- Include lazylinepainter -->
-		<script src="../jquery.lazylinepainter-1.7.0.min.js"></script>
+		<script src="../jquery.lazylinepainter-1.7.0.js"></script>
 
         <!-- Include lazylinepainter svgData object -->
 		<script src="js/svgdata.js"></script>
@@ -27,43 +27,24 @@
 
 				$(document).ready(function(){
 
-
-					var $bottom = $('#bottom');
-					var $middle = $('#middle');
-					var $top = $('#top');
-
+					var $logo = $('#logo');
 
 					/**
 					 * Setup your Lazy Line element.
 					 * see README file for more settings
 					 */
 
-		            $bottom.lazylinepainter({
+		            $logo.lazylinepainter({
 		                'svgData': svgData,
 		                'strokeWidth': 7,
 		                'strokeColor': '#b5287b',
-		            	'ease': 'easeInOutQuad'
+                        'drawSequential': false,
+                        'ease': 'easeInOutQuad'
 		            });
-		            $bottom.lazylinepainter('paint');
 
-					$middle.lazylinepainter({
-		                'svgData': svgData,
-		                'overrideKey':'bottom',
-		                'strokeWidth': 7,
-		                'strokeColor': '#f7f2ec',
-		            	'ease': 'easeInOutQuad',
-		                'delay':1000
-		            });
-		            $middle.lazylinepainter('paint');
-
-					$top.lazylinepainter({
-		                'svgData': svgData,
-		                'strokeWidth': 2,
-		                'strokeColor': '#b5287b',
-		            	'ease': 'easeInOutQuad',
-		                'delay':2500
-		            });
-		            $top.lazylinepainter('paint');
+                    setTimeout(function(){
+                        $logo.lazylinepainter('paint');
+                    }, 10)
 				})
 
 			})( jQuery );
@@ -74,9 +55,7 @@
     <body>
     	<div class="content">
 	    	<div class="logo-wrap">
-		        <div id='bottom'></div>
-		    	<div id='middle'></div>
-		    	<div id='top'></div>
+		    	<div id='logo'></div>
 		    </div>
 		</div>
     </body>

diff --git a/examples/css/common.css b/examples/css/common.css
@@ -35,19 +35,6 @@ body {
     position: relative;
 }
 
-#bottom,
-#top,
-#middle {
-	position:absolute;
-	width: 100%;
-    height: 100%;
-    top: 0;
-}
-#bottom {
-	margin:4px 0 0 -4px;
-	position: relative;
-}
-
 
 /* buttons */
 h2.button {