From f43326024fc99803d447fb6dd8e0f270b42c00c0 Mon Sep 17 00:00:00 2001 From: Oleg Solomka Date: Sun, 1 May 2016 21:04:16 -0500 Subject: [PATCH] mojs-player: refactor to `_reset` method --- bower.json | 2 +- build/mojs-player.js | 56 ++++++++++------ build/mojs-player.min.js | 10 +-- js/components/ripple.babel.js | 14 ++-- js/mojs-player.babel.js | 28 ++++++-- lib/components/player-slider.js | 10 ++- lib/components/ripple.js | 20 +++--- lib/mojs-player.js | 114 ++++++++++++++++++-------------- package.json | 2 +- 9 files changed, 150 insertions(+), 106 deletions(-) diff --git a/bower.json b/bower.json index 21e78b4..ce85a8f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "mojs-player", - "version": "0.40.1", + "version": "0.40.3", "description": "Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences.", "main": "build/mojs-player.min.js", "authors": [ diff --git a/build/mojs-player.js b/build/mojs-player.js index bc010fc..614c2a4 100644 --- a/build/mojs-player.js +++ b/build/mojs-player.js @@ -1,3 +1,9 @@ +/*! + :: MojsPlayer :: Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences. + Oleg Solomka @LegoMushroom 2016 MIT + 0.40.3 +*/ + /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -153,7 +159,7 @@ this._defaults.isHidden = false; var str = 'mojs-player'; - this.revision = '0.40.1'; + this.revision = '0.40.3'; this._prefix = str + '-' + this._hashCode(str) + '-'; this._localStorage = this._prefix + 'model'; }; @@ -430,12 +436,12 @@ // if we set a progress in the `_play` method it returns slighly // different when piped thru tween, so add `0.01` gap to soften that if (p < leftBound - 0.01 && p !== 0) { - this._sysTween.reset(); + this._reset(); requestAnimationFrame(this._play.bind(this)); } if (p >= rightBound) { - this._sysTween.reset(); + this._reset(); if (this._props.isRepeat) { requestAnimationFrame(this._play.bind(this)); } else { @@ -463,7 +469,16 @@ this._sysTween.play(); }; + /* + Method to reset sysTween and timeline. + @private + */ + + MojsPlayer.prototype._reset = function _reset() { + this._sysTween.reset(); + this.timeline.reset(); + }; /* Method to set play button state. @private @@ -535,7 +550,7 @@ MojsPlayer.prototype._onStop = function _onStop() { this._props.isPlaying = false; - this._sysTween.reset(); + this._reset(); }; /* Method that is invoked on repeat switch state change. @@ -601,8 +616,15 @@ MojsPlayer.prototype._onProgress = function _onProgress(progress) { this._props.progress = progress; - if (!this.timeline._prevTime) { - this.timeline.setProgress(0); + // if timeline was reset - refresh it's state + // by incremental updates until progress (0 always) + if (!this.timeline._prevTime && progress > 0) { + var start = 0, + step = 0.1; + do { + this.timeline.setProgress(start); + start += step; + } while (start + step < progress); } this.timeline.setProgress(progress); }; @@ -6742,24 +6764,19 @@ Ripple.prototype._addRipple = function _addRipple() { - var _ref; + var _this2 = this, + _ref; this.transit = new mojs.Transit((_ref = { parent: this.el, strokeWidth: { 10: 0 }, fill: 'none', - // stroke: 'white', stroke: 'hotpink' - }, _ref['fill'] = 'hotpink', _ref.fillOpacity = .75, _ref.opacity = { .85: 0 }, _ref.radius = { 0: 40 }, _ref.isShowEnd = false, _ref.onStart = this._onStart.bind(this), _ref.onUpdate = this._onUpdate.bind(this), _ref)); - }; - /* - Method that is invoked on ripple start. - @private - */ - - - Ripple.prototype._onStart = function _onStart() { - this.isStart = true; + }, _ref['fill'] = 'hotpink', _ref.fillOpacity = .75, _ref.opacity = { .85: 0 }, _ref.radius = { 0: 40 }, _ref.isShowEnd = false, _ref.onStart = function onStart() { + _this2.isStart = true; + }, _ref.onUpdate = this._onUpdate.bind(this), _ref.onComplete = function onComplete() { + _this2.isStart = false; + }, _ref)); }; /* Method that is invoked on ripple update. @@ -6784,6 +6801,7 @@ Ripple.prototype._release = function _release() { + // console.log('release'); if (!this._props.withHold) { return; } @@ -6802,7 +6820,7 @@ y = e.offsetY != null ? e.offsetY : e.layerY; this.isRelease = false; - this.transit.tune({ x: x, y: y }).stop().replay(); + this.transit.tune({ x: x, y: y }).replay(); }; /* Method that should be run on touch serface cancel. diff --git a/build/mojs-player.min.js b/build/mojs-player.min.js index fe947cf..07ac556 100644 --- a/build/mojs-player.min.js +++ b/build/mojs-player.min.js @@ -1,10 +1,10 @@ /*! :: MojsPlayer :: Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences. Oleg Solomka @LegoMushroom 2016 MIT - 0.40.1 + 0.40.3 */ -!function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="build/",e(0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){var i;(function(t,o){"use strict";function s(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var r=n(3),a=s(r),p=n(67),u=s(p),l=n(69),h=s(l),c=n(70),d=s(c),f=n(71),_=s(f),g=n(79),y=(s(g),n(80)),v=s(y),m=n(81),b=s(m),x=n(82),w=s(x),S=n(102),P=s(S),k=n(114),T=s(k),C=n(126),E=s(C),M=n(134),O=s(M),L=n(138),B=s(L),D=n(146),I=s(D),j=n(147),R=s(j);n(151);var A=n(153),N=function(t){function e(){return(0,h["default"])(this,e),(0,d["default"])(this,t.apply(this,arguments))}return(0,_["default"])(e,t),e.prototype._declareDefaults=function(){t.prototype._declareDefaults.call(this),this._defaults.isSaveState=!0,this._defaults.isPlaying=!1,this._defaults.progress=0,this._defaults.isRepeat=!1,this._defaults.isBounds=!1,this._defaults.leftBound=0,this._defaults.rightBound=1,this._defaults.isSpeed=!1,this._defaults.speed=1,this._defaults.isHidden=!1;var e="mojs-player";this.revision="0.40.1",this._prefix=e+"-"+this._hashCode(e)+"-",this._localStorage=this._prefix+"model"},e.prototype._extendDefaults=function(){this._props={};var t=this._props,e=this._o,n=this._defaults;t.isSaveState=this._fallbackTo(e.isSaveState,n.isSaveState);var i=t.isSaveState?JSON.parse(localStorage.getItem(this._localStorage))||{}:{};for(var o in n){var s=this._fallbackTo(i[o],e[o]);this._assignProp(o,this._fallbackTo(s,n[o]))}this._props["raw-speed"]=this._fallbackTo(i["raw-speed"],.5)},e.prototype._keyUp=function(t){if(t.altKey)switch(t.keyCode){case 80:this._props.isPlaying=!this._props.isPlaying,this._onPlayStateChange(this._props.isPlaying);break;case 189:this.playButton.off(),this.playerSlider.decreaseProgress(t.shiftKey?.1:.01);break;case 187:this.playButton.off(),this.playerSlider.increaseProgress(t.shiftKey?.1:.01);break;case 83:this._onStop();break;case 82:this._props.isRepeat=!this._props.isRepeat;var e=this._props.isRepeat?"on":"off";this.repeatButton[e]();break;case 66:this._props.isBounds=!this._props.isBounds;var e=this._props.isBounds?"on":"off";this.boundsButton[e]();break;case 72:this._props.isHidden=!this._props.isHidden,this._onHideStateChange(this._props.isHidden);var e=this._props.isHidden?"on":"off";this.hideButton[e]();break;case 81:this.speedControl.reset();break;case 50:this.speedControl.decreaseSpeed(t.shiftKey?.05:.01);break;case 51:this.speedControl.increaseSpeed(t.shiftKey?.05:.01)}},e.prototype._vars=function(){this._hideCount=0},e.prototype._render=function(){this._initTimeline();var e=this._props,n="mojs-player";new v["default"]({prefix:this._props.prefix});t.prototype._render.call(this),this.el.classList.add(A[n]),this.el.setAttribute("id","js-mojs-player");var i=this._createChild("div",A[n+"__left"]),o=this._createChild("div",A[n+"__mid"]),s=this._createChild("div",A[n+"__right"]);this.repeatButton=new B["default"]({parent:i,isOn:e.isRepeat,onStateChange:this._onRepeatStateChange.bind(this),prefix:this._props.prefix}),this.playerSlider=new w["default"]({parent:o,isBounds:e.isBounds,leftProgress:e.leftBound,rightProgress:e.rightBound,progress:e.progress,onLeftProgress:this._onLeftProgress.bind(this),onProgress:this._onProgress.bind(this),onRightProgress:this._onRightProgress.bind(this),onSeekStart:this._onSeekStart.bind(this),onSeekEnd:this._onSeekEnd.bind(this)}),this.boundsButton=new I["default"]({isOn:e.isBounds,parent:i,onStateChange:this._boundsStateChange.bind(this),prefix:this._props.prefix}),this.speedControl=new T["default"]({parent:i,speed:e.speed,isOn:e.isSpeed,onSpeedChange:this._onSpeedChange.bind(this),onIsSpeed:this._onIsSpeed.bind(this),prefix:this._props.prefix});this.stopButton=new O["default"]({parent:i,isPrepend:!0,onPointerUp:this._onStop.bind(this),prefix:this._props.prefix}),this.playButton=new E["default"]({parent:i,isOn:e.isPlaying,isPrepend:!0,onStateChange:this._onPlayStateChange.bind(this),prefix:this._props.prefix}),this.mojsButton=new P["default"]({parent:s,icon:"mojs",link:"https://github.com/legomushroom/mojs-player",title:"mo • js",prefix:this._props.prefix}),this.hideButton=new R["default"]({parent:this.el,className:A[n+"__hide-button"],isOn:e.isHidden,onStateChange:this._onHideStateChange.bind(this),prefix:this._props.prefix}),this._listen()},e.prototype._listen=function(){window.addEventListener("beforeunload",this._onUnload.bind(this)),document.addEventListener("keyup",this._keyUp.bind(this))},e.prototype._onSeekStart=function(t){this._sysTween.pause()},e.prototype._onSeekEnd=function(t){var e=this;clearTimeout(this._endTimer),this._endTimer=setTimeout(function(){e._props.isPlaying&&e._play()},20)},e.prototype._initTimeline=function(){var t=this;this.timeline=new mojs.Timeline({}),this.timeline.add(this._o.add),this._sysTween=new mojs.Tween({duration:this.timeline._props.repeatTime,onProgress:this._onSysProgress.bind(this),onComplete:this._onSysTweenComplete.bind(this),onPlaybackStop:function(){t._setPlayState("off")},onPlaybackPause:function(){t._setPlayState("off")},onPlaybackStart:function(){t._setPlayState("on")}}),this._sysTween.isIt=1},e.prototype._onSysProgress=function(t){this.playerSlider.setTrackProgress(t);var e=this._props.isBounds?this._props.rightBound:1,n=this._props.isBounds?this._props.leftBound:-1;n>t&&0!==t&&console.log("a"),t>=e&&(this._sysTween.pause(),this._props.isRepeat?(this._play(),console.log(" progress 2")):this._props.isPlaying=!1)},e.prototype._setPlayState=function(t){var e=this;clearTimeout(this._playTimeout),this._playTimeout=setTimeout(function(){e.playButton&&e.playButton[t](!1)},2)},e.prototype._onSysTweenComplete=function(t){this._props.isPlaying&&t&&this._props.isRepeat&&(console.log("reset"),this._sysTween.reset(),this._play())},e.prototype._onPlayStateChange=function(t){this._props.isPlaying=t,t?this._play():this._sysTween.pause()},e.prototype._onHideStateChange=function(t){this._props.isHidden=t;var e=t?"add":"remove";this.el.classList[e](A["is-hidden"]),1===this._hideCount++&&this.el.classList.add(A["is-transition"])},e.prototype._play=function(){var t=this._props,e=t.isBounds?t.leftBound:t.progress,n=t.progress>=this._getBound("right")?e:t.progress;1>n&&(console.log("set"),this._sysTween.setProgress(n)),this._sysTween.play()},e.prototype._onStop=function(){this._props.isPlaying=!1,this._sysTween.stop()},e.prototype._onRepeatStateChange=function(t){this._props.isRepeat=t},e.prototype._boundsStateChange=function(t){this.playerSlider._props.isBounds=t,this.playerSlider[(t?"enable":"disable")+"Bounds"](),this._props.isBounds=t},e.prototype._onSpeedChange=function(t,e){this._props["raw-speed"]=e,this._props.speed=t,this._sysTween.setSpeed(t)},e.prototype._onIsSpeed=function(t){this._props.isSpeed=t},e.prototype._onLeftProgress=function(t){this._props.leftBound=t},e.prototype._onProgress=function(t){this._props.progress=t,this.timeline._prevTime||this.timeline.setProgress(0),this.timeline.setProgress(t)},e.prototype._onRightProgress=function(t){this._props.rightBound=t},e.prototype._onUnload=function(t){return this._props.isSaveState?(delete this._props.parent,delete this._props.className,delete this._props.isSaveState,void localStorage.setItem(this._localStorage,(0,u["default"])(this._props))):localStorage.removeItem(this._localStorage)},e.prototype._fallbackTo=function(t,e){return null!=t?t:e},e.prototype._getBound=function(t){var e=this._props,n="left"===t?0:1;return e.isBounds?e[t+"Bound"]:n},e.prototype._defer=function(t){setTimeout(t.bind(this),1)},e.prototype._hashCode=function(t){var e,n,i,o=0;if(0===t.length)return o;for(e=0,i=t.length;i>e;e++)n=t.charCodeAt(e),o=(o<<5)-o+n,o|=0;return o},e}(b["default"]);i=function(){return N}.call(e,n,e,t),!(void 0!==i&&(t.exports=i)),"object"===(0,a["default"])(t)&&"object"===(0,a["default"])(t.exports)&&(t.exports=N);var F="undefined"!=typeof o?o:window;F.MojsPlayer=N,e["default"]=N}).call(e,n(2)(t),function(){return this}())},function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children=[],t.webpackPolyfill=1),t}},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(4),s=i(o),r=n(54),a=i(r),p="function"==typeof a["default"]&&"symbol"==typeof s["default"]?function(t){return typeof t}:function(t){return t&&"function"==typeof a["default"]&&t.constructor===a["default"]?"symbol":typeof t};e["default"]="function"==typeof a["default"]&&"symbol"===p(s["default"])?function(t){return"undefined"==typeof t?"undefined":p(t)}:function(t){return t&&"function"==typeof a["default"]&&t.constructor===a["default"]?"symbol":"undefined"==typeof t?"undefined":p(t)}},function(t,e,n){t.exports={"default":n(5),__esModule:!0}},function(t,e,n){n(6),n(50),t.exports=n(47)("iterator")},function(t,e,n){"use strict";var i=n(7)(!0);n(10)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=i(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){var i=n(8),o=n(9);t.exports=function(t){return function(e,n){var s,r,a=String(o(e)),p=i(n),u=a.length;return 0>p||p>=u?t?"":void 0:(s=a.charCodeAt(p),55296>s||s>56319||p+1===u||(r=a.charCodeAt(p+1))<56320||r>57343?t?a.charAt(p):s:t?a.slice(p,p+2):(s-55296<<10)+(r-56320)+65536)}}},function(t,e){var n=Math.ceil,i=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?i:n)(t)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){"use strict";var i=n(11),o=n(12),s=n(27),r=n(17),a=n(28),p=n(29),u=n(30),l=n(46),h=n(48),c=n(47)("iterator"),d=!([].keys&&"next"in[].keys()),f="@@iterator",_="keys",g="values",y=function(){return this};t.exports=function(t,e,n,v,m,b,x){u(n,e,v);var w,S,P,k=function(t){if(!d&&t in M)return M[t];switch(t){case _:return function(){return new n(this,t)};case g:return function(){return new n(this,t)}}return function(){return new n(this,t)}},T=e+" Iterator",C=m==g,E=!1,M=t.prototype,O=M[c]||M[f]||m&&M[m],L=O||k(m),B=m?C?k("entries"):L:void 0,D="Array"==e?M.entries||O:O;if(D&&(P=h(D.call(new t)),P!==Object.prototype&&(l(P,T,!0),i||a(P,c)||r(P,c,y))),C&&O&&O.name!==g&&(E=!0,L=function(){return O.call(this)}),i&&!x||!d&&!E&&M[c]||r(M,c,L),p[e]=L,p[T]=y,m)if(w={values:C?L:k(g),keys:b?L:k(_),entries:B},x)for(S in w)S in M||s(M,S,w[S]);else o(o.P+o.F*(d||E),e,w);return w}},function(t,e){t.exports=!0},function(t,e,n){var i=n(13),o=n(14),s=n(15),r=n(17),a="prototype",p=function(t,e,n){var u,l,h,c=t&p.F,d=t&p.G,f=t&p.S,_=t&p.P,g=t&p.B,y=t&p.W,v=d?o:o[e]||(o[e]={}),m=v[a],b=d?i:f?i[e]:(i[e]||{})[a];d&&(n=e);for(u in n)l=!c&&b&&void 0!==b[u],l&&u in v||(h=l?b[u]:n[u],v[u]=d&&"function"!=typeof b[u]?n[u]:g&&l?s(h,i):y&&b[u]==h?function(t){var e=function(e,n,i){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,i)}return t.apply(this,arguments)};return e[a]=t[a],e}(h):_&&"function"==typeof h?s(Function.call,h):h,_&&((v.virtual||(v.virtual={}))[u]=h,t&p.R&&m&&!m[u]&&r(m,u,h)))};p.F=1,p.G=2,p.S=4,p.P=8,p.B=16,p.W=32,p.U=64,p.R=128,t.exports=p},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n=t.exports={version:"2.2.2"};"number"==typeof __e&&(__e=n)},function(t,e,n){var i=n(16);t.exports=function(t,e,n){if(i(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,i){return t.call(e,n,i)};case 3:return function(n,i,o){return t.call(e,n,i,o)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var i=n(18),o=n(26);t.exports=n(22)?function(t,e,n){return i.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var i=n(19),o=n(21),s=n(25),r=Object.defineProperty;e.f=n(22)?Object.defineProperty:function(t,e,n){if(i(t),e=s(e,!0),i(n),o)try{return r(t,e,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var i=n(20);t.exports=function(t){if(!i(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){t.exports=!n(22)&&!n(23)(function(){return 7!=Object.defineProperty(n(24)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){t.exports=!n(23)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},function(t,e,n){var i=n(20),o=n(13).document,s=i(o)&&i(o.createElement);t.exports=function(t){return s?o.createElement(t):{}}},function(t,e,n){var i=n(20);t.exports=function(t,e){if(!i(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!i(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!i(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!i(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){t.exports=n(17)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e){t.exports={}},function(t,e,n){"use strict";var i=n(31),o=n(26),s=n(46),r={};n(17)(r,n(47)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=i(r,{next:o(1,n)}),s(t,e+" Iterator")}},function(t,e,n){var i=n(19),o=n(32),s=n(44),r=n(41)("IE_PROTO"),a=function(){},p="prototype",u=function(){var t,e=n(24)("iframe"),i=s.length,o=">";for(e.style.display="none",n(45).appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write("