{"id":22419740,"url":"https://github.com/tamkeen-tms/electron-window-manager","last_synced_at":"2025-04-05T19:13:32.584Z","repository":{"id":57131035,"uuid":"49383658","full_name":"tamkeen-tms/electron-window-manager","owner":"tamkeen-tms","description":"A NodeJs module that handles window management for Electron (Atom Shell, previously).","archived":false,"fork":false,"pushed_at":"2020-08-27T02:40:46.000Z","size":109,"stargazers_count":399,"open_issues_count":27,"forks_count":65,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T18:08:22.522Z","etag":null,"topics":["browserwindow","electron","multi-window","windowmanager"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tamkeen-tms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-10T20:17:25.000Z","updated_at":"2025-02-27T00:22:01.000Z","dependencies_parsed_at":"2022-08-31T08:50:24.858Z","dependency_job_id":null,"html_url":"https://github.com/tamkeen-tms/electron-window-manager","commit_stats":null,"previous_names":["tamkeenlms/electron-window-manager"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tamkeen-tms%2Felectron-window-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tamkeen-tms%2Felectron-window-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tamkeen-tms%2Felectron-window-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tamkeen-tms%2Felectron-window-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tamkeen-tms","download_url":"https://codeload.github.com/tamkeen-tms/electron-window-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386265,"owners_count":20930619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browserwindow","electron","multi-window","windowmanager"],"created_at":"2024-12-05T16:16:39.908Z","updated_at":"2025-04-05T19:13:32.563Z","avatar_url":"https://github.com/tamkeen-tms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM](https://nodei.co/npm/electron-window-manager.png?downloads=true)](https://www.npmjs.com/package/electron-window-manager)\n\n# What it is\n\n\u003e A NodeJs module for [Electron](https://electronjs.org) (Atom Shell, previously) that will help you create, control, manage and connect your application windows very easily.\n\nMost of the applications created using Electron are one-window applications. Why only one? Maybe because we as web developers are used to building only inside the browser. But if you are to build a multi-window Electron application then you may want to have a look at this package module.\n\n* [Features](#features)\n* [Installation](#installation)\n* [How it works](#how-it-works)\n* [Class: WindowManager](#class-windowmanager)\n    * [Method: createNew](#createnew-name-title-url-setuptemplate-setup-showdevtools-)\n    * [.templates](#class-windowmanagertemplates)\n    * [.layouts](#class-windowmanagerlayouts)\n    * [.sharedData](#class-windowmanagershareddata)\n    * [.bridge](#class-windowmanagerbridge)\n    * [.utils](#class-windowmanagerutils)\n* [Class: Window](#class-window)\n* [Final notes and upcoming updates](#final-notes)\n\n---\n\n## Features\n\nCreating a \"window\" in Electron is done using Electron's native [\"BrowserWindow\"](https://electronjs.org/docs/api/browser-window) module, which is easy to use and very straight forward, until the point when you need to access/control a window from another one, or share values/events between these windows, or use a unified layout/design. That's when this modules come into picture. If you need it I guarantee you will love it :)\n\n* You can easily open, close, move, resize, clone ... etc windows. Of course all of that IS DOABLE through Electron's BrowserWindow, but our module here makes it much easier. It's a kind of wrapper for Electron's module, plus some extra functionalities and tools.\n* **You can access any window from within any other window**. That's because all the work is done on the \"Main\" process, and because each window is given a unique name, so that you could \"access\" it from anywhere!\n* **You can simply [share](#class-windowmanagershareddata) data between the created windows, and even watch for changes in this data**. Cool, right ?!\n* You can, very easily, **connect all of the created windows through events; you can trigger an event in window 1 and listen for it in window 2 and 3 and vice versa**. This will help you make your application parts more connected and live. [More details](#class-windowmanagerbridge)\n* For an offline/local multi-window application scenario YOU WILL NEED a way to make these windows share one layout/design, or else you will find yourself building a website in the 90s! This module will help you with this problem. [Here is how](#class-windowmanagerlayouts)\n\n![](http://i.imgur.com/va4oR6J.png)\n\n## Installation\nSimply type the following command in the terminal, inside the application folder\n```sh\nnpm install --save electron-window-manager\n```\n\nThen, inside the application main.js *(or whatever you've chosen for your application)*, require the module, like this:\n```javascript\nvar windowManager = require('electron-window-manager');\n```\n\nNow, **this module can be used in both the \"Main\" and the \"Renderer\" processes of Electron**. In the Main process you can use it to create the application's first/main window, and later, in the Renderer process you can create the other windows of the application, or any other way you like.\n\n**On the Main process you can use it like this**:\n```javascript\nconst electron = require('electron');\nconst app = electron.app;\nconst windowManager = require('electron-window-manager');\n\n// When the application is ready\napp.on('ready', function(){\n    windowManager.init( ... );\n    // Open a window\n    windowManager.open('home', 'Welcome ...', '/home.html');\n});\n```\n**And in the Renderer process** (inside the created window), you can use it like this:\n```javascript\n\u003cscript\u003e\n    var remote = require('remote');\n    var windowManager = remote.require('electron-window-manager');\n\n    // Create a new window\n    var win2 = windowManager.createNew('win2', 'Windows #2');\n    win2.setURL('/win2.html');\n    win2.onReady( ... );\n    win2.open();\n\u003c/script\u003e\n```\n\nPlease go ahead and check out the module code and see for yourself how it all works, there's no magic involved, but it's consistent and easy to read. Just have a look at the code and you are good to go.\n\n## How it works \n* **This module is basically a wrapper for Electron's `BrowserWindow`** module, so it's definitely a good start to check out Electron's [documentation for BrowserWindow](https://electronjs.org/docs/api/browser-window).\n* At its core, this module **works as a holder for the `BrowserWindow` instances created, each instance is stored by a unique name**. So you could later on call any window by name. \n* **Each `BrowserWindow` instance is created inside the [\"Window\"](#class-window) class**, which in a way extends and adds more functionalities to it. \n* When creating a new window you are required to provide a basic SETUP for it, stuff like the width, height, title, url ... etc. The setup options `BrowserWindow` offers are plenty, and this module adds couple more. **If some/many of the windows share the same setup, you can simply create a [\"Setup Template\"](#class-windowmanagertemplates) and pass this template (by name) to the window in the making to apply the setup**.\n* After a window is created you can change its content, resize it, move it, full screen it, ... pretty much anything you may need, even you can execute JS code on it, from another window ... cool ha!\n* A development-mode is on by default, until you finish developing the application and set it off. **The development mode will make debugging a bit easier; you will be able to reload ANY window just by pressing `Ctrl + R`, also you will be able to toggle the development tools Chrome offers just by pressing `Ctrl + F12`**, for any window and without any pre-configuration. The developer tools can be turned on by default for a window just by passing `showDevTools: true` in the window setup, or even by calling the method `showDevTools()` on the window object.\n\n---\n# API\n\n## Class: WindowManager\nThe `windowManager` class is the interface of the module, through which you can access the created windows, and of course create new ones. Also through it you can access everything the module uses internally, like utilities and other modules used in the process.\n\n### `windowManager.windows`\nThis property is where the created `Window` instances are stored, each by its name\n\n### `windowManager.config`\nThe basic configuration of the module\n\n### `init( config )`\n\nThis method initiates the module so that you could use it. It takes one *optional* argument, which is the configuration. You only need to initiate the module once, and that's on the \"Main\" process.\n\n* **config**\n    * **appBase** (string): The path to the application base, whether it's local or remote. **By default the local path to the application directory is used**.\n    * **devMode** (boolean): Sets whether the development mode is on or off, it's on by default.\n    * **layouts** (object): As mentioned, this module will help you use layout(s) for the content of your windows. This option is where you can pass a list of the layout file(s), each under a specific name. Here's an example:\n        ```javascript\n        windowManager.init({\n            'layouts': {\n                'default': '/layouts/default.html',  // The \"/\" at the start will be replaced with the 'appBase' value\n                'secondary': '/layouts/secondary.html'\n            },\n            \n            'defaultLayout': 'secondary'\n        });\n        ```\n        This of course will be effective only when the app is local, or at least the target file is stored locally. [More details on the \"Layouts\" feature](#class-windowmanagerlayouts)\n    * **defaultLayout** (string): The name of the default layout. \n    * **defaultSetupTemplate** (string): The name of the setup template that you want as the default for all of the application windows. \"Setup Templates\" is a way of presetting shared setup properties for the application windows. [More details](#class-windowmanagertemplates)\n    * **defaultWindowTitle** The default title for the windows; will be used if a window title wasn't specified, and if the setup template didn't provide a title either! Here you can simply use the name of the application.\n    * **windowsTitlePrefix** (string): Each window can have its own title, this value will allow you to set a prefix for this title, for all the windows, ... maybe the application name!\n    * **onLoadFailure** (function): Here you can set what happens whenever the target URL of a window isn't accessible, meaning that the loading has failed, for whatever reason. By default a small message will be be displayed instead of the page (it basically loads the *loadFailure.html* file from the module directory). Here's an example: \n        ```javascript\n        windowManager.init({\n            'onLoadFailure': function(window){\n                window.loadURL('/404.html');\n                // -- or ---\n                window.write('\u003ch3\u003e Cannot load the requested page! \u003c/h3\u003e');\n            }\n        });\n        ```\n\n### `setDefaultSetup( setup )`\nThis method sets the default setup for the application windows, it basically creates a new setup template with the name \"default\", and marks it as the default. Example:\n```javascript\nwindowManager.setDefaultSetup({'width': 600, 'height': 450, 'position': 'right'});\n```\n**When creating a new window this setup will be used automatically, you can override this by passing FALSE as the setup template name.**\n\n### `createNew( name, title, url, setupTemplate, setup, showDevTools )`\nThis method, as the name suggests, creates a new window, it will create and return a new instance of the class [Window](#class-window). **All of the listed arguments up there are optional by the way**, even the url; you can omit it now and set it later. \n\n* **name** (string): The name of the new window, if omitted a serialized name will be used instead, like \"window_1\" ~\u003e \"window_2\" ~\u003e ...\n* **title** (string): The window title. If omitted the setup template 'title' property will be used, and if this property wasn't provided the `config.defaultWindowTitle` will be used instead. If all of that isn't set the document title will be used.\n* **url** (string): The targeted URL for the window, it could be a local file (file:// ... .html), or a URL (http:// ...). If the passed value here starts with \"/\" the value will be preceded by the \"appBase\" (which is the path to the application base, set in the config), also you can use `{appBase}` inside the passed value and it will be replaced with the application base path.\n* **setupTemplate** (string) The name of setup template you want applied to this new window. \"Setup Templates\" is a way of sharing preset setup properties with more than one window.\n* **setup** (object|string) [optional] The new window setup. **The full options list is available [here](https://electronjs.org/docs/api/browser-window)**.This module offers couple more options to use in the mix, but we will get to that later. BTW, as a shortcut you can pass the new window dimensions like this \"300x200\", where 300 is the width and 200 is the height!\n* **showDevTools** (boolean) Whether to show the developer tools offered by Chrome or not, for debugging. False by default.\n\nHere's an example:\n```javascript\nvar homeWindow = windowManager.createNew('home', 'Welcome ...', '/pages/home.html', false, {\n    'width': 600,\n    'height': 450,\n    'position': 'topLeft',\n    'layout': 'simple',\n    'showDevTools': true,\n    'resizable': true\n});\n\nhomeWindow.registerShortcut('CmdOrCtrl+N', function(window){\n    window.minimize();\n    windowManager.open( ... );\n\n}).open();\n```\nAs mentioned, beside the the setup options `BrowserWindow` offers we offer couple more:\n\n* **layout** (string) The name of the layout you want the window's content to be displayed inside.\n* **position** (string|array) This setup option sets the position of the window on the screen, **you can pass the x \u0026 y coordinates as an array (ex: [300, 200])**, or simply pass the position name, the available positions are: *top, right, bottom, left, topRight, topLeft, bottomRight, bottomLeft*. The default position by the way is \"center\".\n  ```javascript\n      var win = windowManager.createWindow(false, false, false, false, {'position': 'bottomRight'});\n  ```\n* **onLoadFailure** (function) This callback will be triggered whenever the URL loading fails.\n  ```javascript\n      var win = windowManager.open(false, false, false, false, {\n          'onLoadFailure': function(window){\n              window.close();\n          }\n      })\n  ```\nIf you don't set this a default callback will handle it, by showing a global \"Not available\" message page, this global callback can be set in windowManager.init()\n\n* **showDevTools** (boolean) Whether to show the dev tools or not.\n\n### `open( name, title, url, setupTemplate, setup, showDevTools )`\nThis is the same as the `createNew` method, except that it opens the window directly. Returns a [Window Object](#class-window) on successfully opening a window.\n\n### `importList( file )`\nUsing this method you can create more than one window instance, with the setup information retrieved from a JSON file. You will use it like this:\n```javascript\n// windows.json\n{\n    \"home\": { \"title\": \"Home\", \"url\": \"http:// ...\", \"setup\": { ... } },\n    \"about\": { \"title\": \"About\", ... }\n}\n\n// Import the window list\nwindowManager.importList('windows.json');\n\n// Open a window, by name\nwindowManager.get('home').open();\n```\n\n### `clone( name )`\nCreates a clone of the specified window and returns the `Window` class instance\n\n### `get( name )`\nReturns the `window` instance of the specified window\n```javascript\nvar win = windowManager.get('home');\nwin.resize(300, 200).restore();\n```\n\n### `getById( id )`\nReturns the `window` instance of the specified window by BrowserWindow instance's id attribute\n```javascript\nvar win = windowManager.getById(1);\nwin.close();\n```\n\n### `getCurrent()`\nReturns the `Window` instance of the currently-under-focus window\n```javascript\nwindowManager.getCurrent().close();\n```\n\n### `close( name )`\nCloses a window, by its name\n\n### `closeCurrent()`\nCloses the current window\n\n### `destroy( name )`\nDestroys the window instance, by its name\n\n### `closeAll()`\nCloses all the windows created by this module\n\n### `closeAllExcept( name )`\nCloses all the window, except for one, the one you pass its name\n\n### `maximize( [ name ] )`\nMaximizes a window. If name is specified it will target the named window. If left out it will target the currently focused window. If the window is already maximized it will restore.\n```javascript\n// Maximize focused window. Works well for window button functionality.\nwindowManager.maximize();\n\n// Target window named 'help'\nwindowManager.maximize('help');\n```\n\n### `minimize( [ name ] )`\nMinimizes a window. If name is specified it will target the named window. If left out it will target the currently focused window.\n```javascript\n// Minimize focused window. Works well for window button functionality.\nwindowManager.minimize();\n\n// Target window named 'help'\nwindowManager.minimize('help');\n```\n\n### `restore( name )`\nRestores a minimized window, by name\n\n### `devModeChoice( whenDevMode, whenNotDevMode )`\nThis method simply takes two values, the first is the one that goes when the development mode is on and the other is when it's off, and according to whether it's on or off, the corresponding value will be returned\n```javascript\nvar api = windowManager.devModeChoice({'key': ... }, {'key': ...});\n```\n\n## Class: windowManager.templates\nWhen creating a new window you will need to provide a basic setup; things like the width, height and the window URL (the targeted content). The available setup options are plenty, and in most cases you will find yourself repeating it with each window you create. **The \"Setup Templates\" feature will help you make presets of the setup properties you use and name them, and later when creating a new window you will just pass the template name and the associated setup will be applied.**\n```javascript\nwindowManager.templates.set('small', {\n    'width': 600,\n    'height': 350,\n    'resizable': true,\n    'layout': 'classy',\n    'showDevTools': true,\n    'title': 'App name, for small windows!', // Yeah, even the window title!\n    'onLoadFailure': function(){ ... },\n    'menu': { // Sets the window menu. Set to null for a window without a menu!\n        label: 'File',\n        submenu: [\n            {\n                label: 'New',\n                accelerator: 'CmdOrCtrl+N',\n                role: 'new',\n                click: function(){ ... }\n            },\n            {\n                label: 'Open',\n                accelerator: 'CmdOrCtrl+O',\n                role: 'open',\n                click: function(){ ... }\n            }\n        ]\n    }\n});\n\nwindowManager.open(false, false, 'welcom.html', 'small');\nwindowManager.open(false, false, 'byebye.html', 'small');\n```\nYou can set a default template for all the windows to inherit\n```javascript\nwindowManager.init({\n    'defaultSetupTemplate': 'small'\n});\n\nwindowManager.templates.set('small', { ... });\n```\nYou can override this option for a specific window by passing FALSE as the setupTemplate name.\n```javascript\nwindowManager.open('home', 'Welcome', '/pages/welcome.html', FALSE);\n```\n**Pass null to explicitly define the template in the next parameter!**\n```javascript\nwindowManager.open('home', 'Welcome', '/pages/welcome.html', null, { ... });\n```\n\n### `windowManager.templates.set( name, setup )`\nUse this method to create a new template, you provide a name and the preferred setup, and later you can use that name when you are creating a new window, to apply the specified setup.\n```javascript\nwindowManager.templates.set('big', {\n    'width': 1000,\n    'height': 600\n});\n```\n\n### `windowManager.templates.get( name )`\nFetches a setup template by name\n\n### `windowManager.templates.modify ( name, setup )`\nUse this method to modify the setup of a specific template, to override one or more of its properties\n```javascript\nwindowManager.templates.modify('big', {'height': 650});\n```\n\n### `windowManager.templates.getProperty ( name, property )`\nReturns the value of a specific property of the given template\n```javascript\nwindowManager.templates.getProperty('big', 'width');\n```\n\n## Class: windowManager.layouts\nA nice feature this module offer is \"Layouts\". Through this feature you can set a layout/theme/design for your application. If you are working on a multi-window app this feature will be very handy.\nThis feature doesn't offer much right now, but I will put more focus on in the next releases. **Here's how it works: you create a layout file, with all the assets and code you want, when you create a new window the content (HTML) of this window will be embeded/included within the layout code.** Thus you won't duplicate your code with each window; you will just include the window content withing a ready layout.\n```javascript\n// layout.html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    ....\n\u003c/head\u003e\n\u003cbody\u003e\n    \n    {{content}} \u003c!--This will be replaced with the window content--\u003e\n    \n    \u003cscript src=\"{{appBase}}scripts/bootstrap.js\"\u003e\u003c/script\u003e\n    \u003c!--{{appBase}} will be replaced with the application base path--\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n// welcome.html (the window content)\n\u003ch3\u003eWelcome ...\u003c/h3\u003e\n```\nOf course you can create more than one layout, and when creating a new window you chose which layout you want the window content included in. And of course you can set a default layout for all of the application windows.\n```javascript\nvar win = windowManager.createNew('home', 'Welcome ... ', '/pages/welcome.html', false, {'layout': 'simple'});\n// or \nwin.useLayout('simple');\n```\nTo set a default layout for the whole application you simple pass its name in the initiation config\n```javascript\nwindowManager.init({\n    'defaultLayout': 'simple'\n})\n```\nTo override this option for a specific window you will need to pass FALSE for the property \"layout\" when creating the window\n\n### `windowManager.layouts.add( name, path )`\nAdds a new layout, you need to provide the path to the layout file, and a name that represents this layout, so that you could use it when creating a new window.\n```javascript\nwindowManager.layouts.add('default', '/layouts/default.html'); // The \"/\" at the beginning = {appBase}\n```\n### `windowManager.layouts.get( name )`\nFetches a layout by name\n\n## Class: windowManager.sharedData\nThis class offers a simple way of sharing data between windows, you can simply set a value on window #1 and get it on window #2\n\n### `windowManager.sharedData.data` \nIs where the data itself is stored\n\n### `windowManager.sharedData.set( key, value )`\nStores a value by a key name\n```javascript\nwindowManager.sharedData.set('user', {'name': ' ... ', 'email': ' ... '});\n```\n\n### `windowManager.sharedData.fetch( key )`\nFetches a value, by key name\n```javascript\nwindowManager.sharedData.fetch('user');\n```\n\n### `windowManager.sharedData.watch( prop, callback )`\nYou can use this method to watch for changes in the saved data\n* **prop** Is the key you want to watch\n* **callback** Is the callback that will be triggered whenever the value of this property gets changed\n\n```javascript\nwindowManager.sharedData.watch('user', function(prop, action, newValue, oldValue){\n    console.log('The property: ', prop, ' was:', action, ' to: ', newValue, ' from: ', oldValue);\n});\n```\n\nThis feature is available using [WatchJS](https://github.com/melanke/Watch.JS), please visit the module docs for further details. Also, you can access WatchJS itself in case you needed the whole API like this:\n```javascript\nwindowManager.sharedData.watcher; // The WatchJS module\n\nvar watcher = windowManager.sharedData.watcher;\nwatcher.unwatch( ... );\n```\n\n### `windowManager.sharedData.unwatch( prop, callback )`\nStops watching for changes in the saved data.\n\n## Class: windowManager.bridge\n\u003e This is a simple feature to help you make your app more alive and connected windows-wise. You will be able to emit and listen to events inside the created windows.\n\nHere's an example:\n```javascript\n// On window \"home\"\nlet handler = windowManager.bridge.on('new_chat_message', function(event){\n    ...\n});\n\n// On window \"chats\"\nwindowManager.bridge.emit('new_chat_message', {'message': ' ... '});\n\n// On window \"home\"\nwindowManager.bridge.removeListener('new_chat_message', handler);\n```\n\n### `windowManager.bridge.emit( event, data, target )`\nThis method emits an event to whatever page listening for it\n* **event** The name of the event that will be emitted\n* **data** [optional] Any extra data you need to broadcast along with the event\n* **target** [optional] The name of the targeted. In case you are targeting a specific window.\n\n### `windowManager.bridge.on( event, callback )`\nThis method adds a listener for a specific `event`, and whenever this event is triggered the `callback` will be called, and return the handler added into the `event` listeners array.\n* **event** The name of the event the window will be watching for\n* **callback** The callback to call when the event is emitted. This call back will be passed 1 parameters with the following properties:\n    * **event** The event name\n    * **target** The name of the targeted window, if specified\n    * **emittedBy** The name of the window that emitted the event\n\nThis feature is basically a wrapper for NodeJs native EventEmitter class, which is used heavily almost every where inside Electron itself. Check it the [docs](https://nodejs.org/api/events.html#events_class_eventemitter) for extra knowledge about the subject. You also can access the EventEmitter used by this module simply by calling `windowManager.eventEmitter`\n\n```javascript\nwindowManager.eventEmitter.addListener( ... );\n```\n\n### `windowManager.bridge.addListener( event, callback )`\nThis method is the alias of `windowManager.brider.on`\n\n### `windowManager.bridge.removeListener (event, handler )`\nThis method remove the listener returned by `windowManager.bridge.on` or `windowManager.bridge.addListener`\n* **event** The event name\n* **handler** the handler returned by `windowManager.bridge.on` or `windowManager.bridge.addListener`\n\nThis feature is basically a wrapper for NodeJs native EventEmitter class, Check it the [docs](https://nodejs.org/api/events.html#events_class_eventemitter) for extra knowledge about the subject.\n\n```javascript\nwindowManager.eventEmitter.addListener( ... );\n```\n\n## Class: windowManager.utils\nThis object holds a couple of utility method, for module internal use, and for you if you need it. I will likely add more methods to this class later.\n\n### `windowManager.utils.getAppLocalPath()`\nReturns the path to the application directory.\n\n### `windowManager.utils.readyURL( url )`\nIt readies the given URL for use with in the module, basically it replaces the `/` prefix or the `{appBase}` string with the path to the application directory.\n\n### `windowManager.utils.resolvePosition( setup )`\nThis method takes a position name and returns the corresponding x \u0026 y coordinates, the accepted values are: \"top\", \"bottom\", \"right\", \"left\", \"topRight\", \"topLeft\", \"bottomRight\", \"bottomLeft\" and \"center\".\n* **setup** (object) The window setup object, inside which the \"*position*\", \"*width*\" and \"*height*\" properties must be present.\n\nYou probably wont be needing this method, but it's here just in case.\n\n---\n\n# Class: Window\n\u003e The `Window` class is basically the whole thing, [windowManager](#class-windowmanager) is merely an access point for its instances. Whenever you use `windowManager.createNew( ... )` or `windowManager.open( ... )` you are creating a new instance of `Window`.\n```javascript\nvar window = new Window( name, title, url, setupTemplate, setup, showDevTools );\n```\n\n**But don't try to use the above code, `Window` isn't available in your app scope**, use `windowManager.createNew/open` instead, and as you can see the arguments are the same in the 3 cases, **check out [windowManager.createNew](#createnew-name-title-url-setuptemplate-setup-showdevtools-) for more info on the arguments**.\n\n### `Window.name` \nStores the window name.\n\n### `Window.setup` \nStores the window setup object.\n\n### `Window.object`\nStores the `BrowserWindow` instance created, such that all electron-native methods can be used. \nSee [electron Window object docs](https://github.com/electron/electron/blob/master/docs/api/browser-window.md#instance-methods)\n```javascript\nwin.object.setFullScreen(false)\nwindowManager.get('win2').object.center()\n```\n\n### `Window.set( prop, value )`\nUpdates the window setup. You can either provide a property-value pair or pass an object to override the current setup.\n```javascript\nwin.set('width', 300);\nwin.set({'width': 300, 'height': 250});\n```\n\n### `create( url )`\nCreates the browserwindow instance.\n```javascript\nvar win1 = windowManager.createNew(false, false, 'win1.html');\nwin1.create();\nwin1.object.on(...);\nwin1.open();\n\n// or \nvar win2 = windowManager.createNew();\nwin2.create('win2.html');\nwin2.open();\n```\n\n### `open( url )`\nOpens/shows the created window.\n```javascript\nvar win1 = windowManager.createNew(false, false, 'win1.html');\nwin1.open();\n\n// or \nvar win2 = windowManager.createNew();\nwin2.open('win2.html');\n```\n\n### `focus()`\nMakes the window under focus.\n\n### `useLayout( name )`\nSets the layout to use in the window, by name.\n```javascript\nvar window = window.createNew( ... );\nwindow.useLayout('classy');\nwindow.open();\n```\n\n### `setURL( url )`\nSets the target URL for the window. To open a URL **after** the window is open use `loadURL()`.\n\n### `applySetupTemplate( name )`\nSets the setup template to use, by name.\n```javascript\nvar window = window.createNew( ... );\nwindow.applySetupTemplate('big');\nwindow.open();\n```\n\n### `loadURL( url, options )` \nSets the content of the opened window from the url. Same as with [WebContents](https://github.com/electron/electron/blob/master/docs/api/web-contents.md#contentsloadurlurl-options) you can use both local and remote targets. \n```javascript\nvar win = windowManager.createNew();\nwin.loadURL('file://' + __dirname + 'index.html');\n// or \nwin.loadURL('http://google.com');\n```\nThe same way you would open a url using any browser. Now, to make things easier you can set the base path to the application in the config (while initiating the module) and use this path in any URL-value you path to the module, `{appBase}`, or by simply starting the value with `/`.\n```javascript\nwin.loadURL('/pages/index.html');\n// or \nwin.loadURL('{appBase}pages/index.html');\n```\n\n### `html( code, options )`\nIt simply sets the HTML code of the window, instead of loading a url.\n```javascript\nwin.html('\u003ch3\u003e Electron is AWESOME \u003c/h3\u003e');\n```\n\n### `down()`\nIt simply takes the page down! It will trigger the `onLoadFailure` callback, which by default will force display a \"Not available\" message page. This method is called whenever the target url of the window isn't available, instead of displaying a blank page.\n\n### `content()`\nReturns `BrowserWindow`'s [webContents](https://electronjs.org/docs/api/web-contents) object for the window.\n```javascript\nwin.content().on('did-fail-load', function(){ ... });\nwin.content().downloadURL( ... )\nwin.content().reload()\nwin.content().print()\n```\n\n### `reload( ignoreCache )`\nReloads the URL of the window, if TRUE is passed the page will be reloaded with the cache ignored.\n```javascript\nwin.reload(); // With cache\nwin.reload(true); // Without cache\n```\n\n### `currentURL()`\nReturns the URL open inside the window.\n\n### `onReady( withTheDomReady, callback )`\nRegisters a callback that triggers when the page is ready. If you pass TRUE for the `withTheDomReady` argument the callback will trigger only when the DOM is ready, and not before.\n```javascript\nwin.onReady(true, function(window){\n    window.resize(600);\n});\n```\n\n### `execute( code )`\nExecutes JavaScript code on the window content.\n```javascript\nwin.execute(' alert(\" Hi! \") ');\n```\n\n### `goBack()`\nGoes back to the previous page, Electron is a browser after all!\n\n### `close()`\nCloses the window.\n\n### `maximize()`\nMaximizes the window. Restores if already maximized.\n\n### `minimize()`\nMinimizes the window.\n\n### `restore()`\nRestores the window back in focus.\n\n### `toFullScreen()`\nTakes the window to fullscreen.\n\n### `toggleDevTools( detached )`\nToggles the developer tools. **By default, and when the `devMode` is on you can open the developer tools by pressing `Ctrl + F12` on any window.**\n* **detached** (boolean) [optioanl] Whether to open the devTools in a separate window or not\n\n### `registerShortcut( accelerator, callback )`\nRegisters a keyboard shortcut on the window\n```javascript\nwin.registerShortcut('CmdOrCtrl+N', function(){\n    windowManager.open( ... );\n});\n```\nThis feature is available thanks to the  [electron-localshortcut](https://github.com/parro-it/electron-localshortcut) module. Here's more details on the [shortcuts codes](https://github.com/electron/electron/blob/master/docs/api/accelerator.md). The module itself can be access through `windowManager.shortcuts` in case you wanted to use more of it, to globally-register a new shortcut or something.\n```javascript\nwindowManager.shortcuts.unregisterAll();\n```\n\n### `move( x, y )`\nMoves the window to a specific x (and/or) y coordinates. You can also provide a position \"name\" and it will be resolved to the correct position according to the screen size and the window dimensions. The available position names are *top, right, bottom, left + topRight, topLeft, bottomRight, bottomLeft* \n```javascript\nwin.move(300, 200);\nwin.move('topLeft');\n```\n\n### `resize( width, height )`\nResizes the window to a specific width and/or height\n```javascript\nwin.resize(1000); // Only set the width\nwin.resize(800, 400);\n```\n\n---\n## Final notes\n* The development of this module is continuous via community [contributions](https://github.com/TamkeenLMS/electron-window-manager/pulls?q=).\n* You may find this module a bit redundant, but if you use Electron for complex multi-window projects you will probably need it.\n* **PLEASE if you have any comments or suggestions of any kind open a new [issue](https://github.com/TamkeenLMS/electron-window-manager/issues?q=)!**.\n* **The next releases** will ...\n    * put more focus on the **Layouts** feature, probably using [Handlebars](http://handlebarsjs.com/) to offer templating capabilities.\n    * offer more debugging tools and features.\n    * improve the documentation and the code examples.\n\nAnd yeah, THANKS GITHUB FOR ELECTRON, IT'S A DREAM COME TRUE.\n\n## License\n[MIT License](https://github.com/TamkeenLMS/electron-window-manager/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftamkeen-tms%2Felectron-window-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftamkeen-tms%2Felectron-window-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftamkeen-tms%2Felectron-window-manager/lists"}