Add onCompleteCallback option (#303)

* add onCompleteCallback option

* update demo

* new tests

* update docs

* update index

Author: inorganik

README.md

@@ -66,6 +66,7 @@ interface CountUpOptions {
   enableScrollSpy?: boolean; // start animation when target is in view
   scrollSpyDelay?: number; // delay (ms) after target comes into view
   scrollSpyOnce?: boolean; // run only once
+  onCompleteCallback?: () => any; // gets called when animation completes
 }
 ```
 
@@ -88,9 +89,12 @@ const countUp = new CountUp('targetId', 5234, options);
 with optional callback:
 
 ```js
-countUp.start(someMethodToCallOnComplete);
+const countUp = new CountUp('targetId', 5234, { onCompleteCallback: someMethod });
 
-// or an anonymous function
+// or (passing fn to start will override options.onCompleteCallback)
+countUp.start(someMethod);
+
+// or
 countUp.start(() => console.log('Complete!'));
 ```
 

demo/demo-nomodule.js

@@ -105,12 +105,7 @@ window.onload = function () {
     demo = new countUp.CountUp('myTargetElement', endVal, options);
     if (!demo.error) {
       errorSection.style.display = 'none';
-      if (el('useOnComplete').checked) {
-        demo.start(methodToCallOnComplete);
-      }
-      else {
-        demo.start();
-      }
+      demo.start();
       updateCodeVisualizer();
     }
     else {
@@ -137,7 +132,8 @@ window.onload = function () {
       decimal: el('decimal').value,
       prefix: el('prefix').value,
       suffix: el('suffix').value,
-      numerals: getNumerals()
+      numerals: getNumerals(),
+      onCompleteCallback: el('useOnComplete').checked ? methodToCallOnComplete : null
     };
     // unset null values so they don't overwrite defaults
     for (var key in options) {
@@ -179,6 +175,8 @@ window.onload = function () {
     opts += (options.suffix.length) ? indentedLine("suffix: '" + options.suffix + "'") : '';
     opts += (options.numerals && options.numerals.length) ?
       indentedLine("numerals: " + stringifyArray(options.numerals)) : '';
+    opts += (options.onCompleteCallback) ? indentedLine("onCompleteCallback: methodToCallOnComplete") : '';
+
     if (opts.length) {
       code += "const options = {<br>" + opts + "};<br>";
       code += "let demo = new CountUp('myTargetElement', " + endVal + ", options);<br>";
@@ -187,8 +185,7 @@ window.onload = function () {
       code += "let demo = new CountUp('myTargetElement', " + endVal + ");<br>";
     }
     code += 'if (!demo.error) {<br>';
-    code += (el('useOnComplete').checked) ?
-      indentedLine('demo.start(methodToCallOnComplete)', true) : indentedLine('demo.start()', true);
+    code += indentedLine('demo.start()', true);
     code += '} else {<br>';
     code += indentedLine('console.error(demo.error)', true);
     code += '}';

demo/demo.js

@@ -103,12 +103,7 @@ window.onload = function () {
     if (!demo.error) {
       errorSection.style.display = 'none';
       startTime = Date.now();
-      if (el('useOnComplete').checked) {
-        demo.start(methodToCallOnComplete);
-      }
-      else {
-        demo.start(() => calculateAnimationTime());
-      }
+      demo.start();
       updateCodeVisualizer();
     }
     else {
@@ -120,10 +115,6 @@ window.onload = function () {
   function calculateAnimationTime() {
     const duration = Date.now() - startTime;
     console.log('actual animation duration (ms):', duration);
-  }
-  function methodToCallOnComplete() {
-    calculateAnimationTime();
-    console.log('COMPLETE!');
     alert('COMPLETE!');
   }
   function establishOptionsFromInputs() {
@@ -140,7 +131,8 @@ window.onload = function () {
       decimal: el('decimal').value,
       prefix: el('prefix').value,
       suffix: el('suffix').value,
-      numerals: getNumerals()
+      numerals: getNumerals(),
+      onCompleteCallback: el('useOnComplete').checked ? calculateAnimationTime : null
     };
     // unset null values so they don't overwrite defaults
     for (var key in options) {
@@ -182,6 +174,8 @@ window.onload = function () {
     opts += (options.suffix.length) ? indentedLine("suffix: '" + options.suffix + "'") : '';
     opts += (options.numerals && options.numerals.length) ?
       indentedLine("numerals: " + stringifyArray(options.numerals)) : '';
+    opts += (options.onCompleteCallback) ? indentedLine("onCompleteCallback: methodToCallOnComplete") : '';
+
     if (opts.length) {
       code += "const options = {<br>" + opts + "};<br>";
       code += "let demo = new CountUp('myTargetElement', " + endVal + ", options);<br>";
@@ -190,8 +184,7 @@ window.onload = function () {
       code += "let demo = new CountUp('myTargetElement', " + endVal + ");<br>";
     }
     code += 'if (!demo.error) {<br>';
-    code += (el('useOnComplete').checked) ?
-      indentedLine('demo.start(methodToCallOnComplete)', true) : indentedLine('demo.start()', true);
+    code += indentedLine('demo.start()', true);
     code += '} else {<br>';
     code += indentedLine('console.error(demo.error)', true);
     code += '}';

dist/countUp.d.ts

@@ -17,6 +17,7 @@ export interface CountUpOptions {
     enableScrollSpy?: boolean;
     scrollSpyDelay?: number;
     scrollSpyOnce?: boolean;
+    onCompleteCallback?: () => any;
 }
 export declare class CountUp {
     private endVal;
@@ -32,7 +33,6 @@ export declare class CountUp {
     private countDown;
     formattingFn: (num: number) => string;
     easingFn?: (t: number, b: number, c: number, d: number) => number;
-    callback: (args?: any) => any;
     error: string;
     startVal: number;
     duration: number;

dist/countUp.js

@@ -15,7 +15,7 @@ var CountUp = /** @class */ (function () {
         var _this = this;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.4.2';
+        this.version = '2.5.0';
         this.defaults = {
             startVal: 0,
             decimalPlaces: 0,
@@ -74,8 +74,8 @@ var CountUp = /** @class */ (function () {
                 _this.update(_this.finalEndVal);
             }
             else {
-                if (_this.callback) {
-                    _this.callback();
+                if (_this.options.onCompleteCallback) {
+                    _this.options.onCompleteCallback();
                 }
             }
         };
@@ -206,7 +206,9 @@ var CountUp = /** @class */ (function () {
         if (this.error) {
             return;
         }
-        this.callback = callback;
+        if (callback) {
+            this.options.onCompleteCallback = callback;
+        }
         if (this.duration > 0) {
             this.determineDirectionAndSmartEasing();
             this.paused = false;

dist/countUp.min.js

@@ -21,7 +21,7 @@
             var _this = this;
             this.endVal = endVal;
             this.options = options;
-            this.version = '2.4.2';
+            this.version = '2.5.0';
             this.defaults = {
                 startVal: 0,
                 decimalPlaces: 0,
@@ -80,8 +80,8 @@
                     _this.update(_this.finalEndVal);
                 }
                 else {
-                    if (_this.callback) {
-                        _this.callback();
+                    if (_this.options.onCompleteCallback) {
+                        _this.options.onCompleteCallback();
                     }
                 }
             };
@@ -212,7 +212,9 @@
             if (this.error) {
                 return;
             }
-            this.callback = callback;
+            if (callback) {
+                this.options.onCompleteCallback = callback;
+            }
             if (this.duration > 0) {
                 this.determineDirectionAndSmartEasing();
                 this.paused = false;