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

docs: Update docs for keyboard shortcuts (#29207)

Browse source 
* Update docs for keyboard shortcuts

* Add a fiddle for web-apis

* Apply suggestions from code review

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

* Cleanup a few formatting errors and missed copies

* Add descriptions to index.html

* Focus on renderer

Co-authored-by: Erick Zhao <erick@hotmail.ca>
This commit is contained in:
Tony Ferrell 2021-05-23 19:33:22 -07:00 committed by GitHub
parent 241cceb2c9
commit 77e7d828ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 73 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/fiddles/features/keyboard-shortcuts/global/index.html
View file

@ -7,10 +7,6 @@
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p> <p>Hit Alt+Ctrl+I on Windows or Opt+Cmd+I on Mac to see a message printed to the console.</p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body> </body>
</html> </html>

3
docs/fiddles/features/keyboard-shortcuts/global/main.js
View file

@ -4,9 +4,6 @@ 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')

4
docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html
View file

@ -7,8 +7,6 @@
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>, <p>Hit Ctrl+I to see a message printed to the console.</p>
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body> </body>
</html> </html>

2
docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js
View file

@ -1,7 +1,7 @@
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => { app.whenReady().then(() => {
const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html') win.loadFile('index.html')
win.webContents.on('before-input-event', (event, input) => { win.webContents.on('before-input-event', (event, input) => {

6
docs/fiddles/features/keyboard-shortcuts/local/index.html
View file

@ -7,10 +7,6 @@
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p> <p>Hit Alt+Shift+I on Windows, or Opt+Cmd+I on mac to see a message printed to the console.</p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body> </body>
</html> </html>

3
docs/fiddles/features/keyboard-shortcuts/local/main.js
View file

@ -4,9 +4,6 @@ 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')

17
docs/fiddles/features/keyboard-shortcuts/web-apis/index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Hit any key with this window focused to see it captured here.</p>
<div><span>Last Key Pressed: </span><span id="last-keypress"></span></div>
<script src="./renderer.js"></script>
</body>
</html>

35
docs/fiddles/features/keyboard-shortcuts/web-apis/main.js Normal file
View file

@ -0,0 +1,35 @@
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

7
docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js Normal file
View file

@ -0,0 +1,7 @@
function handleKeyPress (event) {
// You can put code here to handle the keypress.
document.getElementById("last-keypress").innerText = event.key
console.log(`You pressed ${event.key}`)
}
window.addEventListener('keyup', handleKeyPress, true)

16
docs/tutorial/keyboard-shortcuts.md
View file

@ -81,11 +81,17 @@ If you want to handle keyboard shortcuts within a [BrowserWindow], you can
listen for the `keyup` and `keydown` [DOM events][dom-events] inside the listen for the `keyup` and `keydown` [DOM events][dom-events] inside the
renderer process using the [addEventListener() API][addEventListener-api]. renderer process using the [addEventListener() API][addEventListener-api].
```js ```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js'
window.addEventListener('keyup', doSomething, true) function handleKeyPress(event) {
// You can put code here to handle the keypress.
document.getElementById("last-keypress").innerText = event.key;
console.log(`You pressed ${event.key}`);
}
window.addEventListener('keyup', handleKeyPress, true);
``` ```
Note the third parameter `true` indicates that the listener will always receive > Note: the third parameter `true` indicates that the listener will always receive
key presses before other listeners so they can't have `stopPropagation()` key presses before other listeners so they can't have `stopPropagation()`
called on them. called on them.
@ -95,8 +101,6 @@ The [`before-input-event`](../api/web-contents.md#event-before-input-event) even
is emitted before dispatching `keydown` and `keyup` events in the page. It can is emitted before dispatching `keydown` and `keyup` events in the page. It can
be used to catch and handle custom shortcuts that are not visible in the menu. be used to catch and handle custom shortcuts that are not visible in the menu.
##### Example
Starting with a working application from the Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the [Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines: following lines:
@ -105,7 +109,7 @@ following lines:
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => { app.whenReady().then(() => {
const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html') win.loadFile('index.html')
win.webContents.on('before-input-event', (event, input) => { win.webContents.on('before-input-event', (event, input) => {