From 77e7d828ee33bea186fd8e34526eb1ec06dba56d Mon Sep 17 00:00:00 2001 From: Tony Ferrell Date: Sun, 23 May 2021 19:33:22 -0700 Subject: [PATCH] docs: Update docs for keyboard shortcuts (#29207) * Update docs for keyboard shortcuts * Add a fiddle for web-apis * Apply suggestions from code review Co-authored-by: Erick Zhao * Cleanup a few formatting errors and missed copies * Add descriptions to index.html * Focus on renderer Co-authored-by: Erick Zhao --- .../keyboard-shortcuts/global/index.html | 6 +--- .../keyboard-shortcuts/global/main.js | 3 -- .../interception-from-main/index.html | 4 +-- .../interception-from-main/main.js | 2 +- .../keyboard-shortcuts/local/index.html | 6 +--- .../features/keyboard-shortcuts/local/main.js | 3 -- .../keyboard-shortcuts/web-apis/index.html | 17 +++++++++ .../keyboard-shortcuts/web-apis/main.js | 35 +++++++++++++++++++ .../keyboard-shortcuts/web-apis/renderer.js | 7 ++++ docs/tutorial/keyboard-shortcuts.md | 16 +++++---- 10 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 docs/fiddles/features/keyboard-shortcuts/web-apis/index.html create mode 100644 docs/fiddles/features/keyboard-shortcuts/web-apis/main.js create mode 100644 docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js diff --git a/docs/fiddles/features/keyboard-shortcuts/global/index.html b/docs/fiddles/features/keyboard-shortcuts/global/index.html index a3855d2640d8..fbe7e6323c99 100644 --- a/docs/fiddles/features/keyboard-shortcuts/global/index.html +++ b/docs/fiddles/features/keyboard-shortcuts/global/index.html @@ -7,10 +7,6 @@

Hello World!

-

- We are using node , - Chrome , - and Electron . -

+

Hit Alt+Ctrl+I on Windows or Opt+Cmd+I on Mac to see a message printed to the console.

diff --git a/docs/fiddles/features/keyboard-shortcuts/global/main.js b/docs/fiddles/features/keyboard-shortcuts/global/main.js index 5b4196f7781a..24b2d343fbaa 100644 --- a/docs/fiddles/features/keyboard-shortcuts/global/main.js +++ b/docs/fiddles/features/keyboard-shortcuts/global/main.js @@ -4,9 +4,6 @@ function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, - webPreferences: { - nodeIntegration: true - } }) win.loadFile('index.html') diff --git a/docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html index 6f9d1abf860a..ff4540a3c9b2 100644 --- a/docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html +++ b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html @@ -7,8 +7,6 @@

Hello World!

- We are using node , - Chrome , - and Electron . +

Hit Ctrl+I to see a message printed to the console.

diff --git a/docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js index 767e574b11aa..80e4012c812d 100644 --- a/docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js +++ b/docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js @@ -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) => { diff --git a/docs/fiddles/features/keyboard-shortcuts/local/index.html b/docs/fiddles/features/keyboard-shortcuts/local/index.html index a3855d2640d8..3aeae635b41d 100644 --- a/docs/fiddles/features/keyboard-shortcuts/local/index.html +++ b/docs/fiddles/features/keyboard-shortcuts/local/index.html @@ -7,10 +7,6 @@

Hello World!

-

- We are using node , - Chrome , - and Electron . -

+

Hit Alt+Shift+I on Windows, or Opt+Cmd+I on mac to see a message printed to the console.

diff --git a/docs/fiddles/features/keyboard-shortcuts/local/main.js b/docs/fiddles/features/keyboard-shortcuts/local/main.js index d4c5006ef7ee..c583469df482 100644 --- a/docs/fiddles/features/keyboard-shortcuts/local/main.js +++ b/docs/fiddles/features/keyboard-shortcuts/local/main.js @@ -4,9 +4,6 @@ function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, - webPreferences: { - nodeIntegration: true - } }) win.loadFile('index.html') diff --git a/docs/fiddles/features/keyboard-shortcuts/web-apis/index.html b/docs/fiddles/features/keyboard-shortcuts/web-apis/index.html new file mode 100644 index 000000000000..b19f3e92fd07 --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/web-apis/index.html @@ -0,0 +1,17 @@ + + + + + + + + Hello World! + + +

Hello World!

+ +

Hit any key with this window focused to see it captured here.

+
Last Key Pressed:
+ + + diff --git a/docs/fiddles/features/keyboard-shortcuts/web-apis/main.js b/docs/fiddles/features/keyboard-shortcuts/web-apis/main.js new file mode 100644 index 000000000000..5944f55c83f1 --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/web-apis/main.js @@ -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() +}) diff --git a/docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js b/docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js new file mode 100644 index 000000000000..7f7e406c4b2c --- /dev/null +++ b/docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js @@ -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) diff --git a/docs/tutorial/keyboard-shortcuts.md b/docs/tutorial/keyboard-shortcuts.md index bfdbd140b38e..af510a197b62 100644 --- a/docs/tutorial/keyboard-shortcuts.md +++ b/docs/tutorial/keyboard-shortcuts.md @@ -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) => {