Fix callback (#16)

* Fixing callback bug
* Update Demo
* Code cleanup
* Add gh-pages

Author: moarwick

lib/index.js

@@ -32,8 +32,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-console.log(_tween2.default);
-
 var EASING = {
   'ease': _tween2.default.Easing.Quadratic.InOut,
   'ease-in': _tween2.default.Easing.Cubic.In,
@@ -52,12 +50,12 @@ var MtSvgLines = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, (MtSvgLines.__proto__ || Object.getPrototypeOf(MtSvgLines)).call(this, props));
 
-    _this._onTweenUpdate = function () {
-      _this._setStrokeDashoffset(_this._pathElems, _this._tweenData);
-      _this._animate(); // go again..
+    _this.onTweenUpdate = function () {
+      _this.setStrokeDashoffset(_this._pathElems, _this._tweenData);
+      _this.animate(); // go again..
     };
 
-    _this._onAnimComplete = function () {
+    _this.onAnimComplete = function () {
       _this.props.callback();
       _this._animStart = 0;
     };
@@ -95,12 +93,12 @@ var MtSvgLines = function (_React$Component) {
   }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      this._animate();
+      this.animate();
     }
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      this._animate();
+      this.animate();
     }
   }, {
     key: 'render',
@@ -156,8 +154,8 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_animate',
-    value: function _animate() {
+    key: 'animate',
+    value: function animate() {
       var _this3 = this;
 
       if (typeof window === 'undefined') {
@@ -185,7 +183,7 @@ var MtSvgLines = function (_React$Component) {
 
         // parse out vars common for both modes
         var startDelay = typeof animate === 'number' ? animate : 0; // if numeric, treat as delay (ms)
-        var numOfRepeats = parseInt(playback, 10) || 0;
+        var numOfRepeats = parseInt(playback, 10) || 1;
 
         /* ----- JS MODE ----- */
         if (isAnimJS) {
@@ -199,8 +197,8 @@ var MtSvgLines = function (_React$Component) {
           var isYoYo = playback.includes('alternate');
 
           // acquire path elems and generate to/from data sets
-          this._pathElems = this._selectPathElems();
-          var pathData = this._getPathData(this._pathElems);
+          this._pathElems = this.selectPathElems();
+          var pathData = this.getPathData(this._pathElems);
           this._pathDataFrom = pathData.from;
           this._pathDataTo = pathData.to;
 
@@ -210,11 +208,11 @@ var MtSvgLines = function (_React$Component) {
           this._tweenData = _extends({}, this._pathDataFrom);
 
           // set paths' offsets to start positions
-          this._setStrokeDasharray(this._pathElems, this._pathDataFrom);
-          this._setStrokeDashoffset(this._pathElems, this._tweenData);
+          this.setStrokeDasharray(this._pathElems, this._pathDataFrom);
+          this.setStrokeDashoffset(this._pathElems, this._tweenData);
 
           // init the tweener..
-          var tween = new _tween2.default.Tween(this._tweenData).to(this._pathDataTo, duration).easing(EASING[timing]).repeat(numOfRepeats).yoyo(isYoYo).onUpdate(this._onTweenUpdate).onComplete(this._onAnimComplete);
+          var tween = new _tween2.default.Tween(this._tweenData).to(this._pathDataTo, duration).easing(EASING[timing]).repeat(numOfRepeats).yoyo(isYoYo).onUpdate(this.onTweenUpdate).onComplete(this.onAnimComplete);
 
           // kick off JS tweening..
           var t = setTimeout(function () {
@@ -228,7 +226,7 @@ var MtSvgLines = function (_React$Component) {
           var css = '';
 
           // 1) determine number of path elems in svg
-          var pathLenghts = this._getPathLengths();
+          var pathLenghts = this.getPathLengths();
           var pathQty = pathLenghts.length || 1;
 
           // 2) calc all timing values
@@ -238,13 +236,13 @@ var MtSvgLines = function (_React$Component) {
 
           // 3) concat generated CSS, one path at a time..
           pathLenghts.forEach(function (length, index) {
-            css += _this3._getPathCSS(index, length, startDelay, pathStaggerDelay, pathDrawDuration);
+            css += _this3.getPathCss(index, length, startDelay, pathStaggerDelay, pathDrawDuration);
           });
 
           // set up on-complete timer
           var _t = setTimeout(function () {
             clearTimeout(_t);
-            _this3._onAnimComplete();
+            _this3.onAnimComplete();
           }, startDelay + duration * numOfRepeats);
 
           // set state (re-render)
@@ -274,13 +272,13 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_selectPathElems',
+    key: 'selectPathElems',
 
 
     /*
      * Acquire selection of SVG 'path' elems contained within
      */
-    value: function _selectPathElems() {
+    value: function selectPathElems() {
       var svgEl = this._svgWrapper.getElementsByTagName('svg')[0];
       return svgEl ? svgEl.querySelectorAll('path') : [];
     }
@@ -293,14 +291,14 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_getPathData',
-    value: function _getPathData(pathElems) {
+    key: 'getPathData',
+    value: function getPathData(pathElems) {
       var _this4 = this;
 
       var pathData = { from: {}, to: {} };
 
       [].forEach.call(pathElems, function (pathEl, i) {
-        if (!_this4._hasSkipAttr(pathEl.attributes)) {
+        if (!_this4.hasSkipAttr(pathEl.attributes)) {
           var pathLengh = (0, _utils.trimFloat)(pathEl.getTotalLength() || 0);
           pathData.to[i] = 0;
           pathData.from[i] = pathLengh;
@@ -315,8 +313,8 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_hasSkipAttr',
-    value: function _hasSkipAttr(attributes) {
+    key: 'hasSkipAttr',
+    value: function hasSkipAttr(attributes) {
       var result = false;
 
       // path.attributes is an obj with indexed keys, so we must iterate over them
@@ -340,8 +338,8 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_setStrokeDasharray',
-    value: function _setStrokeDasharray(pathElems, pathData) {
+    key: 'setStrokeDasharray',
+    value: function setStrokeDasharray(pathElems, pathData) {
       [].forEach.call(pathElems, function (pathEl, i) {
         if (pathData[i]) {
           pathEl.style.strokeDasharray = pathData[i];
@@ -354,8 +352,8 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_setStrokeDashoffset',
-    value: function _setStrokeDashoffset(pathElems, pathData) {
+    key: 'setStrokeDashoffset',
+    value: function setStrokeDashoffset(pathElems, pathData) {
       [].forEach.call(pathElems, function (pathEl, i) {
         if (pathData[i]) {
           pathEl.style.strokeDashoffset = pathData[i];
@@ -368,13 +366,13 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_getPathLengths',
-    value: function _getPathLengths() {
+    key: 'getPathLengths',
+    value: function getPathLengths() {
       var _this5 = this;
 
-      var pathElems = this._selectPathElems();
+      var pathElems = this.selectPathElems();
       return [].map.call(pathElems, function (pathEl) {
-        return _this5._hasSkipAttr(pathEl.attributes) ? 0 : (0, _utils.trimFloat)(pathEl.getTotalLength() || 0);
+        return _this5.hasSkipAttr(pathEl.attributes) ? 0 : (0, _utils.trimFloat)(pathEl.getTotalLength() || 0);
       });
     }
 
@@ -383,8 +381,8 @@ var MtSvgLines = function (_React$Component) {
      */
 
   }, {
-    key: '_getPathCSS',
-    value: function _getPathCSS(index, length, startDelay, staggerDelay, duration) {
+    key: 'getPathCss',
+    value: function getPathCss(index, length, startDelay, staggerDelay, duration) {
       var classKey = this.state.classKey;
       var _props3 = this.props,
           timing = _props3.timing,

package.json

@@ -22,6 +22,7 @@
   "scripts": {
     "start": "webpack-dev-server --content-base src/demos/",
     "build": "rimraf public && webpack --progress --profile --colors",
+    "deploy": "gh-pages -d public",
     "lint": "eslint src",
     "dist": "babel src --out-dir lib --ignore demos",
     "prepublish": "npm run dist"
@@ -56,6 +57,7 @@
     "eslint-plugin-standard": "^3.0.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
+    "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^2.22.0",
     "node-sass": "^4.5.1",
     "postcss-loader": "^2.0.6",
@@ -65,6 +67,7 @@
     "react-hot-loader": "^1.3.0",
     "rimraf": "^2.5.3",
     "sass-loader": "^6.0.3",
+    "standard": "^11.0.1",
     "style-loader": "^0.18.2",
     "url-loader": "^0.5.7",
     "webpack": "^3.4.1",

public/198c3f51bb9eef0d4a89.min.js

@@ -0,0 +1,7 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:200,300,700);body {
+  font: 200 normal 16px 'Lato', sans-serif;
+  background-color: #FFF; }
+
+@media (max-width: 380px) {
+  .column, .column-short {
+    width: 100% !important; } }

public/css/198c3f51bb9eef0d4a89.min.css

@@ -7,8 +7,8 @@
     <title>Mt React Component</title>
     <meta name="description" content="Mt React Component" />
     <meta name="author" content="moarwick" />
-  <link href="css/31fe4b16aaf57ce15b5e.min.css" rel="stylesheet"></head>
+  <link href="css/198c3f51bb9eef0d4a89.min.css" rel="stylesheet"></head>
   <body>
     <div id="component"></div>
-  <script type="text/javascript" src="31fe4b16aaf57ce15b5e.min.js"></script></body>
+  <script type="text/javascript" src="198c3f51bb9eef0d4a89.min.js"></script></body>
 </html>