cards from the famous examples

main.js

/**
 * Deck
 * -----------
 *
 * Deck is a SequentialLayout that can be open and closed
 * with defined animations.
 *
 * In this example, we can see that when we click we end up
 * opening the decks so that their contents expand outwards.
 */
define(function(require, exports, module) {
    var Engine         = require('famous/core/Engine');
    var Transform      = require('famous/core/Transform');
    var Modifier       = require('famous/core/Modifier');
    var Surface        = require('famous/core/Surface');
    var Transitionable = require('famous/transitions/Transitionable');
    var Deck           = require('famous/views/Deck');
    var GridLayout     = require('famous/views/GridLayout');

    var SpringTransition = require('famous/transitions/SpringTransition');
    Transitionable.registerMethod('spring', SpringTransition);

    document.body.style.fontFamily = 'Verdana, Arial, Helvetica, sans-serif';

    // Creates the root of the scene graph
    var mainContext = Engine.createContext();



    // this is the grey bar background
    var background = new Surface({
        size: [undefined, 300], //full-width, 300px hehigh
        properties: {
            backgroundColor: '#cccccc'
        }
    });
    var bgModifier = new Modifier({
        origin: [0.5, 0.5],  // centered horizontally and vertically
        transform: Transform.translate(0,0,-100) // placed just behind anything on the same z
    });
    



    // this is an array containing the cards
    var surfaces = [];
    
    //
    var myLayout = new Deck({
        itemSpacing: 10,
        direction: 0, // horizontally
        transition: {
            method: 'spring',
            period: 300,
            dampingRatio: 0.8
        }
    });
    
    myLayout.open();

    // render a series of cards
    myLayout.sequenceFrom(surfaces);

    for(var i = 0; i < 5; i++) {
        // each card.
        // turn them into ImageSurfaces for pictures.
        // could also just be <img> tags in the content.
        var temp = new Surface({
            content: 'click #' + i,
            size: [240, 180],
            classes: ['test'],
            // You don't HAVE to do this css, but this
            // editor doesn't have a css feature, and
            // it is just a gist.
            properties: {
                textAlign: 'center',
                lineHeight: '120px',
                backgroundColor: 'hsla(' + ((i*5 + i)*15 % 360) + ', 60%, 50%, 0.8)'
            }
            
        });
        
        temp.on('click', function() {
            myLayout.toggle();
        });
        surfaces.push(temp);
    }

    // modify the deck view
    var containerModifier = new Modifier({
        // put it's origin to the left, center
        // this is why it expands right.
        origin: [0, 0.5],
        align: [0, 0.5],
        transform: Transform.translate(80, 0, 0)
    });

    // add the modifier and then the deck view
    mainContext.add(containerModifier).add(myLayout);
        mainContext.add(bgModifier).add(background);

});