Get CountUpjs from cdn

This commit is contained in:
Marcel Schwarz 2023-04-12 13:39:26 +02:00
parent 96dcaa2a32
commit 13a7d3d999
27 changed files with 3 additions and 2441 deletions

1
.gitignore vendored
View File

@ -1 +1,2 @@
.DS_Store
node_modules

View File

@ -1,4 +1,4 @@
import { CountUp } from "./node_modules/countup.js/dist/countUp.min.js";
import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
var cpuList;
var currentCpu;

12
node_modules/.package-lock.json generated vendored
View File

@ -1,12 +0,0 @@
{
"name": "CpuHigherLowerGame",
"lockfileVersion": 3,
"requires": true,
"packages": {
"node_modules/countup.js": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.6.0.tgz",
"integrity": "sha512-GeORCrCcaFUHP3RNf0/dWK+XQX+fsdtrMO31mNvsbKXNNG+DMTcgZ4dWpIG9BnOS8t5+iJbaRXgaaG9oLs0N4g=="
}
}
}

View File

@ -1,12 +0,0 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
root = true
[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

20
node_modules/countup.js/.eslintrc.js generated vendored
View File

@ -1,20 +0,0 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'no-prototype-builtins': 'off',
},
env: {
browser: true,
es6: true,
}
};

View File

@ -1,13 +0,0 @@
<!-- Please enter the info below -->
```
[ ] Bug
[ ] Feature request
CountUp.js version:
```
## Description
<!-- If this is a bug, provide steps to reproduce the issue. -->
<!-- If this is a feature request, describe the use case. -->

View File

@ -1,29 +0,0 @@
## I'm submitting a...
```
[ ] Bug Fix
[ ] Feature
[ ] Other (Refactoring, Added tests, Documentation, ...)
```
## Checklist
- [ ] Test your changes
- [ ] Followed the build steps
## Description
_please describe the changes that you are making_
_for features, please describe how to use the new feature_
_please include a reference to an existing issue, if applicable_
## Does this PR introduce a breaking change?
```
[ ] Yes
[ ] No
```

View File

@ -1,47 +0,0 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "gulp",
"task": "build",
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "Open in Chrome Mac",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
],
"problemMatcher": []
},
{
"label": "Open in Chrome Linux",
"command": "Chrome",
"linux": {
"command": "google-chrome"
},
"args": [
"${file}"
],
"problemMatcher": []
},
{
"label": "Open in Chrome Windows",
"command": "Chrome",
"windows": {
"command": "start chrome"
},
"args": [
"${file}"
]
}
]
}

18
node_modules/countup.js/LICENSE.md generated vendored
View File

@ -1,18 +0,0 @@
The MIT License (MIT)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

238
node_modules/countup.js/README.md generated vendored
View File

@ -1,238 +0,0 @@
# CountUp.js
CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way.
Despite its name, CountUp can count in either direction, depending on the start and end values that you pass.
CountUp.js supports all browsers. MIT license.
## [Try the demo](https://inorganik.github.io/countUp.js)
Or tinker with CountUp in [Stackblitz](https://stackblitz.com/edit/countup-typescript)
## Jump to:
- **[Features](#features)**
- **[Usage](#usage)**
- **[Including CountUp](#including-countup)**
- **[Contributing](#contributing)**
- **[Creating Animation Plugins](#creating-animation-plugins)**
## CountUp for frameworks and plugins:
- **[CountUp.js with Angular 2+](https://github.com/inorganik/ngx-countUp)**
- **[CountUp.js with Angular 1.x](https://github.com/inorganik/countUp.js-angular1)**
- **[CountUp.js with React](https://gist.github.com/inorganik/2cf776865a4c65c12857027870e9898e)**
- **[CountUp.js with Svelte](https://gist.github.com/inorganik/85a66941ab88cc10c5fa5b26aead5f2a)**
- **[CountUp.js Vue component wrapper](https://github.com/xlsdg/vue-countup-v2)**
- **[CountUp.js WordPress Plugin](https://wordpress.org/plugins/countup-js/)**
- **[CountUp.js with jQuery](https://gist.github.com/inorganik/b63dbe5b3810ff2c0175aee4670a4732)**
## 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.
- **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).
- **Separate bundles** for modern and legacy browsers, with and without the requestAnimationFrame polyfill. Choose `countUp.min.js` for modern browsers or `countUp.withPolyfill.min.js` for IE9 and older, and Opera mini.
## Usage:
**On npm** as: `countup.js`. You can import as a module or include the UMD script and access CountUp as a global. See [detailed instructions](#including-countup) below.
**Params**:
- `target: string | HTMLElement | HTMLInputElement` - id of html element, input, svg text element, or DOM element reference where counting occurs
- `endVal: number` - the value you want to arrive at
- `options?: CountUpOptions` - optional configuration object for fine-grain control
**Options** (defaults in parentheses): <a name="options"></a>
```ts
interface CountUpOptions {
startVal?: number; // number to start at (0)
decimalPlaces?: number; // number of decimal places (0)
duration?: number; // animation duration in seconds (2)
useGrouping?: boolean; // example: 1,000 vs 1000 (true)
useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)
useEasing?: boolean; // ease animation (true)
smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
separator?: string; // grouping separator (',')
decimal?: string; // decimal ('.')
// easingFn: easing function for animation (easeOutExpo)
easingFn?: (t: number, b: number, c: number, d: number) => number;
formattingFn?: (n: number) => string; // this function formats result
prefix?: string; // text prepended to result
suffix?: string; // text appended to result
numerals?: string[]; // numeral glyph substitution
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
plugin?: CountUpPlugin; // for alternate animations
}
```
**Example usage**: <a name="example"></a>
```js
const countUp = new CountUp('targetId', 5234);
if (!countUp.error) {
countUp.start();
} else {
console.error(countUp.error);
}
```
Pass options:
```js
const countUp = new CountUp('targetId', 5234, options);
```
with optional callback:
```js
const countUp = new CountUp('targetId', 5234, { onCompleteCallback: someMethod });
// or (passing fn to start will override options.onCompleteCallback)
countUp.start(someMethod);
// or
countUp.start(() => console.log('Complete!'));
```
**Other methods**:
Toggle pause/resume:
```js
countUp.pauseResume();
```
Reset the animation:
```js
countUp.reset();
```
Update the end value and animate:
```js
countUp.update(989);
```
### 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();
```
---
## Including CountUp
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).
For the examples below, first install CountUp. This will give you the latest:
```
npm i countup.js
```
### Example with vanilla js
This is what I used in the demo. Checkout index.html and demo.js.
main.js:
```js
import { CountUp } from './js/countUp.min.js';
window.onload = function() {
var countUp = new CountUp('target', 2000);
countUp.start();
}
```
Include in your html. Notice the `type` attribute:
```html
<script src="./main.js" type="module"></script>
```
To support IE and legacy browsers, use the `nomodule` script tag to include separate scripts that don't use the module syntax:
```html
<script nomodule src="js/countUp.umd.js"></script>
<script nomodule src="js/main-for-legacy.js"></script>
```
To run module-enabled scripts locally, you'll need a simple local server setup like [this](https://www.npmjs.com/package/http-server) (test the demo locally by running `npm run serve`) because otherwise you may see a CORS error when your browser tries to load the script as a module.
### For Webpack and other build systems
Import from the package, instead of the file location:
```js
import { CountUp } from 'countup.js';
```
### UMD module
CountUp is also wrapped as a UMD module in `./dist/countUp.umd.js` and it exposes CountUp as a global variable on the window scope. To use it, include `countUp.umd.js` in a script tag, and invoke it like so:
```js
var numAnim = new countUp.CountUp('myTarget', 2000);
numAnim.start()
```
---
## Contributing
Before you make a pull request, please be sure to follow these instructions:
1. Do your work on `src/countUp.ts`
1. Lint: `npm run lint`
1. Run tests: `npm t`
1. Build and serve the demo by running `npm start` then check the demo to make sure it counts.
<!-- PUBLISHING
1. bump version in package.json and countUp.ts
2. npm run build
3. commit changes
4. npm publish
-->
---
## Creating Animation Plugins
CountUp supports plugins as of v2.6.0. Plugins implement their own render method to display each frame's formatted value. A class instance or object can be passed to the `plugin` property of CountUpOptions, and the plugin's render method will be called instead of CountUp's.
```ts
export declare interface CountUpPlugin {
render(elem: HTMLElement, formatted: string): void;
}
```
An example of a plugin:
```ts
export class SomePlugin implements CountUpPlugin {
// ...some properties here
constructor(options: SomePluginOptions) {
// ...setup code here if you need it
}
render(elem: HTMLElement, formatted: string): void {
// render DOM here
}
}
```

View File

@ -1,221 +0,0 @@
// same as demo.js but with a different instantiation of CountUp,
// and no lambdas
window.onload = function () {
var el = function (id) {
return document.getElementById(id);
};
var code, stars, endVal, options;
var demo = new countUp.CountUp('myTargetElement', 100);
var codeVisualizer = el('codeVisualizer');
var errorSection = el('errorSection');
el('version').innerHTML = demo.version;
var changeEls = document.querySelectorAll('.updateCodeVis');
for (var i = 0, len = changeEls.length; i < len; i++) {
changeEls[i].onchange = updateCodeVisualizer;
}
el('swapValues').onclick = function () {
var oldStartVal = el('startVal').value;
var oldEndVal = el('endVal').value;
el('startVal').value = oldEndVal;
el('endVal').value = oldStartVal;
updateCodeVisualizer();
};
el('start').onclick = createCountUp;
el('apply').onclick = createCountUp;
el('pauseResume').onclick = function () {
code += '<br>demo.pauseResume();';
codeVisualizer.innerHTML = code;
demo.pauseResume();
};
el('reset').onclick = function () {
code += '<br>demo.reset();';
codeVisualizer.innerHTML = code;
demo.reset();
};
el('update').onclick = function () {
var updateVal = el('updateVal').value;
var num = updateVal ? updateVal : 0;
code += "<br>demo.update(" + num + ");";
codeVisualizer.innerHTML = code;
demo.update(num);
};
el('updateVal').onchange = function () {
var updateVal = el('updateVal').value;
var num = updateVal ? updateVal : 0;
code += '<br>demo.update(' + num + ');';
codeVisualizer.innerHTML = code;
};
// OPTION VALUES
var easingFunctions = {
easeOutExpo: function (t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
},
outQuintic: function (t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
},
outCubic: function (t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
};
function getEasingFn() {
var fn = el('easingFnsDropdown').value;
if (fn === 'easeOutExpo') {
return null;
}
if (typeof easingFunctions[fn] === 'undefined') {
return undefined;
}
return easingFunctions[fn];
}
function getEasingFnBody(fn) {
fn = typeof fn === 'undefined' ? getEasingFn() : fn;
if (typeof fn === 'undefined') {
return 'undefined function';
}
if (fn !== null) {
return fn.toString().replace(/^ {8}/gm, '');
}
return '';
}
function getNumerals() {
var numeralsCode = el('numeralsDropdown').value;
// optionally provide alternates for 0-9
switch (numeralsCode) {
case 'ea': // Eastern Arabic
return ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
case 'fa': // Farsi
return ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
default:
return null;
}
}
var stringifyArray = function (arr) { return '[\'' + arr.join('\', \'') + '\']'; };
// COUNTUP AND CODE VISUALIZER
function createCountUp() {
establishOptionsFromInputs();
demo = new countUp.CountUp('myTargetElement', endVal, options);
if (!demo.error) {
errorSection.style.display = 'none';
demo.start();
updateCodeVisualizer();
}
else {
errorSection.style.display = 'block';
document.getElementById('error').innerHTML = demo.error;
console.error(demo.error);
}
}
function methodToCallOnComplete() {
console.log('COMPLETE!');
alert('COMPLETE!');
}
function establishOptionsFromInputs() {
endVal = Number(el('endVal').value);
options = {
startVal: el('startVal').value,
decimalPlaces: el('decimalPlaces').value,
duration: Number(el('duration').value),
useEasing: el('useEasing').checked,
useGrouping: el('useGrouping').checked,
useIndianSeparators: el('useIndianSeparators').checked,
easingFn: typeof getEasingFn() === 'undefined' ? null : getEasingFn(),
separator: el('separator').value,
decimal: el('decimal').value,
prefix: el('prefix').value,
suffix: el('suffix').value,
numerals: getNumerals(),
onCompleteCallback: el('useOnComplete').checked ? methodToCallOnComplete : null
};
// unset null values so they don't overwrite defaults
for (var key in options) {
if (options.hasOwnProperty(key)) {
if (options[key] === null) {
delete options[key];
}
}
}
}
function updateCodeVisualizer() {
establishOptionsFromInputs();
code = '';
if (options.useEasing && options.easingFn) {
code += 'const easingFn = ';
var split = getEasingFnBody(options.easingFn).split('\n');
for (var line in split) {
if (split.hasOwnProperty(line)) {
code += split[line].replace(' ', '&nbsp;') + '<br>';
}
}
}
function indentedLine(keyPair, singleLine) {
if (singleLine === void 0) { singleLine = false; }
var delimeter = (singleLine) ? ';' : ',';
return "&emsp;&emsp;" + keyPair + delimeter + "<br>";
}
var opts = '';
opts += (options.startVal !== '0') ? indentedLine("startVal: " + options.startVal) : '';
opts += (options.decimalPlaces !== '0') ? indentedLine("decimalPlaces: " + options.decimalPlaces) : '';
opts += (options.duration !== 2) ? indentedLine("duration: " + options.duration) : '';
opts += (options.useEasing) ? '' : indentedLine("useEasing: " + options.useEasing);
opts += (options.useEasing && options.easingFn) ? indentedLine("easingFn") : '';
opts += (options.useGrouping) ? '' : indentedLine("useGrouping: " + options.useGrouping);
opts += (options.useIndianSeparators) ? indentedLine("useIndianSeparators: " + options.useIndianSeparators) : '';
opts += (options.separator !== ',') ? indentedLine("separator: '" + options.separator + "'") : '';
opts += (options.decimal !== '.') ? indentedLine("decimal: '" + options.decimal + "'") : '';
opts += (options.prefix.length) ? indentedLine("prefix: '" + options.prefix + "'") : '';
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>";
}
else {
code += "let demo = new CountUp('myTargetElement', " + endVal + ");<br>";
}
code += 'if (!demo.error) {<br>';
code += indentedLine('demo.start()', true);
code += '} else {<br>';
code += indentedLine('console.error(demo.error)', true);
code += '}';
codeVisualizer.innerHTML = code;
}
// get current star count
var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';
var getStars = new XMLHttpRequest();
getStars.open('GET', repoInfoUrl, true);
getStars.timeout = 5000;
getStars.onreadystatechange = function () {
// 2: received headers, 3: loading, 4: done
if (getStars.readyState === 4) {
if (getStars.status === 200) {
if (getStars.responseText !== 'undefined') {
if (getStars.responseText.length > 0) {
var data = JSON.parse(getStars.responseText);
stars = data.stargazers_count;
// change input values
el('endVal').value = stars;
createCountUp();
}
}
}
}
};
getStars.onerror = function () {
console.error('error getting stars:', getStars.status);
stars = getStars.status;
demo.start();
};
getStars.send();
}

220
node_modules/countup.js/demo/demo.js generated vendored
View File

@ -1,220 +0,0 @@
import { CountUp } from '../dist/countUp.js';
window.onload = function () {
var el = function (id) {
return document.getElementById(id);
};
var code, stars, endVal, options;
var demo = new CountUp('myTargetElement', 100);
var codeVisualizer = el('codeVisualizer');
var errorSection = el('errorSection');
var startTime;
el('version').innerHTML = demo.version;
document.querySelectorAll('.updateCodeVis').forEach(elem => elem.onchange = updateCodeVisualizer);
el('swapValues').onclick = function () {
var oldStartVal = el('startVal').value;
var oldEndVal = el('endVal').value;
el('startVal').value = oldEndVal;
el('endVal').value = oldStartVal;
updateCodeVisualizer();
};
el('start').onclick = createCountUp;
el('apply').onclick = createCountUp;
el('pauseResume').onclick = function () {
code += '<br>demo.pauseResume();';
codeVisualizer.innerHTML = code;
demo.pauseResume();
};
el('reset').onclick = function () {
code += '<br>demo.reset();';
codeVisualizer.innerHTML = code;
demo.reset();
};
el('update').onclick = function () {
var updateVal = el('updateVal').value;
var num = updateVal ? updateVal : 0;
code += "<br>demo.update(" + num + ");";
codeVisualizer.innerHTML = code;
demo.update(num);
};
el('updateVal').onchange = function () {
var updateVal = el('updateVal').value;
var num = updateVal ? updateVal : 0;
code += '<br>demo.update(' + num + ');';
codeVisualizer.innerHTML = code;
};
// OPTION VALUES
var easingFunctions = {
easeOutExpo: function (t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
},
outQuintic: function (t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
},
outCubic: function (t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
};
function getEasingFn() {
var fn = el('easingFnsDropdown').value;
if (fn === 'easeOutExpo') {
return null;
}
if (typeof easingFunctions[fn] === 'undefined') {
return undefined;
}
return easingFunctions[fn];
}
function getEasingFnBody(fn) {
fn = typeof fn === 'undefined' ? getEasingFn() : fn;
if (typeof fn === 'undefined') {
return 'undefined function';
}
if (fn !== null) {
return fn.toString().replace(/^ {8}/gm, '');
}
return '';
}
function getNumerals() {
var numeralsCode = el('numeralsDropdown').value;
// optionally provide alternates for 0-9
switch (numeralsCode) {
case 'ea': // Eastern Arabic
return ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
case 'fa': // Farsi
return ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
default:
return null;
}
}
var stringifyArray = function (arr) { return '[\'' + arr.join('\', \'') + '\']'; };
// COUNTUP AND CODE VISUALIZER
function createCountUp() {
establishOptionsFromInputs();
demo = new CountUp('myTargetElement', endVal, options);
if (!demo.error) {
errorSection.style.display = 'none';
startTime = Date.now();
demo.start();
updateCodeVisualizer();
}
else {
errorSection.style.display = 'block';
document.getElementById('error').innerHTML = demo.error;
console.error(demo.error);
}
}
function calculateAnimationTime() {
const duration = Date.now() - startTime;
console.log('actual animation duration (ms):', duration);
alert('COMPLETE!');
}
function establishOptionsFromInputs() {
endVal = Number(el('endVal').value);
options = {
startVal: el('startVal').value,
decimalPlaces: el('decimalPlaces').value,
duration: Number(el('duration').value),
useEasing: el('useEasing').checked,
useGrouping: el('useGrouping').checked,
useIndianSeparators: el('useIndianSeparators').checked,
easingFn: typeof getEasingFn() === 'undefined' ? null : getEasingFn(),
separator: el('separator').value,
decimal: el('decimal').value,
prefix: el('prefix').value,
suffix: el('suffix').value,
numerals: getNumerals(),
onCompleteCallback: el('useOnComplete').checked ? calculateAnimationTime : null
};
// unset null values so they don't overwrite defaults
for (var key in options) {
if (options.hasOwnProperty(key)) {
if (options[key] === null) {
delete options[key];
}
}
}
}
function updateCodeVisualizer() {
establishOptionsFromInputs();
code = '';
if (options.useEasing && options.easingFn) {
code += 'const easingFn = ';
var split = getEasingFnBody(options.easingFn).split('\n');
for (var line in split) {
if (split.hasOwnProperty(line)) {
code += split[line].replace(' ', '&nbsp;') + '<br>';
}
}
}
function indentedLine(keyPair, singleLine) {
if (singleLine === void 0) { singleLine = false; }
var delimeter = (singleLine) ? ';' : ',';
return "&emsp;&emsp;" + keyPair + delimeter + "<br>";
}
var opts = '';
opts += (options.startVal !== '0') ? indentedLine("startVal: " + options.startVal) : '';
opts += (options.decimalPlaces !== '0') ? indentedLine("decimalPlaces: " + options.decimalPlaces) : '';
opts += (options.duration !== 2) ? indentedLine("duration: " + options.duration) : '';
opts += (options.useEasing) ? '' : indentedLine("useEasing: " + options.useEasing);
opts += (options.useEasing && options.easingFn) ? indentedLine("easingFn") : '';
opts += (options.useGrouping) ? '' : indentedLine("useGrouping: " + options.useGrouping);
opts += (options.useIndianSeparators) ? indentedLine("useIndianSeparators: " + options.useIndianSeparators) : '';
opts += (options.separator !== ',') ? indentedLine("separator: '" + options.separator + "'") : '';
opts += (options.decimal !== '.') ? indentedLine("decimal: '" + options.decimal + "'") : '';
opts += (options.prefix.length) ? indentedLine("prefix: '" + options.prefix + "'") : '';
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>";
}
else {
code += "let demo = new CountUp('myTargetElement', " + endVal + ");<br>";
}
code += 'if (!demo.error) {<br>';
code += indentedLine('demo.start()', true);
code += '} else {<br>';
code += indentedLine('console.error(demo.error)', true);
code += '}';
codeVisualizer.innerHTML = code;
}
// get current star count
var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';
var getStars = new XMLHttpRequest();
getStars.open('GET', repoInfoUrl, true);
getStars.timeout = 5000;
getStars.onreadystatechange = function () {
// 2: received headers, 3: loading, 4: done
if (getStars.readyState === 4) {
if (getStars.status === 200) {
if (getStars.responseText !== 'undefined') {
if (getStars.responseText.length > 0) {
var data = JSON.parse(getStars.responseText);
stars = data.stargazers_count;
// change input values
el('endVal').value = stars;
createCountUp();
}
}
}
}
};
getStars.onerror = function () {
console.error('error getting stars:', getStars.status);
stars = getStars.status;
demo.start();
};
getStars.send();
}

View File

@ -1,66 +0,0 @@
export interface CountUpOptions {
startVal?: number;
decimalPlaces?: number;
duration?: number;
useGrouping?: boolean;
useIndianSeparators?: boolean;
useEasing?: boolean;
smartEasingThreshold?: number;
smartEasingAmount?: number;
separator?: string;
decimal?: string;
easingFn?: (t: number, b: number, c: number, d: number) => number;
formattingFn?: (n: number) => string;
prefix?: string;
suffix?: string;
numerals?: string[];
enableScrollSpy?: boolean;
scrollSpyDelay?: number;
scrollSpyOnce?: boolean;
onCompleteCallback?: () => any;
plugin?: CountUpPlugin;
}
export declare interface CountUpPlugin {
render(elem: HTMLElement, formatted: string): void;
}
export declare class CountUp {
private endVal;
options?: CountUpOptions;
version: string;
private defaults;
private rAF;
private startTime;
private remaining;
private finalEndVal;
private useEasing;
private countDown;
el: HTMLElement | HTMLInputElement;
formattingFn: (num: number) => string;
easingFn?: (t: number, b: number, c: number, d: number) => number;
error: string;
startVal: number;
duration: number;
paused: boolean;
frameVal: number;
once: boolean;
constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
handleScroll(self: CountUp): void;
/**
* Smart easing works by breaking the animation into 2 parts, the second part being the
* smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
* by disabling easing for the first part and enabling it on the second part. It is used if
* usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
*/
private determineDirectionAndSmartEasing;
start(callback?: (args?: any) => any): void;
pauseResume(): void;
reset(): void;
update(newEndVal: string | number): void;
count: (timestamp: number) => void;
printValue(val: number): void;
ensureNumber(n: any): boolean;
validateValue(value: string | number): number;
private resetDuration;
formatNumber: (num: number) => string;
easeOutExpo: (t: number, b: number, c: number, d: number) => number;
}

View File

@ -1,300 +0,0 @@
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.endVal = endVal;
this.options = options;
this.version = '2.6.0';
this.defaults = {
startVal: 0,
decimalPlaces: 0,
duration: 2,
useEasing: true,
useGrouping: true,
useIndianSeparators: false,
smartEasingThreshold: 999,
smartEasingAmount: 333,
separator: ',',
decimal: '.',
prefix: '',
suffix: '',
enableScrollSpy: false,
scrollSpyDelay: 200,
scrollSpyOnce: false,
};
this.finalEndVal = null; // for smart easing
this.useEasing = true;
this.countDown = false;
this.error = '';
this.startVal = 0;
this.paused = true;
this.once = false;
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 {
_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
var wentPast = _this.countDown ? _this.frameVal < _this.endVal : _this.frameVal > _this.endVal;
_this.frameVal = wentPast ? _this.endVal : _this.frameVal;
// decimal
_this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
// 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.options.onCompleteCallback) {
_this.options.onCompleteCallback();
}
}
};
// default format and easing functions
this.formatNumber = function (num) {
var neg = (num < 0) ? '-' : '';
var result, x1, x2, x3;
result = Math.abs(num).toFixed(_this.options.decimalPlaces);
result += '';
var x = result.split('.');
x1 = x[0];
x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
if (_this.options.useGrouping) {
x3 = '';
var factor = 3, j = 0;
for (var i = 0, len = x1.length; i < len; ++i) {
if (_this.options.useIndianSeparators && i === 4) {
factor = 2;
j = 1;
}
if (i !== 0 && (j % factor) === 0) {
x3 = _this.options.separator + x3;
}
j++;
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;
};
// t: current time, b: beginning value, c: change in value, d: duration
this.easeOutExpo = function (t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
};
this.options = __assign(__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.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';
}
// scroll spy
if (typeof window !== 'undefined' && this.options.enableScrollSpy) {
if (!this.error) {
// set up global array of onscroll functions to handle multiple instances
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 || self.once)
return;
var bottomOfScroll = window.innerHeight + window.scrollY;
var rect = self.el.getBoundingClientRect();
var topOfEl = rect.top + window.pageYOffset;
var bottomOfEl = rect.top + rect.height + window.pageYOffset;
if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) {
// in view
self.paused = false;
setTimeout(function () { return self.start(); }, self.options.scrollSpyDelay);
if (self.options.scrollSpyOnce)
self.once = true;
}
else if ((window.scrollY > bottomOfEl || topOfEl > bottomOfScroll) &&
!self.paused) {
// out of view
self.reset();
}
};
/**
* Smart easing works by breaking the animation into 2 parts, the second part being the
* smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
* by disabling easing for the first part and enabling it on the second part. It is used if
* usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
*/
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.options.useEasing) {
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 !== null) {
// setting finalEndVal indicates smart easing
this.useEasing = false;
}
else {
this.useEasing = this.options.useEasing;
}
};
// start animation
CountUp.prototype.start = function (callback) {
if (this.error) {
return;
}
if (callback) {
this.options.onCompleteCallback = 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 == null) {
this.resetDuration();
}
this.finalEndVal = null;
this.determineDirectionAndSmartEasing();
this.rAF = requestAnimationFrame(this.count);
};
CountUp.prototype.printValue = function (val) {
var _a;
if (!this.el)
return;
var result = this.formattingFn(val);
if ((_a = this.options.plugin) === null || _a === void 0 ? void 0 : _a.render) {
this.options.plugin.render(this.el, result);
return;
}
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: ".concat(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;
}());
export { CountUp };

File diff suppressed because one or more lines are too long

View File

@ -1,311 +0,0 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.countUp = {}));
})(this, (function (exports) { 'use strict';
var __assign = (undefined && undefined.__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.endVal = endVal;
this.options = options;
this.version = '2.6.0';
this.defaults = {
startVal: 0,
decimalPlaces: 0,
duration: 2,
useEasing: true,
useGrouping: true,
useIndianSeparators: false,
smartEasingThreshold: 999,
smartEasingAmount: 333,
separator: ',',
decimal: '.',
prefix: '',
suffix: '',
enableScrollSpy: false,
scrollSpyDelay: 200,
scrollSpyOnce: false,
};
this.finalEndVal = null; // for smart easing
this.useEasing = true;
this.countDown = false;
this.error = '';
this.startVal = 0;
this.paused = true;
this.once = false;
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 {
_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
var wentPast = _this.countDown ? _this.frameVal < _this.endVal : _this.frameVal > _this.endVal;
_this.frameVal = wentPast ? _this.endVal : _this.frameVal;
// decimal
_this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
// 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.options.onCompleteCallback) {
_this.options.onCompleteCallback();
}
}
};
// default format and easing functions
this.formatNumber = function (num) {
var neg = (num < 0) ? '-' : '';
var result, x1, x2, x3;
result = Math.abs(num).toFixed(_this.options.decimalPlaces);
result += '';
var x = result.split('.');
x1 = x[0];
x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
if (_this.options.useGrouping) {
x3 = '';
var factor = 3, j = 0;
for (var i = 0, len = x1.length; i < len; ++i) {
if (_this.options.useIndianSeparators && i === 4) {
factor = 2;
j = 1;
}
if (i !== 0 && (j % factor) === 0) {
x3 = _this.options.separator + x3;
}
j++;
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;
};
// t: current time, b: beginning value, c: change in value, d: duration
this.easeOutExpo = function (t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
};
this.options = __assign(__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(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';
}
// scroll spy
if (typeof window !== 'undefined' && this.options.enableScrollSpy) {
if (!this.error) {
// set up global array of onscroll functions to handle multiple instances
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 || self.once)
return;
var bottomOfScroll = window.innerHeight + window.scrollY;
var rect = self.el.getBoundingClientRect();
var topOfEl = rect.top + window.pageYOffset;
var bottomOfEl = rect.top + rect.height + window.pageYOffset;
if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) {
// in view
self.paused = false;
setTimeout(function () { return self.start(); }, self.options.scrollSpyDelay);
if (self.options.scrollSpyOnce)
self.once = true;
}
else if ((window.scrollY > bottomOfEl || topOfEl > bottomOfScroll) &&
!self.paused) {
// out of view
self.reset();
}
};
/**
* Smart easing works by breaking the animation into 2 parts, the second part being the
* smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
* by disabling easing for the first part and enabling it on the second part. It is used if
* usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
*/
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.options.useEasing) {
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 !== null) {
// setting finalEndVal indicates smart easing
this.useEasing = false;
}
else {
this.useEasing = this.options.useEasing;
}
};
// start animation
CountUp.prototype.start = function (callback) {
if (this.error) {
return;
}
if (callback) {
this.options.onCompleteCallback = 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 == null) {
this.resetDuration();
}
this.finalEndVal = null;
this.determineDirectionAndSmartEasing();
this.rAF = requestAnimationFrame(this.count);
};
CountUp.prototype.printValue = function (val) {
var _a;
if (!this.el)
return;
var result = this.formattingFn(val);
if ((_a = this.options.plugin) === null || _a === void 0 ? void 0 : _a.render) {
this.options.plugin.render(this.el, result);
return;
}
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: ".concat(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;
}());
exports.CountUp = CountUp;
Object.defineProperty(exports, '__esModule', { value: true });
}));

File diff suppressed because one or more lines are too long

32
node_modules/countup.js/gulpfile.js generated vendored
View File

@ -1,32 +0,0 @@
const gulp = require('gulp');
const uglifyES = require('uglify-es');
const composer = require('gulp-uglify/composer');
const concat = require('gulp-concat');
const del = require('del');
const uglify = composer(uglifyES, console);
const clean = () => del(['dist/*']);
const buildNormal = () => {
return gulp.src('./dist/countUp.js')
.pipe(concat('countUp.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
}
const buildLegacy = () => {
return gulp.src([
'./requestAnimationFrame.polyfill.js',
'./dist/countUp.js'
])
.pipe(concat('countUp.withPolyfill.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
}
gulp.task('clean', clean);
const build = gulp.series(buildNormal, buildLegacy);
gulp.task('build', build);
exports.clean = clean;
exports.default = build;

155
node_modules/countup.js/index.html generated vendored
View File

@ -1,155 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="A javascript class that animates a numerical value by counting to it.">
<title>CountUp.js</title>
<link rel="stylesheet" type="text/css" href="https://inorganik.github.io/assets/css/style.css">
<script src="demo/demo.js" type="module"></script>
<script nomodule src="dist/countUp.umd.js"></script>
<script nomodule src="demo/demo-nomodule.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QXSCCPQ13N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QXSCCPQ13N');
</script>
</head>
<body>
<a class="forkMe" href="https://github.com/inorganik/CountUp.js"><img src="https://inorganik.github.io/assets/img/forkme_custom_indigo.png" alt="Fork me on GitHub"></a>
<div id="wrap">
<header>
<div id="github"><a class="block" href="https://inorganik.github.io"></a></div>
<div class="leaderLine">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
<div id="logo"><a class="block" href="https://inorganik.net" alt="inorganik produce, inc"></a></div>
</header>
<section>
<div class="col full">
<h1>CountUp.js &nbsp;<small id="version" class="lt-gray"></small></h1>
</div>
<div class="col full">
<p>CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.</p>
<p>Install via npm/yarn using the package name &nbsp;<code class="indigo large">countup.js</code>.</p>
<h3 class="marginTop marginBottom"><a class="lime weight700" href="https://github.com/inorganik/CountUp.js">View on Github</a></h3>
</div>
</section>
<section>
<p style="position:absolute; top:5px; left:0;">Current stars:</p>
<h1 class="jumbo" id="myTargetElement">0</h1>
</section>
<section id="errorSection" style="background-color:#FFDCDC; display:none" class="col-inner">
<h4 id="error" style="color: red" class="noMargin"></h4>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Params:</h4>
<div class="inlineLeft marginLeft marginRight">
<input type="text" value="0" id="startVal" style="width:80px" class="updateCodeVis">
<label class="inlineLabel">Start</label>
</div>
<input id="swapValues" type="button" class="inlineLeft marginRight" value="Swap" style="width:80px;">
<div class="inlineLeft marginRight">
<input type="text" value="94.62" id="endVal" style="width:80px" class="updateCodeVis">
<label class="inlineLabel">End</label>
</div>
<div class="inlineLeft marginRight">
<input type="number" value="0" id="decimalPlaces" step="1" style="width:50px" class="updateCodeVis">
<label class="inlineLabel">Decimal places</label>
</div>
<div class="inlineLeft marginRight">
<input type="number" value="2" id="duration" step=".1" style="width:50px" class="updateCodeVis">
<label class="inlineLabel">Duration</label>
</div>
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Options:</h4>
<div class="inlineLeft marginLeft marginRight">
<input id="useEasing" type="checkbox" checked><label class="inlineLabel updateCodeVis">Use easing</label>
</div>
<div class="inlineLeft marginRight">
<input id="useGrouping" type="checkbox" checked><label class="inlineLabel updateCodeVis">Use grouping</label>
</div>
<div class="inlineLeft marginRight">
<input id="useIndianSeparators" type="checkbox"><label class="inlineLabel updateCodeVis">Use Indian separators</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="," id="separator" style="width:25px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Separator</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="." id="decimal" style="width:25px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Decimal</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="" id="prefix" style="width:50px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Prefix</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="" id="suffix" style="width:50px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Suffix</label>
</div>
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Methods:</h4>
<input type="button" value="Start" id="start" class="inlineLeft marginLeft marginRight">
<input type="button" value="Pause/Resume" id="pauseResume" class="inlineLeft marginRight">
<input type="button" value="Reset" id="reset" class="inlineLeft marginRight">
<input type="button" value="Update:" id="update" class="inlineLeft" style="margin-right:5px">
<div class="inlineLeft marginRight">
<input type="text" value="6789" id="updateVal" style="width:80px">
</div>
<div class="inlineLeft">
<input type="checkbox" id="useOnComplete" class="updateCodeVis"><label class="inlineLabel">Alert on complete</label>
</div>
</form>
</section>
<section id="easingSection">
<form>
<h4 class="inlineLeft noMargin weight300">Custom:</h4>
<div class="inlineLeft marginLeft">
<label class="inlineLabel">Easing: &nbsp;</label>
<select id="easingFnsDropdown" class="marginRight updateCodeVis">
<option value="easeOutExpo" selected>easeOutExpo (default, built-in)</option>
<option value="outQuintic">outQuintic</option>
<option value="outCubic">outCubic</option>
</select>
</div>
<div class="inlineLeft marginRight">
<label class="inlineLabel">Numerals: &nbsp;</label>
<select id="numeralsDropdown" class="updateCodeVis">
<option value="" selected>Default ("1234")</option>
<option value="ea">Eastern Arabic ("١٢٣٤")</option>
<option value="fa">Farsi ("۱۲۳۴")</option>
</select>
</div>
<div class="inlineLeft">
<input type="button" id="apply" value="Apply">
</div>
</form>
</section>
<section class="marginBottom">
<div class="col full marginBottom marginTop">
<div class="code-contain indigo">
<code id="codeVisualizer" class="indigo"></code>
</div>
</div>
</section>
</div>
</body>
</html>

View File

@ -1,17 +0,0 @@
module.exports = {
roots: [
'<rootDir>/src'
],
transform: {
'^.+\\.ts?$': 'ts-jest'
},
testRegex: '(\\.|/)(test|spec)\\.ts?$',
testEnvironment: 'jsdom',
moduleFileExtensions: [
'ts',
'js',
'jsx',
'json',
'node'
]
}

44
node_modules/countup.js/package.json generated vendored
View File

@ -1,44 +0,0 @@
{
"name": "countup.js",
"description": "Animates a numerical value by counting to it",
"version": "2.6.0",
"license": "MIT",
"main": "./dist/countUp.umd.js",
"module": "./dist/countUp.min.js",
"author": "@inorganik",
"repository": {
"type": "git",
"url": "git+https://github.com/inorganik/countUp.js.git"
},
"scripts": {
"build": "npm run clean && tsc && gulp && npm run build:umd",
"build:umd": "rollup dist/countUp.js --format umd --file dist/countUp.umd.js --name countUp",
"clean": "gulp clean",
"lint": "eslint -c .eslintrc.js --ext .ts ./src",
"serve": "http-server -o -c-1 ./",
"start": "npm run build && npm run serve",
"test": "jest",
"test:watch": "jest --watch"
},
"devDependencies": {
"@types/jest": "^28.1.8",
"@typescript-eslint/eslint-plugin": "^5.41.0",
"@typescript-eslint/eslint-plugin-tslint": "^5.41.0",
"@typescript-eslint/parser": "^5.41.0",
"browserify": "^17.0.0",
"del": "^6.1.1",
"eslint": "^8.26.0",
"eslint-plugin-import": "^2.26.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-uglify": "^3.0.2",
"http-server": "^14.1.1",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"rollup": "^2.79.1",
"ts-jest": "^28.0.8",
"typescript": "^4.8.4",
"uglify-es": "^3.3.9"
},
"types": "./dist/countUp.d.ts"
}

View File

@ -1,26 +0,0 @@
// make sure requestAnimationFrame and cancelAnimationFrame are defined
// polyfill for browsers without native support
// by Opera engineer Erik Möller
(function () {
var lastTime = 0;
var vendors = ['webkit', 'moz', 'ms', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { return callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
})();

View File

@ -1,281 +0,0 @@
import { CountUp, CountUpPlugin } from './countUp';
describe('CountUp', () => {
let countUp;
let time;
const getTargetHtml = () => document.getElementById('target')?.innerHTML;
const resetRAF = () => {
time = 0;
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
time += 100;
if (time < 2500) {
return cb(time) as any;
}
});
};
beforeEach(() => {
document.body.innerHTML =
'<div>' +
' <h1 id="target"></h1>' +
'</div>';
countUp = new CountUp('target', 100);
resetRAF();
});
describe('constructor', () => {
it('should create for a valid target, and print startVal', () => {
expect(countUp).toBeTruthy();
expect(countUp.error.length).toBe(0);
expect(getTargetHtml()).toEqual('0');
});
it('should set an error for a bad target', () => {
countUp = new CountUp('notThere', 100);
expect(countUp.error.length).toBeGreaterThan(0);
});
it('should set an error for a bad endVal', () => {
const endVal = '%' as any;
countUp = new CountUp('target', endVal);
expect(countUp.error.length).toBeGreaterThan(0);
});
it('should set an error for a bad startVal', () => {
const startVal = 'oops' as any;
countUp = new CountUp('target', 100, { startVal });
expect(countUp.error.length).toBeGreaterThan(0);
});
it('should return a value for version', () => {
expect(countUp.version).toBeTruthy();
});
});
describe('class methods', () => {
it('should count when start method is called', () => {
countUp.start();
expect(getTargetHtml()).toEqual('100');
});
it('should use a callback provided to start', () => {
const cb = jest.fn();
countUp.start(cb);
expect(getTargetHtml()).toEqual('100');
expect(cb).toHaveBeenCalled();
});
it('should pause when pauseResume is called', () => {
countUp.start();
// resetRAF();
countUp.pauseResume();
expect(countUp.paused).toBeTruthy();
});
it('should reset when reset is called', () => {
countUp.start();
countUp.reset();
expect(getTargetHtml()).toEqual('0');
expect(countUp.paused).toBeTruthy();
});
it('should update when update is called', () => {
countUp.start();
expect(getTargetHtml()).toEqual('100');
resetRAF();
countUp.update(200);
expect(getTargetHtml()).toEqual('200');
});
});
describe('various use-cases', () => {
it('should handle large numbers', () => {
countUp = new CountUp('target', 6000);
const spy = jest.spyOn(countUp, 'determineDirectionAndSmartEasing');
countUp.start();
expect(getTargetHtml()).toEqual('6,000');
expect(spy).toHaveBeenCalled();
});
it('should not use easing when specified with a large number (auto-smooth)', () => {
countUp = new CountUp('target', 6000, { useEasing: false });
const spy = jest.spyOn(countUp, 'easingFn');
countUp.start();
expect(getTargetHtml()).toEqual('6,000');
expect(spy).toHaveBeenCalledTimes(0);
});
it('should count down when endVal is less than startVal', () => {
countUp = new CountUp('target', 10, { startVal: 500 });
expect(getTargetHtml()).toEqual('500');
countUp.start();
expect(getTargetHtml()).toEqual('10');
});
it('should handle negative numbers', () => {
countUp = new CountUp('target', -500);
countUp.start();
expect(getTargetHtml()).toEqual('-500');
});
it('should properly handle a zero duration', () => {
countUp = new CountUp('target', 2000, { duration: 0 });
countUp.start();
expect(getTargetHtml()).toEqual('2,000');
});
it('should call the callback when finished if there is one', () => {
const cb = jest.fn();
countUp.start(cb);
expect(getTargetHtml()).toEqual('100');
expect(cb).toHaveBeenCalled();
});
});
describe('options', () => {
it('should respect the decimalPlaces option', () => {
countUp = new CountUp('target', 100, { decimalPlaces: 2 });
countUp.start();
expect(getTargetHtml()).toEqual('100.00');
});
it('should respect the duration option', () => {
countUp = new CountUp('target', 100, { duration: 1 });
countUp.start();
expect(getTargetHtml()).toEqual('100');
});
it('should respect the useEasing option', () => {
countUp = new CountUp('target', 100, { useEasing: false });
countUp.start();
expect(getTargetHtml()).toEqual('100');
});
it('should respect the useGrouping option', () => {
countUp = new CountUp('target', 100000, { useGrouping: false });
countUp.start();
expect(getTargetHtml()).toEqual('100000');
resetRAF();
countUp = new CountUp('target', 1000000, { useGrouping: true });
countUp.start();
expect(getTargetHtml()).toEqual('1,000,000');
});
it('should respect the useIndianSeparators option', () => {
countUp = new CountUp('target', 100000, { useIndianSeparators: true });
countUp.start();
expect(getTargetHtml()).toEqual('1,00,000');
resetRAF();
countUp = new CountUp('target', 10000000, { useIndianSeparators: true });
countUp.start();
expect(getTargetHtml()).toEqual('1,00,00,000');
});
it('should respect the separator option', () => {
countUp = new CountUp('target', 10000, { separator: ':' });
countUp.start();
expect(getTargetHtml()).toEqual('10:000');
});
it('should respect the decimal option', () => {
countUp = new CountUp('target', 100, { decimal: ',', decimalPlaces: 1 });
countUp.start();
expect(getTargetHtml()).toEqual('100,0');
});
it('should respect the easingFn option', () => {
const easeOutQuintic = jest.fn().mockReturnValue(100);
countUp = new CountUp('target', 100, { easingFn: easeOutQuintic });
countUp.start();
expect(easeOutQuintic).toHaveBeenCalled();
expect(getTargetHtml()).toEqual('100');
});
it('should respect the formattingFn option', () => {
const formatter = jest.fn().mockReturnValue('~100~');
countUp = new CountUp('target', 100, { formattingFn: formatter });
countUp.start();
expect(formatter).toHaveBeenCalled();
expect(getTargetHtml()).toEqual('~100~');
});
it('should respect the prefix option', () => {
countUp = new CountUp('target', 100, { prefix: '$' });
countUp.start();
expect(getTargetHtml()).toEqual('$100');
});
it('should respect the suffix option', () => {
countUp = new CountUp('target', 100, { suffix: '!' });
countUp.start();
expect(getTargetHtml()).toEqual('100!');
});
it('should respect the numerals option', () => {
const numerals = [')', '!', '@', '#', '$', '%', '^', '&', '*', '('];
countUp = new CountUp('target', 100, { numerals });
countUp.start();
expect(getTargetHtml()).toEqual('!))');
});
it('should respect the onCompleteCallback option', () => {
const options = { onCompleteCallback: jest.fn() };
const callbackSpy = jest.spyOn(options, 'onCompleteCallback');
countUp = new CountUp('target', 100, options);
countUp.start();
expect(getTargetHtml()).toEqual('100');
expect(callbackSpy).toHaveBeenCalled();
});
it('should respect the plugin option', () => {
const plugin: CountUpPlugin = {
render: (el, result) => {
el.innerHTML = result;
}
};
countUp = new CountUp('target', 1000, {
plugin,
useGrouping: true
});
countUp.start();
expect(getTargetHtml()).toEqual('1,000');
});
});
});

View File

@ -1,334 +0,0 @@
export interface CountUpOptions { // (default)
startVal?: number; // number to start at (0)
decimalPlaces?: number; // number of decimal places (0)
duration?: number; // animation duration in seconds (2)
useGrouping?: boolean; // example: 1,000 vs 1000 (true)
useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)
useEasing?: boolean; // ease animation (true)
smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
separator?: string; // grouping separator (,)
decimal?: string; // decimal (.)
// easingFn: easing function for animation (easeOutExpo)
easingFn?: (t: number, b: number, c: number, d: number) => number;
formattingFn?: (n: number) => string; // this function formats result
prefix?: string; // text prepended to result
suffix?: string; // text appended to result
numerals?: string[]; // numeral glyph substitution
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
plugin?: CountUpPlugin; // for alternate animations
}
export declare interface CountUpPlugin {
render(elem: HTMLElement, formatted: string): void;
}
// playground: stackblitz.com/edit/countup-typescript
export class CountUp {
version = '2.6.0';
private defaults: CountUpOptions = {
startVal: 0,
decimalPlaces: 0,
duration: 2,
useEasing: true,
useGrouping: true,
useIndianSeparators: false,
smartEasingThreshold: 999,
smartEasingAmount: 333,
separator: ',',
decimal: '.',
prefix: '',
suffix: '',
enableScrollSpy: false,
scrollSpyDelay: 200,
scrollSpyOnce: false,
};
private rAF: any;
private startTime: number;
private remaining: number;
private finalEndVal: number = null; // for smart easing
private useEasing = true;
private countDown = false;
el: HTMLElement | HTMLInputElement;
formattingFn: (num: number) => string;
easingFn?: (t: number, b: number, c: number, d: number) => number;
error = '';
startVal = 0;
duration: number;
paused = true;
frameVal: number;
once = false;
constructor(
target: string | HTMLElement | HTMLInputElement,
private endVal: number,
public options?: CountUpOptions
) {
this.options = {
...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.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';
}
// scroll spy
if (typeof window !== 'undefined' && this.options.enableScrollSpy) {
if (!this.error) {
// set up global array of onscroll functions to handle multiple instances
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 || self.once) return;
const bottomOfScroll = window.innerHeight + window.scrollY;
const rect = self.el.getBoundingClientRect();
const topOfEl = rect.top + window.pageYOffset
const bottomOfEl = rect.top + rect.height + window.pageYOffset;
if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) {
// in view
self.paused = false;
setTimeout(() => self.start(), self.options.scrollSpyDelay);
if (self.options.scrollSpyOnce)
self.once = true;
} else if (
(window.scrollY > bottomOfEl || topOfEl > bottomOfScroll) &&
!self.paused
) {
// out of view
self.reset();
}
}
/**
* Smart easing works by breaking the animation into 2 parts, the second part being the
* smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
* by disabling easing for the first part and enabling it on the second part. It is used if
* usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
*/
private determineDirectionAndSmartEasing(): void {
const end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
this.countDown = (this.startVal > end);
const animateAmount = end - this.startVal;
if (Math.abs(animateAmount) > this.options.smartEasingThreshold && this.options.useEasing) {
this.finalEndVal = end;
const 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 !== null) {
// setting finalEndVal indicates smart easing
this.useEasing = false;
} else {
this.useEasing = this.options.useEasing;
}
}
// start animation
start(callback?: (args?: any) => any): void {
if (this.error) {
return;
}
if (callback) {
this.options.onCompleteCallback = callback;
}
if (this.duration > 0) {
this.determineDirectionAndSmartEasing();
this.paused = false;
this.rAF = requestAnimationFrame(this.count);
} else {
this.printValue(this.endVal);
}
}
// pause/resume animation
pauseResume(): void {
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
reset(): void {
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
update(newEndVal: string | number): void {
cancelAnimationFrame(this.rAF);
this.startTime = null;
this.endVal = this.validateValue(newEndVal);
if (this.endVal === this.frameVal) {
return;
}
this.startVal = this.frameVal;
if (this.finalEndVal == null) {
this.resetDuration();
}
this.finalEndVal = null;
this.determineDirectionAndSmartEasing();
this.rAF = requestAnimationFrame(this.count);
}
count = (timestamp: number): void => {
if (!this.startTime) { this.startTime = timestamp; }
const 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 {
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
const wentPast = this.countDown ? this.frameVal < this.endVal : this.frameVal > this.endVal;
this.frameVal = wentPast ? this.endVal : this.frameVal;
// decimal
this.frameVal = Number(this.frameVal.toFixed(this.options.decimalPlaces));
// 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.options.onCompleteCallback) {
this.options.onCompleteCallback();
}
}
}
printValue(val: number): void {
if (!this.el) return;
const result = this.formattingFn(val);
if (this.options.plugin?.render) {
this.options.plugin.render(this.el, result);
return;
}
if (this.el.tagName === 'INPUT') {
const input = this.el as HTMLInputElement;
input.value = result;
} else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') {
this.el.textContent = result;
} else {
this.el.innerHTML = result;
}
}
ensureNumber(n: any): boolean {
return (typeof n === 'number' && !isNaN(n));
}
validateValue(value: string | number): number {
const newValue = Number(value);
if (!this.ensureNumber(newValue)) {
this.error = `[CountUp] invalid start or end value: ${value}`;
return null;
} else {
return newValue;
}
}
private resetDuration(): void {
this.startTime = null;
this.duration = Number(this.options.duration) * 1000;
this.remaining = this.duration;
}
// default format and easing functions
formatNumber = (num: number): string => {
const neg = (num < 0) ? '-' : '';
let result: string, x1: string, x2: string, x3: string;
result = Math.abs(num).toFixed(this.options.decimalPlaces);
result += '';
const x = result.split('.');
x1 = x[0];
x2 = x.length > 1 ? this.options.decimal + x[1] : '';
if (this.options.useGrouping) {
x3 = '';
let factor = 3, j = 0;
for (let i = 0, len = x1.length; i < len; ++i) {
if (this.options.useIndianSeparators && i === 4) {
factor = 2;
j = 1;
}
if (i !== 0 && (j % factor) === 0) {
x3 = this.options.separator + x3;
}
j++;
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, (w) => this.options.numerals[+w]);
x2 = x2.replace(/[0-9]/g, (w) => this.options.numerals[+w]);
}
return neg + this.options.prefix + x1 + x2 + this.options.suffix;
}
// t: current time, b: beginning value, c: change in value, d: duration
easeOutExpo = (t: number, b: number, c: number, d: number): number =>
c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
}

View File

@ -1,19 +0,0 @@
{
"compilerOptions": {
"lib": ["es2017", "dom"],
"module": "esnext",
"moduleResolution": "node",
"declaration": true,
"outDir": "dist",
"target": "es5",
"pretty": true,
"esModuleInterop": true,
"skipLibCheck": true,
},
"compileOnSave": true,
"include": ["src"],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

17
package-lock.json generated
View File

@ -1,17 +0,0 @@
{
"name": "CpuHigherLowerGame",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"countup.js": "^2.6.0"
}
},
"node_modules/countup.js": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.6.0.tgz",
"integrity": "sha512-GeORCrCcaFUHP3RNf0/dWK+XQX+fsdtrMO31mNvsbKXNNG+DMTcgZ4dWpIG9BnOS8t5+iJbaRXgaaG9oLs0N4g=="
}
}
}

View File

@ -1,5 +0,0 @@
{
"dependencies": {
"countup.js": "^2.6.0"
}
}