Advertisement
Guest User

countup

a guest
Feb 4th, 2021
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function (global, factory) {
  2.     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  3.     typeof define === 'function' && define.amd ? define(['exports'], factory) :
  4.     (global = global || self, factory(global.countUp = {}));
  5. }(this, (function (exports) { 'use strict';
  6.  
  7.     var __assign = (undefined && undefined.__assign) || function () {
  8.         __assign = Object.assign || function(t) {
  9.             for (var s, i = 1, n = arguments.length; i < n; i++) {
  10.                 s = arguments[i];
  11.                 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  12.                     t[p] = s[p];
  13.             }
  14.             return t;
  15.         };
  16.         return __assign.apply(this, arguments);
  17.     };
  18.     // playground: stackblitz.com/edit/countup-typescript
  19.     var CountUp = /** u/class */ (function () {
  20.         function CountUp(target, endVal, options) {
  21.             var _this = this;
  22.             this.target = target;
  23.             this.endVal = endVal;
  24.             this.options = options;
  25.             this.version = '2.0.6';
  26.             this.defaults = {
  27.                 startVal: 0,
  28.                 decimalPlaces: 0,
  29.                 duration: 2,
  30.                 useEasing: true,
  31.                 useGrouping: true,
  32.                 smartEasingThreshold: 999,
  33.                 smartEasingAmount: 333,
  34.                 separator: ' ',
  35.                 decimal: ',',
  36.                 prefix: '',
  37.                 suffix: ''
  38.             };
  39.             this.finalEndVal = null; // for smart easing
  40.             this.useEasing = true;
  41.             this.countDown = false;
  42.             this.error = '';
  43.             this.startVal = 0;
  44.             this.paused = true;
  45.             this.count = function (timestamp) {
  46.                 if (!_this.startTime) {
  47.                     _this.startTime = timestamp;
  48.                 }
  49.                 var progress = timestamp - _this.startTime;
  50.                 _this.remaining = _this.duration - progress;
  51.                 // to ease or not to ease
  52.                 if (_this.useEasing) {
  53.                     if (_this.countDown) {
  54.                         _this.frameVal = _this.startVal - _this.easingFn(progress, 0, _this.startVal - _this.endVal, _this.duration);
  55.                     }
  56.                     else {
  57.                         _this.frameVal = _this.easingFn(progress, _this.startVal, _this.endVal - _this.startVal, _this.duration);
  58.                     }
  59.                 }
  60.                 else {
  61.                     if (_this.countDown) {
  62.                         _this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration));
  63.                     }
  64.                     else {
  65.                         _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);
  66.                     }
  67.                 }
  68.                 // don't go past endVal since progress can exceed duration in the last frame
  69.                 if (_this.countDown) {
  70.                     _this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal;
  71.                 }
  72.                 else {
  73.                     _this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal;
  74.                 }
  75.                 // decimal
  76.                 _this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
  77.                 // format and print value
  78.                 _this.printValue(_this.frameVal);
  79.                 // whether to continue
  80.                 if (progress < _this.duration) {
  81.                     _this.rAF = requestAnimationFrame(_this.count);
  82.                 }
  83.                 else if (_this.finalEndVal !== null) {
  84.                     // smart easing
  85.                     _this.update(_this.finalEndVal);
  86.                 }
  87.                 else {
  88.                     if (_this.callback) {
  89.                         _this.callback();
  90.                     }
  91.                 }
  92.             };
  93.             // default format and easing functions
  94.             this.formatNumber = function (num) {
  95.                 var neg = (num < 0) ? '-' : '';
  96.                 var result, x, x1, x2, x3;
  97.                 result = Math.abs(num).toFixed(_this.options.decimalPlaces);
  98.                 result += '';
  99.                 x = result.split('.');
  100.                 x1 = x[0];
  101.                 x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
  102.                 if (_this.options.useGrouping) {
  103.                     x3 = '';
  104.                     for (var i = 0, len = x1.length; i < len; ++i) {
  105.                         if (i !== 0 && (i % 3) === 0) {
  106.                             x3 = _this.options.separator + x3;
  107.                         }
  108.                         x3 = x1[len - i - 1] + x3;
  109.                     }
  110.                     x1 = x3;
  111.                 }
  112.                 // optional numeral substitution
  113.                 if (_this.options.numerals && _this.options.numerals.length) {
  114.                     x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
  115.                     x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
  116.                 }
  117.                 return neg + _this.options.prefix + x1 + x2 + _this.options.suffix;
  118.             };
  119.             this.easeOutExpo = function (t, b, c, d) {
  120.                 return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  121.             };
  122.             this.options = __assign(__assign({}, this.defaults), options);
  123.             this.formattingFn = (this.options.formattingFn) ?
  124.                 this.options.formattingFn : this.formatNumber;
  125.             this.easingFn = (this.options.easingFn) ?
  126.                 this.options.easingFn : this.easeOutExpo;
  127.             this.startVal = this.validateValue(this.options.startVal);
  128.             this.frameVal = this.startVal;
  129.             this.endVal = this.validateValue(endVal);
  130.             this.options.decimalPlaces = Math.max( this.options.decimalPlaces);
  131.             this.resetDuration();
  132.             this.options.separator = String(this.options.separator);
  133.             this.useEasing = this.options.useEasing;
  134.             if (this.options.separator === '') {
  135.                 this.options.useGrouping = false;
  136.             }
  137.             this.el = (typeof target === 'string') ? document.getElementById(target) : target;
  138.             if (this.el) {
  139.                 this.printValue(this.startVal);
  140.             }
  141.             else {
  142.                 this.error = '[CountUp] target is null or undefined';
  143.             }
  144.         }
  145.         // determines where easing starts and whether to count down or up
  146.         CountUp.prototype.determineDirectionAndSmartEasing = function () {
  147.             var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
  148.             this.countDown = (this.startVal > end);
  149.             var animateAmount = end - this.startVal;
  150.             if (Math.abs(animateAmount) > this.options.smartEasingThreshold) {
  151.                 this.finalEndVal = end;
  152.                 var up = (this.countDown) ? 1 : -1;
  153.                 this.endVal = end + (up * this.options.smartEasingAmount);
  154.                 this.duration = this.duration / 2;
  155.             }
  156.             else {
  157.                 this.endVal = end;
  158.                 this.finalEndVal = null;
  159.             }
  160.             if (this.finalEndVal) {
  161.                 this.useEasing = false;
  162.             }
  163.             else {
  164.                 this.useEasing = this.options.useEasing;
  165.             }
  166.         };
  167.         // start animation
  168.         CountUp.prototype.start = function (callback) {
  169.             if (this.error) {
  170.                 return;
  171.             }
  172.             this.callback = callback;
  173.             if (this.duration > 0) {
  174.                 this.determineDirectionAndSmartEasing();
  175.                 this.paused = false;
  176.                 this.rAF = requestAnimationFrame(this.count);
  177.             }
  178.             else {
  179.                 this.printValue(this.endVal);
  180.             }
  181.         };
  182.         // pause/resume animation
  183.         CountUp.prototype.pauseResume = function () {
  184.             if (!this.paused) {
  185.                 cancelAnimationFrame(this.rAF);
  186.             }
  187.             else {
  188.                 this.startTime = null;
  189.                 this.duration = this.remaining;
  190.                 this.startVal = this.frameVal;
  191.                 this.determineDirectionAndSmartEasing();
  192.                 this.rAF = requestAnimationFrame(this.count);
  193.             }
  194.             this.paused = !this.paused;
  195.         };
  196.         // reset to startVal so animation can be run again
  197.         CountUp.prototype.reset = function () {
  198.             cancelAnimationFrame(this.rAF);
  199.             this.paused = true;
  200.             this.resetDuration();
  201.             this.startVal = this.validateValue(this.options.startVal);
  202.             this.frameVal = this.startVal;
  203.             this.printValue(this.startVal);
  204.         };
  205.         // pass a new endVal and start animation
  206.         CountUp.prototype.update = function (newEndVal) {
  207.             cancelAnimationFrame(this.rAF);
  208.             this.startTime = null;
  209.             this.endVal = this.validateValue(newEndVal);
  210.             if (this.endVal === this.frameVal) {
  211.                 return;
  212.             }
  213.             this.startVal = this.frameVal;
  214.             if (!this.finalEndVal) {
  215.                 this.resetDuration();
  216.             }
  217.             this.determineDirectionAndSmartEasing();
  218.             this.rAF = requestAnimationFrame(this.count);
  219.         };
  220.         CountUp.prototype.printValue = function (val) {
  221.             var result = this.formattingFn(val);
  222.             if (this.el.tagName === 'INPUT') {
  223.                 var input = this.el;
  224.                 input.value = result;
  225.             }
  226.             else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') {
  227.                 this.el.textContent = result;
  228.             }
  229.             else {
  230.                 this.el.innerHTML = result;
  231.             }
  232.         };
  233.         CountUp.prototype.ensureNumber = function (n) {
  234.             return (typeof n === 'number' && !isNaN(n));
  235.         };
  236.         CountUp.prototype.validateValue = function (value) {
  237.             var newValue = Number(value);
  238.             if (!this.ensureNumber(newValue)) {
  239.                 this.error = "[CountUp] invalid start or end value: " + value;
  240.                 return null;
  241.             }
  242.             else {
  243.                 return newValue;
  244.             }
  245.         };
  246.         CountUp.prototype.resetDuration = function () {
  247.             this.startTime = null;
  248.             this.duration = Number(this.options.duration) * 1000;
  249.             this.remaining = this.duration;
  250.         };
  251.         return CountUp;
  252.     }());
  253.  
  254.     exports.CountUp = CountUp;
  255.  
  256.     Object.defineProperty(exports, '__esModule', { value: true });
  257.  
  258. })));
  259.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement