CODEWITHSUNDEEP
famo.us
doemsche
doemsche

Reputation: 922

add a view to scrollview and pipe to mouse

I would like to add a view to a (horizontal) scrollview and pipe to MouseSync. The Scrolling works on the Surfaces but not on the View.

The Scrolling with the Mouse works fine for the Surfaces, but is completely ignored for the TestView that is added to the scrollview.

My main.js looks like this:

define(function(require, exports, module) {
    var Engine            = require('famous/core/Engine');
    var Surface           = require('famous/core/Surface');
    var Scrollview        = require('famous/views/Scrollview');
    var SequentialLayout   = require('famous/views/SequentialLayout');
    var MouseSync         = require('famous/inputs/MouseSync');
    var TestView = require('TestView');

    var context = Engine.createContext();

    var scrollview = new Scrollview( {
       direction:0,
       friction:0.001,
       drag:0.001
    });

    var cells = [];
    scrollview.sequenceFrom(cells);

    var mouse = new MouseSync({direction:0});
    var sequence = new SequentialLayout( { direction:0 } );
    var surfaces = [];
    sequence.sequenceFrom(surfaces);

    var surface1 = new Surface({
        size: [200,undefined],
        content: '<div>I am surface 1</div>',
        properties: {
            backgroundColor: 'red'
         }
     });

    var surface2 = new Surface({
        size: [200,undefined],
        content: '<div>I am surface 2</div>',
        properties: {
            backgroundColor: 'green'
        }
    });

    var testview = new TestView({size: [200, undefined]});

    surface1.pipe(mouse);
    surface2.pipe(mouse);
    testview.pipe(mouse);

    surface1.pipe(scrollview);
    surface2.pipe(scrollview);
    testview.pipe(scrollview);

    surfaces.push(surface1);
    surfaces.push(testview);
    surfaces.push(surface2);

    mouse.pipe(scrollview);
    cells.push(sequence);
    context.add(scrollview);    
});

And TestView like this:

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

    function TestView(size){
        View.apply(this,arguments);
        this.mainNode = this.add(this.rootModifier);
        _createBackground.call(this, size);
    }

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


    function _createBackground(size){
        var background = new Surface({
            size: size.size,
            content: 'testview',
            properties: {
                backgroundColor: '#444'
            }
        });
        this.mainNode.add(background);
    }
    module.exports = TestView;
});

Do I somehow have to pipe from the view to the parent scrollView?

Any help is much appreciated.

Upvotes: 1

Views: 187

Answers (1)

johntraver
johntraver

Reputation: 3612

I believe it is as simple as piping the background surface of TestView to the views _eventOutput handler..

Try this for your _createBackground function..

function _createBackground(size){
    var background = new Surface({
        size: size.size,
        content: 'testview',
        properties: {
            backgroundColor: '#444'
        }
    });

    // Add this line
    background.pipe(this._eventOutput);

    this.mainNode.add(background);
}

Hope this helps!

Upvotes: 3

Related Questions