based on view

UserPanel.js

/* globals define */
define(function (require, exports, module) {
    'use strict';

    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var TTransform = require('famous/transitions/TransitionableTransform');
    var Easing = require('famous/transitions/Easing');
    var RenderNode = require('famous/core/RenderNode');

    var windowWatcher = require('./../windowWatcher');
    var FlexibleLayout = require('famous/views/FlexibleLayout');

    function UserPanel(main) {
        this.main = main;
        View.call(this, {size: [true, undefined]});

        this.TwitterSurface = new Surface({content: '<section class="inner"><h2>Twitter</h2></section>', classes: ['option-panel']});
        this.FacebookSurface = new Surface({content: '<section class="inner"><h2>Facebook</h2></section>', classes: ['option-panel']});
        this.EYFSurface = new Surface({content: '<section class="inner"><h2>Eat Your Friends</h2></section>', classes: ['option-panel']});


        this.twitterMod = new Modifier();
        this.add(this.twitterMod).add(this.TwitterSurface);

        windowWatcher.onResize(this.sizePanels.bind(this));

        this.on('deploy', function(size){
            console.log("deploying");
            this.sizePanels(size);
        }.bind(this));
        this.on('commit', function(size){
            console.log("committing");
            this.sizePanels(size);
        }.bind(this));
    }

    UserPanel.prototype = Object.create(View.prototype);

    UserPanel.prototype.sizePanels = function () {
        console.log('resizing twitter: ', this.TwitterSurface._currTarget);
        console.log('(this)', this._currTarget);
        var ct = this._currTarget;
        if (this.TwitterSurface._currTarget) {
            var height = this.TwitterSurface._currTarget.clientHeight;
            height -= 20;
            var inner = this.TwitterSurface._currTarget.querySelector('.inner');
            inner.style.height = height + 'px';

        }
    };

    module.exports = UserPanel;

});