decks
A flexible front-end JavaScript library for organizing, rendering, animating, and interacting with collections of items in the DOM.
Project maintained by the Pellucid Analytics Front-End Dev Team Hosted on GitHub Pages — Theme by mattgraham
Overview
decks provides a set of classes and utilities for rendering collections of items in the DOM. decks allows you to define "Layouts" for rendering your items, and provides all the rendering, animation, and touch/gesture support for seamlessly transitioning between layouts, and interacting with your content.
Examples
TODO
Documentation
The decks system defines the following concepts:
- Deck - the main entry point and initializer of the decks infrastructure.
- Item - a model type which stores any arbitrary JavaScript data, and provides a basic event API for notifying changes to the data.
- ItemCollection - a collection type that stores Item instances, and provides a basic event API for notifying changes to the collection.
- Layout - a type which is responsible for determining where items should be rendered, how they should be animated, and which types of gestures/events should be activated.
- Frame - a type which manages a DOM element in a page, where the decks system is made visible. The frame defines the visual bounds in which the decks renders can be seen.
- Canvas - a type which manages another DOM element that is placed within the Frame element. The Canvas element is the "canvas" in which your DOM items are drawn. The Canvas can move within the bounds of the Frame, and can interact with the Frame bounds, for things like springy edges, and snapping-to-bounds.
- Viewport - the decks Viewport is the main coordinator for DOM drawing and animations. The Viewport manages the Frame and Canvas elements, and delegates to a Layout instance to determine where item elements are drawn, and for transitioning between different visual states or Layouts.
View the GitHub Project/README for development/contribution information.
Current Build Status
