Commit 2ba82fd391fcb12d40a521ed9a2c156d9426de3a
initial
Dominic Tarr committed on 7/24/2016, 4:32:13 AMFiles changed
.travis.yml | added |
LICENSE | added |
README.md | added |
example.js | added |
index.js | added |
package.json | added |
LICENSE | ||
---|---|---|
@@ -1,0 +1,22 @@ | ||
1 … | +Copyright (c) 2016 'Dominic Tarr' | |
2 … | + | |
3 … | +Permission is hereby granted, free of charge, | |
4 … | +to any person obtaining a copy of this software and | |
5 … | +associated documentation files (the "Software"), to | |
6 … | +deal in the Software without restriction, including | |
7 … | +without limitation the rights to use, copy, modify, | |
8 … | +merge, publish, distribute, sublicense, and/or sell | |
9 … | +copies of the Software, and to permit persons to whom | |
10 … | +the Software is furnished to do so, | |
11 … | +subject to the following conditions: | |
12 … | + | |
13 … | +The above copyright notice and this permission notice | |
14 … | +shall be included in all copies or substantial portions of the Software. | |
15 … | + | |
16 … | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | |
17 … | +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES | |
18 … | +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. | |
19 … | +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR | |
20 … | +ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, | |
21 … | +TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE | |
22 … | +SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
README.md | ||
---|---|---|
@@ -1,0 +1,29 @@ | ||
1 … | +# hyperprogress | |
2 … | + | |
3 … | +create a progress bar | |
4 … | + | |
5 … | +``` js | |
6 … | +var progress = require('hyperprogress')(10) //for a 10 step bar. | |
7 … | + | |
8 … | +document.body.appendChild(progress) | |
9 … | + | |
10 … | +progress.next() //go to next step | |
11 … | +progress.next('step name') //append a step to the list. | |
12 … | + | |
13 … | +//if the process fails, call with an error. | |
14 … | +progress.fail(new Error('failed')) | |
15 … | +``` | |
16 … | + | |
17 … | +has no dependencies. 1.4k | |
18 … | + | |
19 … | +you'll need to use CSS to make the progress bar visible. | |
20 … | +at minimum you need: | |
21 … | + | |
22 … | +``` | |
23 … | +.hyperprogress__liquid { height: 1px; background: blue;} | |
24 … | +``` | |
25 … | + | |
26 … | +## License | |
27 … | + | |
28 … | +MIT | |
29 … | + |
example.js | ||
---|---|---|
@@ -1,0 +1,37 @@ | ||
1 … | + | |
2 … | + | |
3 … | +var progress = require('./')(10) | |
4 … | +var style = document.createElement('style') | |
5 … | +style.textContent = | |
6 … | + '.hyperprogress__liquid { height: 1px; background: blue;}\n' | |
7 … | +//+ '.hyperprogress__bar { width: 100%; background: white;}\n' | |
8 … | + | |
9 … | +document.head.appendChild(style) | |
10 … | +document.body.appendChild(progress) | |
11 … | + | |
12 … | +var steps = [ | |
13 … | + 'check forcast', | |
14 … | + 'tidy galley', | |
15 … | + 'secure tender', | |
16 … | + 'hank sails', | |
17 … | + 'raise mainsail', | |
18 … | + 'raise anchor', | |
19 … | + 'man helm', | |
20 … | + 'set mainsail', | |
21 … | + 'raise jib', | |
22 … | + 'set jib sheets' | |
23 … | +] | |
24 … | + | |
25 … | +;(function next () { | |
26 … | + setTimeout(function () { | |
27 … | + progress.next(steps.shift()); next() | |
28 … | + if(!steps.length) return | |
29 … | + }, Math.random() * 100) | |
30 … | +})() | |
31 … | + | |
32 … | + | |
33 … | + | |
34 … | + | |
35 … | + | |
36 … | + | |
37 … | + |
index.js | ||
---|---|---|
@@ -1,0 +1,57 @@ | ||
1 … | + | |
2 … | +function create (tag, classname, children) { | |
3 … | + var el = document.createElement(tag) | |
4 … | + classname && el.classList.add(classname) | |
5 … | + children && children.forEach(function (e) { | |
6 … | + console.log('append', e) | |
7 … | + el.appendChild( | |
8 … | + 'string' === typeof e ? document.createTextNode(e) : e | |
9 … | + ) | |
10 … | + }) | |
11 … | + return el | |
12 … | +} | |
13 … | + | |
14 … | +module.exports = function (steps) { | |
15 … | + var list = create('ul', 'hyperprogress__list') | |
16 … | + var error = create('pre', 'hyperprogress__error') | |
17 … | + var liquid = create('div', 'hyperprogress__liquid', ['.']) | |
18 … | + var bar = create('div', 'hyperprogress__bar', [liquid]) | |
19 … | + | |
20 … | + var n = 0 | |
21 … | + | |
22 … | + var prog = create('div', 'hyperprogress', [ | |
23 … | + steps ? bar : '', | |
24 … | + list, | |
25 … | + //only show bar if a number of steps is provided. | |
26 … | + error | |
27 … | + ]) | |
28 … | + | |
29 … | + prog.complete = function () { | |
30 … | + liquid.style.width = '100%' | |
31 … | + progress.classList.add('hyperprogress--complete') | |
32 … | + } | |
33 … | + | |
34 … | + prog.next = function (name) { | |
35 … | + n = Math.min(n+1, steps) | |
36 … | + if(list.lastChild) | |
37 … | + list.lastChild.classList.add('hyperprogress--okay') | |
38 … | + | |
39 … | + if(name) | |
40 … | + list.appendChild(create('li', 'hyperprogress__started', [name])) | |
41 … | + | |
42 … | + liquid.style.width = Math.round((n/steps)*100)+'%' | |
43 … | + | |
44 … | + if(n === steps) | |
45 … | + prog.complete() | |
46 … | + } | |
47 … | + | |
48 … | + prog.fail = function (err) { | |
49 … | + progress.classList.add('hyperprogress--failed') | |
50 … | + list.lastChild.classList.add('hyperprogress--error') | |
51 … | + if(err && err.stack) | |
52 … | + error.textContent = err.stack | |
53 … | + } | |
54 … | + | |
55 … | + return prog | |
56 … | +} | |
57 … | + |
package.json | ||
---|---|---|
@@ -1,0 +1,19 @@ | ||
1 … | +{ | |
2 … | + "name": "hyperprogress", | |
3 … | + "description": "lightweight progressbar", | |
4 … | + "version": "0.0.0", | |
5 … | + "homepage": "https://github.com/dominictarr/hyperprogress", | |
6 … | + "repository": { | |
7 … | + "type": "git", | |
8 … | + "url": "git://github.com/dominictarr/hyperprogress.git" | |
9 … | + }, | |
10 … | + "dependencies": { | |
11 … | + }, | |
12 … | + "devDependencies": { | |
13 … | + }, | |
14 … | + "scripts": { | |
15 … | + "test": "set -e; for t in test/*.js; do node $t; done" | |
16 … | + }, | |
17 … | + "author": "'Dominic Tarr' <dominic.tarr@gmail.com> (dominictarr.com)", | |
18 … | + "license": "MIT" | |
19 … | +} |
Built with git-ssb-web