Famo.us IframeSurface

Question

I tried implementing an iframe within a surface.

/* globals define */
define(function(require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var content = 'abc';
var logo = new Surface({
    size: [undefined, undefined],
    content: '<iframe width=1024 height=768 src="http://www.bbc.com"></iframe>'
});
var centerModifier = new Modifier({
  origin: [0, 0]
});
centerModifier.setTransform(Transform.scale(.5,.5,0));
mainContext.add(centerModifier).add(logo);
});

The scroll seems to freez up if i scale it. Anyone had used iframe surface with Famou.us. Its not included in the library yet.

Answer 1

It looks like you are scaling the z infinitesimally small with..

centerModifier.setTransform(Transform.scale(.5,.5,0));

It should be changed to..

centerModifier.setTransform(Transform.scale(.5,.5,1));

Good Luck!

Answer 2

You can easily create new elements:

define(function(require, exports, module) {

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

    function IFrameSurface(options) {
        this._url = undefined;
        Surface.apply(this, arguments);
    }

    IFrameSurface.prototype = Object.create(Surface.prototype);
    IFrameSurface.prototype.constructor = IFrameSurface;
    IFrameSurface.prototype.elementType = 'iframe';
    IFrameSurface.prototype.elementClass = 'famous-surface';

    IFrameSurface.prototype.setContent = function setContent(url) {
        this._url = url;
        this._contentDirty = true;
    };

    IFrameSurface.prototype.deploy = function deploy(target) {
        target.src = this._url || '';
    };

    IFrameSurface.prototype.recall = function recall(target) {
        target.src = '';
    };

    module.exports = IFrameSurface;
});

Usage:

new IFrameSurface({content: 'url here'})

Answer 3

The z-transform as mentioned is an issue. Just for the record iframes work fine in famo.us. I'm using multiple animating iframes without issue. Almost any HTML can go in a surface so there's no need for a specialist iframe surface really.