Responsive Draggable Resizable Windows Manager - Golden Layout

Responsive Draggable Resizable Windows Manager - Golden Layout
File Size: 6.63 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.createDragSource(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
})

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