From 826426982b849cfd016c2e1193521f9e2fe4f969 Mon Sep 17 00:00:00 2001 From: Matt Critchlow Date: Fri, 16 Dec 2016 20:40:14 -0800 Subject: [PATCH] Upgrading Angular 2 directive to be compatible with Angular version ^2.0.0 Changing bundle to UMD mode for use with webpack. Fixes https://github.com/inorganik/countUp.js/issues/133 Tested with an Angular 2.2.4 application. --- README.md | 29 ++-- countUp.directive.ts => countUp.module.ts | 12 +- dist/angular-countUp.min.js | 2 +- dist/countUp.directive.js | 121 ---------------- ...tUp.directive.d.ts => countUp.module.d.ts} | 2 + dist/countUp.module.js | 132 ++++++++++++++++++ package.json | 4 +- tsconfig.json | 4 +- 8 files changed, 172 insertions(+), 134 deletions(-) rename countUp.directive.ts => countUp.module.ts (93%) delete mode 100644 dist/countUp.directive.js rename dist/{countUp.directive.d.ts => countUp.module.d.ts} (92%) create mode 100644 dist/countUp.module.js diff --git a/README.md b/README.md index 3fe8300..e414bec 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,9 @@ Before making a pull request, please [read this](#contributing). MIT License. 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 is also provided. Simply import the directive from `dist/` into the `directives` array of the component you wish to use it in. +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 @@ -93,14 +95,26 @@ With [angular-scroll-spy](http://inorganik.github.io/angular-scroll-spy/): #### Angular 2 -Make sure countUp.js is loaded as a global dependency during bootstrapping. +The directive is compatible with Angular version ^2.0.0. + +Make sure `countUp.js` is loaded as a global dependency during bootstrapping. -Note the value for the options parameter is passed directly to the directive attribute selector. +Note the value for the `options` parameter is passed directly to the directive attribute selector. ```ts -import {Component} from '@angular/core'; +import {Component, NgModule} from '@angular/core'; + +import {CountUpModule} from 'countup.js/dist/countUp.module'; + +@NgModule({ + imports: [CountUpModule], + bootstrap: [AppComponent] +}) +export class AppModule {} -import {CountUpDirective} from 'countup.js/dist/countUp.directive'; +// ... +// ... +// Use in some component contained within the importing module... @Component({ selector: 'counting-header', @@ -109,10 +123,9 @@ import {CountUpDirective} from 'countup.js/dist/countUp.directive'; [startVal]="myStartVal" [endVal]="myEndVal" [reanimateOnClick]="false"> - `, - directives: [CountUpDirective] + ` }) -export class CloudCardComponent { +export class CountingHeaderComponent { @Input() myStartVal: number; diff --git a/countUp.directive.ts b/countUp.module.ts similarity index 93% rename from countUp.directive.ts rename to countUp.module.ts index d3dcbdd..b6da921 100644 --- a/countUp.directive.ts +++ b/countUp.module.ts @@ -4,7 +4,8 @@ import { Input, HostListener, Inject, - OnInit + OnInit, + NgModule } from '@angular/core'; declare var CountUp; @@ -118,3 +119,12 @@ export class CountUpDirective implements OnInit { } } } + +/** + * Module providing the countUp directive. + */ +@NgModule({ + declarations: [CountUpDirective], + exports: [CountUpDirective] +}) +export class CountUpModule {} diff --git a/dist/angular-countUp.min.js b/dist/angular-countUp.min.js index e33a90f..8b02a25 100644 --- a/dist/angular-countUp.min.js +++ b/dist/angular-countUp.min.js @@ -1 +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); \ No newline at end of file +!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); \ No newline at end of file diff --git a/dist/countUp.directive.js b/dist/countUp.directive.js deleted file mode 100644 index 4baa7c6..0000000 --- a/dist/countUp.directive.js +++ /dev/null @@ -1,121 +0,0 @@ -System.register(['@angular/core'], function(exports_1, context_1) { - "use strict"; - var __moduleName = context_1 && context_1.id; - var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; - }; - var __metadata = (this && this.__metadata) || function (k, v) { - if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); - }; - var __param = (this && this.__param) || function (paramIndex, decorator) { - return function (target, key) { decorator(target, key, paramIndex); } - }; - var core_1; - var CountUpDirective; - return { - setters:[ - function (core_1_1) { - core_1 = core_1_1; - }], - execute: function() { - CountUpDirective = (function () { - function CountUpDirective(el) { - this.el = el; - } - Object.defineProperty(CountUpDirective.prototype, "endVal", { - get: function () { - return this._endVal; - }, - set: function (value) { - this._endVal = value; - if (isNaN(value)) { - return; - } - if (!this._countUp) { - return; - } - this._countUp.update(value); - }, - enumerable: true, - configurable: true - }); - CountUpDirective.prototype.ngOnInit = function () { - this._countUp = this.createCountUp(this.startVal, this.endVal, this.decimals, this.duration); - this.animate(); - }; - CountUpDirective.prototype.onClick = function () { - if (this.reanimateOnClick) { - this.animate(); - } - }; - CountUpDirective.prototype.createCountUp = function (sta, end, dec, dur) { - sta = sta || 0; - if (isNaN(sta)) - sta = Number(sta.match(/[\d\-\.]+/g).join('')); - end = end || 0; - if (isNaN(end)) - end = Number(end.match(/[\d\-\.]+/g).join('')); - dur = Number(dur) || 2; - dec = Number(dec) || 0; - var countUp = new CountUp(this.el.nativeElement, sta, end, dec, dur, this.options); - if (end > 999) { - countUp = new CountUp(this.el.nativeElement, sta, end - 100, dec, dur / 2, this.options); - } - return countUp; - }; - CountUpDirective.prototype.animate = function () { - var _this = this; - this._countUp.reset(); - if (this.endVal > 999) { - this._countUp.start(function () { return _this._countUp.update(_this.endVal); }); - } - else { - this._countUp.start(); - } - }; - __decorate([ - core_1.Input('countUp'), - __metadata('design:type', Object) - ], CountUpDirective.prototype, "options", void 0); - __decorate([ - core_1.Input(), - __metadata('design:type', Number) - ], CountUpDirective.prototype, "startVal", void 0); - __decorate([ - core_1.Input(), - __metadata('design:type', Number) - ], CountUpDirective.prototype, "endVal", null); - __decorate([ - core_1.Input(), - __metadata('design:type', Number) - ], CountUpDirective.prototype, "duration", void 0); - __decorate([ - core_1.Input(), - __metadata('design:type', Number) - ], CountUpDirective.prototype, "decimals", void 0); - __decorate([ - core_1.Input(), - __metadata('design:type', Boolean) - ], CountUpDirective.prototype, "reanimateOnClick", void 0); - __decorate([ - core_1.HostListener('click'), - __metadata('design:type', Function), - __metadata('design:paramtypes', []), - __metadata('design:returntype', void 0) - ], CountUpDirective.prototype, "onClick", null); - CountUpDirective = __decorate([ - core_1.Directive({ - selector: '[countUp]' - }), - __param(0, core_1.Inject(core_1.ElementRef)), - __metadata('design:paramtypes', [core_1.ElementRef]) - ], CountUpDirective); - return CountUpDirective; - }()); - exports_1("CountUpDirective", CountUpDirective); - } - } -}); diff --git a/dist/countUp.directive.d.ts b/dist/countUp.module.d.ts similarity index 92% rename from dist/countUp.directive.d.ts rename to dist/countUp.module.d.ts index b03649f..5c3e559 100644 --- a/dist/countUp.directive.d.ts +++ b/dist/countUp.module.d.ts @@ -15,3 +15,5 @@ export declare class CountUpDirective implements OnInit { private createCountUp(sta, end, dec, dur); private animate(); } +export declare class CountUpModule { +} diff --git a/dist/countUp.module.js b/dist/countUp.module.js new file mode 100644 index 0000000..f84af32 --- /dev/null +++ b/dist/countUp.module.js @@ -0,0 +1,132 @@ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var __param = (this && this.__param) || function (paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +}; +(function (dependencies, factory) { + if (typeof module === 'object' && typeof module.exports === 'object') { + var v = factory(require, exports); if (v !== undefined) module.exports = v; + } + else if (typeof define === 'function' && define.amd) { + define(dependencies, factory); + } +})(["require", "exports", "@angular/core"], function (require, exports) { + "use strict"; + var core_1 = require("@angular/core"); + var CountUpDirective = (function () { + function CountUpDirective(el) { + this.el = el; + } + Object.defineProperty(CountUpDirective.prototype, "endVal", { + get: function () { + return this._endVal; + }, + set: function (value) { + this._endVal = value; + if (isNaN(value)) { + return; + } + if (!this._countUp) { + return; + } + this._countUp.update(value); + }, + enumerable: true, + configurable: true + }); + CountUpDirective.prototype.ngOnInit = function () { + this._countUp = this.createCountUp(this.startVal, this.endVal, this.decimals, this.duration); + this.animate(); + }; + CountUpDirective.prototype.onClick = function () { + if (this.reanimateOnClick) { + this.animate(); + } + }; + CountUpDirective.prototype.createCountUp = function (sta, end, dec, dur) { + sta = sta || 0; + if (isNaN(sta)) + sta = Number(sta.match(/[\d\-\.]+/g).join('')); + end = end || 0; + if (isNaN(end)) + end = Number(end.match(/[\d\-\.]+/g).join('')); + dur = Number(dur) || 2; + dec = Number(dec) || 0; + var countUp = new CountUp(this.el.nativeElement, sta, end, dec, dur, this.options); + if (end > 999) { + countUp = new CountUp(this.el.nativeElement, sta, end - 100, dec, dur / 2, this.options); + } + return countUp; + }; + CountUpDirective.prototype.animate = function () { + var _this = this; + this._countUp.reset(); + if (this.endVal > 999) { + this._countUp.start(function () { return _this._countUp.update(_this.endVal); }); + } + else { + this._countUp.start(); + } + }; + return CountUpDirective; + }()); + __decorate([ + core_1.Input('countUp'), + __metadata("design:type", Object) + ], CountUpDirective.prototype, "options", void 0); + __decorate([ + core_1.Input(), + __metadata("design:type", Number) + ], CountUpDirective.prototype, "startVal", void 0); + __decorate([ + core_1.Input(), + __metadata("design:type", Number), + __metadata("design:paramtypes", []) + ], CountUpDirective.prototype, "endVal", null); + __decorate([ + core_1.Input(), + __metadata("design:type", Number) + ], CountUpDirective.prototype, "duration", void 0); + __decorate([ + core_1.Input(), + __metadata("design:type", Number) + ], CountUpDirective.prototype, "decimals", void 0); + __decorate([ + core_1.Input(), + __metadata("design:type", Boolean) + ], CountUpDirective.prototype, "reanimateOnClick", void 0); + __decorate([ + core_1.HostListener('click'), + __metadata("design:type", Function), + __metadata("design:paramtypes", []), + __metadata("design:returntype", void 0) + ], CountUpDirective.prototype, "onClick", null); + CountUpDirective = __decorate([ + core_1.Directive({ + selector: '[countUp]' + }), + __param(0, core_1.Inject(core_1.ElementRef)), + __metadata("design:paramtypes", [core_1.ElementRef]) + ], CountUpDirective); + exports.CountUpDirective = CountUpDirective; + var CountUpModule = (function () { + function CountUpModule() { + } + return CountUpModule; + }()); + CountUpModule = __decorate([ + core_1.NgModule({ + declarations: [CountUpDirective], + exports: [CountUpDirective] + }), + __metadata("design:paramtypes", []) + ], CountUpModule); + exports.CountUpModule = CountUpModule; +}); diff --git a/package.json b/package.json index 62cbc46..3bd5ca1 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "gulp-typescript": "^3.1.3", "gulp-uglify": "^1.4.2", "gulp-wrap-umd": "~0.2.1", - "typescript": "^2.0.10" + "rxjs": "^5.0.1", + "typescript": "^2.0.10", + "zone.js": "^0.7.2" }, "scripts": { "build": "gulp", diff --git a/tsconfig.json b/tsconfig.json index 413ad82..3e9481b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,12 +1,12 @@ { "files": [ - "countUp.directive.ts" + "countUp.module.ts" ], "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", - "module": "system", + "module": "umd", "moduleResolution": "node", "removeComments": true, "sourceMap": true,