demo-nomodule.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. // same as demo.js but with a different instantiation of CountUp,
  2. // and no lambdas
  3. window.onload = function () {
  4. var el = function (id) {
  5. return document.getElementById(id);
  6. };
  7. var code, stars, endVal, options;
  8. var demo = new countUp.CountUp('myTargetElement', 100);
  9. var codeVisualizer = el('codeVisualizer');
  10. var errorSection = el('errorSection');
  11. el('version').innerHTML = demo.version;
  12. var changeEls = document.querySelectorAll('.updateCodeVis');
  13. for (var i = 0, len = changeEls.length; i < len; i++) {
  14. changeEls[i].onchange = updateCodeVisualizer;
  15. }
  16. el('swapValues').onclick = function () {
  17. var oldStartVal = el('startVal').value;
  18. var oldEndVal = el('endVal').value;
  19. el('startVal').value = oldEndVal;
  20. el('endVal').value = oldStartVal;
  21. updateCodeVisualizer();
  22. };
  23. el('start').onclick = createCountUp;
  24. el('apply').onclick = createCountUp;
  25. el('pauseResume').onclick = function () {
  26. code += '<br>demo.pauseResume();';
  27. codeVisualizer.innerHTML = code;
  28. demo.pauseResume();
  29. };
  30. el('reset').onclick = function () {
  31. code += '<br>demo.reset();';
  32. codeVisualizer.innerHTML = code;
  33. demo.reset();
  34. };
  35. el('update').onclick = function () {
  36. var updateVal = el('updateVal').value;
  37. var num = updateVal ? updateVal : 0;
  38. code += "<br>demo.update(" + num + ");";
  39. codeVisualizer.innerHTML = code;
  40. demo.update(num);
  41. };
  42. el('updateVal').onchange = function () {
  43. var updateVal = el('updateVal').value;
  44. var num = updateVal ? updateVal : 0;
  45. code += '<br>demo.update(' + num + ');';
  46. codeVisualizer.innerHTML = code;
  47. };
  48. // OPTION VALUES
  49. var easingFunctions = {
  50. easeOutExpo: function (t, b, c, d) {
  51. return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  52. },
  53. outQuintic: function (t, b, c, d) {
  54. var ts = (t /= d) * t;
  55. var tc = ts * t;
  56. return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
  57. },
  58. outCubic: function (t, b, c, d) {
  59. var ts = (t /= d) * t;
  60. var tc = ts * t;
  61. return b + c * (tc + -3 * ts + 3 * t);
  62. }
  63. };
  64. function getEasingFn() {
  65. var fn = el('easingFnsDropdown').value;
  66. if (fn === 'easeOutExpo') {
  67. return null;
  68. }
  69. if (typeof easingFunctions[fn] === 'undefined') {
  70. return undefined;
  71. }
  72. return easingFunctions[fn];
  73. }
  74. function getEasingFnBody(fn) {
  75. fn = typeof fn === 'undefined' ? getEasingFn() : fn;
  76. if (typeof fn === 'undefined') {
  77. return 'undefined function';
  78. }
  79. if (fn !== null) {
  80. return fn.toString().replace(/^ {8}/gm, '');
  81. }
  82. return '';
  83. }
  84. function getNumerals() {
  85. var numeralsCode = el('numeralsDropdown').value;
  86. // optionally provide alternates for 0-9
  87. switch (numeralsCode) {
  88. case 'ea': // Eastern Arabic
  89. return ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
  90. case 'fa': // Farsi
  91. return ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
  92. default:
  93. return null;
  94. }
  95. }
  96. var stringifyArray = function (arr) { return '[\'' + arr.join('\', \'') + '\']'; };
  97. // COUNTUP AND CODE VISUALIZER
  98. function createCountUp() {
  99. establishOptionsFromInputs();
  100. demo = new countUp.CountUp('myTargetElement', endVal, options);
  101. if (!demo.error) {
  102. errorSection.style.display = 'none';
  103. if (el('useOnComplete').checked) {
  104. demo.start(methodToCallOnComplete);
  105. }
  106. else {
  107. demo.start();
  108. }
  109. updateCodeVisualizer();
  110. }
  111. else {
  112. errorSection.style.display = 'block';
  113. document.getElementById('error').innerHTML = demo.error;
  114. console.error(demo.error);
  115. }
  116. }
  117. function methodToCallOnComplete() {
  118. console.log('COMPLETE!');
  119. alert('COMPLETE!');
  120. }
  121. function establishOptionsFromInputs() {
  122. endVal = Number(el('endVal').value);
  123. options = {
  124. startVal: el('startVal').value,
  125. decimalPlaces: el('decimalPlaces').value,
  126. duration: Number(el('duration').value),
  127. useEasing: el('useEasing').checked,
  128. useGrouping: el('useGrouping').checked,
  129. easingFn: typeof getEasingFn() === 'undefined' ? null : getEasingFn(),
  130. separator: el('separator').value,
  131. decimal: el('decimal').value,
  132. prefix: el('prefix').value,
  133. suffix: el('suffix').value,
  134. numerals: getNumerals()
  135. };
  136. // unset null values so they don't overwrite defaults
  137. for (var key in options) {
  138. if (options.hasOwnProperty(key)) {
  139. if (options[key] === null) {
  140. delete options[key];
  141. }
  142. }
  143. }
  144. }
  145. function updateCodeVisualizer() {
  146. establishOptionsFromInputs();
  147. code = '';
  148. if (options.useEasing && options.easingFn) {
  149. code += 'const easingFn = ';
  150. var split = getEasingFnBody(options.easingFn).split('\n');
  151. for (var line in split) {
  152. if (split.hasOwnProperty(line)) {
  153. code += split[line].replace(' ', '&nbsp;') + '<br>';
  154. }
  155. }
  156. }
  157. function indentedLine(keyPair, singleLine) {
  158. if (singleLine === void 0) { singleLine = false; }
  159. var delimeter = (singleLine) ? ';' : ',';
  160. return "&emsp;&emsp;" + keyPair + delimeter + "<br>";
  161. }
  162. var opts = '';
  163. opts += (options.startVal !== '0') ? indentedLine("startVal: " + options.startVal) : '';
  164. opts += (options.decimalPlaces !== '0') ? indentedLine("decimalPlaces: " + options.decimalPlaces) : '';
  165. opts += (options.duration !== 2) ? indentedLine("duration: " + options.duration) : '';
  166. opts += (options.useEasing) ? '' : indentedLine("useEasing: " + options.useEasing);
  167. opts += (options.useEasing && options.easingFn) ? indentedLine("easingFn") : '';
  168. opts += (options.useGrouping) ? '' : indentedLine("useGrouping: " + options.useGrouping);
  169. opts += (options.separator !== ',') ? indentedLine("separator: '" + options.separator + "'") : '';
  170. opts += (options.decimal !== '.') ? indentedLine("decimal: '" + options.decimal + "'") : '';
  171. opts += (options.prefix.length) ? indentedLine("prefix: '" + options.prefix + "'") : '';
  172. opts += (options.suffix.length) ? indentedLine("suffix: '" + options.suffix + "'") : '';
  173. opts += (options.numerals && options.numerals.length) ?
  174. indentedLine("numerals: " + stringifyArray(options.numerals)) : '';
  175. if (opts.length) {
  176. code += "const options = {<br>" + opts + "};<br>";
  177. code += "let demo = new CountUp('myTargetElement', " + endVal + ", options);<br>";
  178. }
  179. else {
  180. code += "let demo = new CountUp('myTargetElement', " + endVal + ");<br>";
  181. }
  182. code += 'if (!demo.error) {<br>';
  183. code += (el('useOnComplete').checked) ?
  184. indentedLine('demo.start(methodToCallOnComplete)', true) : indentedLine('demo.start()', true);
  185. code += '} else {<br>';
  186. code += indentedLine('console.error(demo.error)', true);
  187. code += '}';
  188. codeVisualizer.innerHTML = code;
  189. }
  190. // get current star count
  191. var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';
  192. var getStars = new XMLHttpRequest();
  193. getStars.open('GET', repoInfoUrl, true);
  194. getStars.timeout = 5000;
  195. getStars.onreadystatechange = function () {
  196. // 2: received headers, 3: loading, 4: done
  197. if (getStars.readyState === 4) {
  198. if (getStars.status === 200) {
  199. if (getStars.responseText !== 'undefined') {
  200. if (getStars.responseText.length > 0) {
  201. var data = JSON.parse(getStars.responseText);
  202. stars = data.stargazers_count;
  203. // change input values
  204. el('endVal').value = stars;
  205. createCountUp();
  206. }
  207. }
  208. }
  209. }
  210. };
  211. getStars.onerror = function () {
  212. console.error('error getting stars:', getStars.status);
  213. stars = getStars.status;
  214. demo.start();
  215. };
  216. getStars.send();
  217. }