Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

stepperjs

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stepperjs - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

dist/stepperjs.browser-0.1.0.js

13

dist/index.js
'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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc