brick-deck

A Brick box element in which cards can be cycled independently of order with a variety of different transitions.

Demo

Usage

Import Web Components polyfill:

 <script src="bower_components/platform/platform.js"></script>

Import Custom Element:

 <link rel="import" href="src/brick-deck.html">

Start using it:

 <brick-deck selected-index="0">
   <brick-card selected>0</brick-card>
   <brick-card>1</brick-card>
   <brick-card>2</brick-card>
   <brick-card>3</brick-card>
   <brick-card>4</brick-card>
 </brick-deck>

Options

Attribute	Options	Default	Description
`transition-type`	string `slide-left` `slide-right` `slide-up slide-down`	-	Defines the type of animation to use for cycling between cards. The default is no transition animation. This property can either be set as an HTML attribute under the name `transition-type`, or programmatically with the property `transitionType` `selected-index`.
`selected-index`	number	-	Gets/sets the index of the currently selected card in the deck. Can either be set as an HTML attribute under the name selected-index or programmatically with the property selectedIndex.
`loop`	boolean	-	Toggle allowance of looping when calling nextCard and previousCard methods has reached the end of either side of the index.

Accessors

Poperty	Type	Description
`transitionType`	string	corresponds to the `transition-type` attribute
`selectedIndex`	string	corresponds to the `selected-index` attribute
`loop`	boolean	corresponds to the `loop` attribute
`cards` (getter only)	array	array of all the brick-card elements contained in an brick-deck
`selectedCard` (getter only)	brick-card	the brick-card DOM element that is currently displayed by the deck. Returns null if no such card exists.

Methods

Method	Returns	Description
`showCard(index / element, [direction])`	-	Transitions to the brick-card at the given index within the deck. If given a direction of 'forward', will perform the forwards/normal version of the current transition animation. If given 'reverse', will performs the reverse animation. If the direction is omitted, the deck will perform a forward animation.
`hideCard(index / element)`	-	Hides the card element or card located at a specified index.
`nextCard([direction])`	-	Transitions to the next card in the deck, looping back to the start if needed.
`previousCard([direction])`	-	Transitions to the previous card in the deck, looping back to the end if needed.

Events

Event	Description
`show`	Fired from a card target after it has completed its show animation, and the show state has been finalized.
`hide`	Fired from a card target after it has completed its hide animation, and the hide state has been finalized.

Development

Brick components use Stylus to generate their CSS.

This repository comes outfitted with a set of tools to ease the development process.

To get started:

Install Bower & Gulp:

  $ npm install -g bower gulp

Install local dependencies:

  $ npm install && bower install

While developing your component, there is a development server that will watch your files for changes and automatically re-build your styles and re-lint your code.

To run the development server:

Run gulp server
Navigate to http:localhost:3001

To simply build and lint your code, run gulp build.

You can also push your code to GitHub Pages by running gulp deploy.