Responsive Draggable Resizable Windows Manager - Golden Layout

Golden Layout is a jQuery based windows manager that helps developers create responsive, draggable, resizable, themeable, interactive dialog popups for modern UI/UX design.

More features:

• 2 themes: dark and light.
• Touch-enabled and mobile-friendly.
• Allows you to store the layout state in the local storage.
• Supports nested & stacked windows.
• Allows you to sync two layouts by serialisation.
• Custom header controls: minimize, maximize, close, open in new window, etc.
• Compatible with ReactJS and AngularJS.

Table Of Contents:

• Usage
• Options
• Properties
• API Methods
• Events

Basic usage:

1. Load the base stylesheet and a theme CSS in the document.

<!-- 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 windows (components) and specify the content type as follows. All possible types:

• 'row'
• 'column'
• 'stack'
• 'component'
• 'react-component'

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 new Golden Layout instance and pass the configs as follows:

var myLayout = new GoldenLayout(config);

4. Register the windows.

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

5. Initialize the plugin. Done.

myLayout.init();

6. All possible options 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 possible 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 methods.

/* 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
})

Changelog:

v2.6.0 (2022-09-26)

• Fixed add component tab positioning
• Removed the height property from .lm_drop_tab_placeholder in goldenlayout-base.less (and .scss). If your application uses a copy or derivative of this file, you will need to make the same change in your copy/derivative.
• Improved handling of rounding when calculating areas
• Reworked unload handling
• Improved component sizing
• Updated dependencies
• Added support for proper ComponentItemConfig in DragSource 

v2.5.0 (2022-03-06)

• Bugfixes
• Add Automatic Resizing

v2.4.0 (2021-10-24)

• A new binding method (embedding via events) which makes it even easier to integrate Golden-Layout into opinionated frameworks
• Fixes replaceComponent() 

v2.3.0 (2021-07-20)

• Added virtual component.

v2.2.1 (2021-05-29)

• Add src into package
• Fix DragProxy resize isses
• Enable and add first tests

v2.2.0 (2021-05-16)

• Fix popout bugs
• Re-add EventHub facility for multi-window communication
• Fix DragProxy item sizing

v2.1.2 (2021-04-30)

• Fix nested golden-layout instances in popouts
• Fix splitter drag consumed by browser
• Fix dragging resizing

v2.1.1 (2021-04-16)

• Added touch support

v2.1.0 (2021-04-06)

• Readded popout functionality
• Added popInOnClose function
• Fixes deepExtend when run into multiple execution contexts
• Fixes sided headers

v2.0.3 (2021-03-30)

• Added "show" EventEmitter event which behaves the same as "shown"
• Marked the "shown" EventEmitter event as deprecated

v2.0.2 (2021-02-27)

• Fix dragging of first content item within a stack.
• Fix reorderEnabled can't be changed after initialization.

v2.0.1 (2021-02-24)

• Fix DragSource not working
• newComponent() and addComponent() type functions in LayoutManager, Stack and RowOrColumn have a new title parameter. This parameter is optional however it is not the last optional parameter.
• LayoutManager.createDragSource() has been renamed to LayoutManager.newDragSource(). This is to make it more obvious that it is paired with LayoutManager.removeDragSource()
• LayoutManager.newDragSource() now only will create a ComponentItem. Its parameters have been changed to reflect that.
• TypeScript definition has been updated to remove many private declarations which should not have been included.

---

This awesome jQuery plugin is developed by golden-layout. For more Advanced Usages, please check the demo page or visit the official website.