Electron-window-manger NPM

electron-window-manger

a window manger for electron

this module makes commination between windows much much easer

skip to the API

you can download this example at the github repo at a dir called test

in this example we will make 3 windows

the main one witch opens the first one
the first one witch opens a second one
the second one witch have an input to update a h1 in the main and the first windows

main.js:

// requiring electron
const { app, BrowserWindow } = require('electron');
// requiring electron-window-manger as winManger for short
const winManger = require("electron-window-manger");
// assigning the win var
let win;

function createWindow() {
  // making the window normally
  win = new BrowserWindow(
    {
      width: 512,
      height: 380,
      webPreferences: {
        nodeIntegration: true
      }
    }
  );
  // loading the file
  win.loadFile("index.html");
  // opening the dev tools
  win.webContents.openDevTools();

  // this method is tilling electron-window-manger to
  // make this windows available for us to use
  winManger.assignWindows(
    [
      {
        name: "main", // the main window
        window: win   // to use it you should use window prop
      },
      {
        name: "first", // the name of the window
                       // Note that electron-window-manger will
                       // automatically use the name + .html
                       // for your html file
        options: {     // the options for the window
          width: 400,
          height: 400
        }
      },
      {
        file: "second.html", // the file name of the window
                            // Note that electron-window-manger
                            // will automatically use the file
                            // name without .html 
                            // for your window name
        options: {
          width: 400,
          height: 400
        }
      }
    ]
  );
}

app.on("ready", createWindow);

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  ...
  <title>test doc</title>
</head>

<body>
  <!-- the button we click to open the first window -->
  <button onclick="createWindow()">start first window</button>
  <!-- the h1 we that will change the text of it when we receive text -->
  <h1></h1>
  <script>
    // calling electron window manger
    const winManger = require("electron-window-manger");

    function createWindow() {
      // showing the first we assigned .assignWindows window in the main.js
      winManger.show("first");
    }
    // listening to receive text
    winManger.on(
      "text",
      function (e, args) {
        // changing the text of the h1
        document.querySelector("h1").innerHTML = args.text;
      }
    );
  </script>
</body>

</html>

first.html:

<!DOCTYPE html>
<html lang="en">

<head>
  ...
  <title>First</title>
</head>

<body>
  HEllo form first.html
  <button onclick="openSecond()">start second</button>
  <h1></h1>
  <script>
    // perry much doing the same thing as index.html
    const winManger = require("electron-window-manger");

    function openSecond() {
      // showing the second window
      winManger.show("second");
    }

    winManger.on(
      "text",
      function (e, args) {
        document.querySelector("h1").innerHTML = args.text;
      }
    );

  </script>
</body>

</html>

second.html:

<!DOCTYPE html>
<html lang="en">

<head>
  ...
  <title>Second</title>
</head>

<body>
  type here to update on the text on the other windows
  <br>
  <!-- making an input to send text to other windows -->
  <input type="text">
  <!-- making a clear button -->
  <button onclick="clearText()">clear</button>
  <script>
    // requiring electron-window-manger
    const winManger = require("electron-window-manger");
    
    function clearText() {
      // clearing the text of the input
      document.querySelector("input").value = "";
      // sending the text of it to other windows
      sendToWins();
    }

    function sendToWins() {
      // setting a Timeout to make sure that input value
      // was updated 
      setTimeout(
        () => {
          // getting the text of the input
          const text = document.querySelector("input").value;
          // sending an event to first, main windows called text
          // and the arg of the text
          // as easy as that
          winManger.sendTo(
            ["first", "main"],
            "text",
            { text }
          );
        },
        100
      );
    }
    // setting the input onkeydown to sendToWins
    document.querySelector("input").onkeydown = sendToWins;
  </script>
</body>

</html>

api

.assignWindows(windows: { name?: String, file?: String, options?: Electron.BrowserViewConstructorOptions, window?: Electron.BrowserWindow }[], defaultCloseAll = true)

@param windows

NOTE: you should assign a name or file or both

name

the name of the window that you will use to refer to it (by default its the file property with ".html")

file

the file of the window (by default it's the name property + .html)

window

if you already have created the window you should assign this property to that window

@param defaultCloseAll = true

if this it's true this will close all the other windows if the main one is closed

.show(winName)

show the window with the given name

.hide(winName)

hide the window with the given name

.toggle(winName)

toggle the window with the given name

.on(event: String, callback: Electron.IpcRendererEvent)

listening to an event and calling the callback

.sendTo(winNames: String | String[], events: String | String[], args: any)

send all events to all windows

.closeAll()

closes all the window that were given by .assignWindows

electron window manger

1.0.0

6 years ago