Контекстное меню

Управлять отображением контекстного меню позволяют следующие методы из класса Menu:

popup([<Объект с опциями>]) — отображает контекстное меню. В необязательном параметре можно передать объект со следующими основными свойствами:

window — ссылка на окно. Если свойство не указано, то используется ссылка на окно, находящееся в фокусе;
x и y — задают координаты. Если свойства не заданы, то используются координаты курсора;
callback — ссылка на функцию, которая будет вызвана при закрытии меню;

closePopup([<Окно>]) — закрывает контекстное меню. В необязательном параметре можно указать ссылку на окно. По умолчанию используется ссылка на окно, находящееся в фокусе.

Контекстное меню поддерживает следующие события:

menu-will-show — контекстное меню будет отображено;
menu-will-close — контекстное меню будет закрыто.

Давайте создадим программу, позволяющую отображать контекстное меню и обрабатывать выбор пунктов из меню. Содержимое основного файла приложения main.js приведено в листинге 5.1, файла index.htm — в листинге 5.2, а файла test.js — в листинге 5.3.

Листинг 5.1. Содержимое файла C:\book\e1\main.js

const { app, BrowserWindow, ipcMain, Menu } = require('electron');
let win = null;
function createWindow() {
   win = new BrowserWindow({
      width: 800,
      height: 500,
      webPreferences: {
         nodeIntegration: true,
         contextIsolation: false
      }
   });
   win.webContents.loadFile('index.html');
   win.webContents.openDevTools();
   win.on('closed', () => {
      win = null;
   });
}
app.whenReady().then( () => {
   createWindow();
   app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
      }
   });
} );
app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
      app.quit();
   }
});
ipcMain.on('event-context-menu', (e) => {
   let templateMenu = [
      {
         label: 'Item 1',
         click: () => {
            e.sender.send('event-context-menu-click', 'Item 1');
         }
      },
      {
         label: 'Item 2',
         click: () => {
            e.sender.send('event-context-menu-click', 'Item 2');
         }
      }
   ];
   const menu = Menu.buildFromTemplate(templateMenu);
   menu.on('menu-will-show', () => {
      console.log('menu-will-show');
   });
   menu.on('menu-will-close', () => {
      console.log('menu-will-close');
   });
   menu.popup({
      callback: function() {
         console.log('close popup');
      }
   });
});

Листинг 5.2. Содержимое файла C:\book\e1\index.html

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self'">
   <title>Контекстное меню</title>
</head>
<body>
   <h1>Контекстное меню</h1>
   <script src="test.js"></script>
</body>
</html>

Листинг 5.3. Содержимое файла C:\book\e1\test.js

const { ipcRenderer } = require('electron');
window.addEventListener('contextmenu', (e) => {
   e.preventDefault();
   ipcRenderer.send('event-context-menu');
});
ipcRenderer.on('event-context-menu-click', (e, item) => {
   console.log(item);
});