WindowManager
WindowManager makes managing managing and communication between browser windows easier.

Source

Read the annotated source here

Overview

The following are the core features of a WindowManager instance.

Examples

Basic example
Inter window messaging
Animated Windows

API

Type Behavior
send sends a message by name to a given window
on subscribe to a message sent to the current window
popupWindow Opens a window with the given name and parameters like width, height, location etc
closeWindow Closes a window by name
focusWindow Focuses a window by name
setProperty sets a property of a window
getProperty gets a property of a window
deleteProperty deletes a property of a window
setProperties sets all properties on a window
getProperties gets all properties on a window
getWindow get a window object by name
getAllWindows gets an object containing all windows of a given parent
getCurrentWindow gets an object containing all windows of a given parent
setCurrentWindow set the current windows attributes like width, height, location etc of the current window in memory
clearMemory wipes the memory for the current namespace clean

send

Sends a message to a window.

Takes a 'name' parameter of the message that is the then triggered on the receiving window.

    // Can provide a 'name' parameter which is the name of the message to send
    // the 'to' parameter specifies who to send the message to
    windowManager.send({
        name: 'logout',
        to: 'dashboard'
    });
    // 'to' can also be an array of windowManager instance names
    windowManager.send({
        name: 'logout',
        to: ['dashboard', 'search']
    });
    // If the 'to' parameter is left out, the message is sent to all children 
    // within the current parent
    windowManager.send({
        name: 'logout'
    });
    // Can specify a different parent to target as well
    windowManager.send({
        name: 'logout'
        parent: 'myOtherApp'
    });
    // In order to send a message to an 'external' type window the 'parent' parameter must be 'external'
    windowManager.send({
        name: 'externalWindow'
        parent: 'external'
    });

on

Subscribe to a message sent to the current window. Takes a callback function that is passed an 'event object' along with additional arguments passed to the 'send'

    // Takes an event name and a callback function
   windowManager.on('logout', function(evt, additionalArg1, additionalArg2) {
        console.log(evt.from); // Name of the sender
        console.log(evt.to); // Name of the recipient
        console.log(evt.parent); // Name of the recipient parent
        console.log(evt.fromParent); // Name of the sender parent
    });

Subscribe to a message sent to the current window. Takes a callback function that is passed an 'event object' along with additional arguments passed to the 'send'

    // Takes an window name and location
    windowManager.popupWindow({
        location: 'http://www.mydomain.com/myPage1',
        name: 'myPage1'
    });

    // Also takes additional window property parameters
    windowManager.popupWindow({
        location: 'http://www.mydomain.com/myPage1',
        name: 'myPage1',
        width: 300,
        height: 500,
        resizeable: 1,
        left: 100,
        top: 200
    });

    // setting focus to true will focus the window to the foreground if that window is already open
    windowManager.popupWindow({
        location: 'http://www.mydomain.com/myPage1',
        name: 'myPage1',
        focus: true
    });

closeWindow

Closes a currently open window by name.

Note: This method will only work for pages that are popups. This will not work on browser tabs.

    // Closes a window by name
    windowManager.closeWindow('myPage1');

    // Can optionally specify a parent if not the current parent
    windowManager.closeWindow('myPage1', 'myOtherApp');

focusWindow

Brings a window that is already open to the foreground. Does this by either using a windows focus method if a reference to the window is available or reopening it if not.

Fires a focusedWindow event when done. Takes an options object with the following options.

Note: This method will only work for pages that are popups. This will not work on browser tabs.

    // Focus a window by name
    windowManager.focusWindow({
        name: 'myPage1'
    });

setProperty

Set a property of a window. These are persisted in memory

Defaults to the current window's properties unless otherwise specifying a name and/or a parent

    // Set a windows property by key
    windowManager.setProperty('color', 'blue');

    // Set another windows properties on another parent
    windowManager.getProperty('color', 'blue', 'myOtherWindow', 'myOtherParent');

getProperty

Get a persisted property of a window.

Defaults to the current window's properties unless otherwise specifying a name and/or a parent

    // Get a windows property by key
    windowManager.getProperty('color');

    // Get another windows properties on another parent
    windowManager.getProperty('color', 'myOtherWindow', 'myOtherParent');

deleteProperty

Delete a persisted property of a window.

Defaults to the current window's properties unless otherwise specifying a name and/or a parent

    // Get a windows property by key
    windowManager.deleteProperty('color');

    // Get another windows properties on another parent
    windowManager.deleteProperty('color', 'myOtherWindow', 'myOtherParent');

setProperties

Set all properties of a window. These are persisted in memory.

    // Set a windows properties as an object
    windowManager.setProperties({
        color: 'blue',
        count: 1
    });

    // Set another windows properties as an object
    windowManager.setProperties({
        color: 'blue',
        count: 1
    }, 'myOtherWindow', 'myOtherParent');

getProperties

Get all properties of a window.

    // Get a windows properties as an object
    windowManager.getProperties();

    // Set another windows properties as an object
    windowManager.getProperties('myOtherWindow', 'myOtherParent');

getWindow

Get the object representation of a window.

    // Get a window as an object
    windowManager.getWindow('myOtherWindow');

    // Get a window on another parent as an object
    windowManager.getWindow('myOtherWindow', 'myOtherParent');

getAllWindows

Get an object representation for all windows in a given parent

    // Get all windows in current parent
    windowManager.getAllWindows();

    // Get all windows in another parent
    windowManager.getAllWindows('myOtherParent');

getCurrentWindow

Get the object representation of the current window

    // Get the current window
    windowManager.getCurrentWindow();

setCurrentWindow

Set the windows attributes like width, height, location etc of the current window in memory

    // Set the current Window
    windowManager.setCurrentWindow();

clearMemory

Clears the memory for a given 'namespace'

    // Set the current Window
    windowManager.clearMemory();

Usage

There are 3 different types of WindowManager instances

Note: Only windows in the same localStorage 'namespace' are capable of interacting with each other

master

The main window associated with a set of windows.
  • When it opens, all "sub" windows associated with it are opened automatically.
  • A given 'namespace' in localStorage can have multiple "master" windows.
  • A master window can have multiple "sub" windows.
 // Example of initializing a 'master' WindowManager instance
 new WindowManager({
     // The name of the window used as its id
     name: 'parentPage',
     // The type of the window
     type: 'master'
      // The key used in localStorage
     namespace: 'windowManager01',
 });

sub

These are windows associated with a "master" window as their parent.
  • They are opened automatically when their parent is opened.
  • Their properties like width and height are persisted in memory and are reused when their are opened.
 // Example of initializing a 'sub' WindowManager instance
 new WindowManager({
     // The name of the window used as its id
     name: 'subPage1',
    // The name of its parent master window
     parent: 'parentPage',
     // The namespace key used in localStorage
     // Should match its parents key
     namespace: 'windowManager01',
 });

external

These are windows that are external to any "master" window.
  • Not associated with a parent "master" window
  • Not persisted in memory
  • Capable of communicating with all other windows in the same namespace
 // Example of initializing an 'external' WindowManager instance
 new WindowManager({
     // The name of the window used as its id
     name: 'externalPopup',
     // The type of the window 'external'
     type: 'external',
     // The namespace key used in localStorage
     namespace: 'windowManager01'
 });