Class: Layout

Layout

new Layout(options) → {Layout}

Contains the logic for rendering a layout of items Can be subclassed to implement layout methods, or can be passed layout methods in the Layout constructor options.
Parameters:
Name Type Argument Description
options Object <nullable>
 layout options
Properties
Name Type Argument Description
getRenders function <nullable>
 implementation of getRenders method
initializeRender function <nullable>
 implementation of initializeRender method
loadRender function <nullable>
 implementation of loadRender method
unloadRender function <nullable>
 implementation of unloadRender method
getShowAnimation function <nullable>
 implementation of getShowAnimation method
getHideAnimation function <nullable>
 implementation of getHideAnimation method
setShowAnimation function <nullable>
 implementation of setShowAnimation method
setHideAnimation function <nullable>
 implementation of setHideAnimation method
Source:
Returns:
Type
Layout

Mixes In

Members

defaultOptions

Default options for a Layout instance
Source:

destroy

Destroys the layout (no-op by default)
Source:

onCanvasBoundsSet

Event handler which informs the Layout when the Canvas bounds have been set.
Source:

onFrameBoundsSet

Event handler which informs the Layout when the Frame bounds have been set.
Source:

onItemCollectionFilterSet

Event handler which informs the Layout when the ItemCollection filter has been set.
Source:

onItemCollectionIndexed

Event handler which informs the Layout when the ItemCollection has been (re-)indexed..
Source:

onItemCollectionReversedSet

Event handler which informs the Layout when the ItemCollection reversed flag has been set.
Source:

onItemCollectionSortBySet

Event handler which informs the Layout when the ItemCollection sort by function has been set.
Source:

onViewportAllRendersDrawn

Event handler which informs the Layout when a all renders in one drawing cycle have finished animating.
Source:

onViewportItemDrawing

Event handler which informs the Layout that a render cycle is about to start for a single Item.
Source:

onViewportItemsDrawing

Event handler which informs the Layout that a render cycle is about to start for a multiple Items.
Source:

onViewportRenderDrawing

Event handler which informs the Layout that a render is about to start drawing (animating). The Layout can use this method to modify the render/element before the animation starts.
Source:

onViewportRenderDrawn

Event handler which informs the Layout when a single render has finished animating.
Source:

onViewportRenderErased

Event handler which informs the Layout when a single render has finished its hide animation.
Source:

onViewportRenderErasing

Event handler which informs the Layout that a render is about to start erasing (animating to a hidden state before being removed).) The Layout can use this method to modify the render/element before the animation starts.
Source:

Methods

getCanvasBoundsOptions() → {Object}

Gets the Layouts preferences for how the canvas is resized when elements are added or removed.
Source:
Returns:
- the resize options
Type
Object

getCanvasGestureOptions()

Gets the gesture handler options to use for the Canvas for this Layout. Each Layout might call for different Canvas gestures, like a vertical list Layout might only allow vertical panning/swiping, whereas a horizontal list might only allow horizontal scrolling. Override this method in a Layout subclass or Layout options.
Source:

getCustomRenders(options) → {Object[]}

Returns an array of render objects, or a single render object, which are not associated with items. This can be used to draw custom elements on the Canvas, like divider lines, non-item-associated labels, etc.
Parameters:
Name Type Description
options Object standard layout method options (viewport, frame, etc.)
Source:
Returns:
- array of custom render objects
Type
Object[]

getEmitterEvents()

Events that all Layout instances will bind to, so the layout can receive notifications when certain decks events occur.
Source:

getHideAnimation()

Gets the base animation to use/merge when hiding (removing) a render This is typically the opposite of the show animation transform. E.g. if the show animation sets opacity: 1, this might set opacity: 0. Override this method in a Layout subclass or with Layout options to provide a custom "hide" animation.
Source:

getMoveToElementOffsets(element) → {undefined}

Gets extra offsets to apply when panning to an item
Parameters:
Name Type Description
element Element element being moved to
Source:
Returns:
Type
undefined

getOverridables()

List of method names that can be overridden by passing them in via options properties in the constructor. You can also override these properties by subclassing Layout.
Source:

getRenderGestureOptions(render, options) → {Object}

Gets the default gesture handler options to apply to render elements
Parameters:
Name Type Description
render Object render object
options Object standard Layout method options
Source:
Returns:
- GestureHandler options to apply to the render
Type
Object

<abstract> getRenders(item, options) → {Object|Array.<Object>}

Creates the "render" or "renders" for a given Item during a (re-)drawing cycle. A "render" is basically an instruction to the Viewport on where and how to draw the item in the * Canvas. An Item can be drawn in the Canvas one time, or multiple times, which is specified by how many render objects this method returns. The Viewport invokes this method for an/each Item when a drawing cycle is happening. This method should return a "render" object (which is a set of DOM style properties to apply to the render's element, along with animation options, like duration, easing, delay, etc.), or an array of render objects. The Viewport will reconcile any existing renders/elements for the given Item, and eventually animate an element to the property values listed in "transform", with the animation controlled by the options in "animateOptions". This method is abstract at this level - it must be implemented by either passing an options.getRenders function value into the Layout constructor, or creating a subclass of Layout that implements this method on itself, or its prototype. A render object must have "transform" and "animateOptions" properties at a minimum, but can also have any other arbitrary properties that are needed for loading or unloading the render at a later time (e.g. in load/unloadRender). A render might look like this:
Parameters:
Name Type Description
item Item Item for which to create renders
options Object Other options provided by the Viewport
Source:
Returns:
- The render object or array of render objects for the Item
Type
Object | Array.<Object>
Example
Example render object created by Layout#getRenders:
{
 transform: {
  top: 20,
  left: 20,
  width: 200,
  height: 150,
  rotateZ: 20
 },
 animateOptions: {
  duration: 200,
  easing: "easeInOutExpo"
 },
 someLayoutSpecificProperty: "some value",
}

getShowAnimation()

Gets the animation to use/merge when showing a render. This would typically be transform properties that ensure the element is fully visible (e.g. opacity: 1, scaleX: 1, scaleY: 1, display: auto, etc.) Override this method in a Layout subclass or with Layout options to provide a custom "show" animation.
Source:

initializeRender(render) → {undefined}

Allows the layout to initialize a new render element, when a new render element is needed for a render.
Parameters:
Name Type Description
render Object The render object that was just created
Source:
Returns:
Type
undefined

loadRender(render) → {undefined}

Contains the logic to load the contents of a render (e.g. load an image in the render element)
Parameters:
Name Type Description
render Object The render object to load
Source:
Returns:
Type
undefined

setHideAnimation(render) → {undefined}

Sets an animation on a render to remove the render. The implementation of this method should set transform and animateOptions properties on the render.
Parameters:
Name Type Description
render Object render on which to set animation
Source:
Returns:
Type
undefined

setShowAnimation(render) → {undefined}

Sets the animation on a render to include the default show animation.
Parameters:
Name Type Description
render Object render on which to add the show animation
Source:
Returns:
Type
undefined

shouldLoadRender(render, options) → {undefined}

Returns whether the given render should be loaded at the time of invocation. The Layout can implement this method if there are cases where a render might not be normally loaded, but should be.
Parameters:
Name Type Description
render Object render object to check for loading
options Object hash of all deck-related objects
Source:
Returns:
Type
undefined

shouldUnloadRender(render, options) → {undefined}

Returns whether the given render should be unloaded at the time of invocation. The Layout can implement this method if there are cases where a render should be unloaded (e.g. to save on memory).
Parameters:
Name Type Description
render Object render object to check for unloading.
options Object hash of all deck-related objects
Source:
Returns:
Type
undefined

unloadRender(render, options) → {undefined}

Contains the logic to unload the contents of a render (e.g. remove the DOM content of a render element)
Parameters:
Name Type Description
render Object The render object to unload
options Object
Source:
Returns:
Type
undefined