feat(menu): create class MainNenu

.gitignore

@@ -7,6 +7,7 @@
 /app-builds
 /release
 main.js
+/main-process/**/*.js
 *.js.map
 # Only exists if Bazel was run
 /bazel-out

main-process/main-window/main-window.ts

@@ -0,0 +1,69 @@
+import { app, BrowserWindow, screen as electronScreen } from 'electron';
+import * as path from 'path';
+import * as url from 'url';
+
+const args = process.argv.slice(1);
+
+export class MainWindow {
+
+  browserWindow: BrowserWindow = null;
+  serve = args.some(val => val === '--serve');
+
+  constructor() {
+    this.createWindow();
+  }
+
+  createWindow(): BrowserWindow {
+
+    const size = electronScreen.getPrimaryDisplay().workAreaSize;
+
+    // Create the browser window.
+    this.browserWindow = new BrowserWindow({
+      x: 0,
+      y: 0,
+      width: size.width,
+      height: size.height,
+      title: app.getName(),
+      webPreferences: {
+        nodeIntegration: true,
+        allowRunningInsecureContent: this.serve,
+      },
+    });
+
+    this.initURL();
+
+    // Emitted when the window is closed.
+    this.browserWindow.on('closed', () => {
+      // Dereference the window object, usually you would store window
+      // in an array if your app supports multi windows, this is the time
+      // when you should delete the corresponding element.
+      this.browserWindow = null;
+    });
+
+    return this.browserWindow;
+  }
+
+  returnToHome(): void {
+    this.initURL();
+  }
+
+  private initURL(): void {
+    if (this.serve) {
+
+      require('devtron').install();
+      this.browserWindow.webContents.openDevTools();
+
+      require('electron-reload')(__dirname + '../../', {
+        electron: require(`${__dirname}/../../node_modules/electron`)
+      });
+      this.browserWindow.loadURL('http://localhost:4200');
+
+    } else {
+      this.browserWindow.loadURL(url.format({
+        pathname: path.join(__dirname, 'dist/webview-angular-electron/index.html'),
+        protocol: 'file:',
+        slashes: true
+      }));
+    }
+  }
+}

main-process/menus/main-menu.ts

@@ -0,0 +1,145 @@
+import { app, BrowserWindow, dialog, Menu, shell } from 'electron';
+import { MainWindow } from '../main-window/main-window';
+
+
+export class MainMenu {
+
+  mainWindow: MainWindow;
+
+  menus: any[] = [
+    {
+      label: 'APP',
+      submenu: [
+        {
+          label: 'Go to Home',
+          click: () => {
+            this.mainWindow.returnToHome();
+          }
+        }
+      ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Reload',
+          accelerator: 'CmdOrCtrl+R',
+          click: (item, focusedWindow) => {
+            if (focusedWindow) {
+              // on reload, start fresh and close any old
+              // open secondary windows
+              if (focusedWindow.id === 1) {
+                BrowserWindow.getAllWindows().forEach(win => {
+                  if (win.id > 1) {
+                    win.close();
+                  }
+                });
+              }
+              focusedWindow.reload();
+            }
+          }
+        },
+        {
+          label: 'Toggle Full Screen',
+          accelerator: (() => {
+            if (process.platform === 'darwin') {
+              return 'Ctrl+Command+F';
+            } else {
+              return 'F11';
+            }
+          })(),
+          click: (item, focusedWindow) => {
+            if (focusedWindow) {
+              focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
+            }
+          }
+        },
+        {
+          label: 'Toggle Developer Tools',
+          accelerator: (() => {
+            if (process.platform === 'darwin') {
+              return 'Alt+Command+I';
+            } else {
+              return 'Ctrl+Shift+I';
+            }
+          })(),
+          click: (item, focusedWindow) => {
+            if (focusedWindow) {
+              focusedWindow.toggleDevTools();
+            }
+          }
+        }
+      ]
+    },
+    {
+      label: 'Window',
+      role: 'window',
+      submenu: [
+        {
+          label: 'Minimize',
+          accelerator: 'CmdOrCtrl+M',
+          role: 'minimize'
+        },
+        {
+          label: 'Close',
+          accelerator: 'CmdOrCtrl+W',
+          role: 'close'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Reopen Window',
+          accelerator: 'CmdOrCtrl+Shift+T',
+          enabled: false,
+          key: 'reopenMenuItem',
+          click: () => {
+            app.emit('activate');
+          }
+        }
+      ]
+    },
+    {
+      label: 'Help',
+      role: 'help',
+      submenu: [
+        {
+          label: 'GitHub',
+          click: () => {
+            shell.openExternal('https://github.com/JhonatanMedeiros/webview-angular-electron/');
+          }
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'About',
+          click: (item, focusedWindow) => {
+            if (focusedWindow) {
+              const options = {
+                  type: 'info',
+                  title: 'WEB View Angular Electron',
+                  buttons: ['Ok'],
+                  message: `Version: ${app.getVersion()}\nElectron: ${process.versions.electron}\nChrome: ${process.versions.chrome}\nNode: ${process.versions.node}\nV8: ${process.versions.v8}\nOS: ${process.platform} ${process.arch} ${process.getSystemVersion()}`
+                }
+              ;
+              dialog.showMessageBox(focusedWindow, options).then(() => {
+
+              });
+            }
+          }
+        },
+      ]
+    }
+  ];
+
+  constructor(mainWindow: MainWindow) {
+    this.mainWindow = mainWindow;
+    this.initializeMenu();
+  }
+
+  private initializeMenu(): void {
+    const menu = Menu.buildFromTemplate(this.menus);
+    Menu.setApplicationMenu(menu);
+  }
+}

main.ts

@@ -1,85 +1,84 @@
-import { app, BrowserWindow, screen as electronScreen } from 'electron';
-import * as path from 'path';
-import * as url from 'url';
+import { app, ipcMain } from 'electron';
+import { MainWindow } from './main-process/main-window/main-window';
+import { MainMenu } from './main-process/menus/main-menu';
 
-let win: BrowserWindow = null;
-const args = process.argv.slice(1);
-const serve = args.some(val => val === '--serve');
+let mainWindow: MainWindow;
 
-function createWindow(): BrowserWindow {
+if (process.mas) {
+  app.setName('WEB View Angular Electron');
+}
 
-  const size = electronScreen.getPrimaryDisplay().workAreaSize;
+function initialize() {
 
-  // Create the browser window.
-  win = new BrowserWindow({
-    x: 0,
-    y: 0,
-    width: size.width,
-    height: size.height,
-    webPreferences: {
-      nodeIntegration: true,
-      allowRunningInsecureContent: serve,
-    },
-  });
+  makeSingleInstance();
 
-  if (serve) {
+  try {
 
-    require('devtron').install();
-    win.webContents.openDevTools();
+    app.allowRendererProcessReuse = true;
 
-    require('electron-reload')(__dirname, {
-      electron: require(`${__dirname}/node_modules/electron`)
+    // 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.
+    // Added 400 ms to fix the black background issue while using transparent window.
+    // More details at https://github.com/electron/electron/issues/15947
+    app.on('ready', () => setTimeout(() => {
+      mainWindow = new MainWindow();
+      const mainMenu = new MainMenu(mainWindow);
+    }, 400));
+
+    // Quit when all windows are closed.
+    app.on('window-all-closed', () => {
+      // 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();
+      }
     });
-    win.loadURL('http://localhost:4200');
 
-  } else {
-    win.loadURL(url.format({
-      pathname: path.join(__dirname, 'dist/webview-angular-electron/index.html'),
-      protocol: 'file:',
-      slashes: true
-    }));
-  }
+    app.on('activate', () => {
+      // 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 || !mainWindow.browserWindow) {
+        mainWindow.createWindow();
+      }
+    });
 
-  // Emitted when the window is closed.
-  win.on('closed', () => {
-    // Dereference the window object, usually you would store window
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    win = null;
-  });
+    ipcMain.handle('url-channel', async (event, data: any) => {
+      console.log(data);
+      const { url: browserUrl } = data;
+      await mainWindow.browserWindow.loadURL(browserUrl);
+      return { ok: true, browserUrl, win: mainWindow.browserWindow };
+    });
 
-  return win;
+  } catch (e) {
+    // Catch Error
+    console.error(e);
+    throw e;
+  }
 }
 
-try {
-
-  app.allowRendererProcessReuse = true;
+// Make this app a single instance app.
+//
+// The main window will be restored and focused instead of a second window
+// opened when a person attempts to launch a second instance.
+//
+// Returns true if the current version of the app should quit instead of
+// launching.
+function makeSingleInstance() {
+  if (process.mas) {
+    return;
+  }
 
-  // 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.
-  // Added 400 ms to fix the black background issue while using transparent window.
-  // More details at https://github.com/electron/electron/issues/15947
-  app.on('ready', () => setTimeout(createWindow, 400));
+  app.requestSingleInstanceLock();
 
-  // Quit when all windows are closed.
-  app.on('window-all-closed', () => {
-    // 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('second-instance', () => {
+    if (mainWindow.browserWindow) {
+      if (mainWindow.browserWindow.isMinimized()) {
+        mainWindow.browserWindow.restore();
+      }
+      mainWindow.browserWindow.focus();
     }
   });
-
-  app.on('activate', () => {
-    // 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 (win === null) {
-      createWindow();
-    }
-  });
-
-} catch (e) {
-  // Catch Error
-  // throw e;
 }
+
+initialize();

src/app/app.component.ts

@@ -1,9 +1,21 @@
 import { Component } from '@angular/core';
+import { ElectronService } from '@app/services';
 
 @Component({
   selector: 'webae-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+
+  constructor(private electronService: ElectronService) {
+    if (electronService.isElectron) {
+      console.log('Mode electron');
+      console.log(process.env);
+      console.log('Electron ipcRenderer', electronService.ipcRenderer);
+      console.log('NodeJS childProcess', electronService.childProcess);
+    } else {
+      console.log('Mode web');
+    }
+  }
 }