import {PushMenuLayout} from 'infamous/src/legacy/PushMenuLayout.js'

public class | source

PushMenuLayout

Extends:

* → PushMenuLayout

A scenegraph with two Molecule leafnodes: the menu area and the content area. The menu area is hidden beyond the edge of the screen while the content area is visible. Swiping in from the edge of the screen reveals the menu, putting the content area out of focus. A mouse can also be used, and hovering near the edge of the screen also reveals the menu.

Note: This layout is mostly useful if it exists at the root of a context so that the menu is clipped when it is closed (off to the side), otherwise the menu will be visible beyond the boundary of the container that contains the PushMenuLayout.

Note: If you've called openMenu or closeMenu with a callback, the callback will be canceled if a drag or hover on the menu happens before the animation has completed. Please open an issue on GitHub if you have any opinion against this. :) Maybe we can add a boolean option for this behavior.

TODO: Embed working example here.

Constructor Summary

Public Constructor
public	constructor(options: Object) Creates a new PushMenuLayout.

Member Summary

Public Members
public	alignment: *
public	animationTransition: *
public	contentMol: *
public	contentWidth: *
public	fadePlane: *
public	fadeStylesheet: *
public	isAnimating: boolean
public	isBeingDragged: boolean
public	isClosing: boolean
public	isOpen: boolean
public	isOpening: boolean
public	mainMol: *
public	menuContentMol: *
public	menuMol: *
public	menuTouchPlane: *
public	options: *
public	touchSync: *
public	transitionCallback: *

Method Summary

Public Methods
public	closeMenu(callback: Function, cancelPreviousCallback: boolean) Closes the menu.
public	openMenu(callback: Function, cancelPreviousCallback: boolean) Opens the menu.
public	render(): *
public	resetOptions() See Molecule.resetOptions
public	setContent(node: module: famous/src/core/RenderNode) Add a scenegraph to the content area of the PushMenuLayout.
public	setMenu(node: module: famous/src/core/RenderNode) Add a scenegraph to the menu area of the PushMenuLayout.
public	setOptions(newOptions: *) See Molecule.setOptions
public	toggleMenu(callback: Function, cancelPreviousCallback: boolean) Toggles the menu open or closed.

Private Methods
private	_animate(targetState: String, callback: Function) Animates the menu to it's target state.
private	_createComponents() Creates the menu area, content area, `Plane` for the fade effect, etc.
private	_haltAnimation(cancelCallback: boolean) Halts the current animation, if any.
private	_initializeEvents() Sets up the events for the touch and mouse interaction that opens and closes the menu.

Public Constructors

public constructor(options: Object) source

Creates a new PushMenuLayout.

Params:

Name Type Attribute Description

options

Name	Type	Attribute	Description
options	Object		The options to instantiate a `PushMenuLayout` with. TODO v0.1.0: Handle `PushMenuLayout`-specific user options. Currently they just get passed into super() for the Molecule constructor to handle.

Object

The options to instantiate a PushMenuLayout with.

TODO v0.1.0: Handle PushMenuLayout-specific user options. Currently they just get passed into super() for the Molecule constructor to handle.

Public Members

public alignment: * source

public animationTransition: * source

public contentMol: * source

public contentWidth: * source

public fadePlane: * source

public fadeStylesheet: * source

public isAnimating: boolean source

public isBeingDragged: boolean source

public isClosing: boolean source

public isOpen: boolean source

public isOpening: boolean source

public mainMol: * source

public menuContentMol: * source

public menuMol: * source

public menuTouchPlane: * source

public options: * source

public touchSync: * source

public transitionCallback: * source

Public Methods

public closeMenu(callback: Function, cancelPreviousCallback: boolean) source

Closes the menu.

Params:

Name	Type	Attribute	Description
callback	Function		The function to be called when the animation finishes.
cancelPreviousCallback	boolean	optional default: false	This is optional. If true, then the callback of a previous open or close animation will be canceled if that animation was still inprogress when this method is called, otherwise the callback of the previous open or close animation will be fired immediately before the animation for this animation begins.

public openMenu(callback: Function, cancelPreviousCallback: boolean) source

Opens the menu.

Params:

Name	Type	Attribute	Description
callback	Function		The function to be called when the animation finishes.
cancelPreviousCallback	boolean	optional default: false	This is optional. If true, then the callback of a previous open or close animation will be canceled if that animation was still inprogress when this method is called, otherwise the callback of the previous open or close animation will be fired immediately before the animation for this animation begins.

public render(): * source

Return:

public resetOptions() source

See Molecule.resetOptions

public setContent(node: module: famous/src/core/RenderNode) source

Add a scenegraph to the content area of the PushMenuLayout. You can put anything you want into the content area (magical 3D things for example), just be careful not to let them cover the menu or you'll block the user from interacting with the menu.

Params:

Name	Type	Attribute	Description
node	module: famous/src/core/RenderNode		A scenegraph, i.e. a RenderNode with stuff in it. TODO: Accept plain renderables, f.e. Surfaces, etc. This change requires also modifying the code in this.render() to account for renderables. TODO: Make a sibling method to reset the content area.

Name

Type

Attribute

Description

node

module: famous/src/core/RenderNode

A scenegraph, i.e. a RenderNode with stuff in it.

TODO: Accept plain renderables, f.e. Surfaces, etc. This change requires also modifying the code in this.render() to account for renderables.

TODO: Make a sibling method to reset the content area.

public setMenu(node: module: famous/src/core/RenderNode) source

Add a scenegraph to the menu area of the PushMenuLayout. If the object that you pass into setMenu is an infamous component, or a famo.us Surface, then it's events will be piped to this PushMenuLayout's input sync so that the user can open and close the menu with touch or mouse. General advice here would be to keep whatever you put into the menu contained within the boundaries of the menu or you might have touch and mouse interaction outside of the menu.

Params:

Name	Type	Attribute	Description
node	module: famous/src/core/RenderNode		A scenegraph, i.e. a RenderNode with stuff in it. TODO: Accept plain renderables, f.e. Surfaces, etc. TODO: Remove old content before adding new content.

Name

Type

Attribute

Description

node

module: famous/src/core/RenderNode

A scenegraph, i.e. a RenderNode with stuff in it.

TODO: Accept plain renderables, f.e. Surfaces, etc.

TODO: Remove old content before adding new content.

public setOptions(newOptions: *) source

See Molecule.setOptions

Params:

Name	Type	Attribute	Description
newOptions	*

public toggleMenu(callback: Function, cancelPreviousCallback: boolean) source

Toggles the menu open or closed. If the menu is open or is opening, then it will now start closing, and vice versa.

Params:

Name	Type	Attribute	Description
callback	Function		The function to be called when the animation finishes.
cancelPreviousCallback	boolean	optional default: false	This is optional. If true, then the callback of a previous open or close animation will be canceled if that animation was still inprogress when this method is called, otherwise the callback of the previous open or close animation will be fired immediately before the animation for this animation begins.

Private Methods

private _animate(targetState: String, callback: Function) source

Animates the menu to it's target state.

Params:

Name	Type	Attribute	Description
targetState	String		The name of the state to animate to.
callback	Function		The function to call after the animation completes.

private _createComponents() source

Creates the menu area, content area, Plane for the fade effect, etc.

private _haltAnimation(cancelCallback: boolean) source

Halts the current animation, if any.

Params:

Name	Type	Attribute	Description
cancelCallback	boolean	optional default: false	Defaults to false. If true, the halted animation's callback won't fire, otherwise it will be fired.

private _initializeEvents() source

Sets up the events for the touch and mouse interaction that opens and closes the menu.