Capturing a link click in a Famo.us surface

Capturing a link click in a Famo.us surface instead of allowing it to propogate while still firing the surface click

by Tony Alves

HTML

<script src="http://famousco.de/fiddle/famousBox.js"></script>

CSS

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

JavaScript

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

    var Surface = require('famous/core/Surface');
    var Utility = require('famous/utilities/Utility');

    var mainContext = Engine.createContext();

    this.backSurface = new Surface({
        size: [undefined, undefined],
        content: ''
    });

    this.mySurface = new Surface({
        size: [true, true],
        content: '<a target="_blank" href="http://famo.us">This is a link</a>',
        properties: {
            backgroundColor: 'grey',
            fontColor: 'white'
        }
    });

    this.mySurface.clickNullifier = function (e) {
        if (e.target && e.target.nodeName == 'A' && e.target.href) {
            console.log('href', e.target.href);
            this.mySurface.emit('href-clicked', {
                data: {
                    href: e.target.href
                }
            })
        }
        e.preventDefault();
        return false;
    }.bind(this);

    this.mySurface.on('deploy', function () {
        console.log('onload',this);
        // sets up the click function on the surface DOM object
        this._currentTarget.onclick = this.clickNullifier;
    });

    this.mySurface.on('click', function (event) {
        // event from the surface itself
        console.log('mySurface Event Target',event.target);
    });
    
    this.mySurface.on('href-clicked', function (event) {
        console.log(event.data);
        // handle your code for the iframe
        // not always doable in the case of 'X-Frame-Options' to 'SAMEORIGIN'
        loadIframe.call(this, event.data.href);
        // or loadURL like here. Note this needs CORS open on the href server
        //Utility.loadURL(event.data.href, loadLink.bind(this));

        // or choose to load just the href link somewhere
        //this.backSurface.setContent(event.data.href);
    }.bind(this));

    function loadIframe(content) {
       ...