famo.us Slide Panel

famous-slidepanel.js

/*globals define*/
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var Utility = require('famous/utilities/Utility');

    // create the main context
    var mainContext = Engine.createContext();

    var mainView = new Surface({
        size: [undefined, undefined],
        classes: ['main-view'],
        properties: {
          'background-color': 'orange'
        }
    });

    var mainModifier = new Modifier({});

    var panel = new Surface({
        size: [200, undefined],
        properties: {
            'background-color': 'green'
        }
    });

    var panelModifier = new Modifier({
        origin: [1, 0]
    });

    mainContext.add(panelModifier).add(panel);
    mainContext.add(mainModifier).add(mainView);

    var panelOpen = false;
    mainView.on('click', function() {
        mainModifier.halt();
        mainModifier.setTransform(Transform.translate(panelOpen ? 0 : -200, 0), { duration: 220 });
        panelOpen = !panelOpen;
    });
});

Needs this CSS:

.main-view { z-index: 1; }