🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
countup.js
Advanced tools
countup.js - npm Package Compare versions
Comparing version 2.0.8 to 2.1.0
@@ -16,5 +16,6 @@ export interface CountUpOptions { | ||
| numerals?: string[]; | ||
| enableScrollSpy?: boolean; | ||
| scrollSpyDelay?: number; | ||
| } | ||
| export declare class CountUp { | ||
| private target; | ||
| private endVal; | ||
@@ -40,2 +41,3 @@ options?: CountUpOptions; | ||
| constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions); | ||
| handleScroll(self: CountUp): void; | ||
| private determineDirectionAndSmartEasing; | ||
@@ -42,0 +44,0 @@ start(callback?: (args?: any) => any): void; |
@@ -16,6 +16,5 @@ var __assign = (this && this.__assign) || function () { | ||
| var _this = this; | ||
| this.target = target; | ||
| this.endVal = endVal; | ||
| this.options = options; | ||
| this.version = '2.0.8'; | ||
| this.version = '2.1.0'; | ||
| this.defaults = { | ||
@@ -32,3 +31,5 @@ startVal: 0, | ||
| prefix: '', | ||
| suffix: '' | ||
| suffix: '', | ||
| enableScrollSpy: false, | ||
| scrollSpyDelay: 200, | ||
| }; | ||
@@ -140,3 +141,33 @@ this.finalEndVal = null; // for smart easing | ||
| } | ||
| // scroll spy | ||
| if (window !== undefined && this.options.enableScrollSpy) { | ||
| if (!this.error) { | ||
| // set up global array of onscroll functions | ||
| window['onScrollFns'] = window['onScrollFns'] || []; | ||
| window['onScrollFns'].push(function () { return _this.handleScroll(_this); }); | ||
| window.onscroll = function () { | ||
| window['onScrollFns'].forEach(function (fn) { return fn(); }); | ||
| }; | ||
| this.handleScroll(this); | ||
| } | ||
| else { | ||
| console.error(this.error, target); | ||
| } | ||
| } | ||
| } | ||
| CountUp.prototype.handleScroll = function (self) { | ||
| if (!self || !window) | ||
| return; | ||
| var bottomOfScroll = window.innerHeight + window.scrollY; | ||
| var bottomOfEl = self.el.offsetTop + self.el.offsetHeight; | ||
| if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) { | ||
| // in view | ||
| self.paused = false; | ||
| setTimeout(function () { return self.start(); }, self.options.scrollSpyDelay); | ||
| } | ||
| else if (window.scrollY > bottomOfEl && !self.paused) { | ||
| // scrolled past | ||
| self.reset(); | ||
| } | ||
| }; | ||
| // determines where easing starts and whether to count down or up | ||
@@ -143,0 +174,0 @@ CountUp.prototype.determineDirectionAndSmartEasing = function () { |
@@ -1,1 +0,1 @@ | ||
| var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.8",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endVal)*(i/s.duration):s.frameVal=s.startVal+(s.endVal-s.startVal)*(i/s.duration),s.countDown?s.frameVal=s.frameVal<s.endVal?s.endVal:s.frameVal:s.frameVal=s.frameVal>s.endVal?s.endVal:s.frameVal,s.frameVal=Number(s.frameVal.toFixed(s.options.decimalPlaces)),s.printValue(s.frameVal),i<s.duration?s.rAF=requestAnimationFrame(s.count):null!==s.finalEndVal?s.update(s.finalEndVal):s.callback&&s.callback()},this.formatNumber=function(t){var i,a,n,e,r=t<0?"-":"";i=Math.abs(t).toFixed(s.options.decimalPlaces);var o=(i+="").split(".");if(a=o[0],n=o.length>1?s.options.decimal+o[1]:"",s.options.useGrouping){e="";for(var l=0,h=a.length;l<h;++l)0!==l&&l%3==0&&(e=s.options.separator+e),e=a[h-l-1]+e;a=e}return s.options.numerals&&s.options.numerals.length&&(a=a.replace(/[0-9]/g,function(t){return s.options.numerals[+t]}),n=n.replace(/[0-9]/g,function(t){return s.options.numerals[+t]})),r+s.options.prefix+a+n+s.options.suffix},this.easeOutExpo=function(t,i,a,s){return a*(1-Math.pow(2,-10*t/s))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),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(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp}; | ||
| var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,n=arguments.length;a<n;a++)for(var s in i=arguments[a])Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var n=this;this.endVal=i,this.options=a,this.version="2.1.0",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){n.startTime||(n.startTime=t);var i=t-n.startTime;n.remaining=n.duration-i,n.useEasing?n.countDown?n.frameVal=n.startVal-n.easingFn(i,0,n.startVal-n.endVal,n.duration):n.frameVal=n.easingFn(i,n.startVal,n.endVal-n.startVal,n.duration):n.countDown?n.frameVal=n.startVal-(n.startVal-n.endVal)*(i/n.duration):n.frameVal=n.startVal+(n.endVal-n.startVal)*(i/n.duration),n.countDown?n.frameVal=n.frameVal<n.endVal?n.endVal:n.frameVal:n.frameVal=n.frameVal>n.endVal?n.endVal:n.frameVal,n.frameVal=Number(n.frameVal.toFixed(n.options.decimalPlaces)),n.printValue(n.frameVal),i<n.duration?n.rAF=requestAnimationFrame(n.count):null!==n.finalEndVal?n.update(n.finalEndVal):n.callback&&n.callback()},this.formatNumber=function(t){var i,a,s,e,r=t<0?"-":"";i=Math.abs(t).toFixed(n.options.decimalPlaces);var o=(i+="").split(".");if(a=o[0],s=o.length>1?n.options.decimal+o[1]:"",n.options.useGrouping){e="";for(var l=0,h=a.length;l<h;++l)0!==l&&l%3==0&&(e=n.options.separator+e),e=a[h-l-1]+e;a=e}return n.options.numerals&&n.options.numerals.length&&(a=a.replace(/[0-9]/g,function(t){return n.options.numerals[+t]}),s=s.replace(/[0-9]/g,function(t){return n.options.numerals[+t]})),r+n.options.prefix+a+s+n.options.suffix},this.easeOutExpo=function(t,i,a,n){return a*(1-Math.pow(2,-10*t/n))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),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(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",void 0!==window&&this.options.enableScrollSpy&&(this.error?console.error(this.error,t):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return n.handleScroll(n)}),window.onscroll=function(){window.onScrollFns.forEach(function(t){return t()})},this.handleScroll(this)))}return t.prototype.handleScroll=function(t){if(t&&window){var i=window.innerHeight+window.scrollY,a=t.el.offsetTop+t.el.offsetHeight;a<i&&a>window.scrollY&&t.paused?(t.paused=!1,setTimeout(function(){return t.start()},t.options.scrollSpyDelay)):window.scrollY>a&&!t.paused&&t.reset()}},t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp}; |
@@ -5,3 +5,3 @@ (function (global, factory) { | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.countUp = {})); | ||
| }(this, (function (exports) { 'use strict'; | ||
| })(this, (function (exports) { 'use strict'; | ||
@@ -23,6 +23,5 @@ var __assign = (undefined && undefined.__assign) || function () { | ||
| var _this = this; | ||
| this.target = target; | ||
| this.endVal = endVal; | ||
| this.options = options; | ||
| this.version = '2.0.8'; | ||
| this.version = '2.1.0'; | ||
| this.defaults = { | ||
@@ -39,3 +38,5 @@ startVal: 0, | ||
| prefix: '', | ||
| suffix: '' | ||
| suffix: '', | ||
| enableScrollSpy: false, | ||
| scrollSpyDelay: 200, | ||
| }; | ||
@@ -147,3 +148,33 @@ this.finalEndVal = null; // for smart easing | ||
| } | ||
| // scroll spy | ||
| if (window !== undefined && this.options.enableScrollSpy) { | ||
| if (!this.error) { | ||
| // set up global array of onscroll functions | ||
| window['onScrollFns'] = window['onScrollFns'] || []; | ||
| window['onScrollFns'].push(function () { return _this.handleScroll(_this); }); | ||
| window.onscroll = function () { | ||
| window['onScrollFns'].forEach(function (fn) { return fn(); }); | ||
| }; | ||
| this.handleScroll(this); | ||
| } | ||
| else { | ||
| console.error(this.error, target); | ||
| } | ||
| } | ||
| } | ||
| CountUp.prototype.handleScroll = function (self) { | ||
| if (!self || !window) | ||
| return; | ||
| var bottomOfScroll = window.innerHeight + window.scrollY; | ||
| var bottomOfEl = self.el.offsetTop + self.el.offsetHeight; | ||
| if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) { | ||
| // in view | ||
| self.paused = false; | ||
| setTimeout(function () { return self.start(); }, self.options.scrollSpyDelay); | ||
| } | ||
| else if (window.scrollY > bottomOfEl && !self.paused) { | ||
| // scrolled past | ||
| self.reset(); | ||
| } | ||
| }; | ||
| // determines where easing starts and whether to count down or up | ||
@@ -263,2 +294,2 @@ CountUp.prototype.determineDirectionAndSmartEasing = function () { | ||
| }))); | ||
| })); |
@@ -1,1 +0,1 @@ | ||
| !function(){for(var t=0,i=["webkit","moz","ms","o"],a=0;a<i.length&&!window.requestAnimationFrame;++a)window.requestAnimationFrame=window[i[a]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[a]+"CancelAnimationFrame"]||window[i[a]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var a=(new Date).getTime(),n=Math.max(0,16-(a-t)),s=window.setTimeout(function(){return i(a+n)},n);return t=a+n,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}();var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,n=arguments.length;a<n;a++)for(var s in i=arguments[a])Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var n=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.8",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){n.startTime||(n.startTime=t);var i=t-n.startTime;n.remaining=n.duration-i,n.useEasing?n.countDown?n.frameVal=n.startVal-n.easingFn(i,0,n.startVal-n.endVal,n.duration):n.frameVal=n.easingFn(i,n.startVal,n.endVal-n.startVal,n.duration):n.countDown?n.frameVal=n.startVal-(n.startVal-n.endVal)*(i/n.duration):n.frameVal=n.startVal+(n.endVal-n.startVal)*(i/n.duration),n.countDown?n.frameVal=n.frameVal<n.endVal?n.endVal:n.frameVal:n.frameVal=n.frameVal>n.endVal?n.endVal:n.frameVal,n.frameVal=Number(n.frameVal.toFixed(n.options.decimalPlaces)),n.printValue(n.frameVal),i<n.duration?n.rAF=requestAnimationFrame(n.count):null!==n.finalEndVal?n.update(n.finalEndVal):n.callback&&n.callback()},this.formatNumber=function(t){var i,a,s,e,r=t<0?"-":"";i=Math.abs(t).toFixed(n.options.decimalPlaces);var o=(i+="").split(".");if(a=o[0],s=o.length>1?n.options.decimal+o[1]:"",n.options.useGrouping){e="";for(var l=0,u=a.length;l<u;++l)0!==l&&l%3==0&&(e=n.options.separator+e),e=a[u-l-1]+e;a=e}return n.options.numerals&&n.options.numerals.length&&(a=a.replace(/[0-9]/g,function(t){return n.options.numerals[+t]}),s=s.replace(/[0-9]/g,function(t){return n.options.numerals[+t]})),r+n.options.prefix+a+s+n.options.suffix},this.easeOutExpo=function(t,i,a,n){return a*(1-Math.pow(2,-10*t/n))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),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(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp}; | ||
| !function(){for(var t=0,i=["webkit","moz","ms","o"],n=0;n<i.length&&!window.requestAnimationFrame;++n)window.requestAnimationFrame=window[i[n]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[n]+"CancelAnimationFrame"]||window[i[n]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var n=(new Date).getTime(),a=Math.max(0,16-(n-t)),s=window.setTimeout(function(){return i(n+a)},a);return t=n+a,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}();var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,n=1,a=arguments.length;n<a;n++)for(var s in i=arguments[n])Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,n){var a=this;this.endVal=i,this.options=n,this.version="2.1.0",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:"",enableScrollSpy:!1,scrollSpyDelay:200},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){a.startTime||(a.startTime=t);var i=t-a.startTime;a.remaining=a.duration-i,a.useEasing?a.countDown?a.frameVal=a.startVal-a.easingFn(i,0,a.startVal-a.endVal,a.duration):a.frameVal=a.easingFn(i,a.startVal,a.endVal-a.startVal,a.duration):a.countDown?a.frameVal=a.startVal-(a.startVal-a.endVal)*(i/a.duration):a.frameVal=a.startVal+(a.endVal-a.startVal)*(i/a.duration),a.countDown?a.frameVal=a.frameVal<a.endVal?a.endVal:a.frameVal:a.frameVal=a.frameVal>a.endVal?a.endVal:a.frameVal,a.frameVal=Number(a.frameVal.toFixed(a.options.decimalPlaces)),a.printValue(a.frameVal),i<a.duration?a.rAF=requestAnimationFrame(a.count):null!==a.finalEndVal?a.update(a.finalEndVal):a.callback&&a.callback()},this.formatNumber=function(t){var i,n,s,e,r=t<0?"-":"";i=Math.abs(t).toFixed(a.options.decimalPlaces);var o=(i+="").split(".");if(n=o[0],s=o.length>1?a.options.decimal+o[1]:"",a.options.useGrouping){e="";for(var l=0,u=n.length;l<u;++l)0!==l&&l%3==0&&(e=a.options.separator+e),e=n[u-l-1]+e;n=e}return a.options.numerals&&a.options.numerals.length&&(n=n.replace(/[0-9]/g,function(t){return a.options.numerals[+t]}),s=s.replace(/[0-9]/g,function(t){return a.options.numerals[+t]})),r+a.options.prefix+n+s+a.options.suffix},this.easeOutExpo=function(t,i,n,a){return n*(1-Math.pow(2,-10*t/a))*1024/1023+i},this.options=__assign(__assign({},this.defaults),n),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(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined",void 0!==window&&this.options.enableScrollSpy&&(this.error?console.error(this.error,t):(window.onScrollFns=window.onScrollFns||[],window.onScrollFns.push(function(){return a.handleScroll(a)}),window.onscroll=function(){window.onScrollFns.forEach(function(t){return t()})},this.handleScroll(this)))}return t.prototype.handleScroll=function(t){if(t&&window){var i=window.innerHeight+window.scrollY,n=t.el.offsetTop+t.el.offsetHeight;n<i&&n>window.scrollY&&t.paused?(t.paused=!1,setTimeout(function(){return t.start()},t.options.scrollSpyDelay)):window.scrollY>n&&!t.paused&&t.reset()}},t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var n=this.countDown?1:-1;this.endVal=t+n*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp}; |
| { | ||
| "name": "countup.js", | ||
| "description": "Animates a numerical value by counting to it", | ||
| "version": "2.0.8", | ||
| "version": "2.1.0", | ||
| "license": "MIT", | ||
@@ -26,9 +26,9 @@ "main": "./dist/countUp.umd.js", | ||
| "@types/jest": "^24.9.1", | ||
| "@typescript-eslint/eslint-plugin": "^4.28.5", | ||
| "@typescript-eslint/eslint-plugin-tslint": "^4.28.5", | ||
| "@typescript-eslint/parser": "^4.28.5", | ||
| "@typescript-eslint/eslint-plugin": "^4.33.0", | ||
| "@typescript-eslint/eslint-plugin-tslint": "^4.33.0", | ||
| "@typescript-eslint/parser": "^4.33.0", | ||
| "browserify": "^16.5.2", | ||
| "del": "^3.0.0", | ||
| "eslint": "^7.31.0", | ||
| "eslint-plugin-import": "^2.23.4", | ||
| "eslint": "^7.32.0", | ||
| "eslint-plugin-import": "^2.25.3", | ||
| "gulp": "^4.0.2", | ||
@@ -39,3 +39,3 @@ "gulp-concat": "^2.6.1", | ||
| "jest": "^24.9.0", | ||
| "rollup": "^2.54.0", | ||
| "rollup": "^2.60.2", | ||
| "ts-jest": "^24.3.0", | ||
@@ -42,0 +42,0 @@ "typescript": "^3.9.10", |
@@ -30,2 +30,3 @@ # CountUp.js | ||
| ## Features | ||
| - **Animate when element scrolls into view** - new in v2.1.0. Use option `enableScrollSpy`. | ||
| - **Highly customizeable** with a large range of options, you can even substitute numerals. | ||
@@ -63,2 +64,4 @@ - **Smart easing**: CountUp intelligently defers easing until it gets close enough to the end value for easing to be visually noticeable. Configureable in the [options](#options). | ||
| numerals?: string[]; // numeral glyph substitution | ||
| enableScrollSpy?: boolean; // start animation when target is in view | ||
| scrollSpyDelay?: number; // delay (ms) after target comes into view | ||
| } | ||
@@ -111,2 +114,19 @@ ``` | ||
| ``` | ||
| ### Animate when the element is scrolled into view | ||
| Use the scroll spy option to animate when the element is scrolled into view. When using scroll spy, just initialize CountUp but do not call start(); | ||
| ```js | ||
| const countUp = new CountUp('targetId', 989, { enableScrollSpy: true }); | ||
| ``` | ||
| **Troubleshooting scroll spy** | ||
| CountUp checks the scroll position as soon as it's initialized. So if you initialize it before the DOM renders and your target element is in view before any scrolling, you'll need to re-check the scroll position after the page renders: | ||
| ```js | ||
| // after DOM has rendered | ||
| countUp.handleScroll(); | ||
| ``` | ||
| --- | ||
@@ -116,3 +136,3 @@ | ||
| CountUp v2 is distributed as an ES6 module because it is the most standardized and most widely compatible module for browsers, though a UMD module is [also included](#umd-module). | ||
| CountUp is distributed as an ES6 module because it is the most standardized and most widely compatible module for browsers, though a UMD module is [also included](#umd-module). | ||
@@ -119,0 +139,0 @@ For the examples below, first install CountUp. This will give you the latest: |
@@ -17,2 +17,4 @@ export interface CountUpOptions { // (default) | ||
| numerals?: string[]; // numeral glyph substitution | ||
| enableScrollSpy?: boolean; // start animation when target is in view | ||
| scrollSpyDelay?: number; // delay (ms) after target comes into view | ||
| } | ||
@@ -23,3 +25,3 @@ | ||
| version = '2.0.8'; | ||
| version = '2.1.0'; | ||
| private defaults: CountUpOptions = { | ||
@@ -36,3 +38,5 @@ startVal: 0, | ||
| prefix: '', | ||
| suffix: '' | ||
| suffix: '', | ||
| enableScrollSpy: false, | ||
| scrollSpyDelay: 200, | ||
| }; | ||
@@ -56,3 +60,3 @@ private el: HTMLElement | HTMLInputElement; | ||
| constructor( | ||
| private target: string | HTMLElement | HTMLInputElement, | ||
| target: string | HTMLElement | HTMLInputElement, | ||
| private endVal: number, | ||
@@ -86,4 +90,33 @@ public options?: CountUpOptions | ||
| } | ||
| // scroll spy | ||
| if (window !== undefined && this.options.enableScrollSpy) { | ||
| if (!this.error) { | ||
| // set up global array of onscroll functions | ||
| window['onScrollFns'] = window['onScrollFns'] || []; | ||
| window['onScrollFns'].push(() => this.handleScroll(this)); | ||
| window.onscroll = () => { | ||
| window['onScrollFns'].forEach((fn) => fn()); | ||
| }; | ||
| this.handleScroll(this); | ||
| } else { | ||
| console.error(this.error, target); | ||
| } | ||
| } | ||
| } | ||
| handleScroll(self: CountUp): void { | ||
| if (!self || !window) return; | ||
| const bottomOfScroll = window.innerHeight + window.scrollY; | ||
| const bottomOfEl = self.el.offsetTop + self.el.offsetHeight; | ||
| if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) { | ||
| // in view | ||
| self.paused = false; | ||
| setTimeout(() => self.start(), self.options.scrollSpyDelay); | ||
| } else if ( window.scrollY > bottomOfEl && !self.paused) { | ||
| // scrolled past | ||
| self.reset(); | ||
| } | ||
| } | ||
| // determines where easing starts and whether to count down or up | ||
@@ -90,0 +123,0 @@ private determineDirectionAndSmartEasing(): void { |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
88405
6.63%- Lines of code
1654
6.09%- Number of lines in readme file
193
11.56%No dependency changes