-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
increment version, move demo js into separate file
- Loading branch information
Showing
6 changed files
with
267 additions
and
269 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,246 @@ | ||
| /* | ||
| demo.js | ||
| Only used for the countUp demo page, not a dependency | ||
| */ | ||
|
|
||
| var demo, options, code, data, stars, easingFunctions, | ||
| useOnComplete = false, | ||
| useEasing = true, | ||
| easingFn = null, | ||
| useGrouping = true; | ||
|
|
||
| window.onload = function() { | ||
|
|
||
| var codeVisualizer = codeVisualizer, | ||
| easingFnsDropdown = document.getElementById('easingFnsDropdown'), | ||
| errorSection = document.getElementById('errorSection'); | ||
|
|
||
| // setup CountUp object - last 3 params (decimals, duration, options) are optional | ||
| demo = new CountUp('myTargetElement', 0, 100, 0, 2.5, options); | ||
| // you could do demo.start() right here but we are getting actual current star count from github api below | ||
| // since it is an asynchronous call, we fire start() in the success fn of the XMLHttpRequest object | ||
| getStars.send(); | ||
| // display version | ||
| document.getElementById('version').innerHTML = 'v'+demo.version(); | ||
| }; | ||
|
|
||
| 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); | ||
| } | ||
| }; | ||
|
|
||
| // for demo: | ||
| function swapValues() { | ||
| var oldStartVal = document.getElementById('startVal').value; | ||
| var oldEndVal = document.getElementById('endVal').value; | ||
| document.getElementById('startVal').value = oldEndVal; | ||
| document.getElementById('endVal').value = oldStartVal; | ||
| updateCodeVisualizer(); | ||
| } | ||
| function getEasingFn() { | ||
| var fn = 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 = document.getElementById('numeralsDropdown').value; | ||
| // optionally provide alternates for 0-9 | ||
| switch (numeralsCode) { | ||
| case 'ea': // Eastern Arabic | ||
| return ['٠','١','٢','٣','٤','٥','٦','٧','٨','٩']; | ||
| case 'fa': // Farsi | ||
| return ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹']; | ||
| default: | ||
| return [] | ||
| } | ||
| } | ||
| function stringifyArray(arr) { | ||
| return '[\'' + arr.join('\', \'') + '\']'; | ||
|
|
||
| } | ||
| function createCountUp() { | ||
|
|
||
| var startVal = document.getElementById('startVal').value; | ||
| var endVal = document.getElementById('endVal').value; | ||
| var decimals = document.getElementById('decimals').value, | ||
| duration = document.getElementById('duration').value, | ||
| prefix = document.getElementById('prefix').value, | ||
| suffix = document.getElementById('suffix').value, | ||
| easingFn = getEasingFn(); | ||
|
|
||
| options = { | ||
| useEasing: useEasing, | ||
| easingFn: typeof easingFn === 'undefined' ? null : easingFn, | ||
| useGrouping: useGrouping, | ||
| separator: document.getElementById('separator').value, | ||
| decimal: document.getElementById('decimal').value, | ||
| numerals: getNumerals() | ||
| }; | ||
| if (prefix.length) options.prefix = prefix; | ||
| if (suffix.length) options.suffix = suffix; | ||
|
|
||
| // you don't have to create a new instance of CountUp every time you start an animation, | ||
| // you can just change the properties individually. But I do here in case user changes values in demo. | ||
| demo = new CountUp('myTargetElement', startVal, endVal, decimals, duration, options); | ||
| if (!demo.error) { | ||
| errorSection.style.display = 'none'; | ||
| if (useOnComplete) { | ||
| demo.start(methodToCallOnComplete); | ||
| } else { | ||
| demo.start(); | ||
| } | ||
| updateCodeVisualizer(); | ||
| } | ||
| else { | ||
| errorSection.style.display = 'block'; | ||
| document.getElementById('error').innerHTML = demo.error; | ||
| console.error(demo.error); | ||
| } | ||
| } | ||
| function showCodeAndPauseResume() { | ||
| code = 'demo.pauseResume();'; | ||
| codeVisualizer.innerHTML = code; | ||
| demo.pauseResume(); | ||
| } | ||
| function showCodeAndReset() { | ||
| code = 'demo.reset();'; | ||
| codeVisualizer.innerHTML = code; | ||
| demo.reset(); | ||
| } | ||
| function showCodeAndUpdate() { | ||
| var updateVal = document.getElementById('updateVal').value; | ||
| var num = updateVal ? updateVal : 0; | ||
| code = 'demo.update('+num+');<br>'; | ||
| code += '// update method is useful for counting to large numbers. See README.'; | ||
| codeVisualizer.innerHTML = code; | ||
| demo.update(num); | ||
| } | ||
| function toggleOnComplete(checkbox) { | ||
| useOnComplete = checkbox.checked; | ||
| updateCodeVisualizer(); | ||
| } | ||
| function toggleEasing(checkbox) { | ||
| useEasing = checkbox.checked | ||
| easingFnsDropdown.disabled = !useEasing | ||
| if (useEasing) { | ||
| easingFnsDropdown.value = 'easeOutExpo'; | ||
| document.getElementById('easingFnPreview').value = ""; | ||
| } | ||
| updateCodeVisualizer(); | ||
| } | ||
| function toggleGrouping(checkbox) { | ||
| useGrouping = checkbox.checked; | ||
| updateCodeVisualizer(); | ||
| } | ||
| function methodToCallOnComplete() { | ||
| console.log('COMPLETE!'); | ||
| alert('COMPLETE!'); | ||
| } | ||
| function updateCodeVisualizer() { | ||
| var startVal = document.getElementById('startVal').value; | ||
| startVal = Number(startVal.replace(',','').replace(' ','')); | ||
| var endVal = document.getElementById('endVal').value; | ||
| endVal = Number(endVal.replace(',','').replace(' ','')); | ||
| var decimals = document.getElementById('decimals').value, | ||
| duration = document.getElementById('duration').value, | ||
| separator = document.getElementById('separator').value, | ||
| decimal = document.getElementById('decimal').value, | ||
| prefix = document.getElementById('prefix').value, | ||
| suffix = document.getElementById('suffix').value, | ||
| easingFn = getEasingFn(), | ||
| easingFnBody = getEasingFnBody(easingFn), | ||
| numerals = getNumerals(), | ||
| code = ''; | ||
|
|
||
| if (useEasing && easingFn) { | ||
| code += 'var easingFn = '; | ||
| var split = easingFnBody.split('\n'); | ||
|
|
||
| for (var line in split) { | ||
| code += split[line].replace(' ', ' ') + '<br>'; | ||
| } | ||
| } | ||
|
|
||
| code += 'var options = {<br>'; | ||
| code += (useEasing) ? '  useEasing: true, <br>' : '  useEasing: false, <br>'; | ||
| code += (easingFn && useEasing) ? '  easingFn: easingFn, <br>' : ''; | ||
| code += (useGrouping) ? '  useGrouping: true, <br>' : '  useGrouping: false, <br>'; | ||
| code += '  separator: \''+separator+'\', <br>'; | ||
| code += '  decimal: \''+decimal+'\', <br>'; | ||
| if (prefix.length) code += '  prefix: \''+prefix+'\', <br>'; | ||
| if (suffix.length) code += '  suffix: \''+suffix+'\' <br>'; | ||
| if (numerals.length) code += '  numerals: '+stringifyArray(numerals)+' <br>'; | ||
| code += '};<br>'; | ||
| code += 'var demo = new CountUp(\'myTargetElement\', '+startVal+', '+endVal+', '+decimals+', '+duration+', options);<br>'; | ||
| code += 'if (!demo.error) {<br>'; | ||
| if (useOnComplete) { | ||
| code += '  demo.start(methodToCallOnComplete);<br>'; | ||
| } else { | ||
| code += '  demo.start();<br>'; | ||
| } | ||
| code += '} else {<br>'; | ||
| code += '  console.error(demo.error);<br>}'; | ||
| codeVisualizer.innerHTML = code; | ||
| } | ||
| function updateCodeVisualizerForUpdate() { | ||
| var updateVal = document.getElementById('updateVal').value; | ||
| var num = updateVal ? updateVal : 0; | ||
| code = 'demo.update(' + updateVal + ');'; | ||
| 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) { | ||
| data = JSON.parse(getStars.responseText); | ||
| stars = data.stargazers_count; | ||
| // change input values | ||
| document.getElementById('startVal').value = 0; | ||
| document.getElementById('endVal').value = stars; | ||
| document.getElementById('decimals').value = 0; | ||
|
|
||
| createCountUp(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| getStars.onerror = function() { | ||
| console.error('error getting stars:', getStars.status); | ||
| stars = getStars.status; | ||
| demo.start(); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.