Skip to content
This repository was archived by the owner on Sep 13, 2024. It is now read-only.

Commit 816b689

Browse files
AraxeusAraxeus
committed
v4.1.0
1 parent 4d7c6ae commit 816b689

18 files changed

+373
-175
lines changed

‎example/main.js

Lines changed: 155 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,35 @@
11
// Modules to control application life and create native browser window
2-
const { app, BrowserWindow, ipcMain, Menu } = require('electron')
3-
const path = require('path')
4-
require('./titlebar-events')
2+
const { app, BrowserWindow, Menu } = require('electron');
3+
const path = require('path');
4+
const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
5+
// setup the titlebar main process
6+
setupTitlebar();
57

68
createWindow = () => {
79
// Create the browser window.
810
const mainWindow = new BrowserWindow({
911
width: 800,
1012
height: 600,
1113
titleBarStyle: 'hidden',
14+
//frame: false, // needed if process.versions.electron < 14
1215
webPreferences: {
1316
preload: path.join(__dirname, 'preload.js')
1417
}
15-
})
18+
});
1619

17-
// and load the index.html of the app.
18-
mainWindow.loadFile('index.html')
20+
const menu = Menu.buildFromTemplate(exampleMenuTemplate());
21+
Menu.setApplicationMenu(menu);
1922

20-
// Open the DevTools.
21-
// mainWindow.webContents.openDevTools()
2223

23-
mainWindow.on('enter-full-screen', () => {
24-
mainWindow.webContents.send('window-fullscreen', true)
25-
})
2624

27-
mainWindow.on('leave-full-screen', () => {
28-
mainWindow.webContents.send('window-fullscreen', false)
29-
})
25+
// and load the index.html of the app.
26+
mainWindow.loadFile('index.html');
3027

31-
mainWindow.on('focus', () => {
32-
mainWindow.webContents.send('window-focus', true)
33-
})
28+
// Open the DevTools.
29+
// mainWindow.webContents.openDevTools()
3430

35-
mainWindow.on('blur', () => {
36-
mainWindow.webContents.send('window-focus', false)
37-
})
31+
//attach fullscreen(f11 and not 'maximized') && focus listeners
32+
attachTitlebarToWindow(mainWindow);
3833
}
3934

4035
// This method will be called when Electron has finished
@@ -46,16 +41,152 @@ app.whenReady().then(() => {
4641
app.on('activate', function () {
4742
// On macOS it's common to re-create a window in the app when the
4843
// dock icon is clicked and there are no other windows open.
49-
if (BrowserWindow.getAllWindows().length === 0) createWindow()
44+
if (BrowserWindow.getAllWindows().length === 0) createWindow();
5045
})
5146
})
5247

5348
// Quit when all windows are closed, except on macOS. There, it's common
5449
// for applications and their menu bar to stay active until the user quits
5550
// explicitly with Cmd + Q.
5651
app.on('window-all-closed', function () {
57-
if (process.platform !== 'darwin') app.quit()
52+
if (process.platform !== 'darwin') app.quit();
5853
})
5954

60-
// In this file you can include the rest of your app's specific main process
61-
// code. You can also put them in separate files and require them here.
55+
const exampleMenuTemplate = () => [
56+
{
57+
label: "Simple Options",
58+
submenu: [
59+
{
60+
label: "Quit",
61+
click: () => app.quit()
62+
},
63+
{
64+
label: "Radio1",
65+
type: "radio",
66+
checked: true
67+
},
68+
{
69+
label: "Radio2",
70+
type: "radio",
71+
},
72+
{
73+
label: "Checkbox1",
74+
type: "checkbox",
75+
checked: true,
76+
click: (item) => {
77+
console.log("item is checked? " + item.checked);
78+
}
79+
},
80+
{ type: "separator" },
81+
{
82+
label: "Checkbox2",
83+
type: "checkbox",
84+
checked: false,
85+
click: (item) => {
86+
console.log("item is checked? " + item.checked);
87+
}
88+
}
89+
]
90+
},
91+
{
92+
label: "Advanced Options",
93+
submenu: [
94+
{
95+
label: "Quit",
96+
click: () => app.quit()
97+
},
98+
{
99+
label: "Radio1",
100+
type: "radio",
101+
checked: true
102+
},
103+
{
104+
label: "Radio2",
105+
type: "radio",
106+
},
107+
{
108+
label: "Checkbox1",
109+
type: "checkbox",
110+
checked: true,
111+
click: (item) => {
112+
console.log("item is checked? " + item.checked);
113+
}
114+
},
115+
{ type: "separator" },
116+
{
117+
label: "Checkbox2",
118+
type: "checkbox",
119+
checked: false,
120+
click: (item) => {
121+
console.log("item is checked? " + item.checked);
122+
}
123+
},
124+
{
125+
label: "Radio Test",
126+
submenu: [
127+
{
128+
label: "Sample Checkbox",
129+
type: "checkbox",
130+
checked: true
131+
},
132+
{
133+
label: "Radio1",
134+
checked: true,
135+
type: "radio"
136+
},
137+
{
138+
label: "Radio2",
139+
type: "radio"
140+
},
141+
{
142+
label: "Radio3",
143+
type: "radio"
144+
},
145+
{ type: "separator" },
146+
{
147+
label: "Radio1",
148+
checked: true,
149+
type: "radio"
150+
},
151+
{
152+
label: "Radio2",
153+
type: "radio"
154+
},
155+
{
156+
label: "Radio3",
157+
type: "radio"
158+
}
159+
]
160+
},
161+
{
162+
label: "zoomIn",
163+
role: "zoomIn"
164+
},
165+
{
166+
label: "zoomOut",
167+
role: "zoomOut"
168+
},
169+
{
170+
label: "Radio1",
171+
type: "radio"
172+
},
173+
{
174+
label: "Radio2",
175+
checked: true,
176+
type: "radio"
177+
},
178+
]
179+
},
180+
{
181+
label: "View",
182+
submenu: [
183+
{ role: "reload" },
184+
{ role: "forceReload" },
185+
{ type: "separator" },
186+
{ role: "zoomIn" },
187+
{ role: "zoomOut" },
188+
{ role: "resetZoom" },
189+
{ role: "toggleDevTools" }
190+
],
191+
}
192+
];

‎example/preload.js

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
// All of the Node.js APIs are available in the preload process.
22
// It has the same sandbox as a Chrome extension.
3-
const { ipcRenderer } = require('electron');
4-
const { Titlebar, Color } = require('..');
3+
const { Titlebar, Color } = require('custom-electron-titlebar');
54
const path = require('path');
65

76
let titlebar;
87

98
window.addEventListener('DOMContentLoaded', () => {
10-
ipcRenderer.send('request-application-menu')
9+
titlebar = new Titlebar({
10+
backgroundColor: Color.fromHex("#388e3c"),
11+
itemBackgroundColor: Color.fromHex("#121212"),
12+
svgColor: Color.WHITE,
13+
icon: path.join(__dirname, '/assets/images', '/icon.svg'),
14+
//menu: null // = do not automatically use Menu.applicationMenu
15+
})
1116

1217
const replaceText = (selector, text) => {
1318
const element = document.getElementById(selector)
@@ -18,24 +23,3 @@ window.addEventListener('DOMContentLoaded', () => {
1823
replaceText(`${type}-version`, process.versions[type])
1924
}
2025
})
21-
22-
ipcRenderer.on('renderer-titlebar', (event, menu) => {
23-
titlebar = new Titlebar({
24-
backgroundColor: Color.fromHex("#388e3c"),
25-
icon: path.join(__dirname, '/assets/images', '/icon.svg'),
26-
menu: menu,
27-
onMinimize: () => ipcRenderer.send('window-event', 'window-minimize'),
28-
onMaximize: () => ipcRenderer.send('window-event', 'window-maximize'),
29-
onClose: () => ipcRenderer.send('window-event', 'window-close'),
30-
isMaximized: () => ipcRenderer.sendSync('window-event', 'window-is-maximized'),
31-
onMenuItemClick: (commandId) => ipcRenderer.send('menu-event', commandId)
32-
})
33-
})
34-
35-
ipcRenderer.on('window-fullscreen', (event, isFullScreen) => {
36-
titlebar.onWindowFullScreen(isFullScreen)
37-
})
38-
39-
ipcRenderer.on('window-focus', (event, isFocused) => {
40-
if (titlebar) titlebar.onWindowFocus(isFocused)
41-
})

‎example/titlebar-events.js

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

‎example/utils/menu-utils.js

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

‎package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22
"name": "custom-electron-titlebar",
33
"version": "4.0.1",
44
"description": "Custom Electron Titlebar is a library for electron that allows you to configure a fully customizable title bar.",
5-
"main": "dist/index.js",
5+
"exports": {
6+
".": "./dist/index.js",
7+
"./main": "./dist/main.js"
8+
},
69
"types": "dist/index.d.ts",
10+
"type": "commonjs",
711
"scripts": {
812
"build": "webpack --mode=production",
913
"example": "electron example/main.js",
@@ -32,15 +36,15 @@
3236
"dist": "dist"
3337
},
3438
"peerDependencies": {
35-
"electron": "^16.0.7"
39+
"electron": ">10"
3640
},
3741
"devDependencies": {
3842
"@babel/core": "^7.16.12",
3943
"@babel/preset-env": "^7.16.11",
4044
"@types/node": "^17.0.10",
4145
"babel-loader": "^8.2.3",
4246
"css-loader": "^6.5.1",
43-
"electron": "^16.0.7",
47+
"electron": "^17.0.0",
4448
"sass": "^1.49.0",
4549
"sass-loader": "^12.4.0",
4650
"style-loader": "^3.3.1",

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
import Titlebar from './titlebar';
77
import { Color } from './common/color';
88

9-
export = { Titlebar, Color };
9+
export = { Titlebar, Color };

0 commit comments

Comments
 (0)