Famo.us how to make a scrollview be filled from bottom to top (or right to left)?

Question

Assuming I've a scrollview with direction 1 (vertical). While populating the scrollView, the items do appear and are aligned from top to bottom.

I would like to know if there is a way to reverse this ordering i.e. to make the scrollView be populated from the bottom to the top. A good example of usage is a message list. You want the last message to always appear on the bottom of the list. By default, the message would be aligned on top, which is not convenient.

enter image description here

[EDIT] I just found we can easily set our own transform according to an offset overriding the outputFrom function callback. For example the following will invert the scroll content:

scrollview.outputFrom(function(offset)
{
       return  Transform.translate(0, -offset)
});

score 0 · Answer 1 · answered Jun 22 '14 at 22:27

0

Well as famo.us documentation says: "Scrollview will lay out a collection of renderables sequentially in the specified direction", so it will order the surfaces in the order you provide.

My advice is to add the surfaces to a list and then just add them to the ScrollView in reverse.

answered Jun 22 '14 at 22:27

Marko Letic

2,460
2
28
34

Nope, the direction is unfortunately a scalar for aligning the items according to X, Y and Z. A workaround would be to rotate 180° the whole scrollview, then invert the items and rotate the inner views as well… obviously it's not what I'm looking for. – Flavien Volken Jun 23 '14 at 11:51

score 0 · Answer 2 · answered Jun 23 '14 at 16:50

What you are looking for is unshift(). You can view the following code run at codefamo.us

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');
var Easing = require('famous/transitions/Easing');
var Scrollview = require('famous/views/Scrollview');

var mainContext = Engine.createContext();
var items = [];
var scroll = new Scrollview();
mainContext.add(scroll);
var counter=0;
scroll.sequenceFrom(items);

function addOne() {
    setTimeout(function() {
        var surface = new Surface({
            size: [100, 100],
            content: 'surf: '+counter++,
            properties: {
                textAlign: 'center',
                lineHeight: '20px'
            }
        });
        items.unshift(surface);

        if (counter<10) 
        addOne();
    },2000);
}
addOne();

I added an image to the question, reversing the order might work if I do rotate all the views and the whole scrollview of 180°. But I'm looking for the way to make the scrollview to be stack from its last element, probably it is a matter of spring origin but I do not know the proper way to change it. — Flavien Volken, Jun 24 '14 at 07:39

score 0 · Accepted Answer · answered Jun 27 '14 at 07:42

Did it like you suggested, it works just fine while rotating all by 180˚. Example: http://jsfiddle.net/tamtamchik/LA49a/3/

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Scrollview = Famous.Views.Scrollview;
    var Timer = Famous.Utilities.Timer;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var ContainerSurface = Famous.Surfaces.ContainerSurface;

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];
    var i = 0;
    var surfaceHeight = 50;

    scrollview.sequenceFrom(surfaces);

    Timer.setInterval(function () {
        var container = new ContainerSurface({
            size: [undefined, surfaceHeight]
        });

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

        var surfaceRotate = new StateModifier({
            transform: Transform.rotateZ(Math.PI)
        });

        var surfacePush = new StateModifier({
            transform: Transform.translate(window.innerWidth, surfaceHeight)
        });

        container.add(surfacePush).add(surfaceRotate).add(temp);
        container.pipe(scrollview);
        temp.pipe(scrollview);
        surfaces.unshift(container);
        i++;
    }, 400);

    var rotate = new StateModifier({
        transform: Transform.rotateZ(Math.PI)
    });

    var push = new StateModifier({
        transform: Transform.translate(window.innerWidth, window.innerHeight)
    });

    mainContext.add(push).add(rotate).add(scrollview);
});

Ok let's consider this as a temporary answer. Currently it seems there is simply no public function to attach the spring to another edge than the top or left one. — Flavien Volken, Jul 01 '14 at 09:28

Famo.us how to make a scrollview be filled from bottom to top (or right to left)?

3 Answers3

Linked