Skip to content

Commit a25de1f

Browse files
YukaiiYukaii
committed
Implement inline titlebar
1 parent 8c1b415 commit a25de1f

File tree

5 files changed

+170
-31
lines changed

5 files changed

+170
-31
lines changed

‎index.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>HackMD</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<style>
8+
html, body {
9+
margin: 0;
10+
height: 100%;
11+
background-color: #f8f8f8;
12+
overflow: hidden;
13+
font-family: Arial, Helvetica, sans-serif;
14+
}
15+
16+
body {
17+
display: flex;
18+
flex-direction: column;
19+
}
20+
21+
webview {
22+
display: flex;
23+
flex: 1;
24+
}
25+
26+
navbar {
27+
height: 23px;
28+
align-items: center;
29+
width: 100%;
30+
display: flex;
31+
-webkit-app-region: drag;
32+
padding-left: 75px;
33+
background-color: #f8f8f8;
34+
color: #484848;
35+
}
36+
37+
#navbar-container {
38+
font-size: 0.9em;
39+
font-family: "Courier New", Courier, monospace;
40+
display: flex;
41+
flex: 1;
42+
justify-content: space-between;
43+
-webkit-user-select: none;
44+
user-select: none;
45+
}
46+
47+
navbar.dark {
48+
background-color: #333333;
49+
color: white;
50+
}
51+
52+
navbar.dark .control-buttons > *:hover {
53+
color: white;
54+
}
55+
56+
#navbar-container .control-buttons {
57+
flex: 1;
58+
display: flex;
59+
}
60+
61+
#navbar-container .control-buttons > * {
62+
margin: 0 .3em;
63+
cursor: pointer;
64+
-webkit-user-select: none;
65+
height: 23px;
66+
display: flex;
67+
align-items: center;
68+
}
69+
70+
#navbar-container .control-buttons > *:hover {
71+
color: #c1c1c1;
72+
}
73+
</style>
74+
</head>
75+
<body>
76+
<navbar>
77+
<div id="navbar-container">
78+
<div class="control-buttons">
79+
<div class="home">HOME</div>
80+
<div class="refresh">REFRESH</div>
81+
<div class="navigate-back" style="margin: 0 1em;">&#x3C;</div>
82+
<div class="navigate-foward">&#x3E;</div>
83+
</div>
84+
<div class="control-buttons" style="flex: 2">
85+
<div class="title"></div>
86+
</div>
87+
</div>
88+
</navbar>
89+
<script src="renderer.js"></script>
90+
</body>
91+
</html>

‎main.js

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,25 @@
11
const { app, BrowserWindow } = require('electron');
22
const os = require('os');
33
const fs = require('fs');
4+
const path = require('path');
45

56
let mainWin;
67

78
const winOption = {
89
width: 1024,
9-
height: 768,
10-
webPreferences: {
11-
webSecurity: false,
12-
nodeIntegration: false
13-
}
10+
height: 768
1411
}
1512

1613
const isDarwin = os.platform() === 'darwin';
1714

1815
function initializeApp () {
1916
mainWin = new BrowserWindow(
2017
(isDarwin
21-
? Object.assign({}, winOption, {titleBarStyle: 'hidden-inset'})
18+
? Object.assign({}, winOption, {titleBarStyle: 'hidden'})
2219
: winOption)
2320
);
2421

25-
if (process.env.NODE_ENV === 'development') {
26-
mainWin.loadURL('http://localhost:3000');
27-
} else {
28-
mainWin.loadURL('https://hackmd.io');
29-
}
30-
31-
mainWin.webContents.on('did-finish-load', function() {
32-
let cssPath = isDarwin ? '/static/darwin.css' : '/static/app.css';
33-
34-
fs.readFile(__dirname + cssPath, 'utf-8', function(error, data) {
35-
if (!error) {
36-
mainWin.webContents.insertCSS(data);
37-
}
38-
});
39-
});
22+
mainWin.loadURL(`file://${path.join(__dirname, 'index.html')}`);
4023
}
4124

4225
app.on('ready', () => {

‎renderer.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const fs = require('electron').remote.require('fs');
2+
const os = require('electron').remote.require('os');
3+
const path = require('electron').remote.require('path');
4+
const {BrowserWindow} = require('electron').remote;
5+
const {clipboard} = require('electron');
6+
7+
const SERVER_URL = 'https://hackmd.io';
8+
9+
const isDarwin = os.platform() === 'darwin';
10+
11+
const winOption = {
12+
width: 1024,
13+
height: 768
14+
}
15+
16+
onload = () => {
17+
if (window.location.search !== '') {
18+
targetURL = window.location.search.match(/\?target=([^?]+)/)[1];
19+
} else {
20+
targetURL = SERVER_URL;
21+
}
22+
23+
document.body.innerHTML += `<webview src="${targetURL}" id="main-window" disablewebsecurity autosize="on" allowpopups allowfileaccessfromfiles></webview>`;
24+
25+
const webview = document.getElementById("main-window");
26+
27+
webview.addEventListener('dom-ready', function(){
28+
// set webview title
29+
document.querySelector('#navbar-container .title').innerHTML = webview.getTitle();
30+
31+
// set dark theme if in home page
32+
if (webview.getURL().split('?')[0].split('#')[0].match(/https:\/\/hackmd.io\/$/)) {
33+
document.querySelector('navbar').className = 'dark';
34+
} else {
35+
document.querySelector('navbar').className = '';
36+
}
37+
38+
/* bind control buttons event */
39+
document.querySelector('#navbar-container .navigate-back').onclick = () => {
40+
if (webview.canGoBack()) {
41+
webview.goBack();
42+
}
43+
};
44+
45+
document.querySelector('#navbar-container .navigate-foward').onclick = () => {
46+
if (webview.canGoForward()) {
47+
webview.goForward();
48+
}
49+
};
50+
51+
document.querySelector('#navbar-container .home').onclick = () => {
52+
webview.loadURL(SERVER_URL);
53+
}
54+
55+
document.querySelector('#navbar-container .refresh').onclick = () => {
56+
webview.loadURL(webview.getURL());
57+
}
58+
59+
document.querySelector('#navbar-container .title').onclick = () => {
60+
clipboard.writeText(webview.getURL());
61+
new Notification('URL copied', { title: 'URL copied', body: webview.getURL() });
62+
}
63+
64+
// webview.openDevTools();
65+
});
66+
67+
/* handle _target=blank pages */
68+
webview.addEventListener('new-window', (event) => {
69+
new BrowserWindow(
70+
(isDarwin
71+
? Object.assign({}, winOption, {titleBarStyle: 'hidden'})
72+
: winOption)
73+
).loadURL(`file://${path.join(__dirname, `index.html?target=${event.url}`)}`);
74+
});
75+
}

‎static/app.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎static/darwin.css

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)