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

docs: Updated "recent documents" fiddle tutorial (#29242)

Browse source 
* Port recent-documents fiddle to 12-x-y.

* Update recent-documents tutorial.

* update for review comments

Co-authored-by: Ethan Arrowood <ethan.arrowood@gmail.com>
This commit is contained in:
Kevin Hartman 2021-06-06 21:43:24 -04:00 • committed by GitHub
parent 1a30f9f974
commit dd98fa3cd3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

9
docs/fiddles/features/recent-documents/index.html
View file

@ -2,15 +2,14 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hello World!</title> <title>Recent Documents</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Recent Documents</h1>
<p> <p>
We are using node <script>document.write(process.versions.node)</script>, Right click on the app icon to see recent documents.
Chrome <script>document.write(process.versions.chrome)</script>, You should see `recently-used.md` added to the list of recent files
and Electron <script>document.write(process.versions.electron)</script>.
</p> </p>
</body> </body>
</html> </html>

8
docs/fiddles/features/recent-documents/main.js
View file

@ -5,17 +5,15 @@ const path = require('path')
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')
} }
const fileName = 'recently-used.md' const fileName = 'recently-used.md'
fs.writeFile(fileName, 'Lorem Ipsum', () => { fs.writeFile(fileName, 'Lorem Ipsum', () => {
app.addRecentDocument(path.join(process.cwd(), `${fileName}`)) app.addRecentDocument(path.join(__dirname, fileName))
}) })
app.whenReady().then(createWindow) app.whenReady().then(createWindow)

BIN
docs/images/recent-documents.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Before After
Before After

65
docs/tutorial/recent-documents.md
View file

@ -13,39 +13,62 @@ __Application dock menu:__
![macOS Dock Menu][dock-menu-image] ![macOS Dock Menu][dock-menu-image]
To add a file to recent documents, you need to use the
[app.addRecentDocument][addrecentdocument] API.
## Example ## Example
### Add an item to recent documents ### Managing recent documents
Starting with a working application from the
[Quick Start Guide](quick-start.md), add the following lines to the
`main.js` file:
```javascript fiddle='docs/fiddles/features/recent-documents' ```javascript fiddle='docs/fiddles/features/recent-documents'
const { app } = require('electron') const { app, BrowserWindow } = require('electron')
const fs = require('fs')
const path = require('path')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type') function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
const fileName = 'recently-used.md'
fs.writeFile(fileName, 'Lorem Ipsum', () => {
app.addRecentDocument(path.join(__dirname, fileName))
})
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
app.clearRecentDocuments()
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
``` ```
#### Adding a recent document
To add a file to recent documents, use the
[app.addRecentDocument][addrecentdocument] API.
After launching the Electron application, right click the application icon. After launching the Electron application, right click the application icon.
You should see the item you just added. In this guide, the item is a Markdown In this guide, the item is a Markdown file located in the root of the project.
file located in the root of the project: You should see `recently-used.md` added to the list of recent files:
![Recent document](../images/recent-documents.png) ![Recent document](../images/recent-documents.png)
### Clear the list of recent documents #### Clearing the list of recent documents
To clear the list of recent documents, you need to use To clear the list of recent documents, use the
[app.clearRecentDocuments][clearrecentdocuments] API in the `main.js` file: [app.clearRecentDocuments][clearrecentdocuments] API.
In this guide, the list of documents is cleared once all windows have been
```javascript closed.
const { app } = require('electron')
app.clearRecentDocuments()
```
## Additional information ## Additional information