Comparing version 0.0.3 to 0.1.0
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _raf = require('raf'); | ||
var _raf2 = _interopRequireDefault(_raf); | ||
var _Stepper = require('./Stepper'); | ||
@@ -9,5 +17,4 @@ | ||
var easings = void 0; | ||
_raf2.default.polyfill(); | ||
module.exports = _Stepper2.default; | ||
module.exports.easings = easings; | ||
exports.default = _Stepper2.default; |
@@ -7,7 +7,9 @@ 'use strict'; | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _raf = require('raf'); | ||
var _eventemitter = require('eventemitter3'); | ||
var _raf2 = _interopRequireDefault(_raf); | ||
var _eventemitter2 = _interopRequireDefault(_eventemitter); | ||
@@ -28,35 +30,72 @@ var _Status = require('./Status'); | ||
function Stepper() { | ||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
_classCallCheck(this, Stepper); | ||
this.duration = options.duration || 0; | ||
this.easing = options.easing || _linear2.default; | ||
this.loop = options.loop || false; | ||
this.reverse = options.reverse || false; | ||
this.emitter = new _eventemitter2.default(); | ||
this.status = new _Status2.default(); | ||
this.pastTime = 0; | ||
this.rafId = 0; | ||
this.pastTime = 0; | ||
this.status = new _Status2.default(); | ||
this.fnPaused = null; | ||
this.fnStopped = null; | ||
} | ||
/** | ||
* Start a step of raf with easing. | ||
* @param {Object} options | ||
* @example | ||
* import Stepper from 'stepperjs'; | ||
* import linear from 'stepperjs/dist/easings/linear'; | ||
* | ||
* const stepper = new Stepper(); | ||
* | ||
* stepper.start({ | ||
* duration: 300, | ||
* easing: linear, | ||
* loop: true, | ||
* reverse: true, | ||
* start: () => ... , | ||
* doing: (n) => ... , | ||
* paused = () => ... , | ||
* ended: () => ... , | ||
* stopped: () => ... | ||
* }); | ||
*/ | ||
_createClass(Stepper, [{ | ||
key: 'option', | ||
value: function option(key, value) { | ||
if (typeof key === 'string' && value === undefined) { | ||
return this[key]; | ||
} | ||
if ((typeof key === 'undefined' ? 'undefined' : _typeof(key)) === 'object' && key.constructor === Object) { | ||
for (var name in key) { | ||
if (key.hasOwnProperty(name)) { | ||
this[name] = key[name]; | ||
} | ||
} | ||
} else { | ||
this[key] = value; | ||
} | ||
_createClass(Stepper, [{ | ||
return this; | ||
} | ||
}, { | ||
key: 'on', | ||
value: function on() { | ||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
var arg = args[0]; | ||
if ((typeof arg === 'undefined' ? 'undefined' : _typeof(arg)) === 'object' && arg.constructor === Object) { | ||
for (var key in arg) { | ||
if (arg.hasOwnProperty(key)) { | ||
this.emitter.on(key, arg[key]); | ||
} | ||
} | ||
} else { | ||
this.emitter.on.apply(this.emitter, args); | ||
} | ||
return this; | ||
} | ||
}, { | ||
key: 'off', | ||
value: function off() { | ||
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
args[_key2] = arguments[_key2]; | ||
} | ||
if (args.length === 0) { | ||
this.emitter.removeAllListeners(); | ||
} else { | ||
this.emitter.off.apply(this.emitter, args); | ||
} | ||
return this; | ||
} | ||
}, { | ||
key: 'start', | ||
@@ -66,43 +105,25 @@ value: function start() { | ||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
var _options$duration = options.duration, | ||
duration = _options$duration === undefined ? 0 : _options$duration, | ||
_options$easing = options.easing, | ||
easing = _options$easing === undefined ? _linear2.default : _options$easing, | ||
_options$loop = options.loop, | ||
loop = _options$loop === undefined ? false : _options$loop, | ||
_options$reverse = options.reverse, | ||
reverse = _options$reverse === undefined ? false : _options$reverse, | ||
_options$start = options.start, | ||
start = _options$start === undefined ? function () {} : _options$start, | ||
_options$doing = options.doing, | ||
doing = _options$doing === undefined ? function () {} : _options$doing, | ||
_options$paused = options.paused, | ||
paused = _options$paused === undefined ? function () {} : _options$paused, | ||
_options$ended = options.ended, | ||
ended = _options$ended === undefined ? function () {} : _options$ended, | ||
_options$stopped = options.stopped, | ||
stopped = _options$stopped === undefined ? function () {} : _options$stopped; | ||
if (duration === 0 || this.status.isPlaying()) { | ||
if (this.duration === 0 || this.status.isPlaying()) { | ||
return; | ||
} | ||
this.fnPaused = paused; | ||
this.fnStopped = stopped; | ||
var duration = this.duration; | ||
var easing = this.reverse ? function (n) { | ||
return 1 - _this.easing(n); | ||
} : function (n) { | ||
return 0 + _this.easing(n); | ||
}; | ||
var startTime = 0; | ||
var getNow = reverse ? function (time) { | ||
return 1 - easing(time); | ||
} : function (time) { | ||
return 0 + easing(time); | ||
}; | ||
var startTime = +new Date() - this.pastTime; | ||
var stepping = function stepping() { | ||
var pastTime = +new Date() - startTime; | ||
var stepping = function stepping(timestamp) { | ||
if (!startTime) { | ||
startTime = timestamp - _this.pastTime; | ||
} | ||
var pastTime = timestamp - startTime; | ||
var progress = pastTime / duration; | ||
if (pastTime >= duration) { | ||
if (loop) { | ||
startTime = +new Date(); | ||
if (_this.loop) { | ||
startTime = timestamp; | ||
} else { | ||
@@ -112,5 +133,5 @@ _this.pastTime = 0; | ||
_this.status.stop(); | ||
_this.emitter.emit('update', easing(1)); | ||
_this.emitter.emit('ended'); | ||
ended(); | ||
return; | ||
@@ -120,12 +141,12 @@ } | ||
doing(getNow(progress)); | ||
_this.emitter.emit('update', easing(progress)); | ||
_this.pastTime = pastTime; | ||
_this.rafId = (0, _raf2.default)(stepping); | ||
_this.rafId = window.requestAnimationFrame(stepping); | ||
}; | ||
this.status.play(); | ||
this.emitter.emit('start'); | ||
start(); | ||
stepping(); | ||
window.requestAnimationFrame(stepping); | ||
} | ||
@@ -139,10 +160,7 @@ }, { | ||
_raf2.default.cancel(this.rafId); | ||
window.cancelAnimationFrame(this.rafId); | ||
this.rafId = 0; | ||
this.status.pause(); | ||
if (this.fnPaused) { | ||
this.fnPaused(); | ||
} | ||
this.emitter.emit('paused'); | ||
} | ||
@@ -156,3 +174,3 @@ }, { | ||
_raf2.default.cancel(this.rafId); | ||
window.cancelAnimationFrame(this.rafId); | ||
@@ -162,6 +180,3 @@ this.pastTime = 0; | ||
this.status.stop(); | ||
if (this.fnStopped) { | ||
this.fnStopped(); | ||
} | ||
this.emitter.emit('stopped'); | ||
} | ||
@@ -168,0 +183,0 @@ }]); |
{ | ||
"name": "stepperjs", | ||
"version": "0.0.3", | ||
"version": "0.1.0", | ||
"description": "A tiny requestAnimationFrame wrapper to improve usability.", | ||
@@ -12,3 +12,3 @@ "main": "dist/index.js", | ||
"build:browser": "webpack --config webpack.config.js", | ||
"build:commonjs": "babel src -d dist --presets es2015 --plugins transform-class-properties,transform-inline-environment-variables,transform-dead-code-elimination", | ||
"build:commonjs": "babel src -d dist --ignore browser.js --presets es2015 --plugins transform-class-properties", | ||
"build": "npm run build:browser && npm run build:commonjs", | ||
@@ -36,6 +36,4 @@ "dev": "webpack-dev-server --progress --inline", | ||
"babel-plugin-transform-class-properties": "6.18.0", | ||
"babel-plugin-transform-dead-code-elimination": "2.2.1", | ||
"babel-plugin-transform-es3-member-expression-literals": "6.8.0", | ||
"babel-plugin-transform-es3-property-literals": "6.8.0", | ||
"babel-plugin-transform-inline-environment-variables": "^6.8.0", | ||
"babel-preset-es2015": "6.18.0", | ||
@@ -57,2 +55,3 @@ "babel-preset-es2015-loose": "8.0.0", | ||
"mocha": "3.1.2", | ||
"raf-stub": "^1.0.1", | ||
"sinon": "1.17.6", | ||
@@ -63,4 +62,5 @@ "webpack": "1.13.3", | ||
"dependencies": { | ||
"eventemitter3": "2.0.2", | ||
"raf": "3.3.0" | ||
} | ||
} |
@@ -23,9 +23,10 @@ # StepperJS | ||
stepper.start({ | ||
stepper({ | ||
duration: 300, // default: 0 | ||
easing: linear, // default: linear | ||
loop: true, // default: false | ||
reverse: true, // default: false | ||
reverse: true // default: false | ||
}).on({ | ||
start: () => ... , | ||
doing: (n) => ... , | ||
update: (n) => ... , | ||
paused: () => ... , | ||
@@ -36,4 +37,3 @@ ended: () => ... , | ||
stepper.pause(); | ||
stepper.stop(); | ||
stepper.start(); | ||
``` | ||
@@ -44,15 +44,16 @@ | ||
```html | ||
<script type="text/javascript" src="stepperjs.browser-0.0.3.min.js"></script></head> | ||
<script type="text/javascript" src="stepperjs.browser-0.1.0.min.js"></script></head> | ||
``` | ||
```js | ||
var stepper = new Stepper(); | ||
stepper.start({ | ||
var Stepper = stepperjs.Stepper(); | ||
var easings = stepperjs.easings; | ||
var stepper = new Stepper({ | ||
duration: 300, | ||
easing: Stepper.easings.linear, | ||
easing: easings.linear, | ||
loop: true, | ||
reverse: true, | ||
reverse: true | ||
}).on({ | ||
start: function () { ... }, | ||
doing: function (n) { ... }, | ||
update: function (n) { ... }, | ||
paused: function () { ... }, | ||
@@ -63,4 +64,3 @@ ended: function () { ... }, | ||
stepper.pause(); | ||
stepper.stop(); | ||
stepper.start(); | ||
``` | ||
@@ -67,0 +67,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
132928
25
1687
2
+ Addedeventemitter3@2.0.2
+ Addedeventemitter3@2.0.2(transitive)