Famo.us swipe on scrollview

Question

I have go through the Timbre tutorial in Famo.us University and it works fine but when I add a scrollview to the layout.content the swipe function stop working the scrollview view works fine but not the swipe.

Anyone know how to aplly the swipe right function from the Trimbe tutorial with a scrollview?

///AppView///

function _handleSwipe() {
  var sync = new GenericSync(
    ['mouse', 'touch'],
    {direction : GenericSync.DIRECTION_X}
  );

  this.pageView.pipe(sync);

  sync.on('update', function(data) {
    var currentPosition = this.pageViewPos.get();
    if(currentPosition === 0 && data.velocity > 0) {
      this.menuView.animateStrips();
    }

    this.pageViewPos.set(Math.max(0, currentPosition + data.delta));
  }.bind(this));

  sync.on('end', (function(data) {
    var velocity = data.velocity;
    var position = this.pageViewPos.get();

    if(this.pageViewPos.get() > this.options.posThreshold) {
      if(velocity < -this.options.velThreshold) {
        this.slideLeft();
      } else {
        this.slideRight();
      }
    } else {
      if(velocity > this.options.velThreshold) {
        this.slideRight();
      } else {
        this.slideLeft();
      }
    }
  }).bind(this));
}

///PageView///

function _createBody() {

  var surfaces = [];
  this.scrollview = new Scrollview();

  var temp;
  for (var i = 0; i < 20; i++) {
    temp = new Surface({
      size: [undefined, 80],
      content: 'I am surface: ' + (i + 1),
      properties: {
        textAlign: 'left',
        lineHeight: '80px',
        borderTop: '1px solid #f1f1f1',
        borderBottom: '1px solid #fff',
        backgroundColor: '#f9f9f9',
        fontFamily: 'Arial',
        backfaceVisibility: 'visible',
        paddingLeft: '10px'
      }
    });

    temp.pipe(this.scrollview);
    surfaces.push(temp);
  }

  this.scrollview.sequenceFrom(surfaces);

  this.bodyContent = new Surface({
    size: [undefined, undefined],
    properties: {
      backgroundColor: '#f5f5f5'
    }
  });


  //this.layout.content.add(this.bodyContent);
  this.layoutContainer.add(this.scrollview);
}

function _setListeners() {
  this.hamburgerSurface.on('click', function() {
    this._eventOutput.emit('menuToggle');
  }.bind(this));

  //this.bodyContent.pipe(this._eventOutput);
  this.scrollview.pipe(this._eventOutput);
}

Answer 1

I have figured out by myself if I put the pipe(this._eventOutPut) in the for each with the temp variable it works. I don't know if is the best solution so I will be happy if anyone can give a better exemplo.

for (var i = 0; i < 10; i++) {
  temp = new Surface({
    size: [undefined, 80],
    content: 'I am surface: ' + (i + 1),
    properties: {
      textAlign: 'left',
      lineHeight: '80px',
      borderTop: '1px solid #f1f1f1',
      backgroundColor: '#f9f9f9',
      fontFamily: 'Arial',
      backfaceVisibility: 'visible',
      paddingLeft: '10px'
    }
  });
/// Add the ._eventOutput to the temp
  temp.pipe(this._eventOutput);
  temp.pipe(scrollview);
  surfaces.push(temp);
}

Answer 2

You should indeed relay the events processed by the scrollview to your own sync. I have created a SwipeSync to make this easier: http://famousco.de/2014/08/swipesync-famo-us/

var scrollview = {your scrollview};
var sync = new SwipeSync();
scrollview.pipe(sync);
sync.on('swipe', function(data) {
        alert('Swiped to: ' + data.direction);
});