added : constants and utils

.eslintrc

@@ -1,5 +1,4 @@
 {
-
   "env": {
     "browser": true,
     "es6": true,
@@ -21,9 +20,7 @@
 
   "parser": "babel-eslint",
 
-  "plugins": [
-
-  ],
+  "plugins": [],
 
   "rules": {
     "block-scoped-var": 2,
@@ -45,13 +42,13 @@
     "func-style": 0,
     "generator-star-spacing": [2, "both"],
     "guard-for-in": 0,
-    "handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
+    "handle-callback-err": [2, "^(err|error|anySpecificError)$"],
     "indent": [2, 2, { "SwitchCase": 1 }],
     "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
-    "keyword-spacing": [2, {"before": true, "after": true}],
+    "keyword-spacing": [2, { "before": true, "after": true }],
     "linebreak-style": 0,
     "max-depth": 0,
-    "max-len": [2, 120, 4],
+    "max-len": [2, 200, 4],
     "max-nested-callbacks": 0,
     "max-params": 0,
     "max-statements": 0,
@@ -155,13 +152,16 @@
     "operator-linebreak": [2, "after"],
     "padded-blocks": 0,
     "quote-props": 0,
-    "quotes": [2, "single", "avoid-escape"],
+    "quotes": [2, "double", "avoid-escape"],
     "radix": 2,
     "semi": [2, "always"],
     "semi-spacing": 0,
     "sort-vars": 0,
     "space-before-blocks": [2, "always"],
-    "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
+    "space-before-function-paren": [
+      2,
+      { "anonymous": "always", "named": "never" }
+    ],
     "space-in-brackets": 0,
     "space-in-parens": [2, "never"],
     "space-infix-ops": 2,

README.md

@@ -118,17 +118,21 @@ Data attributes will override both css styles & initialisation config style attr
 <!-- prettier-ignore-start -->
 ```html
 <path 
-  // style attribues 
-  data-llp-stroke-width 
-  data-llp-stroke-color
-  data-llp-stroke-opacity 
-  data-llp-stroke-cap 
-  data-llp-stroke-join
-  data-llp-stroke-dash // animation attribues 
-  data-llp-duration (ms)
-  data-llp-delay (ms) // delay offset from start of timeline 
-  data-llp-reverse (default = false) 
-  data-llp-ease (default = 'easeLinear') 
+
+  // style 
+  data-llp-stroke-width="10"
+  data-llp-stroke-color="#000000"
+  data-llp-stroke-opacity="0.5" 
+  data-llp-stroke-cap="rounded" 
+  data-llp-stroke-join="mitre" 
+
+  // animation
+  data-llp-stroke-dash="[2,2]" 
+  data-llp-duration="200" // (ms)
+  data-llp-delay="200" // delay offset from start of timeline (ms)
+  data-llp-reverse="true" (default = "false") 
+  data-llp-ease="easeInOutQuad" (default = 'easeLinear') 
+
   />
 ```
 <!-- prettier-ignore-end -->
@@ -142,10 +146,10 @@ Data attributes will override both css styles & initialisation config style attr
 **Paint** - accepts optional playback arguments - reverse, ease, delay
 
 ```js
-myAnimation.paint({
-  reverse: true,
-  ease: "easeExpoOut",
-});
+const reverse = true;
+const ease = "easeExpoOut";
+const delay = 200;
+myAnimation.paint({ reverse, ease, delay });
 ```
 
 **Erase** - paint can still be called on the element after it has been erased;
@@ -166,17 +170,15 @@ myAnimation.pause();
 myAnimation.resume();
 ```
 
-**Set** - set options after initialisation
+**Progress**
 
 ```js
-// progress - sets path position, second param accepts a number between 0 - 1
-myAnimation.set("progress", value);
-```
-
-**Get** - returns all lazylinepainter data;
+// set - [0 - 1]
+myAnimation.progress(value);
 
-```js
-myAnimation.get();
+// get
+const progress = myAnimation.progress();
+console.log(progress);
 ```
 
 **Destroy** - destroys svg & lazyline instance

examples/api.html

@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
 
     <!-- Include lazylinepainter -->
-    <script src="../lib/lazy-line-painter-2.0.0.js"></script>
+    <script src="../lib/lazy-line-painter-2.0.1.js"></script>
 
     <script type="text/javascript">
       (function () {

examples/basic-uncomposed.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
 
     <!-- Include lazylinepainter -->
-    <script src="../lib/lazy-line-painter-2.0.0.js"></script>
+    <script src="../lib/lazy-line-painter-2.0.1.js"></script>
 
     <style>
       svg {
@@ -23,8 +23,8 @@
       (function () {
         document.onreadystatechange = () => {
           if (document.readyState === "complete") {
-            let el = document.querySelector("#logo");
-            let myAnimation = new LazyLinePainter(el, {
+            const el = document.querySelector("#logo");
+            const myAnimation = new LazyLinePainter(el, {
               delay: 1000,
             });
             el.style.opacity = "1";

examples/basic.html

@@ -12,7 +12,7 @@
     <link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
 
     <!-- Include lazylinepainter -->
-    <script src="../lib/lazy-line-painter-2.0.0.js"></script>
+    <script src="../lib/lazy-line-painter-2.0.1.js"></script>
 
     <script type="text/javascript">
       (function () {

examples/callbacks.html

@@ -15,7 +15,7 @@
     <link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
 
     <!-- Include lazylinepainter -->
-    <script src="../lib/lazy-line-painter-2.0.0.js"></script>
+    <script src="../lib/lazy-line-painter-2.0.1.js"></script>
 
     <script type="text/javascript">
       (function () {
@@ -58,15 +58,15 @@
             // animation events
 
             function onAnimationStart() {
-              console.log("- - - - >>> Animation Started");
+              console.log(">> Animation Started");
             }
 
             function onAnimationUpdate() {
-              console.log("- - - - >>> Animation Updating");
+              console.log(">>>> Animation Updating");
             }
 
             function onAnimationComplete() {
-              console.log("- - - - >>> Animation Complete");
+              console.log(">> Animation Complete");
               removeEvents();
             }
 

examples/get.html

@@ -48,7 +48,7 @@
     </style>
 
     <!-- Include lazylinepainter -->
-    <script src="../lib/lazy-line-painter-2.0.0.js"></script>
+    <script src="../lib/lazy-line-painter-2.0.1.js"></script>
 
     <script type="text/javascript">
       (function () {

examples/set.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
 
     <!-- Include lazylinepainter -->
-    <script src="../lib/lazy-line-painter-2.0.0.js"></script>
+    <script src="../lib/lazy-line-painter-2.0.1.js"></script>
 
     <script type="text/javascript">
       (function () {
@@ -46,7 +46,7 @@
             function step() {
               window.requestAnimationFrame(step);
               position += (target - position) * friction;
-              myAnimation.set("progress", position);
+              myAnimation.progress(position);
             }
 
             window.requestAnimationFrame(step);