add _playbackStart, _playbackPause, _playbackStop, `_playbackCo…

…mplete` methods
mojs · Apr 8, 2016 · 0bd650e · 0bd650e
1 parent ebe7e3f
commit 0bd650e
Show file tree

Hide file tree

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

diff --git a/build/mo.js b/build/mo.js
@@ -166,6 +166,11 @@
 	        onFirstUpdate: null,
 	        onUpdate: null,
 	        isChained: false,
+	        // playback callbacks
+	        onPlaybackStart: null,
+	        onPlaybackPause: null,
+	        onPlaybackStop: null,
+	        onPlaybackComplete: null,
 	        // context which all callbacks will be called with
 	        callbacksContext: null
 	      };
@@ -940,7 +945,6 @@
 	      p.wasYoyo = isYoyo;
 	      return this;
 	    }
-
 	    /*
 	      Method to set tween's state to start and call onStart callback.
 	      @method _start
@@ -962,7 +966,58 @@
 	      this._isCompleted = false;this._isStarted = true;
 	      this._isFirstUpdate = false;
 	    }
+	    /*
+	      Method to call onPlaybackStart callback
+	      @private
+	    */
+
+	  }, {
+	    key: '_playbackStart',
+	    value: function _playbackStart() {
+	      var p = this._props;
+	      if (p.onPlaybackStart != null && typeof p.onPlaybackStart === 'function') {
+	        p.onPlaybackStart.call(p.callbacksContext || this);
+	      }
+	    }
+	    /*
+	      Method to call onPlaybackPause callback
+	      @private
+	    */
+
+	  }, {
+	    key: '_playbackPause',
+	    value: function _playbackPause() {
+	      var p = this._props;
+	      if (p.onPlaybackPause != null && typeof p.onPlaybackPause === 'function') {
+	        p.onPlaybackPause.call(p.callbacksContext || this);
+	      }
+	    }
+	    /*
+	      Method to call onPlaybackStop callback
+	      @private
+	    */
 
+	  }, {
+	    key: '_playbackStop',
+	    value: function _playbackStop() {
+	      var p = this._props;
+	      if (p.onPlaybackStop != null && typeof p.onPlaybackStop === 'function') {
+	        p.onPlaybackStop.call(p.callbacksContext || this);
+	      }
+	    }
+	    /*
+	      Method to call onPlaybackComplete callback
+	      @private
+	    */
+
+	  }, {
+	    key: '_playbackComplete',
+	    value: function _playbackComplete() {
+	      var p = this._props;
+	      if (p.onPlaybackComplete != null && typeof p.onPlaybackComplete === 'function') {
+	        p.onPlaybackComplete.call(p.callbacksContext || this);
+	      }
+	    }
 	    /*
 	      Method to set tween's state to complete.
 	      @method _complete
@@ -1009,7 +1064,6 @@
 	      }
 	      this._isFirstUpdate = true;
 	    }
-
 	    /*
 	      Method call onRepeatComplete calback and set flags.
 	      @private
@@ -8064,7 +8118,7 @@
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	window.mojs = {
-	  revision: '0.219.0', isDebug: true, helpers: _h2.default,
+	  revision: '0.221.0', 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
@@ -8085,6 +8139,14 @@
 	mojs.h = mojs.helpers;
 	mojs.delta = mojs.h.delta;
 
+	// var playEl = document.querySelector('#js-play'),
+	//     rangeSliderEl = document.querySelector('#js-range-slider');
+	// document.body.addEventListener('click', function (e) {
+	//   sw
+	//     .tune({ timeline: {delay: 0 , repeat: 1 } })
+	//     .replay();
+	// });
+
 	// ### istanbul ignore next ###
 	if (true) {
 	  !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {

diff --git a/build/mo.min.js b/build/mo.min.js
diff --git a/js/mojs.babel.js b/js/mojs.babel.js
@@ -17,7 +17,7 @@ import tweener    from './tween/tweener';
 import easing     from './easing/easing';
 
 window.mojs = {
-  revision:   '0.219.0', isDebug: true, helpers: h,
+  revision:   '0.221.0', isDebug: true, helpers: h,
   Transit, Swirl, Burst, stagger, Spriter, MotionPath,
   Tween, Timeline, Tweenable, Thenable, Tunable, Module,
   tweener, easing, shapesMap
@@ -35,10 +35,17 @@ window.mojs = {
   percentage for radius
 */
 
-
 mojs.h     = mojs.helpers;
 mojs.delta = mojs.h.delta;
 
+// var playEl = document.querySelector('#js-play'),
+//     rangeSliderEl = document.querySelector('#js-range-slider');
+// document.body.addEventListener('click', function (e) {
+//   sw
+//     .tune({ timeline: {delay: 0 , repeat: 1 } })
+//     .replay();
+// });
+
 // ### istanbul ignore next ###
 if ( (typeof define === "function") && define.amd ) {
   define("mojs", [], function () { return mojs; });

diff --git a/js/tween/tween.babel.js b/js/tween/tween.babel.js
@@ -57,6 +57,11 @@ class Tween extends Module {
       onFirstUpdate:          null,
       onUpdate:               null,
       isChained:              false,
+      // playback callbacks
+      onPlaybackStart:        null,
+      onPlaybackPause:        null,
+      onPlaybackStop:         null,
+      onPlaybackComplete:     null,
       // context which all callbacks will be called with
       callbacksContext:       null
     }
@@ -722,7 +727,6 @@ class Tween extends Module {
     p.wasYoyo = isYoyo;
     return this;
   }
-
   /*
     Method to set tween's state to start and call onStart callback.
     @method _start
@@ -739,7 +743,46 @@ class Tween extends Module {
     this._isCompleted = false; this._isStarted = true;
     this._isFirstUpdate = false;
   }
-
+  /*
+    Method to call onPlaybackStart callback
+    @private
+  */
+  _playbackStart ( ) {
+    var p = this._props;
+    if (p.onPlaybackStart != null && typeof p.onPlaybackStart === 'function') {
+      p.onPlaybackStart.call(p.callbacksContext || this);
+    }
+  }
+  /*
+    Method to call onPlaybackPause callback
+    @private
+  */
+  _playbackPause ( ) {
+    var p = this._props;
+    if (p.onPlaybackPause != null && typeof p.onPlaybackPause === 'function') {
+      p.onPlaybackPause.call(p.callbacksContext || this);
+    }
+  }
+  /*
+    Method to call onPlaybackStop callback
+    @private
+  */
+  _playbackStop ( ) {
+    var p = this._props;
+    if (p.onPlaybackStop != null && typeof p.onPlaybackStop === 'function') {
+      p.onPlaybackStop.call(p.callbacksContext || this);
+    }
+  }
+  /*
+    Method to call onPlaybackComplete callback
+    @private
+  */
+  _playbackComplete ( ) {
+    var p = this._props;
+    if (p.onPlaybackComplete != null && typeof p.onPlaybackComplete === 'function') {
+      p.onPlaybackComplete.call(p.callbacksContext || this);
+    }
+  }
   /*
     Method to set tween's state to complete.
     @method _complete
@@ -776,7 +819,6 @@ class Tween extends Module {
     }
     this._isFirstUpdate = true;
   }
-
   /*
     Method call onRepeatComplete calback and set flags.
     @private

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mo-js",
   "description": "motion graphics toolbelt for the web",
-  "version": "0.219.0",
+  "version": "0.221.0",
   "license": "MIT",
   "private": false,
   "scripts": {

diff --git a/spec/tween/tween.coffee b/spec/tween/tween.coffee
@@ -58,6 +58,10 @@ describe 'Tween ->', ->
       expect(t._defaults.onComplete).toBeDefined()
       expect(t._defaults.onUpdate).toBeDefined()
       expect(t._defaults.onProgress).toBeDefined()
+      expect(t._defaults.onPlaybackStart).toBe null
+      expect(t._defaults.onPlaybackPause).toBe null
+      expect(t._defaults.onPlaybackStop) .toBe null
+      expect(t._defaults.onPlaybackComplete).toBe null
       expect(t._defaults.isChained).toBe false
     it 'should extend defaults to props', ->
       t = new Tween duration: 1000
@@ -5781,6 +5785,90 @@ describe 'Tween ->', ->
       tw._start()
       expect(tw._isCompleted).toBe true
 
+  describe '_playbackStart method ->', ->
+    it 'should call onPlaybackStart callback', ->
+      isCalled = null
+      fun = -> isCalled = true
+      tw = new Tween onPlaybackStart: fun
+      tw._playbackStart()
+      expect(isCalled).toBe true
+    it 'should call onPlaybackStart callback with callbacksContext', ->
+      isRightScrope = null
+      context = {}
+      fun = -> isRightScrope = ( this is context )
+      tw = new Tween
+        callbacksContext: context
+        onPlaybackStart: fun
+      tw._playbackStart()
+      expect(isRightScrope).toBe true
+    it 'should not throw if onPlaybackStart not set', ->
+      tw = new Tween
+      fun = -> tw._playbackStart()
+      expect(fun).not.toThrow()
+
+  describe '_playbackPause method ->', ->
+    it 'should call onPlaybackPause callback', ->
+      isCalled = null
+      fun = -> isCalled = true
+      tw = new Tween onPlaybackPause: fun
+      tw._playbackPause()
+      expect(isCalled).toBe true
+    it 'should call onPlaybackPause callback with callbacksContext', ->
+      isRightScrope = null
+      context = {}
+      fun = -> isRightScrope = ( this is context )
+      tw = new Tween
+        callbacksContext: context
+        onPlaybackPause: fun
+      tw._playbackPause()
+      expect(isRightScrope).toBe true
+    it 'should not throw if onPlaybackPause not set', ->
+      tw = new Tween
+      fun = -> tw._playbackPause()
+      expect(fun).not.toThrow()
+
+  describe '_playbackStop method ->', ->
+    it 'should call onPlaybackStop callback', ->
+      isCalled = null
+      fun = -> isCalled = true
+      tw = new Tween onPlaybackStop: fun
+      tw._playbackStop()
+      expect(isCalled).toBe true
+    it 'should call onPlaybackStop callback with callbacksContext', ->
+      isRightScrope = null
+      context = {}
+      fun = -> isRightScrope = ( this is context )
+      tw = new Tween
+        callbacksContext: context
+        onPlaybackStop: fun
+      tw._playbackStop()
+      expect(isRightScrope).toBe true
+    it 'should not throw if onPlaybackStop not set', ->
+      tw = new Tween
+      fun = -> tw._playbackStop()
+      expect(fun).not.toThrow()
+
+  describe '_playbackComplete method ->', ->
+    it 'should call onPlaybackComplete callback', ->
+      isCalled = null
+      fun = -> isCalled = true
+      tw = new Tween onPlaybackComplete: fun
+      tw._playbackComplete()
+      expect(isCalled).toBe true
+    it 'should call onPlaybackComplete callback with callbacksContext', ->
+      isRightScrope = null
+      context = {}
+      fun = -> isRightScrope = ( this is context )
+      tw = new Tween
+        callbacksContext: context
+        onPlaybackComplete: fun
+      tw._playbackComplete()
+      expect(isRightScrope).toBe true
+    it 'should not throw if onPlaybackComplete not set', ->
+      tw = new Tween
+      fun = -> tw._playbackComplete()
+      expect(fun).not.toThrow()
+
   describe '_repeatComplete method ->', ->
     it 'should call onRepeatComplete callback', ->
       isCalled = null