Famo.us ScrollView inside HeaderFooterLayout

by Adam Schuld

HTML

<script src="http://positivenull.net/famous/fiddle/famousBox.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

JavaScript

define('main', function (require, exports, module) {
    var Engine = require('famous/core/Engine');
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var HeaderFooter = require('famous/views/HeaderFooterLayout');
    var RenderController = require('famous/views/RenderController');
    var Scrollview = require("famous/views/Scrollview");
    var RenderNode = require('famous/core/RenderNode');

    function ContentView() {
        View.apply(this, arguments);

        _createLayout.call(this);
        _createHeaderAndFooter.call(this);
        _createBody.call(this);
    }

    ContentView.prototype = Object.create(View.prototype);
    ContentView.prototype.constructor = ContentView;

    function _createLayout() {
        this.layout = new HeaderFooter({
            headerSize: 50,
            contentSize: undefined,
            footerSize: 50
        });
        this.add(this.layout);
    }

    function _createHeaderAndFooter() {

        var backgroundSurface = new Surface({
            properties: {
                background: '#000000'
            }
        });
        var textSurface = new Surface({
            size: [100, 50],
            content: 'header',
            properties: {
                color: '#ffffff'
            }
        });

        var backgroundModifier = new StateModifier({
            transform: Transform.translate(0, 0, -40)
        });
        var textModifier = new StateModifier({
            origin: [0.5, 0.5],
            align: [0.5, 0.5],
            transform: Transform.translate(0, 0, -30)
        });
        this.layout.header.add(backgroundModifier).add(backgroundSurface);
        this.layout.header.add(textModifier).add(textSurface);
        
        var backgroundSurface = new Surface({
            properties: {
                background: '#000000'
       ...