famo.us u positioning lesson part 4 refactored

main.js

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');

var mainContext = Engine.createContext();

// for Option 1
var translateModifierOne = new StateModifier({
  transform: Transform.translate(200, 0, 0)
});

var translateModifierTwo = new StateModifier({
  transform: Transform.translate(200, 0, 0)
});

// for Options 2 & 3
function makeShiftRight() {
  return new StateModifier({
    transform: Transform.translate(200,0,0)
  });
}

// for Option 2
var tm1 = makeShiftRight();
var tm2 = makeShiftRight();

var rotateModifierOne = new StateModifier({
  transform: Transform.rotateZ(Math.PI/4)
});

var rotateModifierTwo = new StateModifier({
  transform: Transform.rotateZ(Math.PI/4)
});

// for Option 4
function makeRotate() {
  return new StateModifier({
    transform: Transform.rotateZ(Math.PI/4)
  });
}



var redSurface = new Surface({
  size: [100, 100],
  classes: ['red-bg'],
  properties: {
    zIndex:5
  }
});

var greySurface = new Surface({
  size: [100, 100],
  classes: ['grey-bg']
});

// Option 1
/*
mainContext
  .add(translateModifierOne)
  .add(rotateModifierOne)
  .add(redSurface);

mainContext
  .add(rotateModifierTwo)
  .add(translateModifierTwo)
  .add(greySurface);
*/
// Option 2
/*
mainContext
  .add(tm1)
  .add(rotateModifierOne)
  .add(redSurface);

mainContext
  .add(rotateModifierTwo)
  .add(tm2)
  .add(greySurface);
*/

/*
// Option 3
mainContext
  .add(makeShiftRight())
  .add(rotateModifierOne)
  .add(redSurface);

mainContext
  .add(rotateModifierTwo)
  .add(makeShiftRight())
  .add(greySurface);
*/  
// Option 4
mainContext
  .add(makeShiftRight())
  .add(makeRotate())
  .add(redSurface);

mainContext
  .add(makeRotate())
  .add(makeShiftRight())
  .add(greySurface);