git.iko.soy/webring
on master help sign in
Merge pull request #260 from ljcooke/progress-indicator

Feature: Add a progress indicator to the wiki

commita4bd50e6de95b4614c2537690069acfbcd7c0916 authorChris <ckipp@pm.me> dateSun 11 Aug 2019, 11:02 (7 years ago) parente70bf6bb36e10b
4 files changed+66
compare with master
unifiedsplit
links/main.css+8 scripts/progress.js+47 scripts/wiki.js+9 wiki.html+2
links/main.css+8
@@ -74,6 +74,14 @@ body #wiki ul.term { margin-bottom: 15px; }
7474body #wiki ul.term li.name { margin-bottom: 5px; }
7575body #wiki #footer { padding-left: 60px; background-image: url(../icon.white.svg); background-size: 40px; background-repeat: no-repeat; background-position: 0px 10px; border-top: 2px solid white; padding-top: 22px; margin-top: 15px; max-width: calc(100% - 300px); min-height: 45px; line-height: 15px;}
7676
77+/* progress indicator */
78+body #progress { color: #777; }
79+body #progress .busy { cursor: wait; }
80+body #progress progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ccc; color: #777; width: 100px; height: 5px; border: 1px solid #777; box-sizing: border-box; }
81+body #progress progress::-webkit-progress-bar { background: #ccc; }
82+body #progress progress::-webkit-progress-value { background: #777; } /* warning: don't merge this with -moz-progress-bar below, it will break in webkit! */
83+body #progress progress::-moz-progress-bar { background: #777; }
84+
7785@media (min-width: 630px) {
7886 body aside { display: block; }
7987 body #portal ul { columns: 3;}
scripts/progress.jsnew file+47
@@ -0,0 +1,47 @@
1+'use strict'
2+
3+const Progress = keys => {
4+ const allKeys = new Set(keys.filter(key => key))
5+ const loadedKeys = new Set()
6+ const failedKeys = new Set()
7+
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)`
19+
20+ const formatProgress = () => done()
21+ ? ''
22+ : `<p><progress value='${loadedKeys.size}' max='${allKeys.size}'></progress></p>`
23+
24+ const render = () => `
25+ <div class='${className()}'>
26+ <p>${formatPercentLoaded()} ${formatFailureCount()}</p>
27+ ${formatProgress()}
28+ </div>
29+ `
30+
31+ const didLoad = (key, success) => new Promise((resolve, reject) => {
32+ if (allKeys.has(key)) {
33+ loadedKeys.add(key)
34+ if (!success) failedKeys.add(key)
35+ return resolve()
36+ } else {
37+ return reject()
38+ }
39+ })
40+
41+ return {
42+ success: key => didLoad(key, true),
43+ failure: key => didLoad(key, false),
44+ done,
45+ render,
46+ }
47+}
scripts/wiki.js+9
@@ -4,6 +4,8 @@ const Wiki = sites => {
44 const entries = {}
55 const main = document.getElementById('main')
66 const aside = document.getElementById('aside')
7+ const progress = document.getElementById('progress')
8+ const progressCounter = Progress(sites.map(site => site.wiki))
79 const authors = new Set()
810 const terms = new Set()
911
@@ -115,15 +117,22 @@ const Wiki = sites => {
115117 aside.innerHTML = `<ul>${cats}</ul>`
116118 }
117119
120+ const refreshProgress = () => {
121+ progress.innerHTML = progressCounter.render()
122+ }
123+
118124 return {
119125 initialize: hash => {
120126 console.log('Wiki', 'Fetching...')
127+ refreshProgress()
121128 sites.filter(site => site.wiki && site.author).forEach(site => {
122129 fetch(site.wiki, { cache: 'no-store' }).then(x => x.text()).then(content => {
123130 parse(site, content)
124131 refresh(stripHash(hash))
132+ progressCounter.success(site.wiki).then(refreshProgress)
125133 }).catch((err) => {
126134 console.warn(`${site.wiki}`, err)
135+ progressCounter.failure(site.wiki).then(refreshProgress)
127136 })
128137 })
129138 },
wiki.html+2
@@ -5,6 +5,7 @@
55 <meta name="viewport" content="width=device-width, initial-scale=1.0">
66 <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
77 <link rel="stylesheet" type="text/css" href="links/main.css"/>
8+ <script src="scripts/progress.js"></script>
89 <script src="scripts/wiki.js"></script>
910 <script src="scripts/sites.js"></script>
1011 <script src="scripts/indental.js"></script>
@@ -18,6 +19,7 @@
1819 </main>
1920 <footer id="footer">
2021 <p>The <strong>Wiki</strong> is a decentralized encyclopedia, to join the conversation, add a <a href="https://github.com/XXIIVV/webring#joining-the-wiki">wiki:</a> field to your entry in the <a href="https://github.com/XXIIVV/Webring/">webring</a>.</p>
22+ <div id="progress"></div>
2123 </footer>
2224 </div>
2325 <script>