var __assign = (this && this.__assign) || function () { __assign = object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (object.prototype.hasownproperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; // playground: stackblitz.com/edit/countup-typescript var countup = /** @class */ (function () { function countup(target, endval, options) { var _this = this; this.target = target; this.endval = endval; this.options = options; this.version = '2.0.4'; this.defaults = { startval: 0, decimalplaces: 0, duration: 2, useeasing: true, usegrouping: true, smarteasingthreshold: 999, smarteasingamount: 333, separator: ',', decimal: '.', prefix: '', suffix: '' }; this.finalendval = null; // for smart easing this.useeasing = true; this.countdown = false; this.error = ''; this.startval = 0; this.paused = true; this.count = function (timestamp) { if (!_this.starttime) { _this.starttime = timestamp; } var progress = timestamp - _this.starttime; _this.remaining = _this.duration - progress; // to ease or not to ease if (_this.useeasing) { if (_this.countdown) { _this.frameval = _this.startval - _this.easingfn(progress, 0, _this.startval - _this.endval, _this.duration); } else { _this.frameval = _this.easingfn(progress, _this.startval, _this.endval - _this.startval, _this.duration); } } else { if (_this.countdown) { _this.frameval = _this.startval - ((_this.startval - _this.endval) * (progress / _this.duration)); } else { _this.frameval = _this.startval + (_this.endval - _this.startval) * (progress / _this.duration); } } // don't go past endval since progress can exceed duration in the last frame if (_this.countdown) { _this.frameval = (_this.frameval < _this.endval) ? _this.endval : _this.frameval; } else { _this.frameval = (_this.frameval > _this.endval) ? _this.endval : _this.frameval; } // decimal _this.frameval = math.round(_this.frameval * _this.decimalmult) / _this.decimalmult; // format and print value _this.printvalue(_this.frameval); // whether to continue if (progress < _this.duration) { _this.raf = requestanimationframe(_this.count); } else if (_this.finalendval !== null) { // smart easing _this.update(_this.finalendval); } else { if (_this.callback) { _this.callback(); } } }; // default format and easing functions this.formatnumber = function (num) { var neg = (num < 0) ? '-' : ''; var result, x, x1, x2, x3; result = math.abs(num).tofixed(_this.options.decimalplaces); result += ''; x = result.split('.'); x1 = x[0]; x2 = x.length > 1 ? _this.options.decimal + x[1] : ''; if (_this.options.usegrouping) { x3 = ''; for (var i = 0, len = x1.length; i < len; ++i) { if (i !== 0 && (i % 3) === 0) { x3 = _this.options.separator + x3; } x3 = x1[len - i - 1] + x3; } x1 = x3; } // optional numeral substitution if (_this.options.numerals && _this.options.numerals.length) { x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; }); x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; }); } return neg + _this.options.prefix + x1 + x2 + _this.options.suffix; }; this.easeoutexpo = function (t, b, c, d) { return c * (-math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; }; this.options = __assign({}, this.defaults, options); this.formattingfn = (this.options.formattingfn) ? this.options.formattingfn : this.formatnumber; this.easingfn = (this.options.easingfn) ? this.options.easingfn : this.easeoutexpo; this.startval = this.validatevalue(this.options.startval); this.frameval = this.startval; this.endval = this.validatevalue(endval); this.options.decimalplaces = math.max(0 || this.options.decimalplaces); this.decimalmult = math.pow(10, this.options.decimalplaces); this.resetduration(); this.options.separator = string(this.options.separator); this.useeasing = this.options.useeasing; if (this.options.separator === '') { this.options.usegrouping = false; } this.el = (typeof target === 'string') ? document.getelementbyid(target) : target; if (this.el) { this.printvalue(this.startval); } else { this.error = '[countup] target is null or undefined'; } } // determines where easing starts and whether to count down or up countup.prototype.determinedirectionandsmarteasing = function () { var end = (this.finalendval) ? this.finalendval : this.endval; this.countdown = (this.startval > end); var animateamount = end - this.startval; if (math.abs(animateamount) > this.options.smarteasingthreshold) { this.finalendval = end; var up = (this.countdown) ? 1 : -1; this.endval = end + (up * this.options.smarteasingamount); this.duration = this.duration / 2; } else { this.endval = end; this.finalendval = null; } if (this.finalendval) { this.useeasing = false; } else { this.useeasing = this.options.useeasing; } }; // start animation countup.prototype.start = function (callback) { if (this.error) { return; } this.callback = callback; if (this.duration > 0) { this.determinedirectionandsmarteasing(); this.paused = false; this.raf = requestanimationframe(this.count); } else { this.printvalue(this.endval); } }; // pause/resume animation countup.prototype.pauseresume = function () { if (!this.paused) { cancelanimationframe(this.raf); } else { this.starttime = null; this.duration = this.remaining; this.startval = this.frameval; this.determinedirectionandsmarteasing(); this.raf = requestanimationframe(this.count); } this.paused = !this.paused; }; // reset to startval so animation can be run again countup.prototype.reset = function () { cancelanimationframe(this.raf); this.paused = true; this.resetduration(); this.startval = this.validatevalue(this.options.startval); this.frameval = this.startval; this.printvalue(this.startval); }; // pass a new endval and start animation countup.prototype.update = function (newendval) { cancelanimationframe(this.raf); this.starttime = null; this.endval = this.validatevalue(newendval); if (this.endval === this.frameval) { return; } this.startval = this.frameval; if (!this.finalendval) { this.resetduration(); } this.determinedirectionandsmarteasing(); this.raf = requestanimationframe(this.count); }; countup.prototype.printvalue = function (val) { var result = this.formattingfn(val); if (this.el.tagname === 'input') { var input = this.el; input.value = result; } else if (this.el.tagname === 'text' || this.el.tagname === 'tspan') { this.el.textcontent = result; } else { this.el.innerhtml = result; } }; countup.prototype.ensurenumber = function (n) { return (typeof n === 'number' && !isnan(n)); }; countup.prototype.validatevalue = function (value) { var newvalue = number(value); if (!this.ensurenumber(newvalue)) { this.error = "[countup] invalid start or end value: " + value; return null; } else { return newvalue; } }; countup.prototype.resetduration = function () { this.starttime = null; this.duration = number(this.options.duration) * 1000; this.remaining = this.duration; }; return countup; }());