Implement basic application menu with shortcuts which supersedes mousetrap

app/assets/js/index.js

@@ -40,30 +40,5 @@ ipc.on('params', function(event, message) {
 
     var webViewDiv = document.getElementById('webViewDiv');
     webViewDiv.appendChild(webView);
-
-    Mousetrap.bind('mod+c', function(e) {
-        var webView = document.getElementById('webView');
-        webView.copy();
-    });
-
-    Mousetrap.bind('mod+x', function(e) {
-        var webView = document.getElementById('webView');
-        webView.cut();
-    });
-
-    Mousetrap.bind('mod+v', function(e) {
-        var webView = document.getElementById('webView');
-        webView.paste();
-    });
-
-    Mousetrap.bind('mod+a', function(e) {
-        var webView = document.getElementById('webView');
-        webView.selectAll();
-    });
-
-    Mousetrap.bind('mod+z', function(e) {
-        var webView = document.getElementById('webView');
-        webView.undo();
-    });
 });
 

app/assets/js/libs/mousetrap.min.js

@@ -1,11 +0,0 @@
-/* mousetrap v1.5.3 craig.is/killing/mice */
-(function(C,r,g){function t(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function x(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return l[a.which]?l[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function u(a){return"shift"==a||"ctrl"==a||"alt"==a||
-"meta"==a}function y(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],z[c]&&(c=z[c]),b&&"keypress"!=b&&A[c]&&(c=A[c],g.push("shift")),u(c)&&g.push(c);h=c;e=b;if(!e){if(!k){k={};for(var m in l)95<m&&112>m||l.hasOwnProperty(m)&&(k[l[m]]=m)}e=k[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function B(a,b){return null===a||a===r?!1:a===b?!0:B(a.parentNode,b)}function c(a){function b(a){a=
-a||{};var b=!1,n;for(n in q)a[n]?b=!0:q[n]=0;b||(v=!1)}function h(a,b,n,f,c,h){var g,e,l=[],m=n.type;if(!d._callbacks[a])return[];"keyup"==m&&u(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||q[e.seq]==e.level)&&m==e.action){var k;(k="keypress"==m&&!n.metaKey&&!n.ctrlKey)||(k=e.modifiers,k=b.sort().join(",")===k.sort().join(","));k&&(k=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||k)&&d._callbacks[a].splice(g,1),l.push(e))}return l}function g(a,b,n,f){d.stopCallback(b,
-b.target||b.srcElement,n,f)||!1!==a(b,n)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=x(a);b&&("keyup"==a.type&&w===b?w=!1:d.handleKey(b,D(a),a))}function l(a,c,n,f){function e(c){return function(){v=c;++q[a];clearTimeout(k);k=setTimeout(b,1E3)}}function h(c){g(n,c,a);"keyup"!==f&&(w=x(c));setTimeout(b,10)}for(var d=q[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||
-y(c[d+1]).action);m(c[d],p,f,a,d)}}function m(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?l(a,g,b,c):(c=y(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||r;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var q={},k,w=!1,p=!1,v=!1;d._handleKey=function(a,
-c,e){var f=h(a,c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=v||u(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)m(a[d],b,c)};t(a,"keypress",e);t(a,"keydown",e);t(a,"keyup",e)}var l={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",18:"alt",
-20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},A={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},z={option:"alt",command:"meta","return":"enter",
-escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},k;for(g=1;20>g;++g)l[111+g]="f"+g;for(g=0;9>=g;++g)l[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap=
-{};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||B(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.init=function(){var a=c(r),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};c.init();C.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=
-c);"function"===typeof define&&define.amd&&define(function(){return c})})(window,document);

app/buildMenu.js

@@ -0,0 +1,199 @@
+var electron = require('electron');
+var Menu = electron.Menu;
+
+module.exports = function (app) {
+    if (Menu.getApplicationMenu())
+        return;
+
+    var template = [
+        {
+            label: 'Edit',
+            submenu: [
+                {
+                    label: 'Undo',
+                    accelerator: 'CmdOrCtrl+Z',
+                    role: 'undo'
+                },
+                {
+                    label: 'Redo',
+                    accelerator: 'Shift+CmdOrCtrl+Z',
+                    role: 'redo'
+                },
+                {
+                    type: 'separator'
+                },
+                {
+                    label: 'Cut',
+                    accelerator: 'CmdOrCtrl+X',
+                    role: 'cut'
+                },
+                {
+                    label: 'Copy',
+                    accelerator: 'CmdOrCtrl+C',
+                    role: 'copy'
+                },
+                {
+                    label: 'Paste',
+                    accelerator: 'CmdOrCtrl+V',
+                    role: 'paste'
+                },
+                {
+                    label: 'Select All',
+                    accelerator: 'CmdOrCtrl+A',
+                    role: 'selectall'
+                },
+            ]
+        },
+        {
+            label: 'View',
+            submenu: [
+                {
+                    label: 'Reload',
+                    accelerator: 'CmdOrCtrl+R',
+                    click: function(item, focusedWindow) {
+                        if (focusedWindow)
+                            focusedWindow.reload();
+                    }
+                },
+                {
+                    label: 'Toggle Full Screen',
+                    accelerator: (function() {
+                        if (process.platform == 'darwin')
+                            return 'Ctrl+Command+F';
+                        else
+                            return 'F11';
+                    })(),
+                    click: function(item, focusedWindow) {
+                        if (focusedWindow)
+                            focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
+                    }
+                },
+                {
+                    label: 'Toggle Window Developer Tools',
+                    accelerator: (function() {
+                        if (process.platform == 'darwin')
+                            return 'Alt+Command+I';
+                        else
+                            return 'Ctrl+Shift+I';
+                    })(),
+                    click: function(item, focusedWindow) {
+                        if (focusedWindow)
+                            focusedWindow.toggleDevTools();
+                    }
+                },
+                {
+                    label: 'Toggle Web Developer Tools',
+                    accelerator: (function() {
+                        if (process.platform == 'darwin')
+                            return 'Alt+Command+J';
+                        else
+                            return 'Ctrl+Shift+J';
+                    })(),
+                    click: function(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'
+                },
+            ]
+        },
+        {
+            label: 'Help',
+            role: 'help',
+            submenu: [
+                {
+                    label: 'Learn More',
+                    click: function() { shell.openExternal('http://electron.atom.io') }
+                },
+                {
+                    label: 'Documentation',
+                    click: function() {
+                        shell.openExternal(
+                            `https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme`
+                        )
+                    }
+                },
+                {
+                    label: 'Community Discussions',
+                    click: function() { shell.openExternal('https://discuss.atom.io/c/electron') }
+                },
+                {
+                    label: 'Search Issues',
+                    click: function() { shell.openExternal('https://github.com/atom/electron/issues') }
+                }
+            ]
+        },
+    ];
+
+    if (process.platform == 'darwin') {
+        template.unshift({
+            label: 'Electron',
+            submenu: [
+                {
+                    label: 'About Electron',
+                    role: 'about'
+                },
+                {
+                    type: 'separator'
+                },
+                {
+                    label: 'Services',
+                    role: 'services',
+                    submenu: []
+                },
+                {
+                    type: 'separator'
+                },
+                {
+                    label: 'Hide Electron',
+                    accelerator: 'Command+H',
+                    role: 'hide'
+                },
+                {
+                    label: 'Hide Others',
+                    accelerator: 'Command+Shift+H',
+                    role: 'hideothers'
+                },
+                {
+                    label: 'Show All',
+                    role: 'unhide'
+                },
+                {
+                    type: 'separator'
+                },
+                {
+                    label: 'Quit',
+                    accelerator: 'Command+Q',
+                    click: function() { app.quit(); }
+                },
+            ]
+        });
+        template[3].submenu.push(
+            {
+                type: 'separator'
+            },
+            {
+                label: 'Bring All to Front',
+                role: 'front'
+            }
+        );
+    }
+
+    var menu = Menu.buildFromTemplate(template);
+    Menu.setApplicationMenu(menu);
+};

app/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Nativefier</title>
     <link rel="stylesheet" href="assets/css/main.css">
-    <script src="assets/js/libs/mousetrap.min.js"></script>
 </head>
 
 <body>

app/main.js

@@ -9,6 +9,8 @@ var app = electron.app;
 var BrowserWindow = electron.BrowserWindow;
 var ipc = electron.ipcMain;
 
+var buildMenu = require('./buildMenu');
+
 const APP_ARGS_FILE_PATH = __dirname + '/nativefier.json';
 require('crash-reporter').start();
 
@@ -23,6 +25,7 @@ app.on('window-all-closed', function() {
 });
 
 app.on('ready', function() {
+    buildMenu(app);
     mainWindow = new BrowserWindow(
         {
             width: appArgs.width || 1280,