Skip to content

Instantly share code, notes, and snippets.

@danguilherme
Last active January 18, 2019 15:08
Show Gist options
  • Save danguilherme/e827453fb866d7d09a0a23add1a808ed to your computer and use it in GitHub Desktop.
Save danguilherme/e827453fb866d7d09a0a23add1a808ed to your computer and use it in GitHub Desktop.
Electron Fiddle Gist - test menu shortcuts/accelerators
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<!-- All of the Node.js APIs are available in this renderer process. -->
<pre>
<b>Node.js :</b> <script>document.write(process.versions.node)</script>
<b>Chromium:</b> <script>document.write(process.versions.chrome)</script>
<b>Electron:</b> <script>document.write(process.versions.electron)</script>
</pre>
<input type="text" placeholder="random input" />
<h2>Console</h2>
<code><pre id="console"></pre></code>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
// Modules to control application life and create native browser window
const {app, globalShortcut, BrowserWindow, Menu} = require('electron')
const path = require('path')
const url = require('url')
// 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: 1500, height: 800})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
protocol: 'file',
slashes: true,
pathname: path.resolve(app.getAppPath(), 'index.html')
}))
registerMenu(mainWindow);
// registerGlobalShortcuts(mainWindow);
mainWindow.openDevTools();
// 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()
}
});
const atoz = Array.from({length: 26})
.map((_, i) => (i+10).toString(36));
const accelerators = [
...atoz.map(letter => `CommandOrControl+${letter}`),
...atoz.map(letter => `CommandOrControl+Shift+${letter}`)
]
/**
* @param {BrowserWindow} window
*/
function registerMenu(window) {
const systemPaste = { role: 'paste' };
const systemCopy = { role: 'copy' };
const specialPaste = {
label: 'Special Paste',
accelerator: 'CommandOrControl+Shift+v',
click: () => menuItemHandler(window, 'menu', specialPaste)
};
const specialCopy = {
label: 'Special Copy',
accelerator: 'CommandOrControl+Shift+c',
click: () => menuItemHandler(window, 'menu', specialCopy)
};
const devtools = {
label: 'Devtools',
accelerator: 'F12',
click: () => window.openDevTools()
};
const handler = (menuItem) => menuItemHandler(
window,
'menu',
menuItem
);
const shortcutItems = accelerators.map(accelerator => {
const menu = {
accelerator,
label: accelerator,
click: () => handler(menu)
}
return menu;
});
const shortcuts = {
label: 'Letters shortcuts',
submenu: shortcutItems
}
const testing = {
label: 'Testing',
submenu: [
// systemCopy,
// systemPaste,
// specialCopy,
// specialPaste,
devtools,
shortcuts
]
};
const template = [
testing
]
if (process.platform === 'darwin') {
template.unshift({
label: app.getName(),
submenu: [
{ role: 'quit' }
]
})
}
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
}
/**
* @param {BrowserWindow} window
*/
function registerGlobalShortcuts(window) {
const handler = (accelerator) => menuItemHandler(
window,
'global',
{accelerator}
);
accelerators.forEach(acc => {
const success = globalShortcut.register(acc, () => handler(acc));
console.log('shortcut registration:', acc, success);
})
}
/**
* @param {BrowserWindow} window
*/
function menuItemHandler(window, source, menuItem) {
window.webContents.send('menu', 'source:', source, 'accelerator:', menuItem.accelerator);
}
// 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.
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
const { ipcRenderer } = require('electron');
const canvas = document.getElementById('console');
function log(...args) {
console.log(args);
canvas.prepend(document.createElement('br'));
canvas.prepend(document.createTextNode(args.join(' ')));
}
log('Press the menu shortcuts to check if they are recognized.');
ipcRenderer.on('menu', (sender, ...args) => log(...args));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment