Solution Online

Some notes on Famo.us

Note : These samples are written in CoffeeScript.

Listen to window resizing:

Engine.on 'resize', ->
  surface.setContent
    'dimensions:' + '<br>' +
    'width : ' + window.innerWidth  + 'px ' + '<br>' +
    'height: ' + window.innerHeight + 'px'

Listen on click event on the entire screen:

Engine.on 'click', (event) ->
  surface.setContent
    'click position:' + '<br>' +
    'x :' + event.clientX + 'px ' + '<br>' +
    'y :' + event.clientY + 'px'

Add an EventHandler on a Surface:

eventHandler = new EventHandler()
surface.pipe eventHandler
eventHandler.on 'click', -> alert 'Click from the event handler'

Create a Surface with its true size (the exact size of its content):

surface = new Surface
  size: [true, true]
  content: 'Hello World'
  classes: ['red-bg']


View is a widget container for Surface. They can be attached to the RenderTree and can handle events:

mainContext = Engine.createContext()
view = new View()
surface = new Surface
  size: [200, 200]
  content: 'Hello World'
  classes: ['red-bg']
  properties:
    lineHeight: '200px'
    textAlign: 'center'
surface.pipe view
view._eventInput.on 'click', -> alert 'Primary Surface Clicked'
view._add surface
mainContext.add view

Fill a ContainerSurface with a ScrollView containing 100 Surface:

container = new ContainerSurface
  size: [400, 400]
  properties:
    overflow: "hidden"
surfaces = []
scrollview = new Scrollview()
for idx in [0...100]
  temp = new Surface
    size: [undefined, 50]
    content: "I am surface: " + (idx + 1)
    classes: ["red-bg"]
    properties:
      textAlign: "center"
      lineHeight: "50px"
  temp.pipe scrollview
  surfaces.push temp
scrollview.sequenceFrom surfaces
container.add scrollview
mainContext
  .add new Modifier
    origin: [.5, .5]
  .add container