Famo.us

by Luke

HTML

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

JavaScript

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

    var StateModifier = require('famous/modifiers/StateModifier');
	var Transform = require('famous/core/Transform');
	// http://famo.us/docs/

	var mainContext = Engine.createContext();

//////////////////////////////////////
// Outermost view
var ilanView = new View();

var positionModifier = new StateModifier({
  origin: [0.5, 0.5],
  align: [0.5, 0.5]
});

mainContext.add(positionModifier).add(ilanView);

//////////////////////////////////////
// creating a reference node in the view with size
var sizeModifier = new StateModifier({
  size: [undefined, 150]
});

var ilanViewNode = ilanView.add(sizeModifier);

// creating a background surface in the view
var ilanViewBackground = new Surface({
  properties: {
    backgroundColor: 'gray',
  }
});

var zModifier = new StateModifier({
  // positions the background behind the tab surface
  transform: Transform.behind
});

// adding to reference node to get parent size
ilanViewNode.add(zModifier).add(ilanViewBackground);

//////////////////////////////////////
//Sub-Surface
var ss1 = new Surface({
  content: 'photo',
	properties: {
    fontSize: '1.5em',
    lineHeight: '50px',
    textAlign: 'center',
    backgroundColor: '#fa5c4f',
  }
});

var ss1OriginModifier = new StateModifier({
  origin: [0, 0],
  align: [0, 0],
  proportions: [0.1, 0.3]
});

var b1 = ilanViewNode.add(ss1OriginModifier);
b1.add(ss1);

//////////////////////////////////////
//Sub-Surface
var ss2 = new Surface({
  content: 'Feedback',
	properties: {
    fontSize: '1.5em',
    lineHeight: '50px',
    textAlign: 'center',
    backgroundColor: '#fa5',
  }
});
var ss2OriginModifier = new StateModifier({
  origin: [0, 0.5],
  align: [0.3, 0.5],
  proportions: [0.3, 1]
});
var b2 =...