Implement inline titlebar

hackmdio · Jan 21, 2017 · a25de1f · a25de1f
1 parent 8c1b415
commit a25de1f
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>HackMD</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+			html, body {
+				margin: 0;
+				height: 100%;
+		    background-color: #f8f8f8;
+				overflow: hidden;
+				font-family: Arial, Helvetica, sans-serif;
+			}
+
+			body {
+				display: flex;
+				flex-direction: column;
+			}
+
+			webview {
+				display: flex;
+				flex: 1;
+			}
+
+			navbar {
+				height: 23px;
+				align-items: center;
+				width: 100%;
+				display: flex;
+				-webkit-app-region: drag;
+				padding-left: 75px;
+		    background-color: #f8f8f8;
+				color: #484848;
+			}
+
+			#navbar-container {
+				font-size: 0.9em;
+				font-family: "Courier New", Courier, monospace;
+				display: flex;
+				flex: 1;
+				justify-content: space-between;
+				-webkit-user-select: none;
+				user-select: none;
+			}
+
+			navbar.dark {
+				background-color: #333333;
+				color: white;
+			}
+
+			navbar.dark .control-buttons > *:hover {
+				color: white;
+			}
+
+			#navbar-container .control-buttons {
+				flex: 1;
+				display: flex;
+			}
+
+			#navbar-container .control-buttons > * {
+				margin: 0 .3em;
+				cursor: pointer;
+				-webkit-user-select: none;
+				height: 23px;
+				display: flex;
+				align-items: center;
+			}
+
+			#navbar-container .control-buttons > *:hover {
+				color: #c1c1c1;
+			}
+		</style>
+	</head>
+	<body>
+		<navbar>
+			<div id="navbar-container">
+				<div class="control-buttons">
+					<div class="home">HOME</div>
+					<div class="refresh">REFRESH</div>
+					<div class="navigate-back" style="margin: 0 1em;">&#x3C;</div>
+					<div class="navigate-foward">&#x3E;</div>
+				</div>
+				<div class="control-buttons" style="flex: 2">
+					<div class="title"></div>
+				</div>
+			</div>
+		</navbar>
+		<script src="renderer.js"></script>
+	</body>
+</html>
diff --git a/main.js b/main.js
@@ -1,42 +1,25 @@
 const { app, BrowserWindow } = require('electron');
 const os = require('os');
 const fs = require('fs');
+const path = require('path');
 
 let mainWin;
 
 const winOption = {
 	width: 1024,
-	height: 768,
-	webPreferences: {
-		webSecurity: false,
-		nodeIntegration: false
-	}
+	height: 768
 }
 
 const isDarwin = os.platform() === 'darwin';
 
 function initializeApp () {
 	mainWin = new BrowserWindow(
 		(isDarwin
-			? Object.assign({}, winOption, {titleBarStyle: 'hidden-inset'})
+			? Object.assign({}, winOption, {titleBarStyle: 'hidden'})
 			: winOption)
 	);
 
-	if (process.env.NODE_ENV === 'development') {
-		mainWin.loadURL('http://localhost:3000');
-	} else {
-		mainWin.loadURL('https://hackmd.io');
-	}
-
-	mainWin.webContents.on('did-finish-load', function() {
-		let cssPath = isDarwin ? '/static/darwin.css' : '/static/app.css';
-
-		fs.readFile(__dirname + cssPath, 'utf-8', function(error, data) {
-			if (!error) {
-				mainWin.webContents.insertCSS(data);
-			}
-		});
-	});
+	mainWin.loadURL(`file://${path.join(__dirname, 'index.html')}`);
 }
 
 app.on('ready', () => {

diff --git a/renderer.js b/renderer.js
@@ -0,0 +1,75 @@
+const fs = require('electron').remote.require('fs');
+const os = require('electron').remote.require('os');
+const path = require('electron').remote.require('path');
+const {BrowserWindow} = require('electron').remote;
+const {clipboard} = require('electron');
+
+const SERVER_URL = 'https://hackmd.io';
+
+const isDarwin = os.platform() === 'darwin';
+
+const winOption = {
+	width: 1024,
+	height: 768
+}
+
+onload = () => {
+	if (window.location.search !== '') {
+		targetURL = window.location.search.match(/\?target=([^?]+)/)[1];
+	} else {
+		targetURL = SERVER_URL;
+	}
+
+	document.body.innerHTML += `<webview src="${targetURL}" id="main-window" disablewebsecurity autosize="on" allowpopups allowfileaccessfromfiles></webview>`;
+
+	const webview = document.getElementById("main-window");
+
+	webview.addEventListener('dom-ready', function(){
+		// set webview title
+		document.querySelector('#navbar-container .title').innerHTML = webview.getTitle();
+
+		// set dark theme if in home page
+		if (webview.getURL().split('?')[0].split('#')[0].match(/https:\/\/hackmd.io\/$/)) {
+			document.querySelector('navbar').className = 'dark';
+		} else {
+			document.querySelector('navbar').className = '';
+		}
+
+		/* bind control buttons event */
+		document.querySelector('#navbar-container .navigate-back').onclick = () => {
+			if (webview.canGoBack()) {
+				webview.goBack();
+			}
+		};
+
+		document.querySelector('#navbar-container .navigate-foward').onclick = () => {
+			if (webview.canGoForward()) {
+				webview.goForward();
+			}
+		};
+
+		document.querySelector('#navbar-container .home').onclick = () => {
+			webview.loadURL(SERVER_URL);
+		}
+
+		document.querySelector('#navbar-container .refresh').onclick = () => {
+			webview.loadURL(webview.getURL());
+		}
+
+		document.querySelector('#navbar-container .title').onclick = () => {
+			clipboard.writeText(webview.getURL());
+			new Notification('URL copied', { title: 'URL copied', body: webview.getURL() });
+		}
+
+		// webview.openDevTools();
+	});
+
+	/* handle _target=blank pages */
+	webview.addEventListener('new-window', (event) => {
+		new BrowserWindow(
+			(isDarwin
+				? Object.assign({}, winOption, {titleBarStyle: 'hidden'})
+				: winOption)
+		).loadURL(`file://${path.join(__dirname, `index.html?target=${event.url}`)}`);
+	});
+}
diff --git a/static/app.css b/static/app.css
diff --git a/static/darwin.css b/static/darwin.css