Optimization

tcyrus · Nov 24, 2015 · 75fb6a3 · 75fb6a3
1 parent 2f0f866
commit 75fb6a3
Show file tree

Hide file tree

Showing 7 changed files with 244 additions and 123 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -1,30 +1,6 @@
-# electron-quick-start
+# xkcd-simplewriter
 
-**Clone and run for a quick way to see an Electron in action.**
+![](https://blogdotxkcddotcom.files.wordpress.com/2015/09/blag_words2.png)
 
-This is a minimal Electron application based on the [Quick Start Guide](http://electron.atom.io/docs/latest/tutorial/quick-start) within the Electron documentation.
+A desktop app version of the [XKCD simplewriter](http://xkcd.com/simplewriter/)
 
-A basic Electron application needs just these files:
-
-- `index.html` - A web page to render.
-- `main.js` - Starts the app and creates a browser window to render HTML.
-- `package.json` - Points to the app's main file and lists its details and dependencies.
-
-You can learn more about each of these components within the [Quick Start Guide](http://electron.atom.io/docs/latest/tutorial/quick-start).
-
-## To Use
-
-To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
-
-```bash
-# Clone this repository
-$ git clone https://github.com/atom/electron-quick-start
-# Go into the repository
-$ cd electron-quick-start
-# Install dependencies and run the app
-$ npm install && npm start
-```
-
-Learn more about Electron and its API in the [documentation](http://electron.atom.io/docs/latest).
-
-#### License [MIT](LICENSE.md)
diff --git a/index.html b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="content-type" content="text/html">
+    <meta charset="UTF-8">
     <link rel="stylesheet" href="main.css">
+    <title>SimpleWriter</title>
   </head>
   <body>
     <h1>upwriter</h1>
@@ -15,23 +15,17 @@ <h1>upwriter</h1>
     <script src="ace.min.js"></script>
     <script>
       'use strict';
-      const electron = require('electron');
-      const ipcRenderer = electron.ipcRenderer;
-
       const editor = ace.edit("editor");
       const session = editor.getSession();
+
       session.setMode("ace/mode/upwriter");
       session.setUseWrapMode(true);
       session.setTabSize(0);
       editor.focus();
 
-      const editorElement = document.getElementById('editor');
       const wrap = document.getElementById('editor-wrapper');
       const erroneous = document.getElementById('erroneous');
-
-      function loadString(val) {
-        editor.setValue(val);
-      }
+      const editorElement = document.getElementById('editor');
 
       erroneous.addEventListener('click', e => {
         if (e.target.tagName.toLowerCase() === "a") {
@@ -48,13 +42,17 @@ <h1>upwriter</h1>
           editorElement.style.bottom = `${erroneous.clientHeight}px`;
         });
       });
+    </script>
+    <script>
+      'use strict';
+      const electron = require('electron');
+      const ipcRenderer = electron.ipcRenderer;
 
       document.ondragover = document.ondrop = e => {
         e.preventDefault();
         return false;
       };
 
-
       wrap.ondragover = () => false;
 
       wrap.ondragleave = wrap.ondragend = () => false;
@@ -63,17 +61,17 @@ <h1>upwriter</h1>
         e.preventDefault();
         let reader = new FileReader();
         let file = e.dataTransfer.files[0];
-        reader.onload = e => loadString(e.target.result);
+        reader.onload = e => editor.setValue(e.target.result);
         reader.readAsText(file);
         return false;
       };
 
-      ipcRenderer.on('loadString', (e, val) => {
-        loadString(val);
+      ipcRenderer.on('getText', (e, arg) => {
+        e.returnValue = editor.getValue();
       });
 
-      ipcRenderer.on('getString', (e, val) => {
-        e.returnValue = editor.getValue();
+      ipcRenderer.on('setText', (e, arg) => {
+        editor.setValue(arg);
       });
     </script>
   </body>

diff --git a/main.css b/main.css
@@ -6,6 +6,7 @@ body {
     line-height: 36px;
     font-family: monospace;
 }
+
 #editor-wrapper {
     margin: 0;
     position: absolute;
@@ -15,6 +16,7 @@ body {
     right: 0;
     background: #F45C1A;
 }
+
 #editor {
     margin: 0;
     position: absolute;
@@ -28,20 +30,25 @@ body {
     color: #444;
     -webkit-transition: bottom .4s ease-in;
 }
+
 .ace_gutter {
     display: none
 }
+
 .ace_disallowed,
 .ace_disallowed + .ace_suffix {
     color: #F45C1A
 }
+
 h1 {
     visibility: hidden
 }
+
 #erroneous {
     position: absolute;
     bottom: 0;
 }
+
 #erroneous a {
     color: #D0EACC;
     display: inline-block;

diff --git a/main.js b/main.js
@@ -1,9 +1,12 @@
 'use strict';
+const fs = require('fs');
 const electron = require('electron');
 const app = electron.app;
 const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
 
-const ipcMain = electron.ipcMain;
+const dialog = electron.dialog;
+const Menu = electron.Menu;
+const MenuItem = electron.MenuItem;
 
 // Report crashes to our server.
 electron.crashReporter.start();
@@ -16,8 +19,7 @@ function createMainWindow() {
     // Create the browser window.
   const win = new BrowserWindow({
     width: 800,
-    height: 600,
-    title: 'simplewriter'
+    height: 600
   });
 
   // and load the index.html of the app.
@@ -30,10 +32,148 @@ function createMainWindow() {
     // when you should delete the corresponding element.
     mainWindow = null;
   });
-
   return win;
 }
 
+function setMenu() {
+  let template = [
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'Open..',
+          accelerator: 'CmdOrCtrl+O',
+          click(item, focusedWindow) {
+            dialog.showOpenDialog(fileNames => {
+              if(fileNames === undefined) return;
+              let fileName = fileNames[0];
+              fs.readFile(fileName, 'utf-8', (err, data) => {
+                mainWindow.webContents.send('setText', data);
+              });
+            });
+          }
+        },
+        {
+          label: 'Save As..',
+          accelerator: 'CmdOrCtrl+S',
+          click(item, focusedWindow) {
+            dialog.showSaveDialog(fileName => {
+              if(fileName === undefined) return;
+              let arg = mainWindow.webContents.send('getText', '');
+              fs.writeFile(fileName, arg, err => {});
+            });
+          }
+        }
+      ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Reload',
+          accelerator: 'CmdOrCtrl+R',
+          click(item, focusedWindow) {
+            if(focusedWindow) focusedWindow.reload();
+          }
+        },
+        {
+          label: 'Toggle Full Screen',
+          accelerator: (() => (process.platform == 'darwin') ? 'Ctrl+Command+F' : 'F11')(),
+          click(item, focusedWin) {
+            if(focusedWin) focusedWin.setFullScreen(!focusedWin.isFullScreen());
+          }
+        },
+        {
+          label: 'Toggle Developer Tools',
+          accelerator: (() => (process.platform == 'darwin') ? 'Alt+Command+I' : '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'
+        },
+      ]
+    },
+    {
+      label: 'Help',
+      role: 'help',
+      submenu: [
+        {
+          label: 'Learn More',
+          click() {
+            electron.shell.openExternal('http://electron.atom.io');
+          }
+        },
+      ]
+    },
+  ];
+
+  if (process.platform == 'darwin') {
+    let name = app.getName();
+    template.unshift({
+      label: name,
+      submenu: [
+        {
+          label: `About ${name}`,
+          role: 'about'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: `Hide ${name}`,
+          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() { app.quit(); }
+        },
+      ]
+    });
+    // Window menu.
+    template[3].submenu.push(
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Bring All to Front',
+        role: 'front'
+      }
+    );
+  }
+
+  let menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+}
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar
@@ -51,4 +191,5 @@ app.on('activate', () => {
 
 app.on('ready', () => {
   mainWindow = createMainWindow();
-});
+  setMenu();
+});