mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

docs: Updated "progress bar" fiddle feature in docs (#29237)

Browse source 
* improve progress bar fiddle

* add comments to code snippet

* edits to progress-bar tutorial

* remove versions and nodeIntegration

* limit line length to 100

* implement standard linter suggestions

* add indeterminate and clear timers

* update to have reader replace all of main.js

* remove extra button

* loop the progress bar

* add logic to show reset state briefly

* Update docs/tutorial/progress-bar.md

Co-authored-by: Erick Zhao <erick@hotmail.ca>

* chore: fix lint

Co-authored-by: Cheng Zhao <github@zcbenz.com>
Co-authored-by: Erick Zhao <erick@hotmail.ca>
This commit is contained in:
Jeremy Foster 2021-06-01 19:41:13 -07:00 • committed by GitHub
parent f9d2a7077e
commit dee4c4b908
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

9
docs/fiddles/features/progress-bar/index.html
View file

@ -7,10 +7,9 @@
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p> <p>Keep an eye on the dock (Mac) or taskbar (Windows, Unity) for this application!</p>
We are using node <script>document.write(process.versions.node)</script>, <p>It should indicate a progress that advances from 0 to 100%.</p>
Chrome <script>document.write(process.versions.chrome)</script>, <p>It should then show indeterminate (Windows) or pin at 100% (other operating systems)
and Electron <script>document.write(process.versions.electron)</script>. briefly and then loop.</p>
</p>
</body> </body>
</html> </html>

30
docs/fiddles/features/progress-bar/main.js
View file

@ -1,21 +1,39 @@
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
let progressInterval
function createWindow () { function createWindow () {
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600
webPreferences: {
nodeIntegration: true
}
}) })
win.loadFile('index.html') win.loadFile('index.html')
win.setProgressBar(0.5)
}
const INCREMENT = 0.03
const INTERVAL_DELAY = 100 // ms
let c = 0
progressInterval = setInterval(() => {
// update progress bar to next value
// values between 0 and 1 will show progress, >1 will show indeterminate or stick at 100%
win.setProgressBar(c)
// increment or reset progress bar
if (c < 2) {
c += INCREMENT
} else {
c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
}
}, INTERVAL_DELAY)
}
app.whenReady().then(createWindow) app.whenReady().then(createWindow)
// before the app is terminated, clear both timers
app.on('before-quit', () => {
clearInterval(progressInterval)
})
app.on('window-all-closed', () => { app.on('window-all-closed', () => {
if (process.platform !== 'darwin') { if (process.platform !== 'darwin') {

68
docs/tutorial/progress-bar.md
View file

@ -31,30 +31,70 @@ currently at 63% towards completion, you would call it as
`setProgressBar(0.63)`. `setProgressBar(0.63)`.
Setting the parameter to negative values (e.g. `-1`) will remove the progress Setting the parameter to negative values (e.g. `-1`) will remove the progress
bar, whereas setting it to values greater than `1` (e.g. `2`) will switch the bar. Setting it to a value greater than `1` will indicate an indeterminate progress bar
progress bar to indeterminate mode (Windows-only -- it will clamp to 100% in Windows or clamp to 100% in other operating systems. An indeterminate progress bar
otherwise). In this mode, a progress bar remains active but does not show an remains active but does not show an actual percentage, and is used for situations when
actual percentage. Use this mode for situations when you do not know how long you do not know how long an operation will take to complete.
an operation will take to complete.
See the [API documentation for more options and modes][setprogressbar]. See the [API documentation for more options and modes][setprogressbar].
## Example ## Example
Starting with a working application from the In this example, we add a progress bar to the main window that increments over time
[Quick Start Guide](quick-start.md), add the following lines to the using Node.js timers.
`main.js` file:
```javascript fiddle='docs/fiddles/features/progress-bar' ```javascript fiddle='docs/fiddles/features/progress-bar'
const { BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setProgressBar(0.5) let progressInterval
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
const INCREMENT = 0.03
const INTERVAL_DELAY = 100 // ms
let c = 0
progressInterval = setInterval(() => {
// update progress bar to next value
// values between 0 and 1 will show progress, >1 will show indeterminate or stick at 100%
win.setProgressBar(c)
// increment or reset progress bar
if (c < 2) c += INCREMENT
else c = 0
}, INTERVAL_DELAY)
}
app.whenReady().then(createWindow)
// before the app is terminated, clear both timers
app.on('before-quit', () => {
clearInterval(progressInterval)
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
``` ```
After launching the Electron application, you should see the bar in After launching the Electron application, the dock (macOS) or taskbar (Windows, Unity)
the dock (macOS) or taskbar (Windows, Unity), indicating the progress should show a progress bar that starts at zero and progresses through 100% to completion.
percentage you just defined. It should then show indeterminate (Windows) or pin to 100% (other operating systems)
briefly and then loop.
![macOS dock progress bar](../images/dock-progress-bar.png) ![macOS dock progress bar](../images/dock-progress-bar.png)