mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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>
<body>
<h1>Hello World!</h1>
<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>
<p>Hit Alt+Ctrl+I on Windows or Opt+Cmd+I on Mac to see a message printed to the console.</p>
</body>
</html>

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

@ -4,9 +4,6 @@ function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')

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

@ -7,8 +7,6 @@
</head>
<body>
<h1>Hello World!</h1>
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>Hit Ctrl+I to see a message printed to the console.</p>
</body>
</html>

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

@ -1,7 +1,7 @@
const { app, BrowserWindow } = require('electron')
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.webContents.on('before-input-event', (event, input) => {

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

@ -7,10 +7,6 @@
</head>
<body>
<h1>Hello World!</h1>
<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>
<p>Hit Alt+Shift+I on Windows, or Opt+Cmd+I on mac to see a message printed to the console.</p>
</body>
</html>

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

@ -4,9 +4,6 @@ function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
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
renderer process using the [addEventListener() API][addEventListener-api].
```js
window.addEventListener('keyup', doSomething, true)
```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js'
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()`
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
be used to catch and handle custom shortcuts that are not visible in the menu.
##### Example
Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines:
@ -105,7 +109,7 @@ following lines:
const { app, BrowserWindow } = require('electron')
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.webContents.on('before-input-event', (event, input) => {