Appwork

Layouts / Layout helpers

Layout helpers allow you to easily set layout options and get current layout info. See also layout options. 
Example:

window.layoutHelpers.toggleCollapsed()
getLayoutSidenav()
Returns the .layout-sidenav element (if exists). Otherwise returns null. 
getSidenav()
Returns the .sidenav.layout-sidenav element or .sidenav element within .layout-sidenav (if exists). Otherwise returns null. 
getLayoutNavbar()
Returns the .layout-navbar element (if exists). Otherwise returns null. 
getLayoutFooter()
Returns the .layout-footer element (if exists). Otherwise returns null. 
getLayoutContainer()
Returns the .layout-container element (if exists). Otherwise returns null. 
isSmallScreen()
Returns true if the window width is less than 992px (lg breakpoint).
Run:
› isSmallScreen() 
isLayout1()
Returns true if the current layout is .layout-1.
Run:
› isLayout1() 
isCollapsed()
Returns true if the layout sidenav is collapsed.
Run:
› isCollapsed() 
isFixed()
Returns true if the layout position is fixed.
Run:
› isFixed() 
isOffcanvas()
Returns true if the current layout is offcanvas.
Run:
› isOffcanvas() 
isNavbarFixed()
Returns true if the layout navbar position is fixed.
Run:
› isNavbarFixed() 
isFooterFixed()
Returns true if the layout footer position is fixed.
Run:
› isFooterFixed() 
isReversed()
Returns true if layout is reversed.
Run:
› isReversed() 
setCollapsed(collapsed, animate = true)
Collapse / expand layout sidenav.
Run:
› setCollapsed(false, true) › setCollapsed(true, true) › setCollapsed(false, false) › setCollapsed(true, false) 
toggleCollapsed(animate = true)
Toggle layout sidenav.
Run:
› toggleCollapsed(true) › toggleCollapsed(false) 
setPosition(fixed, offcanvas)

Set layout position. › collapse sidenav

Note: If the layout position is fixed and the current layout is .layout-1, the layout navbar position also will be fixed.
Run:
› setPosition(false, false) › setPosition(true, false) › setPosition(false, true) › setPosition(true, true) 
setNavbarFixed(fixed)
Set layout navbar position. › reset layout position
Run:
› setNavbarFixed(true) › setNavbarFixed(false) 
setFooterFixed(fixed)
Set layout footer position.
Run:
› setFooterFixed(true) › setFooterFixed(false) 
setReversed(reversed)
Reverse layout.
Run:
› setReversed(true) › setReversed(false) 
update()
Update layout. 
setAutoUpdate(enable)
Update layout on window resize. 
on(event, callback)

Add an event listener. You can set listener namespace using the next syntax: {EventName}.{Namespace}.

// Subscribe to `resize` event.
// No namespace defined.
window.layoutHelpers.on('resize', function() {
  ...
});

// Subscribe to `resize` event
// with `page-1` namespace.
window.layoutHelpers.on('resize.page-1', function() {
  ...
});

off(event)

Remove an event listener. Will remove only events with given namespace, otherwise will remove all events without namespace.

// Remove all `resize` listeners
// without namespace.
window.layoutHelpers.off('resize');

// Remove all `resize` listeners
// with `page-1` namespace.
window.layoutHelpers.off('resize.page-1');

init()
Performs layoutHelpers initialization. Invoked automatically after the page loaded. You need to call this method only if the destroy() method called before. If layoutHelpers is already initialized, nothing will happen. 
destroy()
Remove bound events, clean markup and disable layout auto update.
Will remove all bound events except init events. You will need unbind init events manually using the off() method.
Events

You can subscribe / unsubscribe events in two ways:

  1. Using the on() / off() methods (preferred way);
  2. Using window.addEventListener('layout{EventName}', ...) / window.removeEventListener('layout{EventName}', ...).
The destroy() method will remove only events bound using the on() method. So, after destroy, you will need to manually remove events bound using window.addEventListener. 
Examples:

// - Using the on() / off() methods, without namespace:

// Subscribe to `resize` event.
window.layoutHelpers.on('resize', function() {
  ...
});

// Unsubscribe `resize` event.
window.layoutHelpers.off('resize');


// - Using the on() / off() methods, with `page-1` namespace:

// Subscribe to `resize` event.
window.layoutHelpers.on('resize.page-1', function() {
  ...
});

// Unsubscribe `resize` event.
window.layoutHelpers.off('resize.page-1');


// - Using window.addEventListener / window.removeEventListener:

function resizeCallback() {
  ...
}

// Subscribe to `resize` event.
window.addEventListener('layoutresize', resizeCallback, false);

// Unsubscribe `resize` event.
window.removeEventListener('layoutresize', resizeCallback, false);
Available events:
Event Description
init Triggered after layoutHelpers initialization completed.
toggle Triggered after layout sidenav collapsed / expanded.
resize Delayed window resize event. Default resize event delay: 200ms