countUp.umd.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  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. var __assign = (undefined && undefined.__assign) || function () {
  7. __assign = Object.assign || function(t) {
  8. for (var s, i = 1, n = arguments.length; i < n; i++) {
  9. s = arguments[i];
  10. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  11. t[p] = s[p];
  12. }
  13. return t;
  14. };
  15. return __assign.apply(this, arguments);
  16. };
  17. // playground: stackblitz.com/edit/countup-typescript
  18. var CountUp = /** @class */ (function () {
  19. function CountUp(target, endVal, options) {
  20. var _this = this;
  21. this.target = target;
  22. this.endVal = endVal;
  23. this.options = options;
  24. this.version = '2.0.7';
  25. this.defaults = {
  26. startVal: 0,
  27. decimalPlaces: 0,
  28. duration: 2,
  29. useEasing: true,
  30. useGrouping: true,
  31. smartEasingThreshold: 999,
  32. smartEasingAmount: 333,
  33. separator: ',',
  34. decimal: '.',
  35. prefix: '',
  36. suffix: ''
  37. };
  38. this.finalEndVal = null; // for smart easing
  39. this.useEasing = true;
  40. this.countDown = false;
  41. this.error = '';
  42. this.startVal = 0;
  43. this.paused = true;
  44. this.count = function (timestamp) {
  45. if (!_this.startTime) {
  46. _this.startTime = timestamp;
  47. }
  48. var progress = timestamp - _this.startTime;
  49. _this.remaining = _this.duration - progress;
  50. // to ease or not to ease
  51. if (_this.useEasing) {
  52. if (_this.countDown) {
  53. _this.frameVal = _this.startVal - _this.easingFn(progress, 0, _this.startVal - _this.endVal, _this.duration);
  54. }
  55. else {
  56. _this.frameVal = _this.easingFn(progress, _this.startVal, _this.endVal - _this.startVal, _this.duration);
  57. }
  58. }
  59. else {
  60. if (_this.countDown) {
  61. _this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration));
  62. }
  63. else {
  64. _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);
  65. }
  66. }
  67. // don't go past endVal since progress can exceed duration in the last frame
  68. if (_this.countDown) {
  69. _this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal;
  70. }
  71. else {
  72. _this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal;
  73. }
  74. // decimal
  75. _this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
  76. // format and print value
  77. _this.printValue(_this.frameVal);
  78. // whether to continue
  79. if (progress < _this.duration) {
  80. _this.rAF = requestAnimationFrame(_this.count);
  81. }
  82. else if (_this.finalEndVal !== null) {
  83. // smart easing
  84. _this.update(_this.finalEndVal);
  85. }
  86. else {
  87. if (_this.callback) {
  88. _this.callback();
  89. }
  90. }
  91. };
  92. // default format and easing functions
  93. this.formatNumber = function (num) {
  94. var neg = (num < 0) ? '-' : '';
  95. var result, x, x1, x2, x3;
  96. result = Math.abs(num).toFixed(_this.options.decimalPlaces);
  97. result += '';
  98. x = result.split('.');
  99. x1 = x[0];
  100. x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
  101. if (_this.options.useGrouping) {
  102. x3 = '';
  103. for (var i = 0, len = x1.length; i < len; ++i) {
  104. if (i !== 0 && (i % 3) === 0) {
  105. x3 = _this.options.separator + x3;
  106. }
  107. x3 = x1[len - i - 1] + x3;
  108. }
  109. x1 = x3;
  110. }
  111. // optional numeral substitution
  112. if (_this.options.numerals && _this.options.numerals.length) {
  113. x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
  114. x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
  115. }
  116. return neg + _this.options.prefix + x1 + x2 + _this.options.suffix;
  117. };
  118. this.easeOutExpo = function (t, b, c, d) {
  119. return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  120. };
  121. this.options = __assign(__assign({}, this.defaults), options);
  122. this.formattingFn = (this.options.formattingFn) ?
  123. this.options.formattingFn : this.formatNumber;
  124. this.easingFn = (this.options.easingFn) ?
  125. this.options.easingFn : this.easeOutExpo;
  126. this.startVal = this.validateValue(this.options.startVal);
  127. this.frameVal = this.startVal;
  128. this.endVal = this.validateValue(endVal);
  129. this.options.decimalPlaces = Math.max( this.options.decimalPlaces);
  130. this.resetDuration();
  131. this.options.separator = String(this.options.separator);
  132. this.useEasing = this.options.useEasing;
  133. if (this.options.separator === '') {
  134. this.options.useGrouping = false;
  135. }
  136. this.el = (typeof target === 'string') ? document.getElementById(target) : target;
  137. if (this.el) {
  138. this.printValue(this.startVal);
  139. }
  140. else {
  141. this.error = '[CountUp] target is null or undefined';
  142. }
  143. }
  144. // determines where easing starts and whether to count down or up
  145. CountUp.prototype.determineDirectionAndSmartEasing = function () {
  146. var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
  147. this.countDown = (this.startVal > end);
  148. var animateAmount = end - this.startVal;
  149. if (Math.abs(animateAmount) > this.options.smartEasingThreshold) {
  150. this.finalEndVal = end;
  151. var up = (this.countDown) ? 1 : -1;
  152. this.endVal = end + (up * this.options.smartEasingAmount);
  153. this.duration = this.duration / 2;
  154. }
  155. else {
  156. this.endVal = end;
  157. this.finalEndVal = null;
  158. }
  159. if (this.finalEndVal) {
  160. this.useEasing = false;
  161. }
  162. else {
  163. this.useEasing = this.options.useEasing;
  164. }
  165. };
  166. // start animation
  167. CountUp.prototype.start = function (callback) {
  168. if (this.error) {
  169. return;
  170. }
  171. this.callback = callback;
  172. if (this.duration > 0) {
  173. this.determineDirectionAndSmartEasing();
  174. this.paused = false;
  175. this.rAF = requestAnimationFrame(this.count);
  176. }
  177. else {
  178. this.printValue(this.endVal);
  179. }
  180. };
  181. // pause/resume animation
  182. CountUp.prototype.pauseResume = function () {
  183. if (!this.paused) {
  184. cancelAnimationFrame(this.rAF);
  185. }
  186. else {
  187. this.startTime = null;
  188. this.duration = this.remaining;
  189. this.startVal = this.frameVal;
  190. this.determineDirectionAndSmartEasing();
  191. this.rAF = requestAnimationFrame(this.count);
  192. }
  193. this.paused = !this.paused;
  194. };
  195. // reset to startVal so animation can be run again
  196. CountUp.prototype.reset = function () {
  197. cancelAnimationFrame(this.rAF);
  198. this.paused = true;
  199. this.resetDuration();
  200. this.startVal = this.validateValue(this.options.startVal);
  201. this.frameVal = this.startVal;
  202. this.printValue(this.startVal);
  203. };
  204. // pass a new endVal and start animation
  205. CountUp.prototype.update = function (newEndVal) {
  206. cancelAnimationFrame(this.rAF);
  207. this.startTime = null;
  208. this.endVal = this.validateValue(newEndVal);
  209. if (this.endVal === this.frameVal) {
  210. return;
  211. }
  212. this.startVal = this.frameVal;
  213. if (!this.finalEndVal) {
  214. this.resetDuration();
  215. }
  216. this.finalEndVal = null;
  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. exports.CountUp = CountUp;
  254. Object.defineProperty(exports, '__esModule', { value: true });
  255. })));