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

Commit 5495179

Browse files
committed
v4.0.0
1 parent 1fbe1cc commit 5495179

22 files changed

+1322
-1440
lines changed

README.md

Lines changed: 11 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,24 @@
1-
# Custom Electron Titlebar 4
1+
# Custom Electron Titlebar
22

33
This project is a typescript library for electron that allows you to configure a fully customizable title bar.
44

55
[![LICENSE](https://img.shields.io/github/license/AlexTorresSk/custom-electron-titlebar.svg)](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE)
66
[![NPM Version](https://img.shields.io/npm/v/custom-electron-titlebar.svg)](https://npmjs.org/package/custom-electron-titlebar)
77

8-
<img width="100%" src="screenshots/cet-001.png">
9-
<img width="100%" src="screenshots/cet-002.png">
8+
![Screenshot 1](screenshots/cet-001.jpg)
109

11-
## Install
10+
![Screenshot 2](screenshots/cet-002.jpg)
1211

12+
## 🟢 Install
1313
```
14-
npm i custom-electron-titlebar
14+
npm install custom-electron-titlebar
1515
```
1616

17-
or use example folder to init basic electron project with this titlebar.
18-
19-
## Usage
20-
21-
#### Step 1
22-
In your **preload** file add:
23-
24-
For javascript
25-
26-
```js
27-
const customTitlebar = require('custom-electron-titlebar');
28-
29-
new customTitlebar.Titlebar({
30-
backgroundColor: customTitlebar.Color.fromHex('#ECECEC')
31-
});
32-
```
33-
34-
For typescript
35-
```ts
36-
import { Titlebar, Color } from 'custom-electron-titlebar'
37-
38-
new Titlebar({
39-
backgroundColor: Color.fromHex('#ECECEC')
40-
});
41-
```
42-
43-
The parameter `backgroundColor: Color` is required, this should be `Color` type.
44-
(View [Update Background](#update-background) for more details).
45-
46-
#### Step 2
47-
Update the code that launches browser window
48-
```js
49-
let mainWindow = new BrowserWindow({
50-
width: 1000,
51-
height: 600,
52-
titleBarStyle: "hidden", // add this line
53-
webPreferences: {
54-
preload: path.join(__dirname, 'preload.js')
55-
}
56-
});
57-
```
58-
59-
## Options
60-
61-
The interface [`TitleBarOptions`] is managed, which has the following configurable options for the title bar. Some parameters are optional.
62-
63-
| Parameter | Type | Description | Default |
64-
| ------------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
65-
| backgroundColor **(required)** | Color | The background color of the titlebar. | #444444 |
66-
| icon | string | The icon shown on the left side of the title bar. | null |
67-
| shadow | boolean | The shadow of the titlebar. | false |
68-
| drag | boolean | Define whether or not you can drag the window by holding the click on the title bar. | true |
69-
| onMinimize | Funtion | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar. | undefined |
70-
| onMaximize | Funtion | Enables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar. | undefined |
71-
| onClose | Funtion | Enables or disables the option of the close window by clicking on the corresponding button in the title bar. | undefined |
72-
| isMaximized | Funtion | Check if window is maximized. | undefined |
73-
| onMenuItemClick | Funtion(commandId: number)| Fires when any menu option is pressed. | undefined |
74-
| order | string | Set the order of the elements on the title bar. (`inverted`, `first-buttons`) | null |
75-
| titleHorizontalAlignment | string | Set horizontal alignment of the window title. (`left`, `center`, `right`) | center |
76-
| menuPosition | string | The position of menubar on titlebar. | left |
77-
| enableMnemonics | boolean | Enable the mnemonics on menubar and menu items. | true |
78-
| hideWhenClickingClose | boolean | When the close button is clicked, the window is hidden instead of closed. | false |
79-
| overflow | string | The overflow of the container (`auto`, `visible`, `hidden`) | auto |
80-
| unfocusEffect | boolean | Enables or disables the blur option in the title bar. | false |
81-
82-
## Methods
83-
84-
### Update Background
85-
86-
This change the color of titlebar and it's checked whether the color is light or dark, so that the color of the icons adapts to the background of the title bar.
87-
88-
```js
89-
titlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));
90-
```
91-
92-
To assign colors you can use the following options: `Color.fromHex()`, `new Color(new RGBA(r, g, b, a))`, `new Color(new HSLA(h, s, l, a))`, `new Color(new HSVA(h, s, v, a))` or `Color.BLUE`, `Color.RED`, etc.
93-
94-
### Update Items Background Color
95-
96-
This method change background color on hover of items of menubar.
97-
98-
```js
99-
titlebar.updateItemBGColor(new Color(new RGBA(0, 0, 0, .7)));
100-
```
101-
102-
To assign colors you can use the following options: `Color.fromHex()`, `new Color(new RGBA(r, g, b, a))`, `new Color(new HSLA(h, s, l, a))`, `new Color(new HSVA(h, s, v, a))` or `Color.BLUE`, `Color.RED`, etc.
103-
104-
### Update Title
105-
106-
This method updated the title of the title bar, If you change the content of the `title` tag, you should call this method for update the title.
107-
108-
```js
109-
document.title = 'My new title';
110-
titlebar.updateTitle();
111-
112-
// Or you can do as follows and avoid writing document.title
113-
titlebar.updateTitle('New Title');
114-
```
115-
116-
if this method is called and the title parameter is added, the title of the document is changed to that of the parameter.
117-
118-
### Update Icon
119-
120-
With this method you can update the icon. This method receives the url of the image _(it is advisable to use transparent image formats)_
121-
122-
```js
123-
titlebar.updateIcon('./images/my-icon.svg');
124-
```
125-
126-
### Update Menu Position
127-
128-
You can change the position of the menu bar. `left` and `bottom` are allowed.
129-
130-
```js
131-
titlebar.updateMenuPosition('bottom');
132-
```
133-
134-
### Set Horizontal Alignment
135-
136-
You can change the position of the title of title bar. `left`, `center` and `right` are allowed
137-
138-
```js
139-
titlebar.setHorizontalAlignment('right');
140-
```
141-
142-
### Dispose
143-
144-
This method removes the title bar completely and all recorded events.
145-
146-
```js
147-
titlebar.dispose();
148-
```
149-
150-
## License
17+
## 🚀 Usage
18+
To see the documentation on how to use the title bar, visit the [Wiki](https://github.com/AlexTorresSk/custom-electron-titlebar/wiki)
15119

20+
## ✅ License
15221
This project is under the [MIT](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE) license.
22+
23+
## 💰 Support
24+
If you want to support my development, you can do so by donating through [Buy me a coffee](https://www.buymeacoffee.com/AlexTorresSk), [Paypal](https://www.paypal.com/paypalme/hapovedat) or [Patreon](https://www.patreon.com/AlexTorresSk)

example/assets/images/icon.svg

Lines changed: 2 additions & 5 deletions
Loading

example/main.js

Lines changed: 13 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
// Modules to control application life and create native browser window
22
const { app, BrowserWindow, ipcMain, Menu } = require('electron')
33
const path = require('path')
4+
require('./titlebar-events')
45

5-
function createWindow() {
6+
createWindow = () => {
67
// Create the browser window.
78
const mainWindow = new BrowserWindow({
89
width: 800,
@@ -19,13 +20,21 @@ function createWindow() {
1920
// Open the DevTools.
2021
// mainWindow.webContents.openDevTools()
2122

22-
mainWindow.on('enter-full-screen', function () {
23+
mainWindow.on('enter-full-screen', () => {
2324
mainWindow.webContents.send('window-fullscreen', true)
2425
})
2526

26-
mainWindow.on('leave-full-screen', function () {
27+
mainWindow.on('leave-full-screen', () => {
2728
mainWindow.webContents.send('window-fullscreen', false)
2829
})
30+
31+
mainWindow.on('focus', () => {
32+
mainWindow.webContents.send('window-focus', true)
33+
})
34+
35+
mainWindow.on('blur', () => {
36+
mainWindow.webContents.send('window-focus', false)
37+
})
2938
}
3039

3140
// This method will be called when Electron has finished
@@ -49,108 +58,4 @@ app.on('window-all-closed', function () {
4958
})
5059

5160
// In this file you can include the rest of your app's specific main process
52-
// code. You can also put them in separate files and require them here.
53-
ipcMain.on('request-application-menu', function (event) {
54-
const m = Menu.buildFromTemplate(exampleMenuTemplate());
55-
const menu = JSON.parse(JSON.stringify(m, parseMenu()));
56-
event.sender.send('titlebar-menu', menu);
57-
});
58-
59-
ipcMain.on('menu-event', (event, commandId) => {
60-
const item = getMenuItemByCommandId(commandId);
61-
item?.click(undefined, BrowserWindow.fromWebContents(event.sender), event.sender);
62-
});
63-
64-
ipcMain.on('window-minimize', function (event) {
65-
BrowserWindow.fromWebContents(event.sender).minimize();
66-
})
67-
68-
ipcMain.on('window-maximize', function (event) {
69-
const window = BrowserWindow.fromWebContents(event.sender);
70-
window.isMaximized() ? window.unmaximize() : window.maximize();
71-
})
72-
73-
ipcMain.on('window-close', function (event) {
74-
BrowserWindow.fromWebContents(event.sender).close()
75-
})
76-
77-
ipcMain.on('window-is-maximized', function (event) {
78-
event.returnValue = BrowserWindow.fromWebContents(event.sender).isMaximized()
79-
})
80-
81-
const parseMenu = () => {
82-
const menu = new WeakSet();
83-
return (key, value) => {
84-
if (key === 'commandsMap') return;
85-
if (typeof value === 'object' && value !== null) {
86-
if (menu.has(value)) return;
87-
menu.add(value);
88-
}
89-
return value;
90-
};
91-
}
92-
93-
const getMenuItemByCommandId = (commandId, menu = Menu.buildFromTemplate(exampleMenuTemplate())) => {
94-
let menuItem;
95-
menu.items.forEach(item => {
96-
if (item.submenu) {
97-
const submenuItem = getMenuItemByCommandId(commandId, item.submenu);
98-
if (submenuItem) menuItem = submenuItem;
99-
}
100-
if (item.commandId === commandId) menuItem = item;
101-
});
102-
103-
return menuItem;
104-
};
105-
106-
const exampleMenuTemplate = () => [
107-
{
108-
label: "Options",
109-
submenu: [
110-
{
111-
label: "Quit",
112-
click: () => app.quit()
113-
},
114-
{
115-
label: "Checkbox1",
116-
type: "checkbox",
117-
checked: true,
118-
click: (item) => {
119-
console.log("item is checked? " + item.checked);
120-
}
121-
},
122-
{ type: "separator" },
123-
{
124-
label: "Checkbox2",
125-
type: "checkbox",
126-
checked: false,
127-
click: (item) => {
128-
console.log("item is checked? " + item.checked);
129-
}
130-
},
131-
{
132-
label: "Esto es un submenu",
133-
submenu: [
134-
{
135-
label: "Sample Checkbox",
136-
type: "checkbox",
137-
checked: true
138-
},
139-
{ type: "separator" },
140-
{
141-
label: "Checkbox",
142-
type: "checkbox",
143-
}
144-
]
145-
},
146-
{
147-
label: "zoomIn",
148-
role: "zoomIn"
149-
},
150-
{
151-
label: "zoomOut",
152-
role: "zoomOut"
153-
}
154-
]
155-
}
156-
];
61+
// code. You can also put them in separate files and require them here.

0 commit comments

Comments
 (0)