stepperjs - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

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;

dist/Stepper.js

@@ -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 @@ }]);

package.json

 {
   "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"
   }
 }

README.md

@@ -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 @@

New alerts

License Policy Violation

License

This 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 risk

Package 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

Fixed alerts

License Policy Violation

License

This 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 risk

Package 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

Improved metrics

Total package byte prevSize

132928

increased by25.96%

Dev dependency count

25

decreased by-3.85%

Lines of code

1687

increased by22.51%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedeventemitter3@2.0.2

• + Addedeventemitter3@2.0.2(transitive)