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