CODEWITHSUNDEEP
famo.us
wdm
wdm

Reputation: 7189

Adding Views to Scrollview in Famo.us

This issue concerns adding Views to Scrollview (rather than surfaces).

When adding a View with a single surface everything seems to work as intended. Each View stacks neatly on top of one another.

However when adding a View with multiple surfaces they do not stack nicely. In this case each View seems to be set to the exact height of the scrollview viewport. So if each View is only 100px tall, and the scrollview viewport is 500px tall, there will be 400px of whitespace between each View when scrolling. Also if the View is taller than the scrollview vp, the Views will overlap.

So the question is: How do you add a View will multiple surfaces to a scrollview and have them stack nicely?

Example function to build the scrollview...

function _createScrollview() {
    var scrollview = new Scrollview();
    var surfaces = [];
    scrollview.sequenceFrom(surfaces);

    for (var i = 0, temp; i < 10; i++) {
        temp = new TestView();
        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    this.add(scrollview);
}

Example of View...

define(function(require, exports, module) {
    var View          = require('famous/core/View');
    var Surface       = require('famous/core/Surface');
    var Transform     = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');

    // constructor
    function TestView() {
        View.apply(this, arguments);

        _createBox_a.call(this);
        _createBox_b.call(this);
    }

    // prototype
    TestView.prototype = Object.create(View.prototype);
    TestView.prototype.constructor = TestView;

    // options
    TestView.DEFAULT_OPTIONS = {};

    // helper functions
    function _createBox_a() {
        var surf = new Surface({
            size: [undefined, 150],
            properties: {
                backgroundColor: 'red',
            }
        });
        surf.pipe(this._eventOutput);
        this.add(surf);
    }

    function _createBox_b() {
        var surf = new Surface({
            size: [undefined, 150],
            properties: {
                backgroundColor: 'blue'
            }
        });
        var mod = new StateModifier({
            transform: Transform.translate(0, 150, 0)
        });
        surf.pipe(this._eventOutput);
        this.add(mod).add(surf);
    }

    module.exports = TestView;
});

Upvotes: 0

Views: 469

Answers (1)

johntraver
johntraver

Reputation: 3612

View does not know how large it is supposed to be. If you call temp.getSize() in your example, 'undefined' is returned. You will want to explicitly set the size during initialization.. If you must set the size after initialization, it will be..

view.setOptions({size:someSize});

Here is how _createScrollview could look..

Hope this helps!

function _createScrollview() {
    var scrollview = new Scrollview();
    var surfaces = [];
    scrollview.sequenceFrom(surfaces);

    for (var i = 0, temp; i < 10; i++) {
        temp = new TestView({size:[undefined,300]});
        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    this.add(scrollview);
}

Upvotes: 2

Related Questions