Resizing surfaces in a Famo.us Scrollview

Question

i'd like to manipulate the sizes of surfaces in a famo.us ScrollView, ideally with a transition.

the RenderNode() trick for doing this in a SequentialLayout, (Surface->Modifier->RenderNode) doesn't apply because it can't handle the .pipe()..

and wrapping each Node in another containerSurface with size:[true,true] just collapses it.

so i can't figure out a configuration that allows manipulation of sizes inside a Scrollview.

thanks, in advance

What is the .pipe() problem? You can pipe events from the underlying surface to to scrollview. I do this with a view instead of a rendernode since it comes pre-equipped with event handlers. — rich, Jun 23 '14 at 18:25

score 3 · Accepted Answer · answered Jun 24 '14 at 04:55

I found an interesting bug with undefined width surfaces that was not allowing me to do achieve this with a StateModifier. I used a Modifier and everything worked as expected.

I set up a normal looking scrollview and loop through the creation of the surfaces. To animate size, I prefer to wrap an [undefined,undefined] sized surface in a sized Modifier. This allows me to animate the size with more control.

After the creation of each surface, I create a RenderNode and a Modifier and then add the Modifier and the Surface to the RenderNode. I am still only piping events from surface, and that is all that is needed.

To animate the size, I define a Transitionable and use it in the return statement of Modifiers sizeFrom method. Now animating the height of the surface is as easy as setting the transitionable. I do so on click.

Here is the example. Good Luck!

var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var RenderNode          = require("famous/core/RenderNode");
var Modifier            = require("famous/core/Modifier");

var Scrollview          = require("famous/views/Scrollview");
var Transitionable      = require("famous/transitions/Transitionable");
var SnapTransition      = require("famous/transitions/SnapTransition");

Transitionable.registerMethod('snap', SnapTransition);

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

var mainContext = Engine.createContext();

var scrollview = new Scrollview();

var surfaces = [];

scrollview.sequenceFrom(surfaces);

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

    var surface = new Surface({
        content: "Surface: " + (i + 1),
        size: [undefined, undefined],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
            lineHeight: "200px",
            textAlign: "center"
        }
    });

    surface.open = false;

    surface.state = new Modifier();

    surface.trans = new Transitionable(200);

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

    surface.node = new RenderNode();

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

    surface.pipe(scrollview);

    surface.on('click',function(e){
        if (this.open) {
            this.trans.halt();
            this.trans.set(200,snap);
        } else {
            this.trans.halt();
            this.trans.set(400,snap);
        }
        this.open = !this.open;

    }.bind(surface));

    surfaces.push(surface.node);
}

mainContext.add(scrollview);

so you push the renderNode, but you pipe with the surface - and famo.us knows they're together. http://goo.gl/wPwSpC if you're in Toronto, I owe you a beer. — spencercooly, Jun 24 '14 at 13:45
Cool, I'll take you up on that! The renderNode is not visually rendered, so it barely comes in play. The case of View and its eventhandlers allows you to interface with the surfaces and whatnot contained in a View. If all your surfaces are just exposed at the same level of the scrollview, you can just go straight from the surfaces to the scrollview! — johntraver, Jun 24 '14 at 15:04

IjzerenHein · Answer 2 · 2014-12-17T15:58:03.847

Alternatively you can use the FlexScrollView, which supports a flow-mode for smooth inserting/removing/updating/swapping:

var scrollView = new FlexScrollView({
    flow: true // flow-mode causes renderables to smoothly flow to their new position
});
scrollView.push(...);
scrollView.push(...);

scrollView.insert(1, ...); // insert item in between

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md https://github.com/IjzerenHein/famous-flex

Resizing surfaces in a Famo.us Scrollview

2 Answers2