Surfaces for Layout using dynamic size

Surfaces for Layout using dynamic size

by Mabuti

HTML

<script src="http://famousco.de/fiddle/famousBox.js"></script>

JavaScript

define('main', function (require, exports, module) {
    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 RenderNode = require('famous/core/RenderNode');
    var Timer = require('famous/utilities/Timer');

    var SmartSurface = require('SmartSurface');
    var PorkUnLaten = require('PorkUnLaten');

    var mainContext = Engine.createContext();

    var node1 = new RenderNode();
    var node2 = new RenderNode();
    var node3 = new RenderNode();

    var s1 = new SmartSurface({
        size: [true, true],
        content: PorkUnLaten.random(),
        properties: {
            backgroundColor: 'red'
        }
    });

    var s2 = new SmartSurface({
        size: [true, true],
        content: PorkUnLaten.random(),
        properties: {
            backgroundColor: 'blue'
        }
    });

    var s3 = new SmartSurface({
        size: [true, true],
        content: PorkUnLaten.random(),
        properties: {
            backgroundColor: 'green'
        }
    });

    var m1 = new Modifier({
        transform: Transform.translate(0, 25, 0)
    });

    var m2 = new Modifier({
        transform: Transform.translate(0, 51, 0)
    });

    var m3 = new Modifier({
        transform: Transform.translate(0, 51, 0)
    });

    s2.on('deploy', function(){
        console.log('s2 deploy ' + s1.state.getSize()[1]);
        m2.setTransform(Transform.translate(0, s1.state.getSize()[1] + 1, 0));
    });
    s3.on('deploy', function(){
        console.log('s3 deploy ' + s2.state.getSize()[1]);
        m3.setTransform(Transform.translate(0, s2.state.getSize()[1] + 1, 0));
    });
    function setLayout() {
        s1.setContent(PorkUnLaten.random());
        s2.setContent(PorkUnLaten.random());
        s3.setContent(PorkUnLaten.random());
    }
    Engine.on('click', function () {
        setLayout();
    });
    
   ...