-
Notifications
You must be signed in to change notification settings - Fork 1
/
tutorial.js
114 lines (99 loc) · 3.82 KB
/
tutorial.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/**
* @author Dino <dinoabsoluto+dev@gmail.com>
* @license
* Copyright 2019 Dino <dinoabsoluto+dev@gmail.com>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/* imports */
// Import the library.
const FlexProgress = require('@dinoabsoluto/flex-progress')
// ESModules or Typescript
// import * as FlexProgress from '@dinoabsoluto/flex-progress'
// We're gonna use colors for this tutorial so here's we go.
const c = require('kleur')
// First, create an `Output`.
// This controls what appears onscreen.
const out = new FlexProgress.Output()
// Next, create a progress `Bar`.
// The progress `Bar` by itself doesn't do anything.
// Only when adding to `Output` that it appears onscreen.
const bar = new FlexProgress.Bar({ width: 25 })
// Sometime visual is not enough, people want concrete number instead.
// Let's create a label to report that number.
const label = new FlexProgress.Text()
// Okay, add stuffs to your `Output`.
// This makes them appear onscreen.
out.append(
// 1 means 1 space.
1,
// Add a spinner.
new FlexProgress.Spinner(),
// Another space and some text, basically, you can add space as text.
// e.g. ' Hello World! '
// But, we're using numbers to show what it does.
1, 'Hello World!',
// Well, 1 spinner is a little too few I suppose, here's another, with color.
//
// The `postProcess` function receives the rendered texts
// and returns processed text, the visual length must remain the same.
// *Visual*, that is to say ANSI escape codes don't count.
1, new FlexProgress.Spinner({ postProcess: c.red }),
// Finally, the progress bar's here.
1, '⸨', bar, '⸩',
// Of course, don't forget the `label`.
1, label
)
// Now you have spinners, a bar and a label, but nothing to do, so let's count
let count = 0
const loop = setInterval(() => {
count++
// Set the `ratio` property of the progress `Bar`.
//
// The value is clamped to range [0, 1].
//
// There's no need for ticking, just set this value whenever you want
// and it'll get updated.
// And there's no need for order as well.
// Go from 0% to 100%, 100% to 0% or some random beat, whatever your choice.
bar.ratio = (count % 39) / 38
// Now report that number as text.
// The most basic is, of course, percentage.
// But you can set this label to any random text you want. Be it:
// - Elapsed time
// - ETA
// - Speed
// - Some random chitchat to idle time away
// This library doesn't calculate any of these, since only you who control
// the works know the best algorithm to calculate the time.
label.text = Math.round(bar.ratio * 1000) / 10 + '%'
// Now a question, you changed the values of `bar.ratio` and `label.text`
// So that made the screen updated twice, right?
//
// Wrong. Only one update is scheduled and processed later.
// Any changes in the meantime will be merged and updated together.
//
// And of course, no unnecessary updates if there's no changes.
// The same text won't be rendered repeatedly.
// After all there's no need for a progress bar that's too busy reporting
// progress to make any progress.
}, 80)
// Can't be counting forever.
// You need to get back to coding so let's end the loop.
setTimeout(() => {
clearInterval(loop)
// Remember to clear your `Output`.
// Or else your progress bar will remain onscreen even after exiting.
out.clear()
}, 10000)