angular-flipsnap

Usage

Dependencies

Getting Started

Install the library (and dependencies) using bower, then include them in the HTML.

bower install angular-flipsnap --save

<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/flipsnap/flipsnap.min.js"></script>
<script type="text/javascript" src="bower_components/angular-flipsnap/angular-flipsnap.min.js"></script>

Declare the flipsnap module as a dependency of your app.

angular.module('MyApp', ['flipsnap']);

Now you can use the flipsnap directive in your templates. You must specify a unique flipsnap-id, which will be as an id attribute on the scrolling element.

<div flipsnap flipsnap-id="flipsnap" style="width:320px;margin:0 auto;">
    <div flipsnap-pane style="width: 320px;">
        <h1>1</h1>
    </div>
    <div flipsnap-pane style="width: 320px;">
        <h1>2</h1>
    </div>
    <div flipsnap-pane style="width: 320px;">
        <h1>3</h1>
    </div>
</div>

Demo

You can view a demo here.

API

Flipsnap Directive

Attribute	Description	Type
`flipsnap`	Declares that this element is a flipsnap container. The value of this attribute will be the name of the flipsnap object on the containing scope.	`String`
`flipsnap-id`	The unique ID of the flipsnap scrolling pane.	`String`
`flipsnap-options`	An AngularJS Expression which evaluates to a map of options. See the options API.	`Expression`

Flipsnap Options Map

Key	Description	Type
`distance`	The distance to move on each scroll. If not specified this value is automatically calculated.	`Number`
`maxPoint`	The number of stop points. If not specified this value is automatically calculated.	`Number`
`transitionDuration`	The duration of each scroll transition, in milliseconds. If not specified this defaults to 350.	`Number`
`disableTouch`	If set to true the flipsnap will not respond to touch. If not specified this defaults to `false`.	`Boolean`
`disable3d`	If set to true the flipsnap will not use 3D transform. If not specified this defaults to `false`.	`Boolean`

Flipsnap Object

The flipsnap object is given to the containing scope as a named property (see the Directive API).

Properties

canMoveNext (Boolean) (readonly) True if the flipsnap can move to the next point. canMovePrev (Boolean) (readonly) True if the flipsnap can move to the previous point. currentPoint (Number) (readonly) The current point.

Methods

`toNext`

Scrolls the flipsnap to the next point, if available.

Arguments

transitionDuration (Number) (optional): Specifies the duration of the transition. If not specified this defaults to the value given in the directive options.

`toPrev`

Scrolls the flipsnap to the previous point, if available.

Arguments

transitionDuration (Number) (optional): Specifies the duration of the transition. If not specified this defaults to the value given in the directive options.

`moveToPoint`

Scrolls the flipsnap to the specified point, if available.

Arguments

point (Number) (required): Specifies the point to move to.

transitionDuration (Number) (optional): Specifies the duration of the transition. If not specified this defaults to the value given in the directive options.

Development

Contributions are welcome as issues or pull requests.

Prerequisites

NodeJS
Bower

Getting Started

npm install
grunt setup // performs the bower install - only necessary for using the demo html file
grunt test // lints the file
grunt build // builds the minified file