git ssb

0+

Dominic / hyperprogress



Commit 2ba82fd391fcb12d40a521ed9a2c156d9426de3a

initial

Dominic Tarr committed on 7/24/2016, 4:32:13 AM

Files changed

.travis.ymladded
LICENSEadded
README.mdadded
example.jsadded
index.jsadded
package.jsonadded
.travis.ymlView
@@ -1,0 +1,4 @@
1 +language: node_js
2 +node_js:
3 + - 0.6
4 + - 0.8
LICENSEView
@@ -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.mdView
@@ -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.jsView
@@ -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.jsView
@@ -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.jsonView
@@ -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