Build command pattern with ipc

Yukaii · Yukaii · commit 7c2cd712e6ce · 2017-02-17T23:30:42.000+08:00
diff --git a/index.html b/index.html
@@ -100,7 +100,7 @@
   <body>
     <div id="title-bar">
       <div class="window-control">
-        <button>
+        <button id="menu-btn">
           <i class="fa fa-bars" aria-hidden="true"></i>
         </button>
       </div>
diff --git a/ipc/client.js b/ipc/client.js
@@ -0,0 +1,5 @@
+const { ipcRenderer } = require('electron');
+
+module.exports = function(commandId, args) {
+  ipcRenderer.send('main:command', { commandId, args });
+}
diff --git a/ipc/consumer.js b/ipc/consumer.js
@@ -0,0 +1,21 @@
+const {app, Menu, BrowserWindow, shell} = require('electron');
+const path = require('path');
+
+const { createWindow } = require('../window');
+
+module.exports = function(commandId, args={}) {
+  switch(commandId) {
+    case 'createWindow':
+      createWindow(args);
+      break;
+    case 'refreshWindow':
+		  const win = BrowserWindow.getFocusedWindow();
+			win.webContents.send('web:refresh');
+      break;      
+    case 'learnMore':
+      shell.openExternal('https://hackmd.io');
+      break;
+    default:
+      break;
+  }
+}
diff --git a/ipc/server.js b/ipc/server.js
@@ -0,0 +1,6 @@
+const { ipcMain } = require('electron');
+const consumer = require('./consumer');
+
+ipcMain.on('main:command', (event, { commandId, args }) => {
+  consumer(commandId, args);
+});
diff --git a/main.js b/main.js
@@ -5,6 +5,8 @@ const path = require('path');
 const menu = require('./menu');
 const { createWindow } = require('./window');
 
+require('./ipc/server');
+
 let mainWin;
 
 function initializeApp () {
diff --git a/menu.js b/menu.js
@@ -1,6 +1,19 @@
-const {app, Menu, BrowserWindow} = require('electron');
-const path = require('path');
-const { createWindow } = require('./window');
+const { ipcMain, ipcRenderer } = require('electron');
+const consumer = require('./ipc/consumer');
+
+const Menu = require('electron').Menu || require('electron').remote.Menu;
+const path = require('path') || require('electron').remote.require('path');
+const os = require('os') || require('electron').remote.require('os');
+
+const isMainProcess = typeof ipcMain !== 'undefined';
+
+function exec(commandId, args={}) {
+  if (isMainProcess) {
+    consumer(commandId, args);
+  } else {
+    ipcRenderer.send('main:command', { commandId, args });
+  }
+}
 
 const template = [
 	{
@@ -10,14 +23,14 @@ const template = [
 				label: 'New File',
 				accelerator: 'CmdOrCtrl+N',
 				click () {
-					createWindow({url: `file://${path.join(__dirname, 'index.html?target=https://hackmd.io/new')}`});
+          exec('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')}`});
+          exec('createWindow', {url: `file://${path.join(__dirname, 'index.html')}`})
 				}
 			},
 			{
@@ -70,8 +83,7 @@ const template = [
 				label: 'Refresh',
 				accelerator: 'CmdOrCtrl+R',
 				click () {
-					const win = BrowserWindow.getFocusedWindow();
-					win.webContents.send('web:refresh');
+          exec('refreshWindow');
 				}
 			},
 			{
@@ -90,13 +102,15 @@ const template = [
     submenu: [
       {
         label: 'Learn More',
-        click () { require('electron').shell.openExternal('https://hackmd.io') }
+        click () { 
+          exec('learnMore');
+        }
       }
     ]
   }
 ]
 
-if (process.platform === 'darwin') {
+if (os.platform() === 'darwin') {
   template.unshift({
     label: app.getName(),
     submenu: [
diff --git a/renderer.js b/renderer.js
@@ -1,20 +1,18 @@
-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');
-const { createWindow } = require('./window');
+const { ipcRenderer, remote, clipboard } = require('electron');
+const { BrowserWindow } = remote;
+
+const fs = remote.require('fs');
+const os = remote.require('os');
+const path = remote.require('path');
+
+const ipcClient = require('./ipc/client');
+
+const menu = require('./menu');
 
 const SERVER_URL = 'https://hackmd.io';
 
 const isMac = os.platform() === 'darwin';
 
-const winOption = {
-	width: 1024,
-	height: 768
-}
-
 onload = () => {
 	/* inject mac specific styles */
 	if (isMac) {
@@ -71,6 +69,9 @@ onload = () => {
 			new Notification('URL copied', { title: 'URL copied', body: webview.getURL() });
 		}
 
+		document.querySelector('button#menu-btn').onclick = () => {
+			menu.popup(require('electron').remote.getCurrentWindow());
+		}
 		// webview.openDevTools();
 	});
 
@@ -81,6 +82,6 @@ onload = () => {
 
 	/* handle _target=blank pages */
 	webview.addEventListener('new-window', (event) => {
-		createWindow({url: `file://${path.join(__dirname, `index.html?target=${event.url}`)}`});
+		ipcClient('createWindow', { url: `file://${path.join(__dirname, `index.html?target=${event.url}`)}` });
 	});
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,19 @@`
`1`		`-const {app, Menu, BrowserWindow} = require('electron');`
`2`		`-const path = require('path');`
`3`		`-const { createWindow } = require('./window');`
	`1`	`+const { ipcMain, ipcRenderer } = require('electron');`
	`2`	`+const consumer = require('./ipc/consumer');`
	`3`	`+`
	`4`	`+const Menu = require('electron').Menu \|\| require('electron').remote.Menu;`
	`5`	`+const path = require('path') \|\| require('electron').remote.require('path');`
	`6`	`+const os = require('os') \|\| require('electron').remote.require('os');`
	`7`	`+`
	`8`	`+const isMainProcess = typeof ipcMain !== 'undefined';`
	`9`	`+`
	`10`	`+function exec(commandId, args={}) {`
	`11`	`+ if (isMainProcess) {`
	`12`	`+ consumer(commandId, args);`
	`13`	`+ } else {`
	`14`	`+ ipcRenderer.send('main:command', { commandId, args });`
	`15`	`+ }`
	`16`	`+}`
`4`	`17`
`5`	`18`	`const template = [`
`6`	`19`	`{`
`@@ -10,14 +23,14 @@ const template = [`
`10`	`23`	`label: 'New File',`
`11`	`24`	`accelerator: 'CmdOrCtrl+N',`
`12`	`25`	`click () {`
`13`		- createWindow({url: `file://${path.join(__dirname, 'index.html?target=https://hackmd.io/new')}`});
	`26`	+ exec('createWindow', {url: `file://${path.join(__dirname, 'index.html?target=https://hackmd.io/new')}`})
`14`	`27`	`}`
`15`	`28`	`},`
`16`	`29`	`{`
`17`	`30`	`label: 'New Window',`
`18`	`31`	`accelerator: 'CmdOrCtrl+Shift+N',`
`19`	`32`	`click () {`
`20`		- createWindow({url: `file://${path.join(__dirname, 'index.html')}`});
	`33`	+ exec('createWindow', {url: `file://${path.join(__dirname, 'index.html')}`})
`21`	`34`	`}`
`22`	`35`	`},`
`23`	`36`	`{`
`@@ -70,8 +83,7 @@ const template = [`
`70`	`83`	`label: 'Refresh',`
`71`	`84`	`accelerator: 'CmdOrCtrl+R',`
`72`	`85`	`click () {`
`73`		`- const win = BrowserWindow.getFocusedWindow();`
`74`		`- win.webContents.send('web:refresh');`
	`86`	`+ exec('refreshWindow');`
`75`	`87`	`}`
`76`	`88`	`},`
`77`	`89`	`{`
`@@ -90,13 +102,15 @@ const template = [`
`90`	`102`	`submenu: [`
`91`	`103`	`{`
`92`	`104`	`label: 'Learn More',`
`93`		`- click () { require('electron').shell.openExternal('https://hackmd.io') }`
	`105`	`+ click () {`
	`106`	`+ exec('learnMore');`
	`107`	`+ }`
`94`	`108`	`}`
`95`	`109`	`]`
`96`	`110`	`}`
`97`	`111`	`]`
`98`	`112`
`99`		`-if (process.platform === 'darwin') {`
	`113`	`+if (os.platform() === 'darwin') {`
`100`	`114`	`template.unshift({`
`101`	`115`	`label: app.getName(),`
`102`	`116`	`submenu: [`