Multi-Window Layout Manager For Web Applications | Golden Layout

More advantages:

• Two topics: Darkness and Light.
• Touch and mobile-friendly.
• It allows you to store layout state in local storage.
• Supports nested and stacked windows.
• It allows you to synchronize two layouts in sequence.
• Custom header controls: minimize, maximize, close, open in a new window, etc.
• Compatible with ReactJS and AngularJS.

How to make use of it:

1. Load the bottom stylesheet and a theme CSS within the doc.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="goldenlayout-base.css" />
<!-- Dark Theme -->
<link rel="stylesheet" href="goldenlayout-dark-theme.css" />
<!-- Light Theme -->
<link rel="stylesheet" href="goldenlayout-light-theme.css" />

2. Create home windows (elements) and specify the content material sort as follows.

var config = {
    content: [{
      type: 'row',
      content: [{
        type: 'component',
        componentName: 'example',
        componentState: { text: 'Component 1' } 
      }, {
        type: 'component',
        componentName: 'example',
        componentState: { text: 'Component 2' } 
        }, {
        type: 'component',
        componentName: 'example',
        componentState: { text: 'Component 3' } 
      }] 
    }] 
};

3. Create a brand new Golden Layout occasion and cross the configs.

var myLayout = new GoldenLayout(config);

4. Register the home windows.

myLayout.registerComponent('example', function (container, state) {
  container.getElement().html('<h2>' + state.text + '</h2>');
});

5. Initialize the plugin.

myLayout.init();

6. All doable choices to config the windows.

var myLayout = new GoldenLayout({
    openPopouts: [],
    settings: { // global settings
      hasHeaders: true,
      constrainDragToContainer: true,
      reorderEnabled: true,
      selectionEnabled: false,
      popoutWholeStack: false,
      blockedPopoutsThrowError: true,
      closePopoutsOnUnload: true,
      showPopoutIcon: true,
      showMaximiseIcon: true,
      showCloseIcon: true,
      responsiveMode: 'onload' // Can be onload, always, or none.
    },
    dimensions: {
      borderWidth: 5,
      minItemHeight: 10,
      minItemWidth: 10,
      headerHeight: 20,
      dragProxyWidth: 300,
      dragProxyHeight: 200
    },
    labels: { // custm labels
      close: 'close',
      maximise: 'maximise',
      minimise: 'minimise',
      popout: 'open in new window',
      popin: 'pop in',
      tabDropdown: 'additional tabs'
    },
    content: [{
      type: 'component',
      componentName: 'someName',
      componentState: { some: 'value' },
      content: [], // windows here
      id: 'some id',
      width: 30,
      height: 30,
      isClosable: true,
      title: 'some title',
      activeItemIndex: 1
    }]
});

7. All doable properties.

/* Props for GoldenLayout */
// the top item
myLayout.root
// DOM element containing the layout
myLayout.rootcontainer
// true if is initialized
myLayout.isInitialised
// configs
myLayout.config
// currently selected items
myLayout.selectedItem
// outer width of the layout
myLayout.width
// outer height of the layout
myLayout.height
// an array of BrowserWindow instances
myLayout.openPopouts
// true if the layout has been opened as a popout by another layout
myLayout.isSubWindow
// event hub
myLayout.eventHub
/* Props for Items (Layout content) */
// configs
item.config
// item type
item.type
// an array of child items
item.contentItems
// parent item
item.parent
// item id
item.id
// true if is initialized
item.isInitialised
// true if the item is maximised
item.isMaximised
// true if the item is the layout's root item
item.isRoot
// true if the item is a row
item.isRow
// true if the item is a column
item.isColumn
// true if the item is a stack
item.isStack
// true if the item is a component
item.isComponent
// a reference to the layoutManager that controls this item
item.layoutManager
// the item's outer element
item.element
// the item's inner element. 
item.childElementContainer
/* Props for Container */
// container width
item.width
// container height
item.height
// parent container
item.parent
// tab control for this container
item.tab
// container title
item.title
// A reference to the GoldenLayout instance this container belongs to
item.layoutManager
// true if the item is currently hidden
item.isHidden
/* Props for Browser Window */
// true if is initialized
window.isInitialised
/* Props for Header */
// a reference to the LayoutManager instance
header.layoutManager
// parent element
header.parent
// an array of tabs
header.tabs
// currently selected activeContentItem
header.activeContentItem
// outer element of this Header
header.element
// tab container
header.tabsContainer
// element containing the close, maximise and popout button
header.controlsContainer
/* Props for Tabs */
// true if is the selected tab
tab.isActive
// a reference to the header
tab.header
// a reference to the content item
tab.contentItem
// outer element of this tab
tab.element
// title element
tab.titleElement
// true if is active
tab.isActive

8. API strategies.

/* Methods for GoldenLayout */
// Constructs a new layout
myLayout = new GoldenLayout(configuration, container);
// Registers a new component
myLayout.registerComponent( name, component );
// Initialize the plugin
myLayout.init();
// Returns the current state of the layout and its components as a serialisable object.
myLayout.toConfig();
// Gets the component registered with registerComponent().
myLayout.getComponent(name);
// Updates the size
myLayout.updateSize(width, height);
// Destroy the layout
myLayout.destroy();
// Creates new windows
myLayout.createContentItem(itemConfiguration, parent);
// Creates a new popout
myLayout.createPopout(configOrContentItem, dimensions, parentId, indexInParent);
// Turns a DOM element into a dragSource, meaning that the user can drag the element directly onto the layout where it turns into a contentItem.
myLayout.newDragSource(element, itemConfiguration);
// Selects a contentItem
myLayout.selectItem(contentItem);
// Minify/unminify configs
GoldenLayout.minifyConfig(config);
GoldenLayout.unminifyConfig(minifiedConfig);
/* Methods for Items (Layout content) */
// Adds child items
item.addChild(itemOrItemConfig, index);
// Removes an item
item.removeChild(contentItem, keepChild);
// Replaces an item
item.replaceChild(oldChild, newChild);
// Updates the item size
item.setSize();
// Sets title
item.setTitle(title);
// Recursively call methods on items in a tree
item.callDownwards(functionName, functionArguments, bottomUp, skipSelf);
// Emits an event that bubbles up the item tree until it reaches the root element (and after a delay the layout manager);
item.emitBubblingEvent(name);
// Similar to the item.parent.removeChild(item)
item.remove();
// Removes the item from its current position in the layout and opens it in a window
item.popout();
// Maximizes the item
item.toggleMaximise();
// Selects the item
item.select();
// Deselects the item
item.deselect();
// Checks if has ID
item.hasId(id);
// Sets active item
item.setActiveContentItem(contentItem);
// Gets active item
item.getActiveContentItem();
// Add an unique ID to the item
item.addId(id);
// Removes the ID
item.removeId(id);
// Get items by a filter
item.getItemsByFilter(filterFunction);
// Gets items by ID
item.getItemsById(id);
// Gets items by content type
item.getItemsByType(type);
// Gets components by name
item.getComponentsByName(componentName);
/* Methods for Container */
// Gets container's elements
container.getElement();
// Sets states
container.setState(state);
// Extends states
container.extendState(state);
// Gets states
container.getState();
// Hides the container
container.hide();
// Shows the container
container.show();
// Sets container size
container.setSize(width, height);
// Sets container title
container.setTitle(title);
// Close the container
container.close();
/* Methods for Header */
// Sets active item
header.setActiveContentItem(contentItem);
// Create a new tab
header.createTab(contentItem, index);
// Removes a tab
header.removeTab(contentItem);
/* Methods for Tab */
// Sets tab title
tab.setTitle(title);
// Sets active tab
tab.setActive(isActive);

9. Event handlers.

on( eventName, callback, context )
emit( eventName, arg1, arg2, ...argN )
trigger( eventName, arg1, arg2, ...argN )
unbind( eventName, callback, context )
off( eventName, callback, context )
/* Methods for GoldenLayout */
myLayout.on('stateChanged', function(){
  // do something
})
myLayout.on('titleChanged', function(){
  // do something
})
myLayout.on('activeContentItemChanged', function(){
  // do something
})
myLayout.on('itemDestroyed', function(){
  // do something
})
myLayout.on('itemCreated', function(){
  // do something
})
myLayout.on('componentCreated', function(){
  // do something
})
myLayout.on('rowCreated', function(){
  // do something
})
myLayout.on('columnCreated', function(){
  // do something
})
myLayout.on('stackCreated', function(){
  // do something
})
/* Methods for Container */
container.on('open', function(){
  // do something
})
container.on('resize', function(){
  // do something
})
container.on('destroy', function(){
  // do something
})
container.on('close', function(){
  // do something
})
container.on('tab', function(){
  // do something
})
container.on('show', function(){
  // do something
})
container.on('hide', function(){
  // do something
})
/* Methods for Browser Window */
window.on('initialised', function(){
  // do something
})
window.on('closed', function(){
  // do something
})

Responsive Draggable Resizable Windows Manager, Golden Layout Plugin/Github

See Demo And Download