docs: add Menu Shortcuts Fiddle example (#20466)
This commit is contained in:
Yaser
John Kleinschmidt
parent
9b4ba7993c
commit
d1c5c760d0
2 changed files with 142 additions and 0 deletions
73
docs/fiddles/menus/shortcuts/index.html
Normal file
73
docs/fiddles/menus/shortcuts/index.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Keyboard Shortcuts</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<h1>Keyboard Shortcuts</h1>
|
||||
|
||||
<h3>The <code>globalShortcut</code> and <code>Menu</code> modules can be used to define keyboard shortcuts.</h3>
|
||||
|
||||
<p>
|
||||
In Electron, keyboard shortcuts are called accelerators.
|
||||
They can be assigned to actions in your application's Menu,
|
||||
or they can be assigned globally so they'll be triggered even when
|
||||
your app doesn't have keyboard focus.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Open the full documentation for the
|
||||
<a class="u-exlink" href="http://electron.atom.io/docs/api/menu">Menu</a>,
|
||||
<a class="u-exlink" href="http://electron.atom.io/docs/api/accelerator">Accelerator</a>,
|
||||
and
|
||||
<a class="u-exlink" href="http://electron.atom.io/docs/api/global-shortcut">globalShortcut</a>
|
||||
APIs in your browser.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<div class="demo-wrapper">
|
||||
<div class="demo-box">
|
||||
<p>
|
||||
To try this demo, press <kbd class="normalize-to-platform">CommandOrControl+Alt+K</kbd> on your
|
||||
keyboard.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Global shortcuts are detected even when the app doesn't have
|
||||
keyboard focus, and they must be registered after the app's
|
||||
`ready` event is emitted.
|
||||
</p>
|
||||
|
||||
<div class="demo-protip">
|
||||
<h2>ProTip</h2>
|
||||
<strong>Avoid overriding system-wide keyboard shortcuts.</strong>
|
||||
<p>
|
||||
When registering global shortcuts, it's important to be aware of
|
||||
existing defaults in the target operating system, so as not to
|
||||
override any existing behaviors. For an overview of each
|
||||
operating system's keyboard shortcuts, view these documents:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a class="u-exlink"
|
||||
href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Keyboard.html">macOS</a>
|
||||
</li>
|
||||
<li><a class="u-exlink"
|
||||
href="http://windows.microsoft.com/en-us/windows-10/keyboard-shortcuts">Windows</a></li>
|
||||
<li><a class="u-exlink"
|
||||
href="https://developer.gnome.org/hig/stable/keyboard-input.html.en">Linux</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
69
docs/fiddles/menus/shortcuts/main.js
Normal file
69
docs/fiddles/menus/shortcuts/main.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
// Modules to control application life and create native browser window
|
||||
const { app, BrowserWindow, globalShortcut, dialog } = require('electron')
|
||||
|
||||
// Keep a global reference of the window object, if you don't, the window will
|
||||
// be closed automatically when the JavaScript object is garbage collected.
|
||||
let mainWindow
|
||||
|
||||
function createWindow () {
|
||||
// Create the browser window.
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration: true
|
||||
}
|
||||
})
|
||||
|
||||
globalShortcut.register('CommandOrControl+Alt+K', () => {
|
||||
dialog.showMessageBox({
|
||||
type: 'info',
|
||||
message: 'Success!',
|
||||
detail: 'You pressed the registered global shortcut keybinding.',
|
||||
buttons: ['OK']
|
||||
})
|
||||
})
|
||||
|
||||
// and load the index.html of the app.
|
||||
mainWindow.loadFile('index.html')
|
||||
|
||||
// Open the DevTools.
|
||||
// mainWindow.webContents.openDevTools()
|
||||
|
||||
// Emitted when the window is closed.
|
||||
mainWindow.on('closed', function () {
|
||||
// Dereference the window object, usually you would store windows
|
||||
// in an array if your app supports multi windows, this is the time
|
||||
// when you should delete the corresponding element.
|
||||
mainWindow = null
|
||||
})
|
||||
}
|
||||
|
||||
// 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.on('ready', createWindow)
|
||||
|
||||
// Quit when all windows are closed.
|
||||
app.on('window-all-closed', function () {
|
||||
// On OS X it is common for applications and their menu bar
|
||||
// to stay active until the user quits explicitly with Cmd + Q
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
app.on('activate', function () {
|
||||
// On OS X 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 (mainWindow === null) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
|
||||
app.on('will-quit', function () {
|
||||
globalShortcut.unregisterAll()
|
||||
})
|
||||
|
||||
// In this file you can include the rest of your app's specific main process
|
||||
// code. You can also put them in separate files and require them here.
|
||||
Loading…
Reference in a new issue