https://www.mismo.org/ResourcePackages/MISMO/assets/scripts/countup-init.js

1
2(function(root, factory) {
3  if (typeof define === 'function' && define.amd) {
4    define(factory);
5  } else if (typeof exports === 'object') {
6    module.exports = factory(require, exports, module);
7  } else {
8    root.CountUp = factory();
9  }
10}(this, function(require, exports, module) {
11
12/*
13
14	countUp.js
15	by @inorganik
16
17*/
18
19// target = id of html element or var of previously selected html element where counting occurs
20// startVal = the value you want to begin at
21// endVal = the value you want to arrive at
22// decimals = number of decimal places, default 0
23// duration = duration of animation in seconds, default 2
24// options = optional object of options (see below)
25
26var CountUp = function(target, startVal, endVal, decimals, duration, options) {
27
28	// make sure requestAnimationFrame and cancelAnimationFrame are defined
29	// polyfill for browsers without native support
30	// by Opera engineer Erik Möller
31	var lastTime = 0;
32	var vendors = ['webkit', 'moz', 'ms', 'o'];
33	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
34		window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
35		window.cancelAnimationFrame =
36		  window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
37	}
38	if (!window.requestAnimationFrame) {
39		window.requestAnimationFrame = function(callback, element) {
40			var currTime = new Date().getTime();
41			var timeToCall = Math.max(0, 16 - (currTime - lastTime));
42			var id = window.setTimeout(function() { callback(currTime + timeToCall); },
43			  timeToCall);
44			lastTime = currTime + timeToCall;
45			return id;
46		};
47	}
48	if (!window.cancelAnimationFrame) {
49		window.cancelAnimationFrame = function(id) {
50			clearTimeout(id);
51		};
52	}
53
54	var self = this;
55    self.version = function () { return '1.8.5'; };
56
57	function formatNumber(num) {
58		num = num.toFixed(self.decimals);
59		num += '';
60		var x, x1, x2, rgx;
61		x = num.split('.');
62		x1 = x[0];
63		x2 = x.length > 1 ? self.options.decimal + x[1] : '';
64		rgx = /(\d+)(\d{3})/;
65		if (self.options.useGrouping) {
66			while (rgx.test(x1)) {
67				x1 = x1.replace(rgx, '$1' + self.options.separator + '$2');
68			}
69		}
70		return self.options.prefix + x1 + x2 + self.options.suffix;
71	}
72	// Robert Penner's easeOutExpo
73	function easeOutExpo(t, b, c, d) {
74		return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
75	}
76	function ensureNumber(n) {
77		return (typeof n === 'number' && !isNaN(n));
78	}
79	
80	// default options
81	self.options = {
82		useEasing: true, // toggle easing
83		useGrouping: true, // 1,000,000 vs 1000000
84		separator: ',', // character to use as a separator
85		decimal: '.', // character to use as a decimal
86		easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
87		formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
88		prefix: '', // optional text before the result
89		suffix: '' // optional text after the result
90	};
91
92	// extend default options with passed options object
93	if (options && typeof options === 'object') {
94		for (var key in self.options) {
95			if (options.hasOwnProperty(key) && options[key] !== null) {
96				self.options[key] = options[key];
97			}
98		}
99	}
100
101	if (self.options.separator === '') self.options.useGrouping = false;
102
103	self.initialize = function() { 
104		if (self.initialized) return true;
105		self.d = (typeof target === 'string') ? document.getElementById(target) : target;
106		if (!self.d) { 
107			console.error('[CountUp] target is null or undefined', self.d);
108			return false;
109		}
110		self.startVal = Number(startVal);
111		self.endVal = Number(endVal);
112		// error checks
113		if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
114			self.decimals = Math.max(0, decimals || 0);
115			self.dec = Math.pow(10, self.decimals);
116			self.duration = Number(duration) * 1000 || 2000;
117			self.countDown = (self.startVal > self.endVal);
118			self.frameVal = self.startVal;
119			self.initialized = true;
120			return true;
121		}
122		else {
123			console.error('[CountUp] startVal or endVal is not a number', self.startVal, self.endVal);
124			return false;
125		}
126	};
127
128	// Print value to target
129	self.printValue = function(value) {
130		var result = self.options.formattingFn(value);
131
132		if (self.d.tagName === 'INPUT') {
133			this.d.value = result;
134		}
135		else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
136			this.d.textContent = result;
137		}
138		else {
139			this.d.innerHTML = result;
140		}
141	};
142
143	self.count = function(timestamp) {
144
145		if (!self.startTime) { self.startTime = timestamp; }
146
147		self.timestamp = timestamp;
148		var progress = timestamp - self.startTime;
149		self.remaining = self.duration - progress;
150
151		// to ease or not to ease
152		if (self.options.useEasing) {
153			if (self.countDown) {
154				self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
155			} else {
156				self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
157			}
158		} else {
159			if (self.countDown) {
160				self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
161			} else {
162				self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
163			}
164		}
165
166		// don't go past endVal since progress can exceed duration in the last frame
167		if (self.countDown) {
168			self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
169		} else {
170			self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
171		}
172
173		// decimal
174		self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
175
176		// format and print value
177		self.printValue(self.frameVal);
178
179		// whether to continue
180		if (progress < self.duration) {
181			self.rAF = requestAnimationFrame(self.count);
182		} else {
183			if (self.callback) self.callback();
184		}
185	};
186	// start your animation
187	self.start = function(callback) {
188		if (!self.initialize()) return;
189		self.callback = callback;
190		self.rAF = requestAnimationFrame(self.count);
191	};
192	// toggles pause/resume animation
193	self.pauseResume = function() {
194		if (!self.paused) {
195			self.paused = true;
196			cancelAnimationFrame(self.rAF);
197		} else {
198			self.paused = false;

199			delete self.startTime;
200			self.duration = self.remaining;
201			self.startVal = self.frameVal;
202			requestAnimationFrame(self.count);
203		}
204	};
205	// reset to startVal so animation can be run again
206	self.reset = function() {
207		self.paused = false;
208		delete self.startTime;
209		self.initialized = false;
210		if (self.initialize()) {
211			cancelAnimationFrame(self.rAF);
212			self.printValue(self.startVal);
213		}
214	};
215	// pass a new endVal and start animation
216	self.update = function (newEndVal) {
217		if (!self.initialize()) return;
218		if (newEndVal === self.frameVal) return;
219		cancelAnimationFrame(self.rAF);
220		self.paused = false;
221		delete self.startTime;
222		self.startVal = self.frameVal;
223		self.endVal = Number(newEndVal);
224		if (ensureNumber(self.endVal)) {
225			self.countDown = (self.startVal > self.endVal);
226			self.rAF = requestAnimationFrame(self.count);
227		} else {
228			console.error('[CountUp] update() - new endVal is not a number', newEndVal);
229		}
230	};
231
232	// format startVal on initialization
233	if (self.initialize()) self.printValue(self.startVal);
234};
235
236return CountUp;
237
238}));