How to implement swipe action in ScrollView Famous

Question

I'm trying to implement the typical swipe left event to trigger some custom action using a scrollview in famo.us. The thing is that I missing something and I can't get it done. I manage to implement a Draggable modifier in each scrollview item, so the items can be dragged (X axis), but now I can't be able to capture the event of the draggable modifier in order to trigger the actions.

Here is my ListView class:

define(function(require, exports, module) {
    // Imports
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Utility = require('famous/utilities/Utility');
    var ScrollView = require('famous/views/ScrollView');
    var ViewSequence = require('famous/core/ViewSequence');
    var Draggable = require('famous/modifiers/Draggable');
    var RenderNode = require('famous/core/RenderNode');
    var EventHandler = require('famous/core/EventHandler');

    function ListView() {
        View.apply(this, arguments);
        this.items = [];

        this.scrollView = new ScrollView({
            direction: Utility.Direction.Y,
            margin: 100000
        });

        this.viewSequence = new ViewSequence(this.items);
        this.scrollView.sequenceFrom(this.viewSequence);

        this._add(this.scrollView);
    };

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

    ListView.prototype.setContent = function(data) {
        for (var i = 0; i < data.length; i++) {
            var item = new Surface({
                size: [undefined, 60],
                content: 'Item ' + data[i],
                classes: ['listview-item']
            });

            var draggable = new Draggable({
                xRange: [-100, 100],
                yRange: [0, 0]
            });

            var node = new RenderNode(draggable);
            node.add(item);  

            draggable.on('click', function() {
                console.log('emit swipe')
                this._eventOutput.emit('swipe');
            }.bind(this)); // This Doesn't work

            item.on('click', function() {
                console.log('emit swipe')
                this._eventOutput.emit('swipe');
            }.bind(this)); // Neither this

            item.pipe(draggable); 
            item.pipe(this.scrollView);
            this.items.push(node);
        }
    };


    module.exports = ListView;
});

Now App Class where I include my ListView:

define(function(require, exports, module) {

    ...

    // Custom Views
    var ListView = require('views/ListView');


    function App() {
        View.apply(this, arguments);

        this.layout = new HeaderFooterLayout({
            headerSize: 70,
        });

        ...

        this.list = new ListView();
        this.list.pipe(this._eventInput);
        this._eventInput.on('swipe', this.swipeListItem.bind(this)) // Trying to captute swipe event

        this.list.setContent([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]);

        this.layout.content.add(this.list);

       ....

       this._add(this.layout);
    };

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

    App.DEFAULT_OPTIONS = {};


    App.prototype.swipeListItem = function() {
        console.log('Item Swiped!');
    };

    module.exports = App;
});

I don't know what I missing or if there is a better way to implement a swipe gesture in famo.us, if someone knows something about it would be helpful.

Thanks in advance. =)

Answer 1

It looks like you want to use the 'start' event for the draggable modifier..

draggable.on('start', function() {
    console.log('emit drag start')
    this._eventOutput.emit('swipe');
}.bind(this));

Draggable also emits 'update', and 'end' and each of these handlers take a parameter that returns the position of the draggable

draggable.on('update', function(e) {
    // Do something on update
    var pos = e.position;

});

draggable.on('end', function(e) {
    // Do something on end
    var pos = e.position;
});

Hope this helps!