@@ -1,37 +1,33 @@
11'use strict'
22
33const Progress = keys => {
4− const allKeys = new Set(keys.filter(key => key))
5− const loadedKeys = new Set()
6− const failedKeys = new Set()
4+ const stack = new Set(keys.filter(key => key))
5+ const loaded = new Set()
6+ const failed = new Set()
77
8− const done = () => loadedKeys.size === allKeys.size
9−
10− const className = () => done() ? 'done' : 'busy'
11−
12− const formatPercentLoaded = () => `
13− ${Math.round(100 * loadedKeys.size / Math.max(allKeys.size, 1))}% loaded
14− `
15−
16− const formatFailureCount = () => failedKeys.size === 0
17− ? ''
18− : `(${failedKeys.size} failed)`
8+ this.ratio = () => {
9+ return loaded.size / stack.size
10+ }
1911
20− const formatProgress = () => done()
21− ? ''
22− : `<p><progress value='${loadedKeys.size}' max='${allKeys.size}'></progress></p>`
12+ this.percentage = () => {
13+ return (100 * this.ratio()).toFixed(2)
14+ }
2315
2416 const render = () => `
25− <div class='${className()}'>
26− <p>${formatPercentLoaded()} ${formatFailureCount()}</p>
27− ${formatProgress()}
28− </div>
29− `
17+ <div class='${loaded.size !== stack.size ? 'busy' : 'done'}'>
18+ <p>
19+ ${'|'.repeat(this.ratio() * 10)}
20+ ${loaded.size !== stack.size ? this.percentage() + '% ' : ''}
21+ ${loaded.size === stack.size ? 'Complete' : 'Loading'}
22+ ${failed.size !== 0 ? `(${failed.size} failed)` : ''}
23+ </p>
24+
25+ </div>`
3026
3127 const didLoad = (key, success) => new Promise((resolve, reject) => {
32− if (allKeys.has(key)) {
33− loadedKeys.add(key)
34− if (!success) failedKeys.add(key)
28+ if (stack.has(key)) {
29+ loaded.add(key)
30+ if (!success) failed.add(key)
3531 return resolve()
3632 } else {
3733 return reject()
@@ -41,7 +37,6 @@ const Progress = keys => {
4137 return {
4238 success: key => didLoad(key, true),
4339 failure: key => didLoad(key, false),
44− done,
45− render,
40+ toString: render
4641 }
4742}