custom-electron-titlebar 3.2.7 → 4.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Alex Torres
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,9 +1,7 @@
-# Custom Electron Titlebar
+# Custom Electron Titlebar 4
 
 This project is a typescript library for electron that allows you to configure a fully customizable title bar.
 
-### **It is a library for electron, it cannot be used on a basic website.**
-
 [![LICENSE](https://img.shields.io/github/license/AlexTorresSk/custom-electron-titlebar.svg)](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE)
 [![NPM Version](https://img.shields.io/npm/v/custom-electron-titlebar.svg)](https://npmjs.org/package/custom-electron-titlebar)
 
@@ -11,8 +9,6 @@ This project is a typescript library for electron that allows you to configure a
 
 ![Preview 2](screenshots/window_2.png)
 
-![Preview 3](screenshots/window_3.png)
-
 ## Install
 
 ```
@@ -24,17 +20,19 @@ or use example folder to init basic electron project with this titlebar.
 ## Usage
 
 #### Step 1
-In your **renderer** file or in an **HTML script tag** add:
+In your **preload** file add:
+
+For javascript
 
 ```js
 const customTitlebar = require('custom-electron-titlebar');
 
 new customTitlebar.Titlebar({
-	backgroundColor: customTitlebar.Color.fromHex('#444')
+	backgroundColor: customTitlebar.Color.fromHex('#ECECEC')
 });
 ```
 
-> if you are using _typescript_
+For typescript
 ```ts
 import { Titlebar, Color } from 'custom-electron-titlebar'
 
@@ -49,10 +47,13 @@ The parameter `backgroundColor: Color` is required, this should be `Color` type.
 #### Step 2
 Update the code that launches browser window
 ```js
-var mainWindow = new BrowserWindow({
-      width: 1000,
-      height: 600,
-      titleBarStyle: "hidden", // add this line
+let mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 600,
+    titleBarStyle: "hidden", // add this line
+	webPreferences: {
+      	preload: path.join(__dirname, 'preload.js')
+    }
 });
 ```
 
@@ -60,25 +61,24 @@ var mainWindow = new BrowserWindow({
 
 The interface [`TitleBarOptions`] is managed, which has the following configurable options for the title bar. Some parameters are optional.
 
-| Parameter                      | Type             | Description                                                                                                                     | Default                   |
-| ------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
-| backgroundColor **(required)** | Color            | The background color of the titlebar.                                                                                           | #444444                   |
-| icon                           | string           | The icon shown on the left side of the title bar.                                                                               | null                      |
-| iconsTheme                     | Theme            | Style of the icons.                                                                                                             | Themebar.win              |
-| shadow                         | boolean          | The shadow of the titlebar.                                                                                                     | false                     |
-| drag                           | boolean          | Define whether or not you can drag the window by holding the click on the title bar.                                            | true                      |
-| minimizable                    | boolean          | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar.                 | true                      |
-| maximizable                    | boolean          | Enables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar. | true                      |
-| closeable                      | boolean          | Enables or disables the option of the close window by clicking on the corresponding button in the title bar.                    | true                      |
-| order                          | string           | Set the order of the elements on the title bar. (`inverted`, `first-buttons`)                                                   | null                      |
-| titleHorizontalAlignment       | string           | Set horizontal alignment of the window title. (`left`, `center`, `right`)                                                       | center                    |
-| menu                           | Electron.Menu    | The menu to show in the title bar.                                                                                              | Menu.getApplicationMenu() |
-| menuPosition                   | string           | The position of menubar on titlebar.                                                                                            | left 					  |
-| enableMnemonics                | boolean 		    | Enable the mnemonics on menubar and menu items.																		          | true                      |
-| itemBackgroundColor            | Color            | The background color when the mouse is over the item.                                                                           | rgba(0, 0, 0, .14)        |
-| hideWhenClickingClose          | boolean          | When the close button is clicked, the window is hidden instead of closed.                                                       | false                     |
-| overflow                       | string           | The overflow of the container (`auto`, `visible`, `hidden`)                                                                     | auto                      |
-| unfocusEffect                  | boolean          | Enables or disables the blur option in the title bar.                                                                           | false                     |
+| Parameter                      | Type                      | Description                                                                                                                     | Default                   |
+| ------------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
+| backgroundColor **(required)** | Color                     | The background color of the titlebar.                                                                                           | #444444                   |
+| icon                           | string                    | The icon shown on the left side of the title bar.                                                                               | null                      |
+| shadow                         | boolean                   | The shadow of the titlebar.                                                                                                     | false                     |
+| drag                           | boolean                   | Define whether or not you can drag the window by holding the click on the title bar.                                            | true                      |
+| onMinimize                     | Funtion                   | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar.                 | undefined                 |
+| 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                 |
+| onClose                        | Funtion                   | Enables or disables the option of the close window by clicking on the corresponding button in the title bar.                    | undefined                 |
+| isMaximized                    | Funtion                   | Check if window is maximized.                                                                                                   | undefined                 |
+| onMenuItemClick                | Funtion(commandId: number)| Fires when any menu option is pressed.                                                                                          | undefined                 |
+| order                          | string                    | Set the order of the elements on the title bar. (`inverted`, `first-buttons`)                                                   | null                      |
+| titleHorizontalAlignment       | string                    | Set horizontal alignment of the window title. (`left`, `center`, `right`)                                                       | center                    |
+| menuPosition                   | string                    | The position of menubar on titlebar.                                                                                            | left 	  				   |
+| enableMnemonics                | boolean 		             | Enable the mnemonics on menubar and menu items.																		           | true                      |
+| hideWhenClickingClose          | boolean                   | When the close button is clicked, the window is hidden instead of closed.                                                       | false                     |
+| overflow                       | string                    | The overflow of the container (`auto`, `visible`, `hidden`)                                                                     | auto                      |
+| unfocusEffect                  | boolean                   | Enables or disables the blur option in the title bar.                                                                           | false                     |
 
 ## Methods
 
@@ -124,51 +124,6 @@ With this method you can update the icon. This method receives the url of the im
 titlebar.updateIcon('./images/my-icon.svg');
 ```
 
-### Update Menu
-
-This method updates or creates the menu, to create the menu use remote.Menu and remote.MenuItem.
-
-```js
-const menu = new Menu();
-menu.append(new MenuItem({
-	label: 'Item 1',
-	submenu: [
-		{
-			label: 'Subitem 1',
-			click: () => console.log('Click on subitem 1')
-		},
-		{
-			type: 'separator'
-		}
-	]
-}));
-
-menu.append(new MenuItem({
-	label: 'Item 2',
-	submenu: [
-		{
-			label: 'Subitem checkbox',
-			type: 'checkbox',
-			checked: true
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Subitem with submenu',
-			submenu: [
-				{
-					label: 'Submenu &item 1',
-					accelerator: 'Ctrl+T'
-				}
-			]
-		}
-	]
-}));
-
-titlebar.updateMenu(menu);
-```
-
 ### Update Menu Position
 
 You can change the position of the menu bar. `left` and `bottom` are allowed.
@@ -179,9 +134,7 @@ titlebar.updateMenuPosition('bottom');
 
 ### Set Horizontal Alignment
 
-> setHorizontalAlignment method was contributed by [@MairwunNx](https://github.com/MairwunNx) :punch:
-
-`left`, `center` and `right` are allowed
+You can change the position of the title of title bar. `left`, `center` and `right` are allowed
 
 ```js
 titlebar.setHorizontalAlignment('right');
@@ -195,32 +148,6 @@ This method removes the title bar completely and all recorded events.
 titlebar.dispose();
 ```
 
-## CSS Classes
-The following CSS classes exist and can be used to customize the titlebar
-
-| Class name                  | Description                                     |
-| --------------------------- | ----------------------------------------------- |
-| .titlebar                   | Styles the titlebar.                            |
-| .window-appicon             | Styles the app icon on the titlebar.            |
-| .window-title               | Styles the window title. (Example: font-size)   |
-| .window-controls-container  | Styles the window controls section.             |
-| .resizer top                | Description missing                             |
-| .resizer left               | Description missing                             |
-| .menubar                    | Description missing                             |
-| .menubar-menu-button        | Styles the main menu elements. (Example: color) |
-| .menubar-menu-button open   | Description missing                             |
-| .menubar-menu-title         | Description missing                             |
-| .action-item                | Description missing                             |
-| .action-menu-item           | Styles action menu elements. (Example: color)   |
-
-## Contributing
-
-Many thanks to all the people who support this project through issues and pull request.
-If you want to contribute with this project, all the issues and pull request are welcome.
-
-You can also:<br>
-<a href="https://www.buymeacoffee.com/bjkGN4g" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
-
 ## License
 
 This project is under the [MIT](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE) license.

package/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import Titlebar from './titlebar';
+import { Color } from './common/color';
+declare const _default: {
+    Titlebar: typeof Titlebar;
+    Color: typeof Color;
+};
+export default _default;