Skip to content

Commit 6633d7e

Browse files
inorganikinorganik
committed
initial commit
0 parents  commit 6633d7e

File tree

9 files changed

+3361
-0
lines changed

9 files changed

+3361
-0
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
npm-debug.log
3+
.idea
4+
.DS_Store
5+
tasks.json

‎LICENSE.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
The MIT License (MIT)
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of
4+
this software and associated documentation files (the "Software"), to deal in
5+
the Software without restriction, including without limitation the rights to
6+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
7+
the Software, and to permit persons to whom the Software is furnished to do so,
8+
subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# CountUp.js Angular 1.x Module
2+
Attribute directive used to quickly create animations that display numerical data in a more interesting way.
3+
4+
Despite its name, CountUp can count in either direction, depending on the `startVal` and `endVal` params that you pass.
5+
6+
CountUp.js supports all browsers.
7+
8+
### [Angular demo (with scroll-spy)](http://inorganik.github.io/angular-scroll-spy/)** and see usage examples below.
9+
10+
## See Also
11+
12+
- [CountUp.js repo](https://github.com/inorganik/countUp.js)
13+
- [CountUp.js for Angular 2](https://github.com/inorganik/countUp.js)
14+
15+
## Usage
16+
17+
Inject `countUpModule`. Use the `count-up` attribute to quickly create an animation. It also integrates nicely with the [Angular-scroll-spy](http://inorganik.github.io/angular-scroll-spy/) directive.
18+
19+
Attributes:
20+
- `end-val: Number` (required)
21+
- `start-val: Number`
22+
- `duration: Number`
23+
- `decimals: Number`
24+
- `options: Object` (see [CountUp](https://github.com/inorganik/countUp.js))
25+
26+
Create your animation like the examples below:
27+
28+
```html
29+
<h2 count-up end-val="873.4"></h2>
30+
```
31+
With `angular-scroll-spy`:
32+
```html
33+
<h2 count-up id="numberAnimation" end-val="873.4" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy></h2>
34+
```
35+
36+
## Dependency
37+
38+
[`countup.js`](https://github.com/inorganik/countUp.js) is configured as a dependency in `package.json`. If you are manually including dependencies, make sure to include:
39+
- `countUp.min.js`
40+
- `angular-countUp.min.js`
41+
42+
## Contributing
43+
44+
Before you make a pull request, please be sure to follow these simple instructions:
45+
46+
1. Do your work on `angular-countUp.js` in the root directory.
47+
2. In Terminal, `cd` to the repo directory.
48+
3. Run `npm install`, which installs gulp and its dependencies.
49+
4. Run `gulp`, which copies and minifies the .js files to the `dist` folder.

‎angular-countUp.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
(function (angular) {
2+
3+
// Count-Up directive
4+
// --------------------------------------------
5+
//
6+
// * **Class:** CountUp
7+
// * **Author:** Jamie Perkins
8+
//
9+
// Creates a counting animation for numbers
10+
// REQUIRED attributes:
11+
// - endVal
12+
//
13+
// DEPENDENCY: countUp.js
14+
15+
'use strict';
16+
17+
var module = angular.module('countUpModule', []);
18+
19+
/**
20+
* count-up attribute directive
21+
*
22+
* @param {number} startVal - (optional) The value you want to begin at, default 0
23+
* @param {number} countUp - The value you want to arrive at
24+
* @param {number} duration - (optional) Duration in seconds, default 2.
25+
* @param {number} decimals - (optional) Number of decimal places in number, default 0
26+
* @param {boolean} reanimateOnClick - (optional) Config if reanimate on click event, default true.
27+
* @param {string} filter - (optional) Filter expression to apply to animated values
28+
* @param {object} options - (optional) Provides for extra configuration, such as easing.
29+
*/
30+
module.directive('countUp', [ '$filter', function($filter) {
31+
32+
return {
33+
restrict: 'A',
34+
scope: {
35+
startVal: '=?',
36+
endVal: '=?',
37+
duration: '=?',
38+
decimals: '=?',
39+
reanimateOnClick: '=?',
40+
filter: '@',
41+
options: '=?'
42+
},
43+
link: function ($scope, $el, $attrs) {
44+
45+
var options = {};
46+
47+
if ($scope.filter) {
48+
var filterFunction = createFilterFunction();
49+
options.formattingFn = filterFunction;
50+
}
51+
52+
if ($scope.options) {
53+
angular.extend(options, $scope.options);
54+
}
55+
56+
var countUp = createCountUp($scope.startVal, $scope.endVal, $scope.decimals, $scope.duration);
57+
58+
function createFilterFunction() {
59+
var filterParams = $scope.filter.split(':');
60+
var filterName = filterParams.shift();
61+
62+
return function(value) {
63+
var filterCallParams = [value];
64+
Array.prototype.push.apply(filterCallParams, filterParams);
65+
value = $filter(filterName).apply(null, filterCallParams);
66+
return value;
67+
};
68+
}
69+
70+
function createCountUp(sta, end, dec, dur) {
71+
sta = sta || 0;
72+
if (isNaN(sta)) sta = Number(sta.match(/[\d\-\.]+/g).join('')); // strip non-numerical characters
73+
end = end || 0;
74+
if (isNaN(end)) end = Number(end.match(/[\d\-\.]+/g).join('')); // strip non-numerical characters
75+
dur = Number(dur) || 2;
76+
dec = Number(dec) || 0;
77+
78+
// construct countUp
79+
var countUp = new CountUp($el[0], sta, end, dec, dur, options);
80+
if (end > 999) {
81+
// make easing smoother for large numbers
82+
countUp = new CountUp($el[0], sta, end - 100, dec, dur / 2, options);
83+
}
84+
85+
return countUp;
86+
}
87+
88+
function animate() {
89+
countUp.reset();
90+
if ($scope.endVal > 999) {
91+
countUp.start(function() {
92+
countUp.update($scope.endVal);
93+
});
94+
}
95+
else {
96+
countUp.start();
97+
}
98+
}
99+
100+
// fire on scroll-spy event, or right away
101+
if ($attrs.scrollSpyEvent) {
102+
// listen for scroll spy event
103+
$scope.$on($attrs.scrollSpyEvent, function (event, data) {
104+
if (data === $attrs.id) {
105+
animate();
106+
}
107+
});
108+
}
109+
else {
110+
animate();
111+
}
112+
113+
// re-animate on click
114+
var reanimateOnClick = angular.isDefined($scope.reanimateOnClick) ? $scope.reanimateOnClick : true;
115+
if (reanimateOnClick) {
116+
$el.on('click', function() {
117+
animate();
118+
});
119+
}
120+
121+
$scope.$watch('endVal', function (newValue, oldValue) {
122+
if (newValue === null || newValue === oldValue) {
123+
return;
124+
}
125+
126+
if (countUp !== null) {
127+
countUp.update($scope.endVal);
128+
} else {
129+
countUp = createCountUp($scope.startVal, $scope.endVal, $scope.decimals, $scope.duration);
130+
animate();
131+
}
132+
});
133+
}
134+
};
135+
}]);
136+
})(angular);

‎bower.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "countUp.js-angular1",
3+
"main": ["dist/angular-countUp.js"],
4+
"author": "Jamie Perkins",
5+
"dependencies": {
6+
"countUp.js": "^1.8.5"
7+
},
8+
"ignore": [
9+
"LICENSE.md",
10+
"README.md",
11+
"contributing.md",
12+
"gulpfile.js",
13+
"component.json",
14+
"index.html"
15+
]
16+
}

‎dist/angular-countUp.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
var gulp = require('gulp');
2+
var uglify = require('gulp-uglify');
3+
var rename = require('gulp-rename');
4+
var del = require('del');
5+
6+
gulp.task('clean', function(cb) {
7+
del(['dist/*']);
8+
return cb();
9+
});
10+
11+
gulp.task('build', ['clean'], function(file) {
12+
var angularCountup = gulp
13+
.src('angular-countUp.js')
14+
.pipe(uglify())
15+
.pipe(rename({
16+
suffix: '.min'
17+
}))
18+
.pipe(gulp.dest('dist/'));
19+
});
20+
21+
gulp.task('default', ['build']);

0 commit comments

Comments
 (0)