add more tests for thenable and tunable

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "mojs",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.214.1",
+  "version": "0.214.2",
   "license": "MIT",
   "homepage": "https://github.com/legomushroom/mojs",
   "authors": [

build/mo.js

@@ -518,15 +518,12 @@
 	  }, {
 	    key: '_update',
 	    value: function _update(time, timelinePrevTime, wasYoyo, onEdge) {
-	      this._o.isIt && console.log('time: ' + time + ', timelinePrevTime: ' + timelinePrevTime + ', wasYoyo: ' + wasYoyo + ', onEdge: ' + onEdge + ' ');
 	      var p = this._props;
 	      // if we don't the _prevTime thus the direction we are heading to,
 	      // but prevTime was passed thus we are child of a Timeline
 	      // set _prevTime to passed one and pretent that there was unknown
 	      // update to not to block start/complete callbacks
-	      this._o.isIt && console.log('prevTime: ' + this._prevTime + ', timelinePrevTime: ' + timelinePrevTime);
 	      if (this._prevTime == null && timelinePrevTime != null) {
-	        this._o.isIt && console.log('setting the _prevTime to prevTime and _wasUknownUpdate');
 	        this._prevTime = timelinePrevTime;
 	        this._wasUknownUpdate = true;
 	      }
@@ -648,7 +645,6 @@
 
 	        this._setProgress(isYoyo ? 0 : 1, time, isYoyo);
 	        this._repeatComplete(time, isYoyo);
-	        this._o.isIt && console.log('h3');
 	        this._complete(time, isYoyo);
 	      }
 	      // if was active and went to - inactive area "-"
@@ -698,7 +694,6 @@
 	          this._isRepeatCompleted = false;
 	        }
 	        this._repeatComplete(time, isYoyo);
-	        this._o.isIt && console.log('h4');
 	        return this._complete(time, isYoyo);
 	      }
 
@@ -786,7 +781,6 @@
 	          // we have handled the case in this._wasUknownUpdate
 	          // block so filter that
 	          if (prevT === TCount && !this._wasUknownUpdate) {
-	            this._o.isIt && console.log('h6');
 	            this._complete(time, isYoyo);
 	            this._repeatComplete(time, isYoyo);
 	            this._firstUpdate(time, isYoyo);
@@ -984,7 +978,6 @@
 	      if (this._isCompleted) {
 	        return;
 	      }
-	      this._o.isIt && console.log('_complete!');
 	      var p = this._props;
 	      if (p.onComplete != null && typeof p.onComplete === 'function') {
 	        p.onComplete.call(p.callbacksContext || this, time > this._prevTime, isYoyo);
@@ -1489,6 +1482,10 @@
 	      this._o.isSwirl = this._props.isSwirl;
 	      this._o.radius = 0;
 
+	      // save timeline options and remove from _o
+	      // cuz the master swirl should not get them
+	      this._saveTimelineOptions(this._o);
+
 	      this.masterSwirl = new _swirl2.default(this._o);
 	      this._masterSwirls = [this.masterSwirl];
 
@@ -1512,6 +1509,19 @@
 	      this._swirls = { 0: pack };
 	      this._setSwirlDuration(this.masterSwirl, this._calcPackTime(pack));
 	    }
+	    /*
+	      Method to save timeline options to _timelineOptions
+	      and delete the property on the object.
+	      @private
+	      @param {Object} The object to save the timeline options from.
+	    */
+
+	  }, {
+	    key: '_saveTimelineOptions',
+	    value: function _saveTimelineOptions(o) {
+	      this._timelineOptions = o.timeline;
+	      delete o.timeline;
+	    }
 	    /*
 	      Method to calculate total time of array of
 	      concurrent tweens.
@@ -1740,6 +1750,8 @@
 	  }, {
 	    key: '_makeTimeline',
 	    value: function _makeTimeline() {
+	      // restore timeline options that were deleted in _render method
+	      this._o.timeline = this._timelineOptions;
 	      (0, _get3.default)((0, _getPrototypeOf2.default)(Burst.prototype), '_makeTimeline', this).call(this);
 	      this.timeline.add(this.masterSwirl, this._swirls[0]);
 	    }
@@ -3901,7 +3913,7 @@
 
 	      for (var key in end) {
 
-	        /* !COVER! */
+	        // just copy parent option
 	        if (key == 'parent') {
 	          o[key] = end[key];
 	          continue;
@@ -4148,10 +4160,8 @@
 	    value: function _transformHistory(o) {
 	      for (var key in o) {
 	        var value = o[key];
-	        // !COVER!
-	        if (key === 'childOptions') {
-	          continue;
-	        }
+	        // don't transform for childOptions
+	        // if ( key === 'childOptions' ) { continue; }
 	        this._transformHistoryFor(key, this._preparsePropValue(key, value));
 	      }
 	    }
@@ -8010,21 +8020,22 @@
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	window.mojs = {
-	  revision: '0.214.1', isDebug: true, helpers: _h2.default,
+	  revision: '0.214.2', isDebug: true, helpers: _h2.default,
 	  Transit: _transit2.default, Swirl: _swirl2.default, Burst: _burst2.default, stagger: _stagger2.default, Spriter: _spriter2.default, MotionPath: _motionPath2.default,
 	  Tween: _tween2.default, Timeline: _timeline2.default, Tweenable: _tweenable2.default, Thenable: _thenable2.default, Tunable: _tunable2.default, Module: _module2.default,
 	  tweener: _tweener2.default, easing: _easing2.default, shapesMap: _shapesMap2.default
 	};
 
 	// TODO:
 	/*
-	  
-	  cover in thenable
-	  cover in tunable
-	  module names
+	  timeline: {} for transit and burst after tune
+	  callbacksContext for the masterSwirl
+	  add onPlaybackStart, onPlaybackStop,
+	  onPlaybackFinish methods to support mojs-player
 	  perf optimizations.
 	  --
 	  add target instead of parent.
+	  module names
 	  swirls in then chains for x/y
 	  parse rand(stagger(20, 10), 20) values
 	  percentage for radius
@@ -8033,10 +8044,6 @@
 	mojs.h = mojs.helpers;
 	mojs.delta = mojs.h.delta;
 
-	// rangeSliderEl.addEventListener('input', function () {
-	//   tr.setProgress( rangeSliderEl.value/1000 );
-	// });
-
 	// ### istanbul ignore next ###
 	if (true) {
 	  !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {

index.html

@@ -18,7 +18,10 @@
 
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.174.4/mo.min.js"></script> -->
 
+    <input type="range" min="100" max="5000" value="1000" style="width: 500px; margin-top: 200px; margin-left: 200px;" id="js-speed-slider">
+
     <input type="range" min="0" max="1000" value="0" style="width: 500px; margin-top: 200px; margin-left: 200px;" id="js-range-slider">
+
     <script src="build/mo.js"></script>
   </body>
 </html>

js/burst.babel.js

@@ -191,7 +191,11 @@ class Burst extends Tunable {
     this._o.isWithShape = false;
     this._o.isSwirl     = this._props.isSwirl;
     this._o.radius      = 0;
-
+
+    // save timeline options and remove from _o
+    // cuz the master swirl should not get them
+    this._saveTimelineOptions( this._o );
+
     this.masterSwirl    = new Swirl( this._o );
     this._masterSwirls  = [ this.masterSwirl ];
 
@@ -212,6 +216,16 @@ class Burst extends Tunable {
     this._swirls = { 0: pack };
     this._setSwirlDuration( this.masterSwirl, this._calcPackTime(pack) );
   }
+  /*
+    Method to save timeline options to _timelineOptions
+    and delete the property on the object.
+    @private
+    @param {Object} The object to save the timeline options from.
+  */
+  _saveTimelineOptions ( o ) {
+    this._timelineOptions = o.timeline;
+    delete o.timeline;
+  }
   /*
     Method to calculate total time of array of
     concurrent tweens.
@@ -394,6 +408,8 @@ class Burst extends Tunable {
     @override @ Tweenable
   */
   _makeTimeline () {
+    // restore timeline options that were deleted in _render method
+    this._o.timeline = this._timelineOptions;
     super._makeTimeline();
     this.timeline.add( this.masterSwirl, this._swirls[0] );
   }

js/mojs.babel.js

@@ -17,21 +17,22 @@ import tweener    from './tween/tweener';
 import easing     from './easing/easing';
 
 window.mojs = {
-  revision:   '0.214.1', isDebug: true, helpers: h,
+  revision:   '0.214.2', isDebug: true, helpers: h,
   Transit, Swirl, Burst, stagger, Spriter, MotionPath,
   Tween, Timeline, Tweenable, Thenable, Tunable, Module,
   tweener, easing, shapesMap
 }
 
 // TODO:
 /*
-  
-  cover in thenable
-  cover in tunable
-  module names
+  timeline: {} for transit and burst after tune
+  callbacksContext for the masterSwirl
+  add onPlaybackStart, onPlaybackStop,
+  onPlaybackFinish methods to support mojs-player
   perf optimizations.
   --
   add target instead of parent.
+  module names
   swirls in then chains for x/y
   parse rand(stagger(20, 10), 20) values
   percentage for radius
@@ -40,11 +41,6 @@ window.mojs = {
 mojs.h     = mojs.helpers;
 mojs.delta = mojs.h.delta;
 
-// rangeSliderEl.addEventListener('input', function () {
-//   tr.setProgress( rangeSliderEl.value/1000 );
-// });
-
-
 
 // ### istanbul ignore next ###
 if ( (typeof define === "function") && define.amd ) {

js/thenable.babel.js

@@ -119,7 +119,7 @@ class Thenable extends Tweenable {
 
     for (var key in end) {
 
-      /* !COVER! */
+      // just copy parent option
       if ( key == 'parent' ) {
         o[key] = end[key];
         continue;

js/tunable.babel.js

@@ -62,8 +62,8 @@ class Tuneable extends Thenable {
   _transformHistory ( o ) {
     for (var key in o) {
       var value = o[key];
-      // !COVER!
-      if ( key === 'childOptions' ) { continue; }
+      // don't transform for childOptions
+      // if ( key === 'childOptions' ) { continue; }
       this._transformHistoryFor( key, this._preparsePropValue( key, value ) );
     }
   }

js/tween/tween.babel.js

@@ -331,15 +331,12 @@ class Tween extends Module {
                     1 = edge jump in positive direction.
   */
   _update ( time, timelinePrevTime, wasYoyo, onEdge ) {
-    this._o.isIt && console.log(`time: ${time}, timelinePrevTime: ${timelinePrevTime}, wasYoyo: ${wasYoyo}, onEdge: ${onEdge} `);
     var p       = this._props;
     // if we don't the _prevTime thus the direction we are heading to,
     // but prevTime was passed thus we are child of a Timeline
     // set _prevTime to passed one and pretent that there was unknown
     // update to not to block start/complete callbacks
-    this._o.isIt && console.log(`prevTime: ${this._prevTime}, timelinePrevTime: ${timelinePrevTime}`);
     if ( this._prevTime == null && timelinePrevTime != null ) {
-      this._o.isIt && console.log('setting the _prevTime to prevTime and _wasUknownUpdate');
       this._prevTime = timelinePrevTime;
       this._wasUknownUpdate = true;
     }
@@ -451,7 +448,6 @@ class Tween extends Module {
 
       this._setProgress( (isYoyo) ? 0 : 1, time, isYoyo );
       this._repeatComplete( time, isYoyo );
-      this._o.isIt && console.log('h3');
       this._complete( time, isYoyo );
     }
     // if was active and went to - inactive area "-"
@@ -496,7 +492,6 @@ class Tween extends Module {
       this._setProgress( (isYoyo ? 0 : 1), time, isYoyo );
       if ( time > this._prevTime ) { this._isRepeatCompleted = false; }
       this._repeatComplete( time, isYoyo );
-      this._o.isIt && console.log('h4');
       return this._complete( time, isYoyo );
     }    
 
@@ -582,7 +577,6 @@ class Tween extends Module {
         // we have handled the case in this._wasUknownUpdate
         // block so filter that
         if ( prevT === TCount && !this._wasUknownUpdate ) {
-          this._o.isIt && console.log('h6');
           this._complete( time, isYoyo );
           this._repeatComplete( time, isYoyo );              
           this._firstUpdate( time, isYoyo );
@@ -755,7 +749,6 @@ class Tween extends Module {
   */
   _complete ( time, isYoyo ) {
     if ( this._isCompleted ) { return; }
-    this._o.isIt && console.log('_complete!');
     var p = this._props;
     if (p.onComplete != null && typeof p.onComplete === 'function') {
       p.onComplete.call( p.callbacksContext || this, time > this._prevTime, isYoyo );

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mo-js",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.214.1",
+  "version": "0.214.2",
   "license": "MIT",
   "private": false,
   "scripts": {

spec/burst.coffee

@@ -62,6 +62,13 @@ describe 'Burst ->', ->
       burst = new Burst opts
       expect(burst.masterSwirl._o.radius).toBe 0
 
+    it 'should call _saveTimelineOptions method', ->
+      opts = {}
+      b = new Burst opts
+      spyOn b, '_saveTimelineOptions'
+      b._render()
+      expect(b._saveTimelineOptions).toHaveBeenCalledWith b._o
+
     it 'should call _renderSwirls method', ->
       opts = {}
       burst = new Burst opts
@@ -217,6 +224,13 @@ describe 'Burst ->', ->
       expect(mojs.Tweenable.prototype._makeTween).not.toHaveBeenCalled()
 
   describe '_makeTimeline method ->', ->
+
+    it 'should restore timeline options on _o', ->
+      timeline = {}
+      bs = new Burst timeline: timeline
+      bs._makeTimeline()
+      expect(bs._o.timeline).toBe timeline
+
     it 'should call super', ->
       bs = new Burst
       spyOn mojs.Tweenable::, '_makeTimeline'
@@ -707,7 +721,14 @@ describe 'Burst ->', ->
       for key of b._defaults
         expect(o[key]).toBe 1
 
-
+  describe '_saveTimelineOptions method ->', ->
+    it 'should save timelone options to _timelineOptions', ->
+      b = new Burst
+      timeline = {}
+      opts = { timeline: timeline }
+      b._saveTimelineOptions opts
+      expect( b._timelineOptions ).toBe timeline
+      expect( opts.timeline ).not.toBeDefined()