Famo.us: why won't the width of the clicked surface change?

Question

Famous.Engine = famous.core.Engine;
Famous.Surface = famous.core.Surface;
Famous.RenderNode = famous.core.RenderNode;
Famous.ContainerSurface = famous.surfaces.ContainerSurface;
Famous.ScrollView = famous.views.Scrollview;
Famous.SequentialLayout = famous.views.SequentialLayout;


Famous.Transform = famous.core.Transform;
Famous.Transitionable = famous.transitions.Transitionable;
Famous.SnapTransition = famous.transitions.SnapTransition;
Famous.TransitionableTransform = famous.transitions.TransitionableTransform;

Famous.Modifier = famous.core.Modifier;
Famous.StateModifier = famous.modifiers.StateModifier;
Famous.Easing = famous.transitions.Easing;
Famous.EventHandler = famous.core.EventHandler;


var projectsList = document.getElementById('projects-list');    
var mainContext = Famous.Engine.createContext(projectsList);

var sequentialLayout = new Famous.SequentialLayout({
    direction: 0
});

Famous.Transitionable.registerMethod('snap', Famous.SnapTransition);

var snap = { method: 'snap', period: 600, dampingRatio: 0.6 }

var surfaces = [];

for (var i = 0; i < 20; i++) {

    var surface = new Famous.Surface({
        content: "Surface: " + (i + 1),
                    size: [300, $(window).height()],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            textAlign: "center"
        }
    });

    surface.open = false;

    surface.state = new Famous.Modifier({
        size: [undefined, undefined]
    });

    surface.trans = new Famous.Transitionable(300);

    surface.state.sizeFrom(function(){
            return [this.trans.get(), undefined];
    }.bind(surface));

    surface.node = new Famous.RenderNode();

    surface.node.add(surface.state).add(surface);

    surface.pipe(sequentialLayout);

    surface.on('click',function(e){
        if (this.open) {
            this.trans.halt();
            this.trans.set(300, snap);
        } else {
            this.trans.halt();
            this.trans.set($(window).width(), snap);
        }
        this.open = !this.open;

    }.bind(surface));

    surfaces.push(surface.node);
        sequentialLayout.sequenceFrom(surfaces);
}

mainContext.add(sequentialLayout);

The surfaces translate their X positions fine, but do not change their width from 300px. I would also like the surface that's clicked on to change its width to fill the window's width if its in a closed state. I would like the surface to go back to its initial width of 300px if it is clicked in an open state. How do I accomplish this so the width animates rather than jumps to the specified sizes?

score 0 · Answer 1 · answered Feb 22 '15 at 17:48

The key is to not specify a static width or height when creating the surfaces:

    var surface = new Famous.Surface({
        content: "Surface: " + (i + 1),
        size: [undefined, undefined], /* removed the original [300, $(window).height()] */
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            textAlign: "center"
        }
    });

score 0 · Accepted Answer · answered Feb 22 '15 at 17:52

0

Remove the size of the Surface

var surface = new Famous.Surface({
    content: "Surface: " + (i + 1),
    properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        textAlign: "center"
    }
});

answered Feb 22 '15 at 17:52

talves

13,993
5
40
63

Thank you my friend. I figured it out 3 mins prior to your post. I'll give you credit in the spirit of camaraderie. – Joe C Feb 22 '15 at 17:55
Thanks! I did not see the answer. I had it open while you were answering. :) I have made this size mistake a few times before also thinking it would just overwrite the surface size. – talves Feb 22 '15 at 18:23

Famo.us: why won't the width of the clicked surface change?

2 Answers2

Remove the size of the Surface