strokeDash is back!

sabanna · Sep 12, 2015 · f0abd9f · f0abd9f
1 parent 38e8f94
commit f0abd9f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ A jQuery plugin for path animation using CSS.
 
 ## Getting started
 Implementing this plugin is broken into two parts.
-Preparing your web-friendly data & Configuring lazy-line-painter.js
+Preparing your svg data & Configuring lazy-line-painter.js
 
 
 **Preparing your SVG data** <br>
@@ -26,19 +26,22 @@ Copy lazy line code and paste into your DOM ready function.
 
 
 **Configuring lazy-line-painter options** <br>
-A number of attributes can be setup before the line art is Painted,
+Style attributes, callbacks and other options can be setup before the line art is Painted,
 these include;
 ```js
 'strokeWidth'    // Adjust width of stroke
 'strokeColor'    // Adjust stroke color
 'strokeCap'      // Adjust stroke cap  - butt  | round | square
 'strokeJoin'     // Adjust stroke join - miter | round | bevel
 'strokeOpacity'  // Adjust stroke opacity 0 - 1
+'strokeDash'     // Adjust stroke dash - '5, 5'
+
 'onComplete'     // Callback fired after animation finishes
 'onUpdate'		 // Callback fired on animation update
 'onStart'        // Callback fired before animation starts
 'onStrokeStart'		// Callback fires after each stroke animation starts
 'onStrokeComplete'	// Callback fires after each stroke animation completes
+
 'delay'          // Delay before animation starts
 'overrideKey'    // Set this property if you selector id doesn't match the key referencing your path data value within svgData.
 'speedMultiplier' // slow down or speed up the animation
@@ -68,22 +71,21 @@ var svgData = {
 		'paths' : // this contains all your SVG path info
 		[
 			{
-				'path': "M144.869,199c0....", // path string ,
-			    'duration':300, // time taken to animate that path
-			    'strokeColor':'#000000', // stroke color can be set individually
-			    'strokeWidth':3 // stroke width can be set individually
+				'path': "M144.869,199c0....", // path string
+			    'duration':300, // path duration
+			    'strokeWidth': 3, // all style attr can be set individually
 			    'reverse': true	// reverse stroke individually
-			    'ease': ''	// ease stroke individually - i.e 'easeInOutExpo', 'easeOutBounce'
-			    'onStrokeStart': function(){console.log("Stroke started")}	// Callback fires after the stroke animation starts
-			    'onStrokeComplete':  function(){console.log("Stroke completed")}	// Callback fires after the stroke
-			    'onStrokeUpdate':  function(){console.log("Stroke update")}	// Callback fires during the stroke animation
+			    'ease': 'easeInOutExpo'	// ease stroke individually
+			    'onStrokeStart': function(){console.log("Stroke started")}
+			    'onStrokeComplete':  function(){console.log("Stroke completed")}
+			    'onStrokeUpdate':  function(){console.log("Stroke update")}
 			}, {
 				'path': "M155.85,29c0...."
 			    'duration':1000
 			}, {
 				etc ...
 		],
-		'dimensions' : // dimensions of element
+		'dimensions' : // dimensions of viewbox
 		{
 			'width': 270,
 			'height':266
@@ -155,18 +157,4 @@ $('#demo').lazylinepainter('destroy');
 
 ## Author
 [http://camoconnell.com/](http://camoconnell.com/) <br>
-[email protected]
-
-
-
-## Contributors
-Many thats to; <br>
-
-- saeedseyfi / 0lumide
-  * 1.6.1 additions
-
-- [Jamie Perkins](http://inorganik.github.io)
-  * 1.5.0 additions
-
-- Matt Kemp
-  * specify strokeWidth and strokeColor on a per-path basis.
+[email protected]
diff --git a/jquery.lazylinepainter-1.6.3.js b/jquery.lazylinepainter-1.6.3.js
@@ -12,6 +12,7 @@
  *
  */
 
+
 /*
  *
  * TERMS OF USE - EASING EQUATIONS
@@ -45,6 +46,7 @@
  *
  */
 
+
 (function($) {
 
     'use strict';
@@ -79,6 +81,7 @@
                         'height': null,
 
                         'strokeWidth': 2,
+                        'strokeDash': null,
                         'strokeColor': '#000',
                         'strokeOverColor': null,
                         'strokeCap': 'round',
@@ -160,7 +163,7 @@
                             });
                         };
 
-                        el.style.strokeDasharray = length + ' ' + length;
+                        el.style.strokeDasharray = _getStrokeDashArray(path, options, length);
                         el.style.strokeDashoffset = length;
                         el.style.display = 'block';
                         el.getBoundingClientRect();
@@ -620,6 +623,46 @@
     };
 
 
+    /**
+     * _getStrokeDashArray
+     * @private
+     */
+    var _getStrokeDashArray = function(path, options, length) {
+        var strokeDash;
+        if (path.strokeDash) {
+            strokeDash = _getStrokeDashString(path.strokeDash, length);
+        } else if (options.strokeDash) {
+            strokeDash = _getStrokeDashString(options.strokeDash, length);
+        } else {
+            strokeDash = length + ' ' + length;
+        };
+        return strokeDash;
+    };
+
+
+    /**
+     * _getStrokeDashString
+     * @private
+     */
+    var _getStrokeDashString = function(dashArray, length) {
+        var strokeDashString = '';
+        var strokeDashArray = dashArray.split(',');
+        var strokeDashTotal = 0;
+        var strokeDashNum;
+        var strokeDashRemainder;
+        for (var i = strokeDashArray.length - 1; i >= 0; i--) {
+            strokeDashTotal += Number(strokeDashArray[i]);
+        };
+        strokeDashNum = Math.floor(length / strokeDashTotal);
+        strokeDashRemainder = length - (strokeDashNum * strokeDashTotal);
+        for (var i = strokeDashNum - 1; i >= 0; i--) {
+            strokeDashString += (dashArray + ', ');
+        };
+        var preArray = strokeDashString + strokeDashRemainder + ', ' + length;
+        return preArray.split(',').join('px,') + 'px';
+    };
+
+
     /**
      * lazylinepainter
      * Extends jQuery's prototype object.