Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at Leaff.it/ I really love famo.us framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Categories
Meta
Famo.us Code | Surface.on(“tap”, ….) – A convenience hack
619
post-template-default,single,single-post,postid-619,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Surface.on(“tap”, ….) – A convenience hack

22 Jul Surface.on(“tap”, ….) – A convenience hack

FastClick was not working for me. Touchend is insufficient: If I scroll and my finger happens to be on a link, I don’t want to click the link. Enter the TapEvent hack. It hijacks the Surface.on function to emit a “tap” event when conditions are right.

Might not be be nicest way to extend Famo.us, but it sure is convenient. (Suggestions to do this cleaner are welcome!)

require('TapEvent') in the beginning of your project, then use surface.on("tap",function(event){}); to catch tap events.

// TapEvent
// 
// Adds a "tap" event to all surfaces. 
//
// Usage: 
//
// require("TapEvent")         // require TapEvent ONCE BEFORE calling surface.on!
// surface.on("tap", ... )
//
// When is the "tap" event fired?
//
//    Touchstart/mousedown + wait 200ms + no movement
//    Touchstart/mousedown + touchend/touchcancel/mouseup + within 200ms + no movement
//
//
// Mark Marijnissen, 2014, based on a fiddle found here: http://jsfiddle.net/gianlucaguarini/56Szw/
//
//
define(function(require, exports, module) {
    var Surface = require('famous/core/Surface');
    
    var getPointerEvent = function(event) {
            return event.targetTouches ? event.targetTouches[0] : event;
        },
    
        setListener = function(surface, events, callback) {
            var eventsArray = events.split(' '), i = eventsArray.length;
            while (i--) {
                surface.on(eventsArray[i], callback);
            }
        };
    
    function addTapEvent(surface) {
        var touching = false,
            canFire = false,
            currentX = 0,
            currentY = 0,
            startX = 0,
            startY = 0,
            tapEvent = null,
            fireTap = function(){
                if (canFire && !touching && (startX === currentX) && (startY === currentY)) {
                    surface.emit('tap',tapEvent);
                    console.log('TAP');
                }
                canFire = false;
            };
    
        //setting the events listeners
        setListener(surface, 'touchstart mousedown', function(e) {
            e.preventDefault();
            var pointer = getPointerEvent(e);
            startX = currentX = pointer.pageX;
            startY = currentY = pointer.pageY;
            touching = true;
            canFire = true;
            tapEvent = e;
    
            // detecting if after 200ms the finger is still in the same position
            setTimeout(fireTap, 200);
        });
    
        setListener(surface, 'touchend mouseup touchcancel', function(e) {
            e.preventDefault();
            touching = false;
            fireTap();
        });
    
        setListener(surface, 'touchmove mousemove', function(e) {
            e.preventDefault();
            var pointer = getPointerEvent(e);
            currentX = pointer.pageX;
            currentY = pointer.pageY;
        });
    }
    
    var _surfaceOn = Surface.prototype.on;
    Surface.prototype.on = function on(type,fn) {
        if(type == "tap" && !this.tapEnabled){
            addTapEvent(this);
            this.tapEnabled = true;
        }
        _surfaceOn.call(this,type,fn);
    };
});
  • Mark, you’re a genius – thank you so much! I’ve been struggling to get FastClick working, and it just doesn’t behave correctly. The project I’m working on felt unresponsive on iPads in particular, and this just made things much better.