Skip to content

Commit

Permalink
Merge pull request #137 from vigie/ng2
Browse files Browse the repository at this point in the history
Upgrading Angular 2 directive to be compatible with Angular version ^…
  • Loading branch information
inorganik committed Dec 19, 2016
2 parents 3b1a41b + 8264269 commit 309f745
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 134 deletions.
29 changes: 21 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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',
Expand All @@ -109,10 +123,9 @@ import {CountUpDirective} from 'countup.js/dist/countUp.directive';
[startVal]="myStartVal"
[endVal]="myEndVal"
[reanimateOnClick]="false"></h1>
`,
directives: [CountUpDirective]
`
})
export class CloudCardComponent {
export class CountingHeaderComponent {
@Input()
myStartVal: number;

Expand Down
12 changes: 11 additions & 1 deletion countUp.directive.ts → countUp.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import {
Input,
HostListener,
Inject,
OnInit
OnInit,
NgModule
} from '@angular/core';

declare var CountUp;
Expand Down Expand Up @@ -118,3 +119,12 @@ export class CountUpDirective implements OnInit {
}
}
}

/**
* Module providing the countUp directive.
*/
@NgModule({
declarations: [CountUpDirective],
exports: [CountUpDirective]
})
export class CountUpModule {}
2 changes: 1 addition & 1 deletion dist/angular-countUp.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

121 changes: 0 additions & 121 deletions dist/countUp.directive.js

This file was deleted.

2 changes: 2 additions & 0 deletions dist/countUp.directive.d.ts → dist/countUp.module.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@ export declare class CountUpDirective implements OnInit {
private createCountUp(sta, end, dec, dur);
private animate();
}
export declare class CountUpModule {
}
132 changes: 132 additions & 0 deletions dist/countUp.module.js
Original file line number Diff line number Diff line change
@@ -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;
});
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -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,
Expand Down

0 comments on commit 309f745

Please sign in to comment.