{"_id":"@abmcode/electron-titlebar","_rev":"1-131940bd882a64c54d838d0cf189ca54","name":"@abmcode/electron-titlebar","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abmcode/electron-titlebar","version":"1.0.0","description":"Custom Electron Titlebar is a library for electron that allows you to configure a fully customizable title bar.","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc","dev":"electron example/main.js","start":"npm run build && npm run dev"},"author":{"name":"Alex Torres","email":"alextorressk@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/AlexTorresSk/custom-electron-titlebar.git"},"keywords":["typescript","electron","titlebar","menubar","windows","linux"],"bugs":{"url":"https://github.com/AlexTorresSk/custom-electron-titlebar/issues"},"homepage":"https://github.com/AlexTorresSk/custom-electron-titlebar#readme","directories":{"example":"example","lib":"lib"},"dependencies":{},"devDependencies":{"electron":"^9.1.0","typescript":"^3.9.7"},"gitHead":"d0b022ea8d09346e3e9d772c33f8cbb2455569bf","_id":"@abmcode/electron-titlebar@1.0.0","_nodeVersion":"13.8.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-5BD3KDG/70iWy3YIGQFrZyLKrLsukq+vvJxL5Jbgl7VBBIN6jAqnuLBbGu5NIUJqmG5P9UW4qUY6Tjq+vEoDgg==","shasum":"b5890e65ba821b03ba2eb8d4af398dfbb27afa60","tarball":"https://registry.npmjs.org/@abmcode/electron-titlebar/-/electron-titlebar-1.0.0.tgz","fileCount":48,"unpackedSize":308957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUHIUCRA9TVsSAnZWagAA5y4P/jA1iB3M4gxh7D8zsSrQ\nIICjquTm7TaTJIOJVZh08IBJW5WEWcrQw/HXSu3PoXNomYgJ9aaWgpXCv05G\nXRT8Y9++RX2AM0ljosbA9bP4ZXOCqwY2arSeR2/f047N/1AYP4pcM1LmethK\nerGKW6o1hlz+SAu+Vx+wzXQPr3E4JAS8XYbFA9pEnwIzxKLdPRklpFqwHEbO\ndegOb09hLnLNe2+oLvGi3RRLt8kATrA0xjKzEh6nQ4IufdurpuKqJjdWi96b\nXnkl/71wgw09ls+dLVkSGnxv23yf3L8XT1j0KoJOP0u//iSardbyV0JfljJS\nN2TrCLjPJDDOQL1QoNQkdqOk/wL+S4TkfCvJxj0gm9lBqVAaDjz6icJhdO22\n/41ArbHQyTcEwq1XNnUgjMGou82JVrXsn9tym23MIVYyAwem2CrDIRpwXu7w\nOC/Y6k3EJ1XaKmXWrThUR/Z/Cm7tSsg/KRCp609QFg/5Ez9PgJOA1xkoLrL8\n+eya/ctF/Zx6/WNMf31Y+tIHtzvd6pVmev7yfWkx3hHe6ZMYdXU7xsyHKVD2\niNZk9xKZd7tj+FT6t85NfcSlVyWqVr/nZaAjqOuXKTM8d2aMzQDfpERDhFqN\nDPrcX7WdtwN3CDGeXb+GD5jR/UB7X+bBf9HUQNEzj+YTYcVsRAolE4O6SeMg\n+XSi\r\n=hDy3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIrmmqb0PbPQary1vpZVWR4bwzt37N5JHHI7kZm0AVmAIge6U+vVw+iroo1SQ7Kh5zMQZAZR9H024vgim4FkseztI="}]},"maintainers":[{"name":"bryanyin","email":"hanbing.yin@abmcode.com"}],"_npmUser":{"name":"bryanyin","email":"hanbing.yin@abmcode.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/electron-titlebar_1.0.0_1599107604107_0.9242141027916257"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-03T04:33:23.846Z","1.0.0":"2020-09-03T04:33:24.274Z","modified":"2022-04-04T10:59:57.000Z"},"maintainers":[{"name":"bryanyin","email":"hanbing.yin@abmcode.com"}],"description":"Custom Electron Titlebar is a library for electron that allows you to configure a fully customizable title bar.","homepage":"https://github.com/AlexTorresSk/custom-electron-titlebar#readme","keywords":["typescript","electron","titlebar","menubar","windows","linux"],"repository":{"type":"git","url":"git+https://github.com/AlexTorresSk/custom-electron-titlebar.git"},"author":{"name":"Alex Torres","email":"alextorressk@gmail.com"},"bugs":{"url":"https://github.com/AlexTorresSk/custom-electron-titlebar/issues"},"license":"MIT","readme":"# Custom Electron Titlebar\n\nThis project is a typescript library for electron that allows you to configure a fully customizable title bar.\n\n### **It is a library for electron, it cannot be used on a basic website.**\n\n**The farewells are sad. But since I don't have time to keep this project, I have decided to archive it on August 14, 2020.**\n\n**I have to thank the hundreds of people who supported and used custom electron titlebar, without you this would not have been achieved. For electron 10+ this is the new project: https://github.com/Treverix/custom-electron-titlebar**\n\n[![LICENSE](https://img.shields.io/github/license/AlexTorresSk/custom-electron-titlebar.svg)](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE)\n[![NPM Version](https://img.shields.io/npm/v/custom-electron-titlebar.svg)](https://npmjs.org/package/custom-electron-titlebar)\n\n![Preview 1](screenshots/window_1.png)\n\n![Preview 2](screenshots/window_2.png)\n\n![Preview 3](screenshots/window_3.png)\n\n## Install\n\n```\nnpm i custom-electron-titlebar\n```\n\nor use example folder to init basic electron project with this titlebar.\n\n## Usage\n\n#### Step 1\nIn your **renderer** file or in an **HTML script tag** add:\n\n```js\nconst customTitlebar = require('custom-electron-titlebar');\n\nnew customTitlebar.Titlebar({\n\tbackgroundColor: customTitlebar.Color.fromHex('#444')\n});\n```\n\n> if you are using _typescript_\n```ts\nimport { Titlebar, Color } from 'custom-electron-titlebar'\n\nnew Titlebar({\n\tbackgroundColor: Color.fromHex('#ECECEC')\n});\n```\n\nThe parameter `backgroundColor: Color` is required, this should be `Color` type.\n(View [Update Background](#update-background) for more details).\n\n#### Step 2\nUpdate the code that launches browser window\n```js\nvar mainWindow = new BrowserWindow({\n width: 1000,\n height: 600,\n titleBarStyle: \"hidden\", // add this line\n});\n```\n\n## Options\n\nThe interface [`TitleBarOptions`] is managed, which has the following configurable options for the title bar. Some parameters are optional.\n\n| Parameter | Type | Description | Default |\n| ------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |\n| backgroundColor **(required)** | Color | The background color of the titlebar. | #444444 |\n| icon | string | The icon shown on the left side of the title bar. | null |\n| iconsTheme | Theme | Style of the icons. | Themebar.win |\n| shadow | boolean | The shadow of the titlebar. | false |\n| drag | boolean | Define whether or not you can drag the window by holding the click on the title bar. | true |\n| minimizable | boolean | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar. | true |\n| 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 |\n| closeable | boolean | Enables or disables the option of the close window by clicking on the corresponding button in the title bar. | true |\n| order | string | Set the order of the elements on the title bar. (`inverted`, `first-buttons`) | null |\n| titleHorizontalAlignment | string | Set horizontal alignment of the window title. (`left`, `center`, `right`) | center |\n| menu | Electron.Menu | The menu to show in the title bar. | Menu.getApplicationMenu() |\n| menuPosition | string | The position of menubar on titlebar. | left \t\t\t\t\t |\n| enableMnemonics | boolean \t\t | Enable the mnemonics on menubar and menu items.\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t | true |\n| itemBackgroundColor | Color | The background color when the mouse is over the item. | rgba(0, 0, 0, .14) |\n| hideWhenClickingClose | boolean | When the close button is clicked, the window is hidden instead of closed. | false |\n| overflow | string | The overflow of the container (`auto`, `visible`, `hidden`) | auto |\n| unfocusEffect | boolean | Enables or disables the blur option in the title bar. | false |\n\n## Methods\n\n### Update Background\n\nThis 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.\n\n```js\ntitlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));\n```\n\nTo 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.\n\n### Update Items Background Color\n\nThis method change background color on hover of items of menubar.\n\n```js\ntitlebar.updateItemBGColor(new Color(new RGBA(0, 0, 0, .7)));\n```\n\nTo 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.\n\n### Update Title\n\nThis 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.\n\n```js\ndocument.title = 'My new title';\ntitlebar.updateTitle();\n\n// Or you can do as follows and avoid writing document.title\ntitlebar.updateTitle('New Title');\n```\n\nif this method is called and the title parameter is added, the title of the document is changed to that of the parameter.\n\n### Update Icon\n\nWith this method you can update the icon. This method receives the url of the image _(it is advisable to use transparent image formats)_\n\n```js\ntitlebar.updateIcon('./images/my-icon.svg');\n```\n\n### Update Menu\n\nThis method updates or creates the menu, to create the menu use remote.Menu and remote.MenuItem.\n\n```js\nconst menu = new Menu();\nmenu.append(new MenuItem({\n\tlabel: 'Item 1',\n\tsubmenu: [\n\t\t{\n\t\t\tlabel: 'Subitem 1',\n\t\t\tclick: () => console.log('Click on subitem 1')\n\t\t},\n\t\t{\n\t\t\ttype: 'separator'\n\t\t}\n\t]\n}));\n\nmenu.append(new MenuItem({\n\tlabel: 'Item 2',\n\tsubmenu: [\n\t\t{\n\t\t\tlabel: 'Subitem checkbox',\n\t\t\ttype: 'checkbox',\n\t\t\tchecked: true\n\t\t},\n\t\t{\n\t\t\ttype: 'separator'\n\t\t},\n\t\t{\n\t\t\tlabel: 'Subitem with submenu',\n\t\t\tsubmenu: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submenu &item 1',\n\t\t\t\t\taccelerator: 'Ctrl+T'\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n}));\n\ntitlebar.updateMenu(menu);\n```\n\n### Update Menu Position\n\nYou can change the position of the menu bar. `left` and `bottom` are allowed.\n\n```js\ntitlebar.updateMenuPosition('bottom');\n```\n\n### Set Horizontal Alignment\n\n> setHorizontalAlignment method was contributed by [@MairwunNx](https://github.com/MairwunNx) :punch:\n\n`left`, `center` and `right` are allowed\n\n```js\ntitlebar.setHorizontalAlignment('right');\n```\n\n### Dispose\n\nThis method removes the title bar completely and all recorded events.\n\n```js\ntitlebar.dispose();\n```\n\n## CSS Classes\nThe following CSS classes exist and can be used to customize the titlebar\n\n| Class name | Description |\n| --------------------------- | ----------------------------------------------- |\n| .titlebar | Styles the titlebar. |\n| .window-appicon | Styles the app icon on the titlebar. |\n| .window-title | Styles the window title. (Example: font-size) |\n| .window-controls-container | Styles the window controls section. |\n| .resizer top | Description missing |\n| .resizer left | Description missing |\n| .menubar | Description missing |\n| .menubar-menu-button | Styles the main menu elements. (Example: color) |\n| .menubar-menu-button open | Description missing |\n| .menubar-menu-title | Description missing |\n| .action-item | Description missing |\n| .action-menu-item | Styles action menu elements. (Example: color) |\n\n## Contributing\n\nMany thanks to all the people who support this project through issues and pull request.\nIf you want to contribute with this project, all the issues and pull request are welcome.\n\nYou can also:
\n\"Buy\n\n## License\n\nThis project is under the [MIT](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE) license.\n","readmeFilename":"README.md"}