tween/timeline: remove h from props

mojs · Jan 7, 2016 · 08e26c6 · 08e26c6
1 parent 18b5755
commit 08e26c6
Show file tree

Hide file tree

Showing 14 changed files with 87 additions and 64 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "mojs",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.166.2",
+  "version": "0.166.3",
   "license": "MIT",
   "homepage": "https://github.com/legomushroom/mojs",
   "authors": [

diff --git a/build/mo.js b/build/mo.js
@@ -3134,8 +3134,7 @@
 
 	var _core = _interopRequire(__webpack_require__(28));
 
-	var h = _interopRequire(__webpack_require__(2));
-
+	// import h from '../h';
 	var t = _interopRequire(__webpack_require__(13));
 
 	var easing = _interopRequire(__webpack_require__(10));
@@ -3315,7 +3314,7 @@
 	    },
 	    _declareDefaults: {
 	      /*
-	        Method do declare defaults by this._defaults object.
+	        Method do declare defaults with this._defaults object.
 	        @private
 	      */
 	      value: function DeclareDefaults() {
@@ -3346,7 +3345,7 @@
 	        @private
 	      */
 	      value: function Vars() {
-	        this.h = h;
+	        // this.h = h;
 	        this.progress = 0;
 	        this._prevTime = null;
 	        this._progressTime = 0;
@@ -3381,12 +3380,13 @@
 	    },
 	    _extendDefaults: {
 	      /*
-	        Method to extend defaults by options and put it in _props.
+	        Method to extend defaults by options and put them in _props.
 	        @private
 	      */
 	      value: function ExtendDefaults() {
 	        this._props = {};
 	        for (var key in this._defaults) {
+	          // borrow hasOwnProperty function
 	          if (Object.hasOwnProperty.call(this._defaults, key)) {
 	            var value = this._defaults[key];
 	            this._props[key] = this.o[key] != null ? this.o[key] : value;
@@ -3407,20 +3407,20 @@
 	        @returns this
 	      */
 	      value: function SetStartTime(time) {
-	        var p = this._props;
+	        var p = this._props,
+	            shiftTime = p.shiftTime || 0;
 	        // reset flags
 	        this._isCompleted = false;this._isRepeatCompleted = false;
 	        this._isStarted = false;
-	        // get time of the start
-	        time = time == null ? performance.now() : time;
-	        // set play time to the time
-	        var shiftTime = this._props.shiftTime || 0;
+	        // set start time to passed time or to the current moment
+	        var startTime = time == null ? performance.now() : time;
 	        // calculate bounds
 	        // - negativeShift is negative delay in options hash
 	        // - shift time is shift of the parent
-	        p.startTime = time + p.delay + this._negativeShift + shiftTime;
+	        p.startTime = startTime + p.delay + this._negativeShift + shiftTime;
 	        p.endTime = p.startTime + p.repeatTime - p.delay;
-	        this._playTime = time;
+	        // set play time to the startTime
+	        this._playTime = startTime;
 
 	        return this;
 	      },
@@ -3437,9 +3437,9 @@
 	        @param {Number} Previous Timeline's update time.
 	        @param {Boolean} Was parent in yoyo period.
 	        @param {Number} [-1, 0, 1] If update is on edge.
-	                        -1 = edge jump in negative direction.
-	                        0  = no edge jump.
-	                        1  = edge jump in positive direction.
+	                       -1 = edge jump in negative direction.
+	                        0 = no edge jump.
+	                        1 = edge jump in positive direction.
 	      */
 	      value: function Update(time, timelinePrevTime, wasYoyo, onEdge) {
 	        var p = this._props;
@@ -3469,6 +3469,7 @@
 	            } else {
 	              this._prevTime = time - 1;
 	              this._repeatComplete(time);
+	              this.o.isIt && console.log("here 4");
 	              this._complete(time);
 	            }
 	            // backward edge direction
@@ -3477,6 +3478,7 @@
 	            if (wasYoyo) {
 	              this._prevTime = time - 1;
 	              this._repeatComplete(time);
+	              this.o.isIt && console.log("here 5");
 	              this._complete(time);
 	            } else {
 	              this._prevTime = time + 1;
@@ -3563,6 +3565,7 @@
 	          var isYoyo = p.yoyo && T % 2 === 0;
 	          this._setProgress(isYoyo ? 0 : 1, time, isYoyo);
 	          this._repeatComplete(time);
+	          this.o.isIt && console.log("here 6");
 	          this._complete(time);
 	        }
 	        // if was active and went to - inactive area "-"
@@ -3607,7 +3610,10 @@
 	          // so we need to decrement T and calculate "one" value regarding yoyo
 	          var isYoyo = !(props.yoyo && (T - 1) % 2 === 1);
 	          this._setProgress(isYoyo ? 1 : 0, time, isYoyo);
+
+	          // this._isRepeatCompleted = false;
 	          this._repeatComplete(time);
+	          // this.o.isIt && console.log('here 1');
 	          return this._complete(time);
 	        }
 
@@ -3638,6 +3644,7 @@
 	              this._firstUpdate(time);
 	            }
 	            if (time < this._prevTime) {
+	              this.o.isIt && console.log("here 2");
 	              this._complete(time);
 	              this._repeatComplete(time);
 	              this._firstUpdate(time);
@@ -3692,6 +3699,7 @@
 	            // we have handled the case in this._wasUknownUpdate
 	            // block so filter that
 	            if (prevT === TCount && !this._wasUknownUpdate) {
+	              this.o.isIt && console.log("here 3");
 	              this._complete(time);
 	              this._repeatComplete(time);
 	              this._firstUpdate(time);
@@ -4524,7 +4532,7 @@
 /***/ function(module, exports, __webpack_require__) {
 
 	var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;window.mojs = {
-	  revision: '0.166.2',
+	  revision: '0.166.3',
 	  isDebug: true,
 	  helpers: __webpack_require__(2),
 	  shapesMap: __webpack_require__(3),

diff --git a/build/mo.min.js b/build/mo.min.js
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     <button id="js-stop">stop</button>
 
     <div id="js-el1" class="el"></div>
-    <input type="range" min="0" max="4" value="0" style="width: 500px; margin-top: 200px; margin-left: 200px;" id="js-range-slider">
+    <input type="range" min="0" max="6" value="0" style="width: 500px; margin-top: 200px; margin-left: 200px;" id="js-range-slider">
     <script src="build/mo.js"></script>
   </body>
 </html>
diff --git a/js/mojs.coffee b/js/mojs.coffee
@@ -1,6 +1,6 @@
 
 window.mojs =
-  revision:   '0.166.2', isDebug: true
+  revision:   '0.166.3', isDebug: true
   helpers     : require './h'
   shapesMap   : require './shapes/shapesMap'
   Burst       : require './burst'
@@ -17,7 +17,7 @@ window.mojs =
 mojs.h     = mojs.helpers
 mojs.delta = mojs.h.delta
 
-# tm = new mojs.Timeline isIt11: 1, repeat: 1, yoyo: true
+# tm = new mojs.Timeline repeat: 1, yoyo: true
 
 # tw = new mojs.Tween
 #   isIt: 1
@@ -34,7 +34,7 @@ mojs.delta = mojs.h.delta
 # rangeSlider = document.querySelector ('#js-range-slider')
 
 # rangeSlider.oninput = (e)->
-#   proc = (1*rangeSlider.value)/4
+#   proc = (1*rangeSlider.value)/6
 #   tm.setProgress proc
 
 ### istanbul ignore next ###

diff --git a/js/tween/tween.babel.js b/js/tween/tween.babel.js
@@ -1,4 +1,4 @@
-import h from '../h';
+// import h from '../h';
 import t from './tweener';
 import easing from '../easing/easing';
 
@@ -131,7 +131,7 @@ var Tween = class Tween {
     return this;
   }
   /*
-    Method do declare defaults by this._defaults object.
+    Method do declare defaults with this._defaults object.
     @private
   */
   _declareDefaults() {
@@ -157,7 +157,7 @@ var Tween = class Tween {
     @private
   */
   _vars() {
-    this.h = h;
+    // this.h = h;
     this.progress = 0;
     this._prevTime = null;
     this._progressTime = 0;
@@ -182,12 +182,13 @@ var Tween = class Tween {
     this._props.repeatTime = this._props.time * (this._props.repeat + 1);
   }
   /*
-    Method to extend defaults by options and put it in _props.
+    Method to extend defaults by options and put them in _props.
     @private
   */
   _extendDefaults() {
     this._props = {};
     for (var key in this._defaults) {
+      // borrow hasOwnProperty function
       if (Object.hasOwnProperty.call(this._defaults, key)) {
         var value = this._defaults[key];
         this._props[key] = (this.o[key] != null) ? this.o[key] : value;
@@ -203,20 +204,20 @@ var Tween = class Tween {
     @returns this
   */
   _setStartTime (time) {
-    var p = this._props;
+    var p = this._props,
+        shiftTime = (p.shiftTime || 0);
     // reset flags
     this._isCompleted = false; this._isRepeatCompleted = false;
-    this._isStarted = false;
-    // get time of the start
-    time = (time == null) ? performance.now() : time;
-    // set play time to the time
-    var shiftTime = (this._props.shiftTime || 0);
+    this._isStarted   = false;
+    // set start time to passed time or to the current moment
+    var startTime = (time == null) ? performance.now() : time;
     // calculate bounds
     // - negativeShift is negative delay in options hash
     // - shift time is shift of the parent
-    p.startTime = time + p.delay + this._negativeShift + shiftTime;
+    p.startTime = startTime + p.delay + this._negativeShift + shiftTime;
     p.endTime   = p.startTime + p.repeatTime - p.delay;
-    this._playTime = time;
+    // set play time to the startTime
+    this._playTime = startTime;
 
     return this;
   }
@@ -228,9 +229,9 @@ var Tween = class Tween {
     @param {Number} Previous Timeline's update time.
     @param {Boolean} Was parent in yoyo period.
     @param {Number} [-1, 0, 1] If update is on edge.
-                    -1 = edge jump in negative direction.
-                    0  = no edge jump.
-                    1  = edge jump in positive direction.
+                   -1 = edge jump in negative direction.
+                    0 = no edge jump.
+                    1 = edge jump in positive direction.
   */
   _update (time, timelinePrevTime, wasYoyo, onEdge) {
 
@@ -261,6 +262,7 @@ var Tween = class Tween {
         } else {
           this._prevTime = time - 1;
           this._repeatComplete( time );
+          this.o.isIt && console.log('here 4');
           this._complete( time );
         }
       // backward edge direction
@@ -269,6 +271,7 @@ var Tween = class Tween {
         if ( wasYoyo ) {
           this._prevTime = time - 1;
           this._repeatComplete( time );
+          this.o.isIt && console.log('here 5');
           this._complete( time );
         } else {
           this._prevTime = time + 1;
@@ -343,6 +346,7 @@ var Tween = class Tween {
       var isYoyo = p.yoyo && (T % 2 === 0);
       this._setProgress( (isYoyo) ? 0 : 1, time, isYoyo );
       this._repeatComplete( time );
+      this.o.isIt && console.log('here 6');
       this._complete( time );
     }
     // if was active and went to - inactive area "-"
@@ -383,7 +387,10 @@ var Tween = class Tween {
       // so we need to decrement T and calculate "one" value regarding yoyo
       var isYoyo = !(props.yoyo && ((T-1) % 2 === 1));
       this._setProgress( (isYoyo ? 1 : 0), time, isYoyo );
+
+      // this._isRepeatCompleted = false;
       this._repeatComplete( time );
+      // this.o.isIt && console.log('here 1');
       return this._complete( time );
     }
 
@@ -414,6 +421,7 @@ var Tween = class Tween {
           this._firstUpdate( time );
         }
         if ( time < this._prevTime ) {
+          this.o.isIt && console.log('here 2');
           this._complete( time );
           this._repeatComplete( time );
           this._firstUpdate( time );
@@ -468,6 +476,7 @@ var Tween = class Tween {
         // we have handled the case in this._wasUknownUpdate
         // block so filter that
         if ( prevT === TCount && !this._wasUknownUpdate ) {
+          this.o.isIt && console.log('here 3');
           this._complete( time );
           this._repeatComplete( time );              
           this._firstUpdate( time);

diff --git a/lib/mojs.js b/lib/mojs.js
@@ -1,6 +1,6 @@
 (function() {
   window.mojs = {
-    revision: '0.166.2',
+    revision: '0.166.3',
     isDebug: true,
     helpers: require('./h'),
     shapesMap: require('./shapes/shapesMap'),