φ Famo.us University Famo.us/Angular Docs Help Blog Download
  • core
  • Context
  • ElementAllocator
  • ElementOutput
  • Engine
  • Entity
  • EventEmitter
  • EventHandler
  • Group
  • Modifier
  • OptionsManager
  • RenderNode
  • Scene
  • SpecParser
  • Transform
  • View
  • ViewSequence
  • events
  • EventArbiter
  • EventFilter
  • EventMapper
  • inputs
  • Accumulator
  • GenericSync
  • MouseSync
  • PinchSync
  • RotateSync
  • ScaleSync
  • ScrollSync
  • TouchSync
  • TouchTracker
  • TwoFingerSync
  • math
  • Matrix
  • Quaternion
  • Random
  • Utilities
  • Vector
  • modifiers
  • Draggable
  • Fader
  • ModifierChain
  • StateModifier
  • physics
  • PhysicsEngine
  • physics/bodies
  • Body
  • Circle
  • Particle
  • Rectangle
  • physics/constraints
  • Surface
  • Collision
  • Constraint
  • Curve
  • Distance
  • Snap
  • Wall
  • Walls
  • physics/forces
  • Drag
  • Force
  • Repulsion
  • RotationalDrag
  • RotationalSpring
  • Spring
  • VectorField
  • physics/integrators
  • SymplecticEuler
  • surfaces
  • CanvasSurface
  • ContainerSurface
  • ImageSurface
  • InputSurface
  • TextareaSurface
  • VideoSurface
  • transitions
  • CachedMap
  • Easing
  • MultipleTransition
  • SnapTransition
  • SpringTransition
  • Transitionable
  • TransitionableTransform
  • TweenTransition
  • WallTransition
  • utilities
  • KeyCodes
  • Timer
  • Utility
  • views
  • ContextualView
  • Deck
  • DrawerLayout
  • EdgeSwapper
  • FlexibleLayout
  • Flipper
  • GridLayout
  • HeaderFooterLayout
  • Lightbox
  • RenderController
  • ScrollContainer
  • Scroller
  • Scrollview
  • SequentialLayout
  • widgets
  • NavigationBar
  • TabBar

Scroller

Scroller lays out a collection of renderables, and will browse through them based on accessed position. Scroller also broadcasts an 'edgeHit' event, with a position property of the location of the edge, when you've hit the 'edges' of it's renderable collection.

Overview

Options
direction
Methods
getCumulativeSize
setOptions
onEdge
outputFrom
positionFrom
sequenceFrom
getSize

Scroller(options, clipSize, margin)

Constructor Parameters

options

Options

An object of configurable options.

direction
Number
Using the direction helper found in the famous Utility module, this option will lay out the Scroller instance's renderables either horizontally (x) or vertically (y). Utility's direction is essentially either zero (X) or one (Y), so feel free to just use integers as well.

clipSize

Number

The size of the area (in pixels) that Scroller will display content in.

margin

Number

The size of the area (in pixels) that Scroller will process renderables' associated calculations in.

Methods

getCumulativeSize()

Returns the cumulative size of the renderables in the view sequence

Returns
Array
a two value array of the view sequence's cumulative size up to the index.

setOptions(options)

Patches the Scroller instance's options with the passed-in ones.

Parameters
options
Options
An object of configurable options for the Scroller instance.

onEdge()

Tells you if the Scroller instance is on an edge.

Returns
Boolean
Whether the Scroller instance is on an edge or not.

outputFrom(fn, masterFn)

Allows you to overwrite the way Scroller lays out it's renderables. Scroller will pass an offset into the function. By default the Scroller instance just translates each node in it's direction by the passed-in offset. Scroller will translate each renderable down

Parameters
fn
Function
A function that takes an offset and returns a transform.
masterFn
Function

positionFrom(position)

The Scroller instance's method for reading from an external position. Scroller uses the external position to actually scroll through it's renderables.

Parameters
position
Getter
Can be either a function that returns a position, or an object with a get method that returns a position.

sequenceFrom(node)

Sets the collection of renderables under the Scroller instance's control.

Parameters
node
Array|ViewSequence
Either an array of renderables or a Famous viewSequence.

getSize()

Returns the width and the height of the Scroller instance.

Returns
Array
A two value array of the Scroller instance's current width and height (in that order).

render()Private

Generate a render spec from the contents of this component.

Returns
Number
Render spec for this component

commit(context)Private

Apply changes from this component to the corresponding document element. This includes changes to classes, styles, size, content, opacity, origin, and matrix transforms.

Parameters
context
Context
commit context
Branding Terms Privacy Jobs © Famous Industries, Inc. 2015