tween: play/playBackward/pause/stop methods always return this

mojs · Apr 13, 2016 · 015f9cd · 015f9cd
1 parent bf70517
commit 015f9cd
Show file tree

Hide file tree

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

diff --git a/build/mo.js b/build/mo.js
@@ -188,7 +188,7 @@
 	      var shift = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
 
 	      if (this._state === 'play' && this._isRunning) {
-	        return false;
+	        return this;
 	      }
 	      this._props.isReversed = false;
 	      this._subPlay(shift, 'play');
@@ -208,7 +208,7 @@
 	      var shift = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
 
 	      if (this._state === 'reverse' && this._isRunning) {
-	        return false;
+	        return this;
 	      }
 	      this._props.isReversed = true;
 	      this._subPlay(shift, 'reverse');
@@ -225,7 +225,7 @@
 	    key: 'pause',
 	    value: function pause() {
 	      if (this._state === 'pause' || this._state === 'stop') {
-	        return false;
+	        return this;
 	      }
 	      this._removeFromTweener();
 	      this._setPlaybackState('pause');
@@ -242,7 +242,7 @@
 	    key: 'stop',
 	    value: function stop(progress) {
 	      if (this._state === 'stop') {
-	        return;
+	        return this;
 	      }
 	      this._props.isReversed = false;
 	      this._removeFromTweener();
@@ -8234,7 +8234,7 @@
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	window.mojs = {
-	  revision: '0.225.0', isDebug: true, helpers: _h2.default,
+	  revision: '0.225.1', 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
@@ -8253,68 +8253,6 @@
 	mojs.h = mojs.helpers;
 	mojs.delta = mojs.h.delta;
 
-	// let el      = document.querySelector('#js-el'),
-	//     speedEl = document.querySelector('#js-speed-slider'),
-	//     tw      = new mojs.Tween({
-	//       duration: 20000,
-	//       // delay:    1000,
-	//       repeat: 3,
-	//       easing: 'linear.none',
-	//       onStart () {
-	//         console.log('ON START');
-	//       },
-	//       onRepeatStart () {
-	//         console.log('ON REPEAT START');
-	//       },
-	//       onComplete () {
-	//         console.log('ON COMPLETE');
-	//       },
-	//       onRepeatComplete () {
-	//         console.log('ON REPEAT COMPLETE');
-	//       },
-	//       onFirstUpdate () {
-	//         console.log('ON FIRST UPDATE');
-	//       },
-	//       onUpdate (p) {
-	//         console.log('ON UPDATE');
-	//         el.style.transform = `translateX( ${1000*p}px )`;
-	//         // console.log(p)
-	//       },
-	//       // onStart    () { console.time('duration'); },
-	//       // onComplete () { console.timeEnd('duration'); },
-	//     })
-	//     // .play();
-
-	// let playBtn         = document.querySelector('#js-play'),
-	//     playBackwardBtn = document.querySelector('#js-play-backward'),
-	//     pauseBtn        = document.querySelector('#js-pause'),
-	//     stopBtn         = document.querySelector('#js-stop');
-
-	// speedEl.addEventListener('input', function () {
-	//   tw.setSpeed( this.value/1000 );
-	// });
-
-	// playBtn.addEventListener('click', function () { tw.play(); });
-	// playBackwardBtn.addEventListener('click', function () { tw.playBackward(); });
-	// pauseBtn.addEventListener('click', function () { tw.pause(); });
-	// stopBtn.addEventListener('click', function () { tw.stop(); });
-
-	// let x1Btn    = document.querySelector('#js-x1'),
-	//     x25Btn   = document.querySelector('#js-x25'),
-	//     x50Btn   = document.querySelector('#js-x50'),
-	//     x100Btn  = document.querySelector('#js-x100'),
-	//     x250Btn  = document.querySelector('#js-x250'),
-	//     x500Btn  = document.querySelector('#js-x500'),
-	//     x1000Btn = document.querySelector('#js-x1000');
-
-	// x1Btn.addEventListener('click', () => { tw.setSpeed(.1); });
-	// x25Btn.addEventListener('click', () => { tw.setSpeed(.25); });
-	// x50Btn.addEventListener('click', () => { tw.setSpeed(.5); });
-	// x100Btn.addEventListener('click', () => { tw.setSpeed(1); });
-	// x250Btn.addEventListener('click', () => { tw.setSpeed(2.5); });
-	// x500Btn.addEventListener('click', () => { tw.setSpeed(5); });
-	// x1000Btn.addEventListener('click', () => { tw.setSpeed(10); });
-
 	// ### 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.225.0', isDebug: true, helpers: h,
+  revision:   '0.225.1', isDebug: true, helpers: h,
   Transit, Swirl, Burst, stagger, Spriter, MotionPath,
   Tween, Timeline, Tweenable, Thenable, Tunable, Module,
   tweener, easing, shapesMap
@@ -36,70 +36,6 @@ window.mojs = {
 mojs.h     = mojs.helpers;
 mojs.delta = mojs.h.delta;
 
-// let el      = document.querySelector('#js-el'),
-//     speedEl = document.querySelector('#js-speed-slider'),
-//     tw      = new mojs.Tween({
-//       duration: 20000,
-//       // delay:    1000,
-//       repeat: 3,
-//       easing: 'linear.none',
-//       onStart () {
-//         console.log('ON START');
-//       },
-//       onRepeatStart () {
-//         console.log('ON REPEAT START');
-//       },
-//       onComplete () {
-//         console.log('ON COMPLETE');
-//       },
-//       onRepeatComplete () {
-//         console.log('ON REPEAT COMPLETE');
-//       },
-//       onFirstUpdate () {
-//         console.log('ON FIRST UPDATE');
-//       },
-//       onUpdate (p) {
-//         console.log('ON UPDATE');
-//         el.style.transform = `translateX( ${1000*p}px )`;
-//         // console.log(p)
-//       },
-//       // onStart    () { console.time('duration'); },
-//       // onComplete () { console.timeEnd('duration'); },
-//     })
-//     // .play();
-
-
-// let playBtn         = document.querySelector('#js-play'),
-//     playBackwardBtn = document.querySelector('#js-play-backward'),
-//     pauseBtn        = document.querySelector('#js-pause'),
-//     stopBtn         = document.querySelector('#js-stop');
-
-// speedEl.addEventListener('input', function () {
-//   tw.setSpeed( this.value/1000 );
-// });
-
-// playBtn.addEventListener('click', function () { tw.play(); });
-// playBackwardBtn.addEventListener('click', function () { tw.playBackward(); });
-// pauseBtn.addEventListener('click', function () { tw.pause(); });
-// stopBtn.addEventListener('click', function () { tw.stop(); });
-
-
-// let x1Btn    = document.querySelector('#js-x1'),
-//     x25Btn   = document.querySelector('#js-x25'),
-//     x50Btn   = document.querySelector('#js-x50'),
-//     x100Btn  = document.querySelector('#js-x100'),
-//     x250Btn  = document.querySelector('#js-x250'),
-//     x500Btn  = document.querySelector('#js-x500'),
-//     x1000Btn = document.querySelector('#js-x1000');
-
-// x1Btn.addEventListener('click', () => { tw.setSpeed(.1); });
-// x25Btn.addEventListener('click', () => { tw.setSpeed(.25); });
-// x50Btn.addEventListener('click', () => { tw.setSpeed(.5); });
-// x100Btn.addEventListener('click', () => { tw.setSpeed(1); });
-// x250Btn.addEventListener('click', () => { tw.setSpeed(2.5); });
-// x500Btn.addEventListener('click', () => { tw.setSpeed(5); });
-// x1000Btn.addEventListener('click', () => { tw.setSpeed(10); });
-
 // ### 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
@@ -73,7 +73,7 @@ class Tween extends Module {
     @return {Object} Self.
   */
   play ( shift = 0 ) {
-    if ( this._state === 'play' && this._isRunning ) { return false; }
+    if ( this._state === 'play' && this._isRunning ) { return this; }
     this._props.isReversed = false;
     this._subPlay( shift, 'play' );
     this._setPlaybackState( 'play' );
@@ -86,7 +86,7 @@ class Tween extends Module {
     @return {Object} Self.
   */
   playBackward ( shift = 0 ) {
-    if ( this._state === 'reverse' && this._isRunning)  { return false; }
+    if ( this._state === 'reverse' && this._isRunning)  { return this; }
     this._props.isReversed = true;
     this._subPlay( shift, 'reverse' );
     this._setPlaybackState( 'reverse' );
@@ -98,7 +98,7 @@ class Tween extends Module {
     @returns {Object} Self.
   */
   pause () {
-    if ( this._state === 'pause' || this._state === 'stop' )  { return false; }
+    if ( this._state === 'pause' || this._state === 'stop' )  { return this; }
     this._removeFromTweener();
     this._setPlaybackState('pause');
     return this;
@@ -110,7 +110,7 @@ class Tween extends Module {
     @returns {Object} Self.
   */
   stop ( progress ) {
-    if ( this._state === 'stop' ) { return; }
+    if ( this._state === 'stop' ) { return this; }
     this._props.isReversed = false;
     this._removeFromTweener();
     // if progress passed - use it

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

diff --git a/spec/tween/tween.coffee b/spec/tween/tween.coffee
@@ -5547,8 +5547,9 @@ describe 'Tween ->', ->
       t = new Tween duration: 1000
       t.play()
       spyOn t, '_subPlay'
-      t.play()
+      result = t.play()
       expect(t._subPlay).not.toHaveBeenCalled()
+      expect(result).toBe t
     it 'should run if already playing but ended', (dfr)->
       duration = 50
       t = new Tween duration: duration
@@ -5599,8 +5600,9 @@ describe 'Tween ->', ->
       t = new Tween duration: 1000
       t.playBackward()
       spyOn t, '_subPlay'
-      t.playBackward()
+      result = t.playBackward()
       expect(t._subPlay).not.toHaveBeenCalled()
+      expect(result).toBe t
     it 'should run if already reversing but ended', (dfr)->
       duration = 50
       t = new Tween duration: duration
@@ -5629,6 +5631,13 @@ describe 'Tween ->', ->
     it 'should set _state to "pause"',->
       t = new Tween
       t.pause()
+    it 'should remove immediately if paused',->
+      t = new Tween
+      t.play().pause()
+      spyOn t, '_removeFromTweener'
+      result = t.pause()
+      expect(t._removeFromTweener).not.toHaveBeenCalled()
+      expect(result).toBe t
 
   describe 'stop method', ->
     it 'should call removeFromTweener method with self',->
@@ -5678,8 +5687,9 @@ describe 'Tween ->', ->
       t = new Tween
       t.stop()
       t._props.isReversed = true
-      t.stop()
+      result = t.stop()
       expect(t._props.isReversed).toBe true
+      expect(result).toBe t
 
   describe 'replay method ->', ->
     it 'should call stop and play methods', ->

diff --git a/spec/tween/tween.js b/spec/tween/tween.js
@@ -5231,14 +5231,15 @@
         return expect(Math.abs(t._props.startTime - start)).not.toBeGreaterThan(5);
       });
       it('should return immediately if already playing', function() {
-        var t;
+        var result, t;
         t = new Tween({
           duration: 1000
         });
         t.play();
         spyOn(t, '_subPlay');
-        t.play();
-        return expect(t._subPlay).not.toHaveBeenCalled();
+        result = t.play();
+        expect(t._subPlay).not.toHaveBeenCalled();
+        return expect(result).toBe(t);
       });
       it('should run if already playing but ended', function(dfr) {
         var duration, t;
@@ -5308,14 +5309,15 @@
         return expect(t._progressTime).toBe(t._props.repeatTime - progress);
       });
       it('should return immediately if already reversing', function() {
-        var t;
+        var result, t;
         t = new Tween({
           duration: 1000
         });
         t.playBackward();
         spyOn(t, '_subPlay');
-        t.playBackward();
-        return expect(t._subPlay).not.toHaveBeenCalled();
+        result = t.playBackward();
+        expect(t._subPlay).not.toHaveBeenCalled();
+        return expect(result).toBe(t);
       });
       it('should run if already reversing but ended', function(dfr) {
         var duration, t;
@@ -5354,11 +5356,20 @@
         timeline.pause();
         return expect(timeline._removeFromTweener).toHaveBeenCalled();
       });
-      return it('should set _state to "pause"', function() {
+      it('should set _state to "pause"', function() {
         var t;
         t = new Tween;
         return t.pause();
       });
+      return it('should remove immediately if paused', function() {
+        var result, t;
+        t = new Tween;
+        t.play().pause();
+        spyOn(t, '_removeFromTweener');
+        result = t.pause();
+        expect(t._removeFromTweener).not.toHaveBeenCalled();
+        return expect(result).toBe(t);
+      });
     });
     describe('stop method', function() {
       it('should call removeFromTweener method with self', function() {
@@ -5429,12 +5440,13 @@
         return expect(t._props.isReversed).toBe(false);
       });
       return it('should return immediately if already stopped', function() {
-        var t;
+        var result, t;
         t = new Tween;
         t.stop();
         t._props.isReversed = true;
-        t.stop();
-        return expect(t._props.isReversed).toBe(true);
+        result = t.stop();
+        expect(t._props.isReversed).toBe(true);
+        return expect(result).toBe(t);
       });
     });
     describe('replay method ->', function() {