Pchen0/electron

docs: Update docs for keyboard shortcuts (#29302)

* Update docs for keyboard shortcuts

* Add a fiddle for web-apis

* Apply suggestions from code review

Co-authored-by: Erick Zhao <[email protected]>

* Cleanup a few formatting errors and missed copies

* Add descriptions to index.html

* Focus on renderer

Co-authored-by: Tony Ferrell <[email protected]>
Co-authored-by: Tony Ferrell <[email protected]>
Co-authored-by: Erick Zhao <[email protected]>

trop[bot] 3 years ago

parent

5cbfa5f975

commit

a4cc2af8f4

10 changed files with 73 additions and 26 deletions

Split View Show Diff Stats

						
							+ 1
							
							- 5
						
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>

						
							+ 0
							
							- 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')

						
							+ 1
							
							- 3
						
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>

						
							+ 1
							
							- 1
						
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) => {

						
							+ 1
							
							- 5
						
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>

						
							+ 0
							
							- 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
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/web-apis/index.html
							 
								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
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/web-apis/main.js
							 
								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
							
							- 0
						
docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js
							 
								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)

						
							+ 10
							
							- 6
						
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) => {

docs: Update docs for keyboard shortcuts (#29302)

+ 1 - 5 docs/fiddles/features/keyboard-shortcuts/global/index.html View File

+ 0 - 3 docs/fiddles/features/keyboard-shortcuts/global/main.js View File

+ 1 - 3 docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html View File

+ 1 - 1 docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js View File

+ 1 - 5 docs/fiddles/features/keyboard-shortcuts/local/index.html View File

+ 0 - 3 docs/fiddles/features/keyboard-shortcuts/local/main.js View File

+ 17 - 0 docs/fiddles/features/keyboard-shortcuts/web-apis/index.html View File

+ 35 - 0 docs/fiddles/features/keyboard-shortcuts/web-apis/main.js View File

+ 7 - 0 docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js View File

+ 10 - 6 docs/tutorial/keyboard-shortcuts.md View File

+ 1 - 5
docs/fiddles/features/keyboard-shortcuts/global/index.html
View File

+ 0 - 3
docs/fiddles/features/keyboard-shortcuts/global/main.js
View File

+ 1 - 3
docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html
View File

+ 1 - 1
docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js
View File

+ 1 - 5
docs/fiddles/features/keyboard-shortcuts/local/index.html
View File

+ 0 - 3
docs/fiddles/features/keyboard-shortcuts/local/main.js
View File

+ 17 - 0
docs/fiddles/features/keyboard-shortcuts/web-apis/index.html
View File

+ 35 - 0
docs/fiddles/features/keyboard-shortcuts/web-apis/main.js
View File

+ 7 - 0
docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js
View File

+ 10 - 6
docs/tutorial/keyboard-shortcuts.md
View File