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

score 0 · Accepted Answer · answered Jun 03 '14 at 13:23

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

Piping to another "widget" will make the eventOutput to trigger the eventInput one of the "widget". To just forward the events of a sub element to it's parent you need to pipe to the eventOutput of that one. In that manner, the parent responding to the ".on" function will be able to catch them. Remember, the ".on" function on a "widget" is actually listening to it's eventOutput handler. see [my post here for more details](http://stackoverflow.com/questions/23787989/how-to-work-with-the-input-and-output-handers-in-famo-us) — Flavien Volken, Jun 12 '14 at 08:53

score 0 · Answer 2 · answered Aug 29 '14 at 12:40

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

Famo.us swipe on scrollview

2 Answers2

Linked