0596a5d · webring · git.iko.soy

links/main.css−5

compare with master

unifiedsplit

@@ -75,11 +75,6 @@ body #wiki #footer { padding-left: 60px; background-image: url(../icon.white.svg

75

76/* progress indicator */

77body #progress { color: #777; }

78−body #progress .busy { cursor: wait; }

79−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; }

80−body #progress progress::-webkit-progress-bar { background: #ccc; }

81−body #progress progress::-webkit-progress-value { background: #777; } /* warning: don't merge this with -moz-progress-bar below, it will break in webkit! */

82−body #progress progress::-moz-progress-bar { background: #777; }

83

78

84@media (min-width: 630px) {

79@media (min-width: 630px) {

85 body aside { display: block; }

80 body aside { display: block; }

scripts/portal.js+2−2

@@ -16,7 +16,7 @@ function Portal (sites) {

16 }

17

18 function _directory (sites) {

19− const listItems= sites.reduce((acc, site, id) => `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')

19+ const listItems = sites.reduce((acc, site, id) => `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')

20 return `<main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`

21 }

22

@@ -25,7 +25,7 @@ function Portal (sites) {

25 }

26

27 function _type (site) {

28− return site.type ? `data-type="${site.type}"` : ''

28+ return site.type ? `data-type="${site.type}"` : ''

29 }

30

31 function _redirect (site) {

scripts/progress.js+22−27

@@ -1,37 +1,33 @@

1'use strict'

2

3const Progress = keys => {

4− const allKeys = new Set(keys.filter(key => key))

4+ const stack = new Set(keys.filter(key => key))

5− const loadedKeys = new Set()

5+ const loaded = new Set()

6− const failedKeys = new Set()

6+ const failed = new Set()

7

8− const done = () => loadedKeys.size === allKeys.size

8+ this.ratio = () => {

9−

9+ return loaded.size / stack.size

10− const className = () => done() ? 'done' : 'busy'

10+ }

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

11

20− const formatProgress = () => done()

12+ this.percentage = () => {

21− ? ''

13+ return (100 * this.ratio()).toFixed(2)

22− : `<p><progress value='${loadedKeys.size}' max='${allKeys.size}'></progress></p>`

14+ }

23

15

24 const render = () => `

16 const render = () => `

25− <div class='${className()}'>

17+ <div class='${loaded.size !== stack.size ? 'busy' : 'done'}'>

26− <p>${formatPercentLoaded()} ${formatFailureCount()}</p>

18+ <p>

27− ${formatProgress()}

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+

28− </div>

25+ </div>`

29− `

30

26

31 const didLoad = (key, success) => new Promise((resolve, reject) => {

27 const didLoad = (key, success) => new Promise((resolve, reject) => {

32− if (allKeys.has(key)) {

28+ if (stack.has(key)) {

33− loadedKeys.add(key)

29+ loaded.add(key)

34− if (!success) failedKeys.add(key)

30+ if (!success) failed.add(key)

35 return resolve()

31 return resolve()

36 } else {

32 } else {

37 return reject()

33 return reject()

@@ -41,7 +37,6 @@ const Progress = keys => {

41 return {

37 return {

42 success: key => didLoad(key, true),

38 success: key => didLoad(key, true),

43 failure: key => didLoad(key, false),

39 failure: key => didLoad(key, false),

44− done,

45− render,

40+ toString: render

46 }

41 }

47}

42}

scripts/wiki.js+1−1

@@ -130,7 +130,7 @@ const Wiki = sites => {

130 }

131

132 const refreshProgress = () => {

133− progress.innerHTML = progressCounter.render()

133+ progress.innerHTML = `${progressCounter}`

134 }

135

136 return {