Merge branch 'context-menu' of https://github.com/danhp/electron-api-demos into danhp-context-menu

Author: jlord

main-process/menus/context-menu.js

@@ -0,0 +1,22 @@
+const electron = require('electron')
+const {BrowserWindow, Menu, MenuItem} = electron
+const ipc = electron.ipcMain
+
+let menu = new Menu()
+
+menu.append(new MenuItem({ label: 'Hello' }))
+menu.append(new MenuItem({ type: 'separator' }))
+menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true }))
+
+// Show when the window is right clicked.
+// Adds event listener to all created windows.
+for (const win of BrowserWindow.getAllWindows()) {
+  win.webContents.on('context-menu', function (e, params) {
+    menu.popup(win, params.x, params.y)
+  })
+}
+
+// Show when the renderer asks for a menu.
+ipc.on('show-context-menu', function () {
+  menu.popup(BrowserWindow.getFocusedWindow())
+})

main.js

@@ -14,14 +14,13 @@ function initialize () {
   var shouldQuit = makeSingleInstance()
   if (shouldQuit) return app.quit()
 
-  loadDemos()
-
   function createWindow () {
     var windowOptions = {
       width: 1080,
       minWidth: 680,
       height: 840
     }
+
     if (process.platform === 'linux') {
       windowOptions.icon = path.join(__dirname, '/assets/app-icon/png/512.png')
     }
@@ -43,6 +42,7 @@ function initialize () {
   app.on('ready', function () {
     createWindow()
     autoUpdater.initialize()
+    loadDemos()
   })
 
   app.on('window-all-closed', function () {

package.json

@@ -40,7 +40,7 @@
     "chai-as-promised": "^5.1.0",
     "devtron": "^1.0.0",
     "electron-packager": "^7.0.1",
-    "electron-prebuilt": "~1.0.1",
+    "electron-prebuilt": "~1.0.2",
     "electron-winstaller": "^2.2.0",
     "mocha": "^2.3.4",
     "request": "^2.70.0",

renderer-process/menus/context-menu.js

@@ -1,21 +1,7 @@
-const remote = require('electron').remote
-const Menu = remote.Menu
-const MenuItem = remote.MenuItem
+const ipc = require('electron').ipcRenderer
 
-let menu = new Menu()
-
-menu.append(new MenuItem({ label: 'Hello' }))
-menu.append(new MenuItem({ type: 'separator' }))
-menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true }))
-
-// Show when window is right-clicked
-window.addEventListener('contextmenu', function (e) {
-  e.preventDefault()
-  menu.popup(remote.getCurrentWindow())
-}, false)
-
-// Show when demo button is clicked
+// Tell main process to show the menu when demo button is clicked
 const contextMenuBtn = document.getElementById('context-menu')
 contextMenuBtn.addEventListener('click', function () {
-  menu.popup(remote.getCurrentWindow())
+  ipc.send('show-context-menu')
 })

sections/menus/menus.html

@@ -52,7 +52,9 @@ <h2>ProTip</h2>
           </div>
           <p>A context, or right-click, menu can be created with the <code>menu</code> and <code>menuitem</code> modules as well. You can right-click anywhere in this app or click the demo button to see an example context menu.</p>
 
-          <p>In this demo we use the <code>remote</code> module to access <code>menu</code> and <code>menuitem</code> from the renderer process.</p>
+          <p>In this demo we use the <code>ipcRenderer</code> module to show the context menu when explicitly calling it from the renderer process.</p>
+          <h5>Main Process</h5>
+          <pre><code data-path="main-process/menus/context-menu.js"></pre></code>
           <h5>Renderer Process</h5>
           <pre><code data-path="renderer-process/menus/context-menu.js"></pre></code>
         </div>