Solves the famo.us size: [true, true] headache for now

TrueSizedSurface

define(function(require, exports, module) {

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

	function ExtendedSurface(){
		Surface.apply(this, arguments);
		this._superDeploy = Surface.prototype.deploy;
	}

	ExtendedSurface.prototype = Object.create(Surface.prototype);
	ExtendedSurface.prototype.constructor = ExtendedSurface;
	ExtendedSurface.prototype.deploy = function deploy(target) {
		this._superDeploy(target);
		var size = this.getSize();
		size[0] = size[0] === true ? target.offsetWidth : size[0];
		size[1] = size[1] === true ? target.offsetHeight  : size[1];
	}

	module.exports = ExtendedSurface;
});

based on johntravers idea at http://stackoverflow.com/questions/23342360/is-there-no-text-vertical-align-property-in-famo-us/23344383#23344383

so cudos to him :)

I'm using

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

function SmartSurface(options) {
    Surface.apply(this, arguments);
    this._superDeploy = Surface.prototype.deploy;
}

SmartSurface.prototype = Object.create(Surface.prototype);
SmartSurface.prototype.constructor = SmartSurface;

SmartSurface.prototype.deploy = function deploy(target) {
    this._superDeploy(target);
    var size = this.getSize();
    var width = size[0] === true ? target.offsetWidth : size[0];
    var height = size[1] === true ? target.offsetHeight : size[1];
    this.state.setSize([width, height]);
};

module.exports = SmartSurface;
});

ahaha

define(function(require, exports, module) {
    'use strict'

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

    function AutoSizedSurface() {
        Surface.apply(this, arguments)
        this.on('deploy', this._onDeploy.bind(this))
    }

    AutoSizedSurface.prototype = Object.create(Surface.prototype)
    AutoSizedSurface.prototype.constructor = AutoSizedSurface
    module.exports = AutoSizedSurface

    AutoSizedSurface.prototype._onDeploy = function() {
        Engine.nextTick(this._detectSize.bind(this))
    }

    AutoSizedSurface.prototype._detectSize = function() {
        var size = this.getSize()
        var width = size[0] === true ? this._currTarget.offsetWidth : size[0]
        var height = size[1] === true ? this._currTarget.offsetHeight : size[1]
        this.setSize([width, height])
    }
})

Found out that we don't need all this.

The timeout may vary depending on content. F.e. waiting until browser applies styles or until images within content are loaded and their sizes are detected by browser. The last one can take longer and should be avoided.

surface.on('deploy', function() {
    setTimeout(function(){
        surface.setSize(surface.getSize(true))
    }, 50)
})