123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- (function (angular) {
- // Count-Up directive
- // --------------------------------------------
- //
- // * **Class:** CountUp
- // * **Author:** Jamie Perkins
- //
- // Creates a counting animation for numbers
- // REQUIRED attributes:
- // - endVal
- //
- // DEPENDENCY: countUp.js
- 'use strict';
- var module = angular.module('countUpModule', []);
- /**
- * count-up attribute directive
- *
- * @param {number} startVal - (optional) The value you want to begin at, default 0
- * @param {number} countUp - The value you want to arrive at
- * @param {number} duration - (optional) Duration in seconds, default 2.
- * @param {number} decimals - (optional) Number of decimal places in number, default 0
- * @param {boolean} reanimateOnClick - (optional) Config if reanimate on click event, default true.
- * @param {string} filter - (optional) Filter expression to apply to animated values
- * @param {object} options - (optional) Provides for extra configuration, such as easing.
- */
- module.directive('countUp', [ '$filter', function($filter) {
- return {
- restrict: 'A',
- scope: {
- startVal: '=?',
- endVal: '=?',
- duration: '=?',
- decimals: '=?',
- reanimateOnClick: '=?',
- filter: '@',
- options: '=?'
- },
- link: function ($scope, $el, $attrs) {
- var options = {};
- if ($scope.filter) {
- var filterFunction = createFilterFunction();
- options.formattingFn = filterFunction;
- }
- if ($scope.options) {
- angular.extend(options, $scope.options);
- }
- var countUp = createCountUp($scope.startVal, $scope.endVal, $scope.decimals, $scope.duration);
- function createFilterFunction() {
- var filterParams = $scope.filter.split(':');
- var filterName = filterParams.shift();
- return function(value) {
- var filterCallParams = [value];
- Array.prototype.push.apply(filterCallParams, filterParams);
- value = $filter(filterName).apply(null, filterCallParams);
- return value;
- };
- }
- function createCountUp(sta, end, dec, dur) {
- sta = sta || 0;
- if (isNaN(sta)) sta = Number(sta.match(/[\d\-\.]+/g).join('')); // strip non-numerical characters
- end = end || 0;
- if (isNaN(end)) end = Number(end.match(/[\d\-\.]+/g).join('')); // strip non-numerical characters
- dur = Number(dur) || 2;
- dec = Number(dec) || 0;
- // construct countUp
- var countUp = new CountUp($el[0], sta, end, dec, dur, options);
- if (end > 999) {
- // make easing smoother for large numbers
- countUp = new CountUp($el[0], sta, end - 100, dec, dur / 2, options);
- }
- return countUp;
- }
- function animate() {
- countUp.reset();
- if ($scope.endVal > 999) {
- countUp.start(function() {
- countUp.update($scope.endVal);
- });
- }
- else {
- countUp.start();
- }
- }
- // fire on scroll-spy event, or right away
- if ($attrs.scrollSpyEvent) {
- // listen for scroll spy event
- $scope.$on($attrs.scrollSpyEvent, function (event, data) {
- if (data === $attrs.id) {
- animate();
- }
- });
- }
- else {
- animate();
- }
- // re-animate on click
- var reanimateOnClick = angular.isDefined($scope.reanimateOnClick) ? $scope.reanimateOnClick : true;
- if (reanimateOnClick) {
- $el.on('click', function() {
- animate();
- });
- }
- $scope.$watch('endVal', function (newValue, oldValue) {
- if (newValue === null || newValue === oldValue) {
- return;
- }
- if (countUp !== null) {
- countUp.update($scope.endVal);
- } else {
- countUp = createCountUp($scope.startVal, $scope.endVal, $scope.decimals, $scope.duration);
- animate();
- }
- });
- }
- };
- }]);
- })(angular);
|