diff --git a/assets/js/theme/blocks/keyFigures.js b/assets/js/theme/blocks/keyFigures.js index 7a2889822db34eb191db2028c467d575f4860daf..95ad2fba94791d41a8cc4e77c4546bbd3d5f6b30 100644 --- a/assets/js/theme/blocks/keyFigures.js +++ b/assets/js/theme/blocks/keyFigures.js @@ -60,6 +60,7 @@ class KeyFigures { loop () { this.time = Math.min(new Date().getTime() - this.start, OPTIONS.DURATION); + console.log(this.time) this.figures.forEach((figure, index) => { this.values[index] = this.getValues(this.time, 0, this.targets[index], OPTIONS.DURATION); figure.innerHTML = this.formatValue(parseFloat(this.values[index], 10)); @@ -67,11 +68,14 @@ class KeyFigures { if (this.time < OPTIONS.DURATION) { window.requestAnimationFrame(this.loop.bind(this)); + } else { + this.onEnded(); } } getValues (time, from, to, duration) { const decimalsLength = to.decimals(); + let value = KeyFigures.easeOutQuad(time, from, to, duration); if (decimalsLength) { value = Math.round(value * decimalsLength * 10) / (decimalsLength * 10); @@ -85,6 +89,12 @@ class KeyFigures { return value.toLocaleString('en').replace(',', separator); } + onEnded() { + this.figures.forEach((figure, index) => { + figure.innerHTML = this.formatValue(this.targets[index]); + }); + } + resize () { this.figures.forEach((figure) => { figure.style.minWidth = 0;