countup.js - npm Package Compare versions

Comparing version 1.7.1 to 1.8.1

countUp.js

@@ -105,3 +105,3 @@ /*
         }
-        else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
+        else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
             this.d.textContent = result;
@@ -108,0 +108,0 @@ }

dist/angular-countUp.min.js

@@ -1,1 +0,1 @@
-!function(n){"use strict";var t=n.module("countUpModule",[]);t.directive("countUp",["$filter",function(t){return{restrict:"A",scope:{startVal:"=?",endVal:"=?",duration:"=?",decimals:"=?",reanimateOnClick:"=?",filter:"@",options:"=?"},link:function(a,e,i){function r(){var n=a.filter.split(":"),e=n.shift();return function(a){var i=[a];return Array.prototype.push.apply(i,n),a=t(e).apply(null,i)}}function l(n,t,a,i){n=n||0,isNaN(n)&&(n=Number(n.match(/[\d\-\.]+/g).join(""))),t=t||0,isNaN(t)&&(t=Number(t.match(/[\d\-\.]+/g).join(""))),i=Number(i)||2,a=Number(a)||0;var r=new CountUp(e[0],n,t,a,i,u);return t>999&&(r=new CountUp(e[0],n,t-100,a,i/2,u)),r}function o(){s.reset(),a.endVal>999?s.start(function(){s.update(a.endVal)}):s.start()}var u={};if(a.filter){var c=r();u.formattingFn=c}a.options&&n.extend(u,a.options);var s=l(a.startVal,a.endVal,a.decimals,a.duration);i.scrollSpyEvent?a.$on(i.scrollSpyEvent,function(n,t){t===i.id&&o()}):o();var d=n.isDefined(a.reanimateOnClick)?a.reanimateOnClick:!0;d&&e.on("click",function(){o()}),a.$watch("endVal",function(n,t){null!==n&&n!==t&&(null!==s?s.update(a.endVal):(s=l(a.startVal,a.endVal,a.decimals,a.duration),o()))})}}}])}(angular);
+!function(n){"use strict";var t=n.module("countUpModule",[]);t.directive("countUp",["$filter",function(t){return{restrict:"A",scope:{startVal:"=?",endVal:"=?",duration:"=?",decimals:"=?",reanimateOnClick:"=?",filter:"@",options:"=?"},link:function(a,e,i){function r(){var n=a.filter.split(":"),e=n.shift();return function(a){var i=[a];return Array.prototype.push.apply(i,n),a=t(e).apply(null,i)}}function l(n,t,a,i){n=n||0,isNaN(n)&&(n=Number(n.match(/[\d\-\.]+/g).join(""))),t=t||0,isNaN(t)&&(t=Number(t.match(/[\d\-\.]+/g).join(""))),i=Number(i)||2,a=Number(a)||0;var r=new CountUp(e[0],n,t,a,i,u);return t>999&&(r=new CountUp(e[0],n,t-100,a,i/2,u)),r}function o(){s.reset(),a.endVal>999?s.start(function(){s.update(a.endVal)}):s.start()}var u={};if(a.filter){var c=r();u.formattingFn=c}a.options&&n.extend(u,a.options);var s=l(a.startVal,a.endVal,a.decimals,a.duration);i.scrollSpyEvent?a.$on(i.scrollSpyEvent,function(n,t){t===i.id&&o()}):o();var d=!n.isDefined(a.reanimateOnClick)||a.reanimateOnClick;d&&e.on("click",function(){o()}),a.$watch("endVal",function(n,t){null!==n&&n!==t&&(null!==s?s.update(a.endVal):(s=l(a.startVal,a.endVal,a.decimals,a.duration),o()))})}}}])}(angular);

dist/countUp.js

@@ -116,3 +116,3 @@
         }
-        else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
+        else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
             this.d.textContent = result;
@@ -119,0 +119,0 @@ }

gulpfile.js

@@ -6,5 +6,7 @@ var gulp = require('gulp');
 var del = require('del');
+var ts = require("gulp-typescript");
+var tsProject = ts.createProject("tsconfig.json");
 
 gulp.task('clean', function(cb) {
-    del(['dist/*.js']);
+    del(['dist/*']);
     return cb();
@@ -34,2 +36,6 @@ });
         .pipe(gulp.dest('dist/'));
+    var angular2Countup = tsProject
+        .src()
+        .pipe(tsProject())
+        .pipe(gulp.dest('dist/'));
 });
@@ -36,0 +42,0 @@

package.json

 {
   "name": "countup.js",
   "description": "Animates a numerical value by counting to it",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "licenses": "MIT",
@@ -13,7 +13,13 @@ "main": "./dist/countUp.min.js",
   "devDependencies": {
+    "@angular/core": "^2.2.3",
+    "@types/core-js": "^0.9.34",
+    "del": "~0.1.3",
     "gulp": "~3.8.10",
+    "gulp-rename": "~1.2.0",
+    "gulp-typescript": "^3.1.3",
     "gulp-uglify": "^1.4.2",
-    "gulp-rename": "~1.2.0",
     "gulp-wrap-umd": "~0.2.1",
-    "del": "~0.1.3"
+    "rxjs": "^5.0.1",
+    "typescript": "^2.0.10",
+    "zone.js": "^0.7.2"
   },
@@ -20,0 +26,0 @@ "scripts": {

README.md

@@ -12,3 +12,3 @@ # CountUp.js
 
-Simply include the countUp.js file in your project or install via npm or bower using the package name `countup.js`.
+Simply include the countUp.js file in your project or install via npm or bower using the package name `countup.js` or `countUp.js` respectively.
 
@@ -18,4 +18,10 @@ Before making a pull request, please [read this](#contributing). MIT License.
 ## Angular directive
-Included is an angular module. Use the count-up attribute to quickly create an animation. It also integrates nicely with the angular-scroll-spy directive. The Angular directive only requires an `end-val` attribute, but will also accept `start-val`, `duration`, `decimals`, and `options`. `id` is not needed. You must include both countUp.js and the module to use the angular directive. **[Check out the angular demo](http://inorganik.github.io/angular-scroll-spy).**
+If you are using Angular, you can use the included Angular module. Use the count-up attribute to quickly create an animation. It also integrates nicely with the Angular-scroll-spy directive. The Angular directive only requires an `end-val` attribute, but will also accept `start-val`, `duration`, `decimals`, and `options`. `id` is not needed. You must include both countUp.js and the module to use the Angular directive. **[Check out the angular demo](http://inorganik.github.io/angular-scroll-spy/)** and see usage examples below.
 
+## Angular 2 directive
+An identical Angular 2 version of the directive compatible with version ^2.0.0 is also provided.
+Simply import the module from `dist/` into your application module's `imports` array.
+
+See example below.
+
 ## WordPress plugin
@@ -50,2 +56,23 @@ If you want a quick and easy way to use this on your WordPress site, try this plugin by [@4DMedia](https://twitter.com/4dMedia): [https://wordpress.org/plugins/countup-js/](https://wordpress.org/plugins/countup-js/)
 ```
+
+#### Other methods:
+Toggle pause/resume:
+
+```js
+numAnim.pauseResume();
+```
+
+Reset an animation:
+
+```js
+numAnim.reset();
+```
+
+Update the end value and animate:
+
+```js
+var someValue = 1337;
+numAnim.update(someValue);
+```
+
 #### Animating to large numbers
@@ -59,9 +86,11 @@ For large numbers, since CountUp has a long way to go in just a few seconds, the animation seems to abruptly stop. The solution is to subtract 100 from your `endVal`, then use the callback to invoke the `update` method which completes the animation with the same duration with a difference of only 100 to animate:
 });
+```
 
-```
 #### Angular
+*If you are using Angular*, (not required), create your animation like the examples below. Make sure you include both countUp.js and angular-countUp.js, and inject the `countUpModule`.
+
 ```html
 <h2 count-up end-val="873.4"></h2>
 ```
-Width angular-scroll-spy:
+With [angular-scroll-spy](http://inorganik.github.io/angular-scroll-spy/):
 ```html
@@ -71,20 +100,41 @@ <h2 count-up id="numberAnimation" end-val="873.4" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy></h2>
 
-#### Other methods:
-Toggle pause/resume:
+#### Angular 2
 
-```js
-numAnim.pauseResume();
-```
+The directive is compatible with Angular version ^2.0.0.
 
-Reset an animation:
+Make sure `countUp.js` is loaded as a global dependency during bootstrapping.
 
-```js
-numAnim.reset();
-```
+Note the value for the `options` parameter is passed directly to the directive attribute selector.
 
-Update the end value and animate:
+```ts
+import {Component, NgModule} from '@angular/core';
 
-```js
-var someValue = 1337;
-numAnim.update(someValue);
+import {CountUpModule} from 'countup.js/dist/countUp.module';
+
+@NgModule({
+   imports: [CountUpModule],
+   bootstrap: [AppComponent]
+})
+export class AppModule {}
+
+// ...
+// ...
+// Use in some component contained within the importing module...
+
+@Component({
+   selector: 'counting-header',
+   template: `
+        <h1 countUp="{useEasing: false}"
+            [startVal]="myStartVal"
+            [endVal]="myEndVal"
+            [reanimateOnClick]="false"></h1>
+   `
+})
+export class CountingHeaderComponent {
+    @Input()
+    myStartVal: number;
+
+    @Input()
+    myEndVal: number;
+}
 ```
@@ -122,7 +172,7 @@
 
-Before you make a pull request, please be sure to follow these super simple instructions: 
+Before you make a pull request, please be sure to follow these super simple instructions:
 
-1. Do your work on the `countUp.js` and/or `angular-countUp.js` files in the root directory. 
-2. In Terminal, `cd` to the `countUp.js` directory. 
+1. Do your work on the `countUp.js` and/or `angular-countUp.js` files in the root directory.
+2. In Terminal, `cd` to the `countUp.js` directory.
 3. Run `npm install`, which installs gulp and its dependencies.
 4. Run `gulp`, which copies and minifies the .js files to the `dist` folder.

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

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

Improved metrics

Total package byte prevSize

70249

increased by23.57%

Number of package files

20

increased by42.86%

Lines of code

973

increased by55.93%

Number of lines in readme file

173

increased by40.65%

Worsened metrics

Dev dependency count

11

increased by120%

No dependency changes