Properties

root

The topmost item in the layout item tree. In browser terms: Think of the Strelit Layout instance as window object and of goldenLayout.root as the document.

container

A reference to the (jQuery) DOM element containing the layout

isInitialised

True once the layout item tree has been created and the initialised event has been fired.

config

A reference to the current, extended top level config.

selectedItem

The currently selected item or null if no item is selected. Only relevant if settings.selectionEnabled is set to true.

width

The current outer width of the layout in pixels

height

The current outer height of the layout in pixels

openPopouts

An array of BrowserWindow instances

isSubWindow

True if the layout has been opened as a popout by another layout

eventHub

A singleton instance of EventEmitter that works across windows

Events

initialised

Fired after layout.init() has been called and the layout tree has been created.

stateChanged

Fired whenever something happens that updates the state of the layout (as returned by layout.toConfig)

windowOpened

Fired when a new popout window was opened.

windowClosed

Fired when a previously created popout window was closed.

selectionChanged

Fired when the user selects a new / different item. Only relevant if settings.selectionEnabled is true.

itemDestroyed

Fired whenever an item gets destroyed.

itemCreated

Fired whenever an item is created.

componentCreated

Fired whenever a component is created.

rowCreated

Fired whenever a row is created.

columnCreated

Fired whenever a column is created.

stackCreated

Fired whenever a stack is created.

tabCreated

Fired whenever a tab is created.

StrelitLayout( configuration, container )

argument	type	optional	default	description
configuration	configuration	false	-	A Strelit Layout configuration object
container	DOM | jQuery element	true	document.body	The DOM element the layout will be initialised in

Constructs a new layout. The simplest use case would look something like this

myLayout = new StrelitLayout({
    content:[{
        type: 'component',
        componentName: 'sayHi',
        componentState: { name: 'Wolfram' }
    }]
});
myLayout.registerComponent( 'sayHi', function( container, state ){
    container.getElement().text( 'Hi ' + state.name );
});
myLayout.init();

registerComponent( name, component )

argument	type	optional	default	description
name	String	false	-	The name of the component, as referred to by componentName in the component configuration.
component	Constructor | Function	false	-	A constructor or factory function. Will be invoked with new and two arguments, a container object and a component state.

Registers either a component constructor or a component factory function with StrelitLayout. registerComponent is the counterpart to the componentName and componentState config keys in the item config.

Here's how it hangs together:

// Write your StockChart component constructor
StockChartComponent = function( container, state ) {
    //container will be an instance of Container (Container.html)
};

// Register it with your Strelit Layout instance
myLayout.registerComponent( 'StockChart', StockChartComponent );

//Tell Strelit Layout where to create an instance of the component in your config
{
    componentName: 'StockChart',
    componentState: { stocks: [ 'APPL', 'GOOG' ] }
}

Alternatively you can provide a factory function.

myLayout.registerComponent( 'StockChart', function( container, state ){
    //For instance if you're using the same chart component and just pass the type as an argument
    return new GenericChart( 'stock', state );
});

init()

Renders the layout into the container. If init() is called before the document is ready it attaches itself as a listener to the document and executes once it becomes ready.

toConfig()

Returns the current state of the layout and its components as a serialisable object.

getComponent( name )

argument	type	optional	default	description
name	String	false	-	The name of a previously registered component

Returns a component that was previously registered with layout.registerComponent().

updateSize(width, height)

argument	type	optional	default	description
width	Integer	true	The container elements width	The outer width the layout should be resized to
height	Integer	true	The container elements height	The outer height the layout should be resized to

Resizes the layout. If no arguments are provided Strelit Layout measures its container and resizes accordingly.

destroy()

Destroys the layout. Recursively calls destroy on all components and content items, removes all event listeners and finally removes itself from the DOM.

createContentItem( itemConfiguration, parent )

argument	type	optional	default	description
itemConfiguration	Object	false	-	An item configuration (can be an entire tree of items)
parent	Item	true	-	A parent item

Creates a new content item or tree of content items from configuration. Usually you wouldn't call this directly, but instead use methods like layout.createDragSource(), item.addChild() or item.replaceChild() that all call this method implicitly.

createPopout( configOrContentItem, dimensions, parentId, indexInParent )

argument	type	optional	default	description
configOrContentItem	Strelit Layout config or contentItem	false	-	The content item or config that will be created in the new window. If a item is provided its config will be read, if config is provided, only the content key will be used
dimensions	Object	false	-	A map containing the keys left, top, width and height. Left and top can be negative to place the window in another screen.
parentId	String	true	null	The id of the item within the current layout the child window's content will be appended to when popIn is clicked
indexInParent	Number	true	null	The index at which the child window's contents will be appended to

Creates a new popout window with configOrContentItem as contents at the position specified in dimensions

/*
 * Open a popout with testComponent as content.
 * Since parentId and indexInParent aren't specified
 * the component will be appended to the topmost
 * layout element if popIn() is called
 */
myLayout.createPopout({
    componentName: 'testComponent', 
    type: 'component'
}, {
    width: 200, 
    height: 300, 
    left: 400, 
    top: 100
});

createDragSource( element, itemConfiguration )

argument	type	optional	default	description
element	DOM or jQuery element	false	-	The DOM element that will be turned into a dragSource
itemConfiguration	Object	false	-	An item configuration (can be an entire tree of items)

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.

selectItem( contentItem )

argument	type	optional	default	description
contentItem	Object	false	-	A ContentItem instance

If settings.selectionEnabled is set to true, this allows to select items programmatically.

StrelitLayout.minifyConfig( config )

argument	type	optional	default	description
config	Object	false	-	A Strelit Layout configuration object

Static method on the Strelit Layout constructor! This method will iterate through a Strelit Layout config object and replace frequent keys and values with single letter substitutes.

StrelitLayout.unminifyConfig( minifiedConfig )

argument	type	optional	default	description
config	Object	false	-	A minified Strelit Layout configuration object

Static method on the Strelit Layout constructor! This method will reverse the minifications of StrelitLayout.minifyConfig.