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 | Autosizing Surface / Tabs
252
post-template-default,single,single-post,postid-252,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Autosizing Surface / Tabs

27 Jun Autosizing Surface / Tabs

You can now use a sequential layout with this extended surfaces set to size: [true, true] and the layout will respect the content size of the surfaces.

Thanks to thekemkid, blaxxberlin and johntrav

original gist

Example by thekemkid (with underscore.js)

Component Only

define(function (require, exports, module) {
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var StateModifier = require('famous/modifiers/StateModifier');
    var FlexibleLayout = require('famous/views/FlexibleLayout');
    var RenderNode = require('famous/core/RenderNode');

    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;
});