Simple Famous Widget

A simple famous Widget using a Render Node and keeping track of a changing size.

by orchid1

HTML

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

JavaScript

/* globals define */
define('main', function (require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var SimpleWidget = require('SimpleWidget');

    // create the main context
    var mainContext = Engine.createContext();

    var widget = new SimpleWidget({
        percentSize: 90
    });

    var appMod = new Modifier({
        origin: [0.5, 0.5]
    });
    mainContext.add(appMod).add(widget);

});
define('SimpleWidget', function (require, exports, module) {
    var Entity = require('famous/core/Entity');
    var OptionsManager = require('famous/core/OptionsManager');
    var RenderNode = require('famous/core/RenderNode');
    var Surface = require('famous/core/Surface');

    function _setupSimpleWidget() {
        this.surface = new Surface({
            size: this._widgetSize,
            origin: [0, 0],
            content: this.message,
            properties: {
                backgroundColor: 'rgba(0, 0, 0, 0.25)',
                color: 'white',
                fontSize: '50px',
                lineHeight: '100px'
            }
        });

        this._node.add(this.surface);
    }

    function _updateSimpleWidget() {
        var fontSized = Math.round(this._widgetSize[1] * 0.1);
        this.message = 'parent size: ' + this._contextSizeCache;
        this.message += '<br/>widget size: ' + this._widgetSize;
        this.surface.setOptions({
            size: this._widgetSize,
            properties: {
                backgroundColor: 'rgba(0, 0, 0, 0.25)',
                color: 'white',
                fontSize: fontSized + 'px',
                lineHeight: fontSized * 2 + 'px'
            }
        });
        this.surface.setContent(this.message);
        //console.log(this._contextSizeCache);
    }

    /*
     * @name SimpleWidget
     * @constructor
     * @description Shows the size of the contextual parent of the...