CODEWITHSUNDEEP
famo.us
spencercooly
spencercooly

Reputation: 6636

Resizing surfaces in a Famo.us Scrollview

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

Upvotes: 0

Views: 683

Answers (2)

IjzerenHein
IjzerenHein

Reputation: 2755

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

Upvotes: 0

johntraver
johntraver

Reputation: 3612

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);

Upvotes: 3

Related Questions