Add menu with common actions

Author: Yukaii

main.js

@@ -1,25 +1,16 @@
-const { app, BrowserWindow } = require('electron');
+const { app, BrowserWindow, Menu } = require('electron');
 const os = require('os');
 const fs = require('fs');
 const path = require('path');
+const menu = require('./menu');
+const { createWindow } = require('./window');
 
 let mainWin;
 
-const winOption = {
-	width: 1024,
-	height: 768
-}
-
-const isDarwin = os.platform() === 'darwin';
-
 function initializeApp () {
-	mainWin = new BrowserWindow(
-		(isDarwin
-			? Object.assign({}, winOption, {titleBarStyle: 'hidden'})
-			: winOption)
-	);
+	Menu.setApplicationMenu(menu);
 
-	mainWin.loadURL(`file://${path.join(__dirname, 'index.html')}`);
+	mainWin = createWindow({url: `file://${path.join(__dirname, 'index.html')}`});
 }
 
 app.on('ready', () => {

menu.js

@@ -0,0 +1,152 @@
+const {app, Menu, BrowserWindow} = require('electron');
+const path = require('path');
+const { createWindow } = require('./window');
+
+const template = [
+	{
+		label: 'File',
+		submenu: [
+			{
+				label: 'New File',
+				accelerator: 'CmdOrCtrl+N',
+				click () {
+					createWindow({url: `file://${path.join(__dirname, 'index.html?target=https://hackmd.io/new')}`});
+				}
+			},
+			{
+				label: 'New Window',
+				accelerator: 'CmdOrCtrl+Shift+N',
+				click () {
+					createWindow({url: `file://${path.join(__dirname, 'index.html')}`});
+				}
+			},
+			{
+				type: 'separator'
+			}
+		]
+	},
+  {
+    label: 'Edit',
+    submenu: [
+      {
+        role: 'undo'
+      },
+      {
+        role: 'redo'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'cut'
+      },
+      {
+        role: 'copy'
+      },
+      {
+        role: 'paste'
+      },
+      {
+        role: 'pasteandmatchstyle'
+      },
+      {
+        role: 'delete'
+      },
+      {
+        role: 'selectall'
+      }
+    ]
+  },
+  {
+    role: 'window',
+    submenu: [
+      {
+        role: 'minimize'
+      },
+      {
+        role: 'close'
+      },
+			{
+				label: 'Refresh',
+				accelerator: 'CmdOrCtrl+R',
+				click () {
+					const win = BrowserWindow.getFocusedWindow();
+					win.webContents.send('web:refresh');
+				}
+			},
+			{
+				type: 'separator'
+			},
+      {
+        role: 'togglefullscreen'
+      },
+      {
+        role: 'toggledevtools'
+      },
+    ]
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'Learn More',
+        click () { require('electron').shell.openExternal('https://hackmd.io') }
+      }
+    ]
+  }
+]
+
+if (process.platform === 'darwin') {
+  template.unshift({
+    label: app.getName(),
+    submenu: [
+      {
+        role: 'about'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'services',
+        submenu: []
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'hide'
+      },
+      {
+        role: 'hideothers'
+      },
+      {
+        role: 'unhide'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'quit'
+      }
+    ]
+  })
+  // Edit menu.
+  template[2].submenu.push(
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Speech',
+      submenu: [
+        {
+          role: 'startspeaking'
+        },
+        {
+          role: 'stopspeaking'
+        }
+      ]
+    }
+  )
+}
+
+module.exports = Menu.buildFromTemplate(template);

package.json

@@ -1,5 +1,6 @@
 {
   "name": "hackmd-desktop",
+  "productName": "HackMD Desktop",
   "version": "0.0.1",
   "description": "HackMD desktop client",
   "main": "main.js",

renderer.js

@@ -1,6 +1,7 @@
 const fs = require('electron').remote.require('fs');
 const os = require('electron').remote.require('os');
 const path = require('electron').remote.require('path');
+const {ipcRenderer} = require('electron');
 const {BrowserWindow} = require('electron').remote;
 const {clipboard} = require('electron');
 
@@ -27,6 +28,7 @@ onload = () => {
 	webview.addEventListener('dom-ready', function(){
 		// set webview title
 		document.querySelector('#navbar-container .title').innerHTML = webview.getTitle();
+		document.querySelector('title').innerHTML = webview.getTitle();
 
 		// set dark theme if in home page
 		if (webview.getURL().split('?')[0].split('#')[0].match(/https:\/\/hackmd.io\/$/)) {
@@ -64,6 +66,11 @@ onload = () => {
 		// webview.openDevTools();
 	});
 
+	/* handle ipc actions */
+	ipcRenderer.on('web:refresh', (event, message) => {
+		webview.loadURL(webview.getURL());
+	});
+
 	/* handle _target=blank pages */
 	webview.addEventListener('new-window', (event) => {
 		new BrowserWindow(

window.js

@@ -0,0 +1,29 @@
+const {BrowserWindow} = require('electron');
+const os = require('os');
+
+const winOption = {
+	width: 1100,
+	height: 768,
+	minWidth: 522,
+	minHeight: 400
+}
+
+const isDarwin = os.platform() === 'darwin';
+
+function createWindow (opts={}) {
+	const win = new BrowserWindow(
+		(isDarwin
+			? Object.assign({}, winOption, {titleBarStyle: 'hidden'})
+			: winOption)
+	);
+
+	if (opts.hasOwnProperty('url')) {
+		win.loadURL(opts.url)
+	}
+
+	return win;
+}
+
+module.exports = {
+	createWindow
+};